API tools faq
paste
Advertisement
Guest User

zadnji susret zadatak HTMLCSS

a guest
Feb 25th, 2020
166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.17 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Ispit 26.12.2019.</title>
  5. <link rel="stylesheet" href="..\css\style.css">
  6. <script src="https://use.fontawesome.com/31b887b242.js"></script>
  7. <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  8. </head>
  9.  
  10. <body>
  11. <div id="Main">
  12. <div id="Header">
  13. <img src="..\img\logo.png" id="logo">
  14. <ul>
  15. <li>HOME</li>
  16. <li>ABOUT US</li>
  17. <li>PRODUCTS</li>
  18. <li>CONTACT</li>
  19. </ul>
  20.  
  21. </div>
  22. <div id="Content">
  23. <h1>New In</h1>
  24. <p>Check out our latest products</p>
  25. <div id="Blanket">
  26. <div id="bImage1">
  27. </div>
  28. <div id="txt1">
  29. <p>Blanket Linea</p>
  30. <h2>14,50</h2>
  31. <button class="btnReadMore">Read More <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
  32. </div>
  33. </div>
  34. <div id="CushionLotus">
  35. <div id="bImage2">
  36. </div>
  37. <div id="txt2">
  38. <p>Cushion Lotus</p>
  39. <h2>11,00</h2>
  40. <button class="btnReadMore">Read More <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
  41. </div>
  42. </div>
  43. <div id="Bowl">
  44. <div id="bImage3">
  45. </div>
  46. <div id="txt3">
  47. <p>Bowl Bamboo</p>
  48. <h2>4,50</h2>
  49. <button class="btnReadMore">Read More <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
  50. </div>
  51. </div>
  52. </div>
  53. <div id="Bottom">
  54. <h4>Subscribe</h1><br>
  55. <h5>Subscribe to our newsletters</h2><br><br>
  56. <input id="mail" type="text" name="email" placeholder="Enter your e-mail">
  57. <button id="submit">Submit</button><br><br>
  58. <h5>Copyrights d.o.o JYSK</h5>
  59. </div>
  60. </div>
  61. </body>
  62. </html>
  63.  
  64. ------------CSS ----------
  65.  
  66. /*
  67. Boje koje će vam biti potrebne za rad
  68. tamnoplava: #04388F
  69. svjetlija nijansa plave: #174EAC
  70. svjetlosiva, boja pozadine: #F3F3F3
  71. svjetlosiva, boja texta unutar jedne kartice: #EAEAEA
  72. */
  73.  
  74.  
  75. *{
  76. box-sizing: border-box;
  77. margin: 0;
  78. padding: 0;
  79. font-family: 'Roboto', serif;
  80. }
  81.  
  82. #Main{
  83. width: 100%;
  84. height: 1000px;
  85. background-color: #F3F3F3;
  86.  
  87. }
  88. #Header{
  89. width: 100%;
  90. height:100px;
  91. background-color: white;
  92. }
  93. #logo {
  94. height:90px;
  95. padding:10px;
  96. }
  97. ul{
  98. float: right;
  99. padding:40px;
  100. }
  101. li{
  102. display: inline;
  103. }
  104. #Content h1{
  105. text-align: center;
  106. }
  107. #Content p{
  108. text-align: center;
  109. }
  110. #Content {
  111. height: 700px;
  112. width: 100%;
  113. padding:150px;
  114. }
  115. #Blanket
  116. {
  117. width:calc(33.3% - 30px);
  118. height: 350px;
  119. background-color: #EAEAEA;
  120. float:left;
  121. margin:10px;
  122. }
  123. #bImage1{
  124. background-image:url('../img/img1.jpg');
  125. height:50%;
  126. background-size: cover;
  127. }
  128. #txt1
  129. {
  130. padding:15px;
  131. }
  132. #txt1 p{
  133. text-align: left;
  134. }
  135. #txt2 p{
  136. text-align: left;
  137. }
  138. #txt3 p{
  139. text-align: left;
  140. }
  141. #CushionLotus
  142. {
  143. width:calc(33.3% - 30px);
  144. height: 350px;
  145. background-color: #EAEAEA;
  146. float:left;
  147. margin:10px;
  148.  
  149. }
  150. #bImage2{
  151. background-image:url('../img/img2.jpg');
  152. height:50%;
  153. background-size: cover;
  154. }
  155. #txt2
  156. {
  157. padding:15px;
  158. }
  159. #Bowl
  160. {
  161. width:calc(33.3% - 30px);
  162. height: 350px;
  163. background-color: #EAEAEA;
  164. float:left;
  165. margin:10px;
  166.  
  167. }
  168. #bImage3{
  169. background-image:url('../img/img3.jpg');
  170. height:50%;
  171. background-size: cover;
  172. }
  173. #txt3
  174. {
  175. padding:15px;
  176. }
  177. #Bottom
  178. {
  179. width: 100%;
  180. height: 200px;
  181. background-color:#04388F;
  182. text-align: center;
  183. padding-top: 20px;
  184. }
  185. #Bottom #mail{
  186. width: 350px;
  187. height:50px;
  188. border-radius: 30px;
  189. padding-left: 20px;
  190. background-color: #174EAC;
  191. color:white;
  192.  
  193.  
  194. }
  195. #Bottom #submit
  196. {
  197. background-color: white;
  198. color:blue;
  199. width: 150px;
  200. height: 50px;
  201. border-radius: 30px;
  202.  
  203. }
  204. .btnReadMore{
  205. border: 3px solid blue;
  206. background-color: white;
  207. color:blue;
  208. width:100%;
  209. height:35px;
  210. }
  211. #Bottom h4{
  212. color:white;
  213. }
  214. #Bottom h5{
  215. color:white;
  216. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!