Advertisement
Guest User

Untitled

a guest
Jan 24th, 2017
92
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.86 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>responsiv övning</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <link href="layout.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <body>
  9. <div class="row">
  10. <div class="col-12" style="background: #0F0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  11. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  12. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  13. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  14. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  15. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  16. <div class="row">
  17. <div class="col-2" style="background: #FF0000">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  18. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  19. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  20. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  21. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  22. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  23. <div class="col-10" style="background: #0000FF">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  24. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  25. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  26. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  27. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  28. proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  29. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  30. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  31. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  32. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  33. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  34. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  35. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  36. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  37. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  38. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  39. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  40. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  41. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  42. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  43. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  44. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  45. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  46. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  47. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  48. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.lorem</div>
  49. </div>
  50. <div class="row">
  51. <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  52. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  53. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  54. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  55. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  56. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  57. <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  58. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  59. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  60. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  61. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  62. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  63. <div class="col-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  64. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  65. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  66. consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  67. cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  68. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  69.  
  70.  
  71. </div>
  72. </body>
  73. </html>
  74.  
  75.  
  76. * {
  77. box-sizing: border-box;
  78. }
  79. .col-1 {width: 8.33%;}
  80. .col-2 {width: 16.66%;}
  81. .col-3 {width: 25%;}
  82. .col-4 {width: 33.33%;
  83. border:3px solid #0033cc;
  84. }
  85. .col-5 {width: 41.66%;}
  86. .col-6 {width: 50%;}
  87. .col-7 {width: 58.33%;}
  88. .col-8 {width: 66.66%;}
  89. .col-9 {width: 75%;}
  90. .col-10 {width: 83.33%;}
  91. .col-11 {width: 91.66%;}
  92. .col-12 {width: 100%;
  93. border:3px solid #0033cc;
  94. }
  95. [class*="col-"] {
  96. float: left;
  97. padding: 15px;
  98. }
  99.  
  100. .dark-blue {
  101. background-color: #006;
  102. -moz-box-shadow: inset 0 0 10px #000;
  103. -webkit-box-shadow: inset 0 0 10px #000;
  104. box-shadow: inset 0 0 10px #000;
  105. }
  106. .light-blue {
  107. background-color: #55F;
  108. -moz-box-shadow: inset 0 0 10px #000;
  109. -webkit-box-shadow: inset 0 0 10px #000;
  110. box-shadow: inset 0 0 10px #006;
  111. }
  112. .row::after {
  113. content: "";
  114. clear: both;
  115. display: table;
  116. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement