fiansyahmm

Untitled

Dec 1st, 2021
24
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.28 KB | None | 0 0
  1. <!-- Tentang -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  5. <head>
  6. <meta charset="UTF-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <style>
  10. img {
  11. cursor: url("https://static.cargo.site/images/up.png"), auto !important;
  12. }
  13.  
  14. header,
  15. section,
  16. footer,
  17. aside,
  18. nav,
  19. article,
  20. figure,
  21. figcaption {
  22. display: block;
  23. }
  24.  
  25. body {
  26. color: #666666;
  27. background-color: #f9f8f;
  28. background-image: url(https://img.freepik.com/free-photo/wooden-background_24972-623.jpg?size=626&ext=jpg);
  29. background-position: center;
  30. font-family: georgia, times, serif;
  31. line-height: 1.4em;
  32. margin: 0px;
  33. }
  34.  
  35. .wrapper {
  36. width: 940px;
  37. margin: 20px auto 20px auto;
  38. border: 2px solid #000000;
  39. background-color: #fff;
  40. }
  41.  
  42. header {
  43. height: 160px;
  44. background-image: url(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/header.png);
  45. }
  46.  
  47. h1 {
  48. text-indent: -9999px;
  49. width: 940px;
  50. height: 130px;
  51. margin: 0px;
  52. }
  53.  
  54. nav,
  55. footer {
  56. clear: both;
  57. color: #FFFFFF;
  58. background-color: #aeaca8;
  59. height: 30px;
  60. }
  61.  
  62. nav ul {
  63. margin: 0px;
  64. padding: 5px 0px 5px 30px;
  65. }
  66.  
  67. nav li {
  68. display: inline;
  69. margin-right: 40px;
  70. }
  71.  
  72. nav li a {
  73. color: #FFFFFF;
  74. }
  75.  
  76. na li a:hover,
  77. nav li a.current {
  78. color: #000000;
  79. }
  80.  
  81. section.courses {
  82. float: left;
  83. width: 659px;
  84. border-right: 1px solid #eeeeee;
  85. }
  86.  
  87. article {
  88. clear: both;
  89. overflow: auto;
  90. width: 100%;
  91. }
  92.  
  93. hgroup {
  94. margin: top 40px;
  95. }
  96.  
  97. figure {
  98. float: left;
  99. width: 290px;
  100. height: 220px;
  101. padding: 5px;
  102. margin: 20px;
  103. border: 1px solid #eeeeee;
  104. }
  105.  
  106. figcaption {
  107. font-size: 90%;
  108. text-align: left;
  109. }
  110.  
  111. aside {
  112. width: 20px;
  113. float: left;
  114. padding: 0px 0px 0px 20px;
  115. }
  116.  
  117. aside section a {
  118. display: block;
  119. padding: 10px;
  120. border-bottom: 1px solid #eeeeee;
  121. }
  122.  
  123. aside sexrion a:hover {
  124. background-color: #efefef;
  125. }
  126.  
  127. a {
  128. color: #de6581;
  129. text-decoration: none;
  130. }
  131.  
  132. h1,
  133. h2,
  134. h3 {
  135. font-weight: normal;
  136. }
  137.  
  138. h2 {
  139. margin: 10px 0pc 5px 0px;
  140. padding: 0px;
  141. }
  142.  
  143. h3 {
  144. margin: 0px 0px 10px 0px;
  145. color: #de6581;
  146. }
  147.  
  148. aside h2 {
  149. padding: 30px 0px 10px 0px;
  150. color: #de6581;
  151. }
  152.  
  153. footer {
  154. font: size 80%;
  155. padding: 7px 0px 0px 20px;
  156. }
  157.  
  158. .row {
  159. display: flex;
  160. }
  161.  
  162. .column {
  163. flex: 50%;
  164. }
  165.  
  166. .container {
  167. width: 100%;
  168. height: auto;
  169. margin-right: auto;
  170. margin-left: auto;
  171. }
  172. </style>
  173. <title>Web Warung Tegal</title>
  174. </head>
  175.  
  176. <body>
  177. <!-- wrapper -->
  178. <div class="wrapper">
  179. <header>
  180. <h1>Warrung Tegal</h1>
  181. <nav>
  182. <ul>
  183. <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-1.html" class="current">Beranda</a></li>
  184. <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-2.html">Daftar Makanan</a></li>
  185. <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-3.html">Review</a></li>
  186. <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-4.html">Tentang</a></li>
  187. <li><a href="https://fiansyahm.github.io/pweb.github.io/pweb-3-5.html">Kontak</a></li>
  188. </ul>
  189. </nav>
  190. </header>
  191. <section class="courses" align="center">
  192. <div class="container">
  193. <div class="row">
  194. <div class="col">
  195. <h2 style="margin-left: 200px;">Warung Tegal Indonesia</h2>
  196. </div>
  197. </div>
  198. <div class="row">
  199. <div class="col">
  200. <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTE3dF1bVlcElMU5MX4qvM2PsodRXLfRLoz4Q&usqp=CAU" alt="">
  201. <p>Warung tegal ini sudah berdiri sejak tahun 1986, dikenal sebagai warung yang menggugah selera pecinta kuliner warung tegal</p>
  202. </div>
  203. </div>
  204. </div>
  205. </section>
  206. <aside>
  207. <section class="popular-recipes">
  208. <h2>Masakan popular</h2>
  209. <a href="">Sayur Sop</a>
  210. <a href="">Sayur Asem</a>
  211. <a href="">Sayur Lodeh</a>
  212. <a href="">Sayur Bayam</a>
  213. </section>
  214. <section class="contact-details">
  215. <h2>Kontak</h2>
  216. <p>Warung Tegal</br>
  217. di seluruh indonesia
  218. </section>
  219. <section class="contact-details">
  220. <h2>Rating Warung</h2>
  221. <img src="https://e7.pngegg.com/pngimages/658/490/png-clipart-longitude-131xb0-car-5-star-pics-of-a-star-angle-text.png" alt="" width="100">
  222. </section>
  223. </aside>
  224. <footer>
  225. &copy 2021 Warung Tegal
  226. </footer>
  227. </div>
  228. <!-- end wrapper -->
  229. </body>
  230.  
  231. </html>
Advertisement
Add Comment
Please, Sign In to add comment