code

Download Raw Clone


  1. <html>
  2. <head>
  3. <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
  4. <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
  5. <title> Brazil Portfolio </title>
  6. <style>
  7. #wrapper {
  8. margin: 0px;
  9. width: 100%;
  10. height: auto;
  11. }
  12. @import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
  13. @keyframes checked-anim {
  14. 50% {
  15. width: 205px;
  16. height: 230px;
  17. }
  18. 100% {
  19. width: 15%;
  20. height: 35%;
  21. border-radius: 10;
  22. }
  23. }
  24. @keyframes not-checked-anim {
  25. 0% {
  26. width: 205px;
  27. height: 230px;
  28. }
  29. }
  30. li, a {
  31. margin: 75px 0 -55px 0;
  32. color: #03A9F4;
  33. font: 14pt "Roboto", sans-serif;
  34. font-weight: 700;
  35. line-height: 1.8;
  36. text-decoration: none;
  37. text-transform: none;
  38. list-style: none;
  39. outline: 0;
  40. display: none;
  41. }
  42. li {
  43. width: 230px;
  44. text-indent: 56px;}
  45. a:focus {
  46. display: block;
  47. color: #333;
  48. background-color: #eee;
  49. transition: all .5s;
  50. }
  51. aside {
  52. position: absolute;
  53. color: white;
  54. top: 35%;
  55. right: 10%;
  56. text-align: right;
  57. }
  58. h1 {
  59. line-height: 0;
  60. font-size: 4vw;
  61. font-weight: 700;
  62. }
  63. h3 {
  64. float: right;
  65. line-height: .3;
  66. font-size: 2.5vw;
  67. font-weight: lighter;
  68. }
  69. h4 {
  70. float: left;
  71. margin-left: -2%;
  72. font-size: 1.5vw;
  73. font-weight: lighter;
  74. }
  75. html, body {
  76. margin: 0;
  77. padding: 0;
  78. background-color: #03A9F4;
  79. font-family: 'Roboto', sans-serif;
  80. overflow: hidden;
  81. }
  82. #trigger, #burger, #burger:before, #burger:after {
  83. position: absolute;
  84. top: 10px;
  85. left: 10px;
  86. background: #03A9F4;
  87. width: 30px;
  88. height: 5px;
  89. transition: .2s ease;
  90. cursor: pointer;
  91. z-index: 1;
  92. }
  93. #trigger {
  94. height: 25px;
  95. background: none;
  96. }
  97. #burger:before {
  98. content: " ";
  99. top: 10px;
  100. left: 0;
  101. }
  102. #burger:after {
  103. content: " ";
  104. top: 20px;
  105. left: 0;
  106. }
  107. #menu-toggle:checked + #trigger + #burger {
  108. top: 20px;
  109. transform: rotate(180deg);
  110. transition: transform .2s ease;
  111. }
  112. #menu-toggle:checked + #trigger + #burger:before {
  113. width: 20px;
  114. top: -2px;
  115. left: 18px;
  116. transform: rotate(45deg) translateX(-5px);
  117. transition: transform .2s ease;
  118. }
  119. #menu-toggle:checked + #trigger + #burger:after {
  120. width: 20px;
  121. top: 2px;
  122. left: 18px;
  123. transform: rotate(-45deg) translateX(-5px);
  124. transition: transform .2s ease;
  125. }
  126. #menu {
  127. position: absolute;
  128. margin: 0; padding: 0;
  129. width: 65px;
  130. height: 65px;
  131. background-color: #fff;
  132. border-bottom-right-radius: 100%;
  133. box-shadow: 0 2px 5px rgba(0,0,0,0.26);
  134. animation: not-checked-anim .2s both;
  135. transition: .2s;
  136. }
  137. #menu-toggle:checked + #trigger + #burger + #menu {
  138. animation: checked-anim 1s ease both;
  139. }
  140. #menu-toggle:checked + #trigger ~ #menu > li, a {
  141. display: block;
  142. }
  143. [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
  144. display: none;
  145. }
  146. .centered {
  147. position: absolute;
  148. top: 70%;
  149. left: 60%;
  150. transform: translate(-50%, -50%);
  151. font-size: 100;
  152. color: #0e1c28;
  153. font-family: 'Kaushan Script', cursive;
  154. font-style: italic;
  155. }
  156. .cover2 {
  157. position: absolute;
  158. top: 69%;
  159. left: 59%;
  160. transform: translate(-50%, -50%);
  161. font-size: 100;
  162. color: #d1eaff;
  163. font-family: 'Kaushan Script', cursive;
  164. font-style: italic;
  165. }
  166. .other {
  167. position: absolute;
  168. top: 82%;
  169. left: 61%;
  170. transform: translate(-50%, -50%);
  171. font-size: 80;
  172. color: black;
  173. font-family: 'Staatliches', cursive;
  174. font-style: italic;
  175. }
  176. .cover {
  177. position: absolute;
  178. top: 81%;
  179. left: 60%;
  180. transform: translate(-50%, -50%);
  181. font-size: 80;
  182. color: white;
  183. font-family: 'Staatliches', cursive;
  184. font-style: italic;
  185. }
  186. .pic1 {
  187. position:
  188. }
  189. body {
  190. background-image: url("https://melberbaptist.org/wp-content/uploads/2015/12/blue-polygon.jpg");
  191. background-position: center;
  192. background-repeat: no-repeat;
  193. }
  194. /* li {
  195. display: inline;
  196. padding: 0px;
  197. line-height: 30px;
  198. height: 10px;
  199. }
  200. li a {
  201. text-decoration: none;
  202. padding: 0px;
  203. display: inline-block;
  204. }
  205. */
  206. </style>
  207. </head>
  208. <body>
  209. <div id="wrapper">
  210. <input type="checkbox" id="menu-toggle"/>
  211. <label id="trigger" for="menu-toggle"></label>
  212. <label id="burger" for="menu-toggle"></label>
  213. <ul id="menu">
  214. <li><a href="testwilf.html">Wildlife</a></li>
  215. </
  216. <ul>
  217. <li><a href="#"></a></li>
  218. </ul>
  219. <img src="https://i.imgur.com/svTAKte.jpg" width="1290" height="600" align="center" style="margin:30px 40px 10px 40px">
  220. <div class="centered">Brazil's</div>
  221. <div class="cover2">Brazil's</div>
  222. <div class="other">Urbanlife</div>
  223. <div class="cover">Urbanlife</div>
  224. <img src="https://images-na.ssl-images-amazon.com/images/I/81ZHGJ1Tj4L._SX355_.jpg" class="pic1">
  225. <br>
  226. </div>
  227. </body>
  228. </html>

Raw paste data: