API tools faq
paste
Guest User

Untitled

a guest
Apr 20th, 2018
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  5. <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
  6. <link href="./css/styles.css" rel="stylesheet">
  7. <title>FronDev - zadanie 2</title>
  8. </head>
  9. <body>
  10. <div id="hero-image">
  11. <header id="header">
  12. <img id="logo" src="./images/logo.png" alt="logo"/>
  13. <nav>
  14. <ul>
  15. <li><a class="nav-item" href="#home">Home</a></li>
  16. <li><a class="nav-item" href="#about">About</a></li>
  17. <li><a class="nav-item" href="#contact">Contact</a></li>
  18. </ul>
  19. </nav>
  20. <img id="hamburger" src="./images/hamburger.png" alt="hamburger"/>
  21. <img id="search" src="./images/search.png" alt="search"/>
  22. </header>
  23. <section id="caption">
  24. <p id="title">Web Design</p>
  25. <p id="subtitle">Fusce dapibus, tellus ac cursus commodo, tortor mauris <br>condimentum , ut fermentum massa justo sit amet <br>erat a ante venenatis dapibus posuere velit </p>
  26. <img id="cta-btn" src="./images/btn.png" alt="cta-btn"/>
  27. </section>
  28. <img id="play-btn" src="./images/play.png" alt="play"/>
  29. </div>
  30. <section id="gallery">
  31. <article class="gallery-article" id="gallery-article-1">
  32. <p class="article-title">AMET CONDIMENTUM</p>
  33. <p class="article-subtitle">Dolor</p>
  34. </article>
  35. <article class="gallery-article" id="gallery-article-2">
  36. <p class="article-title">LOREM CURSUS</p>
  37. <p class="article-subtitle">Ligula</p>
  38. </article>
  39. <article class="gallery-article" id="gallery-article-3">
  40. <p class="article-title">CONDIMENTUM ULTRICIES</p>
  41. <p class="article-subtitle">Consectetur</p>
  42. </article>
  43. <article class="gallery-article" id="gallery-article-4">
  44. <p class="article-title">RIDICULUS ORNARE</p>
  45. <p class="article-subtitle">Ullamcorper</p>
  46. </article>
  47. </section>
  48. <footer>
  49. <section id="footer-links">
  50. <ul>
  51. <li>
  52. <h5 class="footer-link-header">Follow us</h5>
  53. </li>
  54. <li><a class="link" href="#">Twitter</a></li>
  55. <li><a class="link" href="#">Facebook</a></li>
  56. <li><a class="link" href="#">Linkedin</a></li>
  57. <li><a class="link" href="#">Pinterest</a></li>
  58. <li><a class="link" href="#">Youtube</a></li>
  59. </ul>
  60. <ul>
  61. <li>
  62. <h5 class="footer-link-header">Get to know us</h5>
  63. </li>
  64. <li><a class="link" href="#">About</a></li>
  65. <li><a class="link" href="#">Policies</a></li>
  66. <li><a class="link" href="#">Careers</a></li>
  67. <li><a class="link" href="#">Press</a></li>
  68. <li><a class="link" href="#">Developers</a></li>
  69. </ul>
  70. <ul>
  71. <li>
  72. <h5 class="footer-link-header">Locations</h5>
  73. </li>
  74. <li><a class="link" href="#">Detroit</a></li>
  75. <li><a class="link" href="#">London</a></li>
  76. <li><a class="link" href="#">Florida</a></li>
  77. <li><a class="link" href="#">Las Vegas</a></li>
  78. <li><a class="link" href="#">California</a></li>
  79. </ul>
  80. <ul>
  81. <li>
  82. <h5 class="footer-link-header">Our Mission</h5>
  83. </li>
  84. <li>
  85. <p class="link">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer pousere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl
  86. consectetur et. Sed pousere consectetur
  87. </p>
  88. </li>
  89. </ul>
  90. </section>
  91. <section id="copyright">
  92. <p id="copyright-text">Copyright 2016 @samiralley</p>
  93. </section>
  94. </footer>
  95. </body>
  96. </html>
  97.  
  98. <style>
  99. * {
  100. box-sizing: border-box;
  101. }
  102. p {
  103. margin: 0;
  104. padding: 0;
  105. }
  106. header {
  107. display:block;
  108. }
  109. #header:after {
  110. display:block;
  111. clear:both;
  112. content : "";
  113. position: absolute;
  114. top: 300px;
  115. left : 98px;
  116. bottom : 0;
  117. height : 1px;
  118. width: 1721px;
  119. border-bottom:1px solid rgba(255, 255, 255, 0.24);
  120. }
  121. body {
  122. margin:0;
  123. padding:0
  124. }
  125. #hero-image {
  126. width: 1920px;
  127. height: 1280px;
  128. margin: 0 0 0 0;
  129. background-image: url("../images/pic.png");
  130. }
  131. nav {
  132. position:absolute;
  133. top: 92px;
  134. left: 50%;
  135. width: 400px;
  136. }
  137. .nav-item {
  138. font-family: Monserrat, sans-serif;
  139. font-size:0.875em;
  140. font-weight:bold;
  141. letter-spacing:0.1em;
  142. text-align: center;
  143. text-transform: uppercase;
  144. text-decoration: none;
  145. color: #ffffff;
  146. font-weight: 700;
  147. }
  148. nav ul {
  149. list-style-type: none;
  150. margin: 0;
  151. padding: 0;
  152. }
  153. nav li {
  154. float: left;
  155. }
  156. nav li a {
  157. display: block;
  158. padding: 30px;
  159. }
  160. #caption {
  161. display: table;
  162. position: absolute;
  163. padding: 0 0 0 0;
  164. top: 436px;
  165. left: 579px;
  166. text-align: center;
  167. }
  168. #title {
  169. font-family: 'Playfair Display', serif;
  170. font-size: 8.75em;
  171. margin: 0 0 0 0;
  172. color: #ffffff;
  173. font-weight: 400;
  174. text-align: center;
  175. }
  176. #subtitle {
  177. text-align: center;
  178. font-family: Montserrat;
  179. color:#ffffff;
  180. font-size: 1.25em;
  181. font-weight: 300;
  182. line-height: 1.7;
  183. text-align: center;
  184. }
  185. #logo {
  186. position: absolute;
  187. left: 98px;
  188. top: 110px;
  189. }
  190. #hamburger {
  191. position: absolute;
  192. left: 1786px;
  193. top: 120px;
  194. }
  195. #search {
  196. position: absolute;
  197. left: 1725px;
  198. top: 120px;
  199. }
  200. #cta-btn {
  201. position: relative;
  202. margin-top: 58px;
  203. }
  204. #play-btn {
  205. position: absolute;
  206. top: 1170px;
  207. left: 885px;
  208. }
  209. #gallery {
  210. height: 500px;
  211. width: 1920px;
  212. background: black;
  213. }
  214. .gallery-article {
  215. height: 500px;
  216. width: 25%;
  217. float: left;
  218. }
  219. #gallery-article-1 {
  220. background-image: url("../images/article1.png");
  221. }
  222. #gallery-article-2 {
  223. background-image: url("../images/image-article-2.png");
  224. }
  225. #gallery-article-3 {
  226. background-image: url("../images/image-article-3.png");
  227. }
  228. #gallery-article-4 {
  229. background-image: url("../images/image-article-4.png");
  230. }
  231. .article-title {
  232. padding-top: 346px;
  233. font-family: Montserrat;
  234. color:#ffffff;
  235. font-size: 1.125em;
  236. font-weight: 600;
  237. line-height: 1.667;
  238. text-align: center;
  239. }
  240. .article-subtitle {
  241. font-family: Georgia;
  242. color:#ffffff;
  243. font-size: 1.125em;
  244. font-style: italic;
  245. line-height: 1.667;
  246. text-align: center;
  247. }
  248. footer {
  249. margin-top: 60px;
  250. height: 385px;
  251. padding: 0;
  252. }
  253. #footer-links {
  254. width: 100%;
  255. float: left;
  256. margin: 0;
  257. padding: 0;
  258. margin-left: 197px;
  259. }
  260. #footer-links ul {
  261. width: 25%;
  262. float: left;
  263. padding: 0;
  264. list-style-type: none;
  265. }
  266. #footer-links ul li {
  267. margin: 5px 0;
  268. }
  269. #footer-links ul > li:nth-child(2) {
  270. margin-top: 30px;
  271. }
  272. .link{
  273. text-decoration: none;
  274. font-family: Georgia;
  275. color: #565656;
  276. font-size: 0.875em;
  277. font-style: italic;
  278. line-height: 1.857;
  279. text-align: left;
  280. }
  281. .footer-link-header {
  282. font-family: Montserrat;
  283. color:#151515;
  284. text-transform: uppercase;
  285. font-size: 0.875em;
  286. font-weight: 700;
  287. line-height: 1.857;
  288. text-align: left;
  289. }
  290. #copyright {
  291. height: 96px;
  292. width: 1920px;
  293. background: black;
  294. position: relative;
  295. top: 90%;
  296. text-align: center;
  297. }
  298. #copyright-text {
  299. font-family: Georgia;
  300. color: #ffffff;
  301. font-size: 0.75em;
  302. font-style: italic;
  303. line-height: 2;
  304. text-align: center;
  305. position: absolute;
  306. left: 50%;
  307. top: 35%;
  308. }
  309. </style>
  310.  
  311. <nav>
  312. <ul>
  313. <li><a class="nav-item" href="#home">Home</a></li>
  314. <li><a class="nav-item" href="#about">About</a></li>
  315. <li><a class="nav-item" href="#contact">Contact</a></li>
  316. </ul>
  317. </nav>
  318.  
  319. <section id="gallery">
  320.  
  321. <article class="gallery-article" id="gallery-article-2">
  322. <p class="article-title">LOREM CURSUS</p>
  323. <p class="article-subtitle">Ligula</p>
  324.  
  325. <section id="gallery">
  326. <article>
  327. <p class="article-title">LOREM CURSUS</p>
  328. <p class="article-subtitle">Ligula</p>
  329.  
  330. <section id="gallery">
  331. <article>
  332. <p>LOREM CURSUS</p>
  333. <p>Ligula</p>
  334.  
  335. <section id="gallery">
  336. <article>
  337. <h2>LOREM CURSUS</h2>
  338. <p>Ligula</p>
Add Comment
Please, Sign In to add comment
Public Pastes
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!