API tools faq
paste
Advertisement
12181632_DanangIsAJI

12181632_Latihan Responsive Desain

12181632_DanangIsAJI
Apr 22nd, 2020
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Praktik Responsive Desain</title>
  5. <meta content='width-device=width, initial-scale=1, maximum-scale=1' name='viewport' />
  6. <link rel="stylesheet" type="text/css" href="assets_css/style.css">
  7. <link rel="stylesheet" type="text/css" href="assets_css/mediaquery.css">
  8. </head>
  9. <body>
  10. <!--bagian header template-->
  11. <header>
  12. <h1 class="judul">Praktik Responsive Desain</h1>
  13. <p class="deskripsi">Pertemuan 12 - Praktik Layout Responsive Desain Tanpa Framework.</p>
  14. </header>
  15. <!-- akhir bagian header template -->
  16. <div class="wrap">
  17. <!-- bagian menu -->
  18. <nav class="menu">
  19. <ul><li><a href="#">Home</a></li>
  20. <li><a href="#">Turotial</a></li>
  21. <li><a href="#">Kontak</a></li>
  22. </ul>
  23. </nav>
  24. <!-- akhir bagian menu -->
  25. <!-- bagian sidebar website -->
  26. <aside class="sidebar">
  27. <div class="widget">
  28. <h2>Tutorial</h2>
  29. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</p>
  30. </div>
  31. <div class="widget">
  32. <h2>Ebook Gratis</h2>
  33. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.</p>
  34. </div>
  35. </aside>
  36. <!-- akhir bagian sidebar website -->
  37.  
  38. <!-- bagian konten blog -->
  39. <div class="blog">
  40. <div class="conteudo">
  41. <div class="post-info">Di Posting Oleh <b>Admin</b></div>
  42. <img src="assets_img/1.png">
  43. <h1> Full Responsive </h1>
  44. <hr>
  45. <p>
  46. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
  47. </p>
  48. <a href="#" class="continue-lendo">Selengkapnya </a>
  49. </div>
  50. <div class="conteudo">
  51. <div class="post-info">Di Posting Oleh <b>Admin</b></div>
  52. <img src="assets_img/2.jpg">
  53. <h1> About Wireframe </h1>
  54. <hr>
  55. <p>
  56. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
  57. </p>
  58. <a href="#" class="continue-lendo">Selengkapnya </a>
  59. </div>
  60. </div>
  61. <!-- akhir bagian konten Blog -->
  62. </div>
  63. </body>
  64. </html>
  65.  
  66. body {
  67. background: #eee;
  68. margin:0;
  69. font-family: 'Open Sans', sans-serif;
  70. }
  71. hr {
  72. border:0;
  73. background:#dedede;
  74. height:1px;
  75. }
  76. header {
  77. text-align: center;
  78. color: #232323;
  79. }
  80. header .judul{
  81. font-size: 17pt;
  82. }
  83. header .deskripsi{
  84. font-size: 11pt;
  85. }
  86. .wrap {
  87. width: 950px;
  88. margin:25px auto;
  89. }
  90. nav.menu ul{
  91. overflow:hidden;
  92. color:#fff;
  93. list-style: none;
  94. float: left;
  95. padding: 0;
  96. width: 650px;
  97. margin: 0 0 0;
  98. background: #950a31;
  99. }
  100. nav.menu ul li{
  101. margin:0;
  102. float:left;
  103. }
  104. nav.menu ul a{
  105. padding:25px;
  106. display:block;
  107. font-weight:600;
  108. font-size:16px;
  109. color:#fff;
  110. text-transform: uppercase;
  111. transition: all 0.5s ease;
  112. text-decoration: none;
  113. }
  114. nav.menu ul a:hover{
  115. text-decoration: underline;
  116. background: #f42064;
  117. }
  118. .sidebar{
  119. float:right;
  120. width:275px;
  121. }
  122. .sidebar .widget{
  123. padding:25px;
  124. margin:0 0 25px;
  125. background:#fff;
  126. border-bottom: 2px solid #fff;
  127. transition: all 0.5s ease;
  128. }
  129. .sidebar .widget:hover{
  130. border-bottom: 2px solid #3498db;
  131. }
  132. .sidebar .widget h2{
  133. padding:0;
  134. margin:0 0 15px;
  135. color:#3498db;
  136. font-size: 18px;
  137. font-weight:800;
  138. text-transform: uppercase;
  139. }
  140. .sidebar .widget p{
  141. font-size: 14px;
  142. }
  143. .sidebar .widget p:last-child {
  144. margin: 0;
  145. }
  146. .blog{
  147. float:left;
  148. }
  149. .conteudo{
  150. width:600px;
  151. padding:25px;
  152. margin:25px auto;
  153. background: #fff;
  154. border: 1px solid #dedede;
  155. }
  156. .conteudo img{
  157. min-width: 650px;
  158. margin:0 0 25px -25px;
  159. max-width: 650px;
  160. }
  161. .conteudo h1{
  162. padding:0;
  163. margin:0 0 15px;
  164. font-weight: normal;
  165. color: #666;
  166. font-family: Georgia;
  167. }
  168. .conteudo p:last-child{
  169. margin:0;
  170. }
  171. .conteudo .continue-lendo{
  172. color:#000;
  173. transition: all 0.5s ease;
  174. text-decoration: none;
  175. font-weight: 700;
  176. }
  177. .conteudo .continue-lendo:hover{
  178. margin-left:10px;
  179. }
  180. .post-info{
  181. float: right;
  182. font-size: 12px;
  183. margin: -10px 0 15px;
  184. text-transform: uppercase;
  185. }
  186.  
  187. @media screen and (max-width: 960px){
  188. .header{
  189. position:inherit;
  190. }
  191. .wrap{
  192. width: 93.75%;
  193. margin:25px auto;
  194. }
  195. .sidebar{
  196. width:100%;
  197. margin:25px 0 0;
  198. float:right;
  199. }
  200. .sidebar .widget{
  201. padding:5%;
  202. }
  203. nav.menu ul{
  204. width: 100%;
  205. }
  206. nav.menu ul{
  207. float:inherit;
  208. }
  209. nav.menu ul li{
  210. float:inherit;
  211. margin:0;
  212. }
  213. nav.menu ul a{
  214. padding:15px;
  215. font-size:16px;
  216. border-top:1px solid #1abf9f;
  217. border-bottom:1px solid #f42064;
  218. }
  219. .blog {
  220. width:90%;
  221. }
  222. .conteudo{
  223. float:inherit;
  224. margin:0 auto 25px;
  225. width:101%;
  226. border:1px solid #dedede;
  227. padding:5%;
  228. background: #fff;
  229. }
  230. .conteudo img{
  231. max-width:110%;
  232. margin:0 0 25px -5%;
  233. min-width:110%;
  234. }
  235. .conteudo .continue-lendo:hover{
  236. margin-left:0;
  237. }
  238. }
  239.  
  240. @media screen and (max-width: 460px) {
  241. nav.menu ul a{
  242. padding:15px;
  243. font-size:14px;
  244. }
  245. .sidebar{
  246. display:none;
  247. }
  248. .post-info{
  249. display:none;
  250. }
  251. .conteudo{
  252. margin:25px auto;
  253. }
  254. .conteudo img{
  255. margin:-5% 0 25px -5%;
  256. }
  257. }
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!