API tools faq
paste
Guest User

Untitled

a guest
Aug 20th, 2018
70
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="sv">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Uppgift 4E</title>
  6. <link rel="stylesheet" href="kap-4-e.css" />
  7. <style> /*ändra font till Arial*/
  8. body{font-family: Arial
  9. }
  10. </style>
  11. <style id="jsbin-css">
  12. html {
  13. background-color: grey; /*ändrar från lightslategrey till grey background*/
  14. }
  15. body {
  16. margin: auto;
  17. background-color: white; /*la till margin background-color till vit*/
  18. width: 495px; /*osäker på hur jag ska få de att vara automatiskt? Fick chansa mig till att de ska se ut som uppgiften*/
  19. padding-bottom: 0.1px; /*knep för div margin */
  20. }
  21. h1 {
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <h1 style="text-align: center; color:purple" /* Ändrade så att texten centrera sig själv samt ändra färgen till Lila */ >Uppgift 4E</h1>
  27.  
  28.  
  29.  
  30. <div id="billy">
  31. <style>
  32. div{
  33. /* Gör en border som är lila men en lätt böjning i kanterna samt att bakgrund är vit för dessa element
  34. Detta gäller då för både Div billy och bob. Det känns som att de skulle finnas ett enklare sätt att kombinera allting med mindre kodning använd dock
  35. + jag vet inte riktigt hur man lägger till kommentarer på olika stället utan att ställa till det, så la in dom där de inte förstörde något i koden */
  36. width: 450px;
  37. border-radius: 5px;
  38. border: 2px solid purple;
  39. padding: 10px;
  40. margin: 10px;
  41. background-color: white;
  42. }
  43.  
  44. </style>
  45. <p style="color:brown" /* La till färgen brun för varje billy text */>
  46. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  47. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  48. </p>
  49. <p class="two" style="color:brown; font-size:120%" /* Ökade font-size till 120% från normal font-size och testa fram och tillbaka till det stämde */>
  50. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  51. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  52. </p>
  53. <p class="three" style="color:brown; font-size:85%" /* Sänkte font-size till 85% från normal font-size och testa fram och tillbaka till det stämde */ >
  54. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  55. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  56. </p>
  57. <p style="color:brown; font-weight:bold" /* Ändrade font-weight till bold */>
  58. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  59. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  60. </p>
  61. </div>
  62.  
  63. <div id="bob">
  64. <p style="color:green" /* La till färgen grön för varje bob text la även till line-through text-decoration på href "länken" */>
  65. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  66. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:line-through">porttitor</a>.
  67. </p>
  68. <p class="two" style="color:green; font-size:120%" /* Ökade font-size till 120% från normal font-size och testa fram och tillbaka till det stämde la även till overline and underline text-decoration på href "länken" */>
  69. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  70. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:underline overline; ">porttitor</a>.
  71. </p>
  72. <p class="three" style="color:green; font-size:85%;" /* Sänkte font-size till 85% från normal font-size och testa fram och tillbaka till det stämde la även till line-through text-decoration på href "länken" */>
  73. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  74. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:line-through;">porttitor</a>.
  75. </p>
  76. <p style="color:green; font-weight:bold" /* Ändrade font-weight till bold la även till line-through text-decoration på href "länken" */>
  77. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  78. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:line-through;" >porttitor</a>.
  79. </p>
  80. </div>
  81.  
  82. <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
  83. <html lang="sv">
  84. <head>
  85. <meta charset="utf-8" />
  86. <title>Uppgift 4E</title>
  87. <link rel="stylesheet" href="kap-4-e.css" />
  88. <style> /*ändra font till Arial*/
  89. body{font-family: Arial
  90. }
  91. </style>
  92. </head>
  93. <body>
  94. <h1 style="text-align: center; color:purple" /* Ändrade så att texten centrera sig själv samt ändra färgen till Lila */ >Uppgift 4E</h1>
  95.  
  96.  
  97.  
  98. <div id="billy">
  99. <style>
  100. div{
  101. /* Gör en border som är lila men en lätt böjning i kanterna samt att bakgrund är vit för dessa element
  102. Detta gäller då för både Div billy och bob. Det känns som att de skulle finnas ett enklare sätt att kombinera allting med mindre kodning använd dock
  103. + jag vet inte riktigt hur man lägger till kommentarer på olika stället utan att ställa till det, så la in dom där de inte förstörde något i koden */
  104. width: 450px;
  105. border-radius: 5px;
  106. border: 2px solid purple;
  107. padding: 10px;
  108. margin: 10px;
  109. background-color: white;
  110. }
  111.  
  112. </style>
  113. <p style="color:brown" /* La till färgen brun för varje billy text */>
  114. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  115. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  116. </p>
  117. <p class="two" style="color:brown; font-size:120%" /* Ökade font-size till 120% från normal font-size och testa fram och tillbaka till det stämde */>
  118. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  119. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  120. </p>
  121. <p class="three" style="color:brown; font-size:85%" /* Sänkte font-size till 85% från normal font-size och testa fram och tillbaka till det stämde */ >
  122. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  123. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  124. </p>
  125. <p style="color:brown; font-weight:bold" /* Ändrade font-weight till bold */>
  126. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  127. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
  128. </p>
  129. </div>
  130.  
  131. <div id="bob">
  132. <p style="color:green" /* La till färgen grön för varje bob text la även till line-through text-decoration på href "länken" */>
  133. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  134. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:line-through">porttitor</a>.
  135. </p>
  136. <p class="two" style="color:green; font-size:120%" /* Ökade font-size till 120% från normal font-size och testa fram och tillbaka till det stämde la även till overline and underline text-decoration på href "länken" */>
  137. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  138. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:underline overline; ">porttitor</a>.
  139. </p>
  140. <p class="three" style="color:green; font-size:85%;" /* Sänkte font-size till 85% från normal font-size och testa fram och tillbaka till det stämde la även till line-through text-decoration på href "länken" */>
  141. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  142. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:line-through;">porttitor</a>.
  143. </p>
  144. <p style="color:green; font-weight:bold" /* Ändrade font-weight till bold la även till line-through text-decoration på href "länken" */>
  145. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  146. Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="" style="text-decoration:line-through;" >porttitor</a>.
  147. </p>
  148. </div>
  149. </body>
  150. </html>
  151.  
  152. </script>
  153.  
  154. <script id="jsbin-source-css" type="text/css">html {
  155. background-color: grey; /*ändrar från lightslategrey till grey background*/
  156. }
  157. body {
  158. margin: auto;
  159. background-color: white; /*la till margin background-color till vit*/
  160. width: 495px; /*osäker på hur jag ska få de att vara automatiskt? Fick chansa mig till att de ska se ut som uppgiften*/
  161. padding-bottom: 0.1px; /*knep för div margin */
  162. }
  163. h1 {
  164. }
  165. </script>
  166. </body>
  167. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!