Homepage layout & styling

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
3
down vote

favorite

I'm an HTML beginner. I've created my very first HTML + CSS single page from template given to me on a course I attend at a university. The code is probably very bad. It would be really nice if someone could tell me what to notice, how to make things different, what to learn and what path to choose. Below you can see the code. It is important to note that this page does not need to be responsive.

HTML

<!DOCTYPE html>
<html>
 <head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
 </head>
 <body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo"/>
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger"/>
 <img id="search" src="./images/search.png" alt="search"/>
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn"/>
 </section>
 <img id="play-btn" src="./images/play.png" alt="play"/>
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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
 consectetur et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
 </body>
</html>

CSS

<style> 
 * 
 box-sizing: border-box;

 p 
 margin: 0;
 padding: 0;

 header 
 display:block;

 #header:after 
 display:block;
 clear:both;
 content : "";
 position: absolute;
 top: 300px;
 left : 98px;
 bottom : 0;
 height : 1px;
 width: 1721px;
 border-bottom:1px solid rgba(255, 255, 255, 0.24);

 body 
 margin:0;
 padding:0 

 #hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");

 nav 
 position:absolute;
 top: 92px;
 left: 50%;
 width: 400px;

 .nav-item 
 font-family: Monserrat, sans-serif;
 font-size:0.875em;
 font-weight:bold;
 letter-spacing:0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;

 nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;

 nav li 
 float: left;

 nav li a 
 display: block;
 padding: 30px;

 #caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;

 #title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;

 #subtitle 
 text-align: center;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.25em; 
 font-weight: 300;
 line-height: 1.7; 
 text-align: center;

 #logo 
 position: absolute;
 left: 98px;
 top: 110px;

 #hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;

 #search 
 position: absolute;
 left: 1725px;
 top: 120px;

 #cta-btn 
 position: relative;
 margin-top: 58px;

 #play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;

 #gallery 
 height: 500px;
 width: 1920px;
 background: black;

 .gallery-article 
 height: 500px;
 width: 25%;
 float: left;

 #gallery-article-1 
 background-image: url("../images/article1.png");

 #gallery-article-2 
 background-image: url("../images/image-article-2.png");

 #gallery-article-3 
 background-image: url("../images/image-article-3.png");

 #gallery-article-4 
 background-image: url("../images/image-article-4.png");

 .article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;

 .article-subtitle 
 font-family: Georgia;
 color:#ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;

 footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;

 #footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;

 #footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;

 #footer-links ul li 
 margin: 5px 0;

 #footer-links ul > li:nth-child(2) 
 margin-top: 30px;

 .link
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;

 .footer-link-header 
 font-family: Montserrat;
 color:#151515;
 text-transform: uppercase;
 font-size: 0.875em; 
 font-weight: 700;
 line-height: 1.857; 
 text-align: left;

 #copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;

 #copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

 </style>

My full code works fine; this snippet fails due to the links, but it's basically the same.

* 
 box-sizing: border-box;


p 
 margin: 0;
 padding: 0;


header 
 display: block;


#header:after 
 display: block;
 clear: both;
 content: "";
 position: absolute;
 top: 300px;
 left: 98px;
 bottom: 0;
 height: 1px;
 width: 1721px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.24);


body 
 margin: 0;
 padding: 0


#hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");


nav 
 position: absolute;
 top: 92px;
 left: 50%;
 width: 400px;


.nav-item 
 font-family: Monserrat, sans-serif;
 font-size: 0.875em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;


nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;


nav li 
 float: left;


nav li a 
 display: block;
 padding: 30px;


#caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;


#title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;


#subtitle 
 text-align: center;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.25em;
 font-weight: 300;
 line-height: 1.7;
 text-align: center;


#logo 
 position: absolute;
 left: 98px;
 top: 110px;


#hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;


#search 
 position: absolute;
 left: 1725px;
 top: 120px;


#cta-btn 
 position: relative;
 margin-top: 58px;


#play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;


#gallery 
 height: 500px;
 width: 1920px;
 background: black;


.gallery-article 
 height: 500px;
 width: 25%;
 float: left;


#gallery-article-1 
 background-image: url("../images/article1.png");


#gallery-article-2 
 background-image: url("../images/image-article-2.png");


#gallery-article-3 
 background-image: url("../images/image-article-3.png");


#gallery-article-4 
 background-image: url("../images/image-article-4.png");


.article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;


.article-subtitle 
 font-family: Georgia;
 color: #ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;


footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;


#footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;


#footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;


#footer-links ul li 
 margin: 5px 0;


#footer-links ul>li:nth-child(2) 
 margin-top: 30px;


.link 
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;


.footer-link-header 
 font-family: Montserrat;
 color: #151515;
 text-transform: uppercase;
 font-size: 0.875em;
 font-weight: 700;
 line-height: 1.857;
 text-align: left;


#copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;


#copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

<!DOCTYPE html>
<html>

<head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
</head>

<body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo" />
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
 <img id="search" src="./images/search.png" alt="search" />
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
 </section>
 <img id="play-btn" src="./images/play.png" alt="play" />
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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 consectetur
 et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
</body>

</html>

edited Jul 23 at 16:37

Sam Onela

5,82961544

asked Mar 22 at 22:41

user3854620

161

I've added a runnable snippet to the question; it doesn't look quite correct because of the relative links, but it gives the gist. Feel free to remove if you don't like it.
â€“Â Dannnno
Mar 22 at 22:52

Looks like a fine start. As for next steps, you could create other pages and update the hyperlink stubs (<a href="#">) to point to them. You could try adding elements you see on other websites to your page. You could use CSS and/or JavaScript to add some animation and excitement to the page.
â€“Â Ryan Russon
Mar 22 at 23:37

When seeking feedback try to be specific on what you want to learn.
â€“Â JGallardo
Apr 20 at 17:22

add a commentÂ |Â

up vote
3
down vote

favorite

HTML

<!DOCTYPE html>
<html>
 <head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
 </head>
 <body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo"/>
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger"/>
 <img id="search" src="./images/search.png" alt="search"/>
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn"/>
 </section>
 <img id="play-btn" src="./images/play.png" alt="play"/>
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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
 consectetur et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
 </body>
</html>

CSS

<style> 
 * 
 box-sizing: border-box;

 p 
 margin: 0;
 padding: 0;

 header 
 display:block;

 #header:after 
 display:block;
 clear:both;
 content : "";
 position: absolute;
 top: 300px;
 left : 98px;
 bottom : 0;
 height : 1px;
 width: 1721px;
 border-bottom:1px solid rgba(255, 255, 255, 0.24);

 body 
 margin:0;
 padding:0 

 #hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");

 nav 
 position:absolute;
 top: 92px;
 left: 50%;
 width: 400px;

 .nav-item 
 font-family: Monserrat, sans-serif;
 font-size:0.875em;
 font-weight:bold;
 letter-spacing:0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;

 nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;

 nav li 
 float: left;

 nav li a 
 display: block;
 padding: 30px;

 #caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;

 #title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;

 #subtitle 
 text-align: center;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.25em; 
 font-weight: 300;
 line-height: 1.7; 
 text-align: center;

 #logo 
 position: absolute;
 left: 98px;
 top: 110px;

 #hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;

 #search 
 position: absolute;
 left: 1725px;
 top: 120px;

 #cta-btn 
 position: relative;
 margin-top: 58px;

 #play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;

 #gallery 
 height: 500px;
 width: 1920px;
 background: black;

 .gallery-article 
 height: 500px;
 width: 25%;
 float: left;

 #gallery-article-1 
 background-image: url("../images/article1.png");

 #gallery-article-2 
 background-image: url("../images/image-article-2.png");

 #gallery-article-3 
 background-image: url("../images/image-article-3.png");

 #gallery-article-4 
 background-image: url("../images/image-article-4.png");

 .article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;

 .article-subtitle 
 font-family: Georgia;
 color:#ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;

 footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;

 #footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;

 #footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;

 #footer-links ul li 
 margin: 5px 0;

 #footer-links ul > li:nth-child(2) 
 margin-top: 30px;

 .link
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;

 .footer-link-header 
 font-family: Montserrat;
 color:#151515;
 text-transform: uppercase;
 font-size: 0.875em; 
 font-weight: 700;
 line-height: 1.857; 
 text-align: left;

 #copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;

 #copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

 </style>

My full code works fine; this snippet fails due to the links, but it's basically the same.

* 
 box-sizing: border-box;


p 
 margin: 0;
 padding: 0;


header 
 display: block;


#header:after 
 display: block;
 clear: both;
 content: "";
 position: absolute;
 top: 300px;
 left: 98px;
 bottom: 0;
 height: 1px;
 width: 1721px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.24);


body 
 margin: 0;
 padding: 0


#hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");


nav 
 position: absolute;
 top: 92px;
 left: 50%;
 width: 400px;


.nav-item 
 font-family: Monserrat, sans-serif;
 font-size: 0.875em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;


nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;


nav li 
 float: left;


nav li a 
 display: block;
 padding: 30px;


#caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;


#title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;


#subtitle 
 text-align: center;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.25em;
 font-weight: 300;
 line-height: 1.7;
 text-align: center;


#logo 
 position: absolute;
 left: 98px;
 top: 110px;


#hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;


#search 
 position: absolute;
 left: 1725px;
 top: 120px;


#cta-btn 
 position: relative;
 margin-top: 58px;


#play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;


#gallery 
 height: 500px;
 width: 1920px;
 background: black;


.gallery-article 
 height: 500px;
 width: 25%;
 float: left;


#gallery-article-1 
 background-image: url("../images/article1.png");


#gallery-article-2 
 background-image: url("../images/image-article-2.png");


#gallery-article-3 
 background-image: url("../images/image-article-3.png");


#gallery-article-4 
 background-image: url("../images/image-article-4.png");


.article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;


.article-subtitle 
 font-family: Georgia;
 color: #ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;


footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;


#footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;


#footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;


#footer-links ul li 
 margin: 5px 0;


#footer-links ul>li:nth-child(2) 
 margin-top: 30px;


.link 
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;


.footer-link-header 
 font-family: Montserrat;
 color: #151515;
 text-transform: uppercase;
 font-size: 0.875em;
 font-weight: 700;
 line-height: 1.857;
 text-align: left;


#copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;


#copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

<!DOCTYPE html>
<html>

<head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
</head>

<body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo" />
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
 <img id="search" src="./images/search.png" alt="search" />
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
 </section>
 <img id="play-btn" src="./images/play.png" alt="play" />
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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 consectetur
 et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
</body>

</html>

edited Jul 23 at 16:37

Sam Onela

5,82961544

asked Mar 22 at 22:41

user3854620

161

I've added a runnable snippet to the question; it doesn't look quite correct because of the relative links, but it gives the gist. Feel free to remove if you don't like it.
â€“Â Dannnno
Mar 22 at 22:52

Looks like a fine start. As for next steps, you could create other pages and update the hyperlink stubs (<a href="#">) to point to them. You could try adding elements you see on other websites to your page. You could use CSS and/or JavaScript to add some animation and excitement to the page.
â€“Â Ryan Russon
Mar 22 at 23:37

When seeking feedback try to be specific on what you want to learn.
â€“Â JGallardo
Apr 20 at 17:22

add a commentÂ |Â

up vote
3
down vote

favorite

HTML

<!DOCTYPE html>
<html>
 <head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
 </head>
 <body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo"/>
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger"/>
 <img id="search" src="./images/search.png" alt="search"/>
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn"/>
 </section>
 <img id="play-btn" src="./images/play.png" alt="play"/>
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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
 consectetur et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
 </body>
</html>

CSS

<style> 
 * 
 box-sizing: border-box;

 p 
 margin: 0;
 padding: 0;

 header 
 display:block;

 #header:after 
 display:block;
 clear:both;
 content : "";
 position: absolute;
 top: 300px;
 left : 98px;
 bottom : 0;
 height : 1px;
 width: 1721px;
 border-bottom:1px solid rgba(255, 255, 255, 0.24);

 body 
 margin:0;
 padding:0 

 #hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");

 nav 
 position:absolute;
 top: 92px;
 left: 50%;
 width: 400px;

 .nav-item 
 font-family: Monserrat, sans-serif;
 font-size:0.875em;
 font-weight:bold;
 letter-spacing:0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;

 nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;

 nav li 
 float: left;

 nav li a 
 display: block;
 padding: 30px;

 #caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;

 #title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;

 #subtitle 
 text-align: center;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.25em; 
 font-weight: 300;
 line-height: 1.7; 
 text-align: center;

 #logo 
 position: absolute;
 left: 98px;
 top: 110px;

 #hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;

 #search 
 position: absolute;
 left: 1725px;
 top: 120px;

 #cta-btn 
 position: relative;
 margin-top: 58px;

 #play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;

 #gallery 
 height: 500px;
 width: 1920px;
 background: black;

 .gallery-article 
 height: 500px;
 width: 25%;
 float: left;

 #gallery-article-1 
 background-image: url("../images/article1.png");

 #gallery-article-2 
 background-image: url("../images/image-article-2.png");

 #gallery-article-3 
 background-image: url("../images/image-article-3.png");

 #gallery-article-4 
 background-image: url("../images/image-article-4.png");

 .article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;

 .article-subtitle 
 font-family: Georgia;
 color:#ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;

 footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;

 #footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;

 #footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;

 #footer-links ul li 
 margin: 5px 0;

 #footer-links ul > li:nth-child(2) 
 margin-top: 30px;

 .link
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;

 .footer-link-header 
 font-family: Montserrat;
 color:#151515;
 text-transform: uppercase;
 font-size: 0.875em; 
 font-weight: 700;
 line-height: 1.857; 
 text-align: left;

 #copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;

 #copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

 </style>

My full code works fine; this snippet fails due to the links, but it's basically the same.

* 
 box-sizing: border-box;


p 
 margin: 0;
 padding: 0;


header 
 display: block;


#header:after 
 display: block;
 clear: both;
 content: "";
 position: absolute;
 top: 300px;
 left: 98px;
 bottom: 0;
 height: 1px;
 width: 1721px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.24);


body 
 margin: 0;
 padding: 0


#hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");


nav 
 position: absolute;
 top: 92px;
 left: 50%;
 width: 400px;


.nav-item 
 font-family: Monserrat, sans-serif;
 font-size: 0.875em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;


nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;


nav li 
 float: left;


nav li a 
 display: block;
 padding: 30px;


#caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;


#title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;


#subtitle 
 text-align: center;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.25em;
 font-weight: 300;
 line-height: 1.7;
 text-align: center;


#logo 
 position: absolute;
 left: 98px;
 top: 110px;


#hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;


#search 
 position: absolute;
 left: 1725px;
 top: 120px;


#cta-btn 
 position: relative;
 margin-top: 58px;


#play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;


#gallery 
 height: 500px;
 width: 1920px;
 background: black;


.gallery-article 
 height: 500px;
 width: 25%;
 float: left;


#gallery-article-1 
 background-image: url("../images/article1.png");


#gallery-article-2 
 background-image: url("../images/image-article-2.png");


#gallery-article-3 
 background-image: url("../images/image-article-3.png");


#gallery-article-4 
 background-image: url("../images/image-article-4.png");


.article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;


.article-subtitle 
 font-family: Georgia;
 color: #ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;


footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;


#footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;


#footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;


#footer-links ul li 
 margin: 5px 0;


#footer-links ul>li:nth-child(2) 
 margin-top: 30px;


.link 
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;


.footer-link-header 
 font-family: Montserrat;
 color: #151515;
 text-transform: uppercase;
 font-size: 0.875em;
 font-weight: 700;
 line-height: 1.857;
 text-align: left;


#copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;


#copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

<!DOCTYPE html>
<html>

<head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
</head>

<body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo" />
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
 <img id="search" src="./images/search.png" alt="search" />
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
 </section>
 <img id="play-btn" src="./images/play.png" alt="play" />
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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 consectetur
 et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
</body>

</html>

edited Jul 23 at 16:37

Sam Onela

5,82961544

asked Mar 22 at 22:41

user3854620

161

HTML

<!DOCTYPE html>
<html>
 <head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
 </head>
 <body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo"/>
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger"/>
 <img id="search" src="./images/search.png" alt="search"/>
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn"/>
 </section>
 <img id="play-btn" src="./images/play.png" alt="play"/>
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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
 consectetur et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
 </body>
</html>

CSS

<style> 
 * 
 box-sizing: border-box;

 p 
 margin: 0;
 padding: 0;

 header 
 display:block;

 #header:after 
 display:block;
 clear:both;
 content : "";
 position: absolute;
 top: 300px;
 left : 98px;
 bottom : 0;
 height : 1px;
 width: 1721px;
 border-bottom:1px solid rgba(255, 255, 255, 0.24);

 body 
 margin:0;
 padding:0 

 #hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");

 nav 
 position:absolute;
 top: 92px;
 left: 50%;
 width: 400px;

 .nav-item 
 font-family: Monserrat, sans-serif;
 font-size:0.875em;
 font-weight:bold;
 letter-spacing:0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;

 nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;

 nav li 
 float: left;

 nav li a 
 display: block;
 padding: 30px;

 #caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;

 #title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;

 #subtitle 
 text-align: center;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.25em; 
 font-weight: 300;
 line-height: 1.7; 
 text-align: center;

 #logo 
 position: absolute;
 left: 98px;
 top: 110px;

 #hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;

 #search 
 position: absolute;
 left: 1725px;
 top: 120px;

 #cta-btn 
 position: relative;
 margin-top: 58px;

 #play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;

 #gallery 
 height: 500px;
 width: 1920px;
 background: black;

 .gallery-article 
 height: 500px;
 width: 25%;
 float: left;

 #gallery-article-1 
 background-image: url("../images/article1.png");

 #gallery-article-2 
 background-image: url("../images/image-article-2.png");

 #gallery-article-3 
 background-image: url("../images/image-article-3.png");

 #gallery-article-4 
 background-image: url("../images/image-article-4.png");

 .article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color:#ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;

 .article-subtitle 
 font-family: Georgia;
 color:#ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;

 footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;

 #footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;

 #footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;

 #footer-links ul li 
 margin: 5px 0;

 #footer-links ul > li:nth-child(2) 
 margin-top: 30px;

 .link
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;

 .footer-link-header 
 font-family: Montserrat;
 color:#151515;
 text-transform: uppercase;
 font-size: 0.875em; 
 font-weight: 700;
 line-height: 1.857; 
 text-align: left;

 #copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;

 #copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

 </style>

My full code works fine; this snippet fails due to the links, but it's basically the same.

* 
 box-sizing: border-box;


p 
 margin: 0;
 padding: 0;


header 
 display: block;


#header:after 
 display: block;
 clear: both;
 content: "";
 position: absolute;
 top: 300px;
 left: 98px;
 bottom: 0;
 height: 1px;
 width: 1721px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.24);


body 
 margin: 0;
 padding: 0


#hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");


nav 
 position: absolute;
 top: 92px;
 left: 50%;
 width: 400px;


.nav-item 
 font-family: Monserrat, sans-serif;
 font-size: 0.875em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;


nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;


nav li 
 float: left;


nav li a 
 display: block;
 padding: 30px;


#caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;


#title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;


#subtitle 
 text-align: center;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.25em;
 font-weight: 300;
 line-height: 1.7;
 text-align: center;


#logo 
 position: absolute;
 left: 98px;
 top: 110px;


#hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;


#search 
 position: absolute;
 left: 1725px;
 top: 120px;


#cta-btn 
 position: relative;
 margin-top: 58px;


#play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;


#gallery 
 height: 500px;
 width: 1920px;
 background: black;


.gallery-article 
 height: 500px;
 width: 25%;
 float: left;


#gallery-article-1 
 background-image: url("../images/article1.png");


#gallery-article-2 
 background-image: url("../images/image-article-2.png");


#gallery-article-3 
 background-image: url("../images/image-article-3.png");


#gallery-article-4 
 background-image: url("../images/image-article-4.png");


.article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;


.article-subtitle 
 font-family: Georgia;
 color: #ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;


footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;


#footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;


#footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;


#footer-links ul li 
 margin: 5px 0;


#footer-links ul>li:nth-child(2) 
 margin-top: 30px;


.link 
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;


.footer-link-header 
 font-family: Montserrat;
 color: #151515;
 text-transform: uppercase;
 font-size: 0.875em;
 font-weight: 700;
 line-height: 1.857;
 text-align: left;


#copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;


#copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

<!DOCTYPE html>
<html>

<head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
</head>

<body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo" />
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
 <img id="search" src="./images/search.png" alt="search" />
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
 </section>
 <img id="play-btn" src="./images/play.png" alt="play" />
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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 consectetur
 et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
</body>

</html>

* 
 box-sizing: border-box;


p 
 margin: 0;
 padding: 0;


header 
 display: block;


#header:after 
 display: block;
 clear: both;
 content: "";
 position: absolute;
 top: 300px;
 left: 98px;
 bottom: 0;
 height: 1px;
 width: 1721px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.24);


body 
 margin: 0;
 padding: 0


#hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");


nav 
 position: absolute;
 top: 92px;
 left: 50%;
 width: 400px;


.nav-item 
 font-family: Monserrat, sans-serif;
 font-size: 0.875em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;


nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;


nav li 
 float: left;


nav li a 
 display: block;
 padding: 30px;


#caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;


#title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;


#subtitle 
 text-align: center;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.25em;
 font-weight: 300;
 line-height: 1.7;
 text-align: center;


#logo 
 position: absolute;
 left: 98px;
 top: 110px;


#hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;


#search 
 position: absolute;
 left: 1725px;
 top: 120px;


#cta-btn 
 position: relative;
 margin-top: 58px;


#play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;


#gallery 
 height: 500px;
 width: 1920px;
 background: black;


.gallery-article 
 height: 500px;
 width: 25%;
 float: left;


#gallery-article-1 
 background-image: url("../images/article1.png");


#gallery-article-2 
 background-image: url("../images/image-article-2.png");


#gallery-article-3 
 background-image: url("../images/image-article-3.png");


#gallery-article-4 
 background-image: url("../images/image-article-4.png");


.article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;


.article-subtitle 
 font-family: Georgia;
 color: #ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;


footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;


#footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;


#footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;


#footer-links ul li 
 margin: 5px 0;


#footer-links ul>li:nth-child(2) 
 margin-top: 30px;


.link 
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;


.footer-link-header 
 font-family: Montserrat;
 color: #151515;
 text-transform: uppercase;
 font-size: 0.875em;
 font-weight: 700;
 line-height: 1.857;
 text-align: left;


#copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;


#copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

<!DOCTYPE html>
<html>

<head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
</head>

<body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo" />
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
 <img id="search" src="./images/search.png" alt="search" />
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
 </section>
 <img id="play-btn" src="./images/play.png" alt="play" />
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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 consectetur
 et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
</body>

</html>

* 
 box-sizing: border-box;


p 
 margin: 0;
 padding: 0;


header 
 display: block;


#header:after 
 display: block;
 clear: both;
 content: "";
 position: absolute;
 top: 300px;
 left: 98px;
 bottom: 0;
 height: 1px;
 width: 1721px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.24);


body 
 margin: 0;
 padding: 0


#hero-image 
 width: 1920px;
 height: 1280px;
 margin: 0 0 0 0;
 background-image: url("../images/pic.png");


nav 
 position: absolute;
 top: 92px;
 left: 50%;
 width: 400px;


.nav-item 
 font-family: Monserrat, sans-serif;
 font-size: 0.875em;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-align: center;
 text-transform: uppercase;
 text-decoration: none;
 color: #ffffff;
 font-weight: 700;


nav ul 
 list-style-type: none;
 margin: 0;
 padding: 0;


nav li 
 float: left;


nav li a 
 display: block;
 padding: 30px;


#caption 
 display: table;
 position: absolute;
 padding: 0 0 0 0;
 top: 436px;
 left: 579px;
 text-align: center;


#title 
 font-family: 'Playfair Display', serif;
 font-size: 8.75em;
 margin: 0 0 0 0;
 color: #ffffff;
 font-weight: 400;
 text-align: center;


#subtitle 
 text-align: center;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.25em;
 font-weight: 300;
 line-height: 1.7;
 text-align: center;


#logo 
 position: absolute;
 left: 98px;
 top: 110px;


#hamburger 
 position: absolute;
 left: 1786px;
 top: 120px;


#search 
 position: absolute;
 left: 1725px;
 top: 120px;


#cta-btn 
 position: relative;
 margin-top: 58px;


#play-btn 
 position: absolute;
 top: 1170px;
 left: 885px;


#gallery 
 height: 500px;
 width: 1920px;
 background: black;


.gallery-article 
 height: 500px;
 width: 25%;
 float: left;


#gallery-article-1 
 background-image: url("../images/article1.png");


#gallery-article-2 
 background-image: url("../images/image-article-2.png");


#gallery-article-3 
 background-image: url("../images/image-article-3.png");


#gallery-article-4 
 background-image: url("../images/image-article-4.png");


.article-title 
 padding-top: 346px;
 font-family: Montserrat;
 color: #ffffff;
 font-size: 1.125em;
 font-weight: 600;
 line-height: 1.667;
 text-align: center;


.article-subtitle 
 font-family: Georgia;
 color: #ffffff;
 font-size: 1.125em;
 font-style: italic;
 line-height: 1.667;
 text-align: center;


footer 
 margin-top: 60px;
 height: 385px;
 padding: 0;


#footer-links 
 width: 100%;
 float: left;
 margin: 0;
 padding: 0;
 margin-left: 197px;


#footer-links ul 
 width: 25%;
 float: left;
 padding: 0;
 list-style-type: none;


#footer-links ul li 
 margin: 5px 0;


#footer-links ul>li:nth-child(2) 
 margin-top: 30px;


.link 
 text-decoration: none;
 font-family: Georgia;
 color: #565656;
 font-size: 0.875em;
 font-style: italic;
 line-height: 1.857;
 text-align: left;


.footer-link-header 
 font-family: Montserrat;
 color: #151515;
 text-transform: uppercase;
 font-size: 0.875em;
 font-weight: 700;
 line-height: 1.857;
 text-align: left;


#copyright 
 height: 96px;
 width: 1920px;
 background: black;
 position: relative;
 top: 90%;
 text-align: center;


#copyright-text 
 font-family: Georgia;
 color: #ffffff;
 font-size: 0.75em;
 font-style: italic;
 line-height: 2;
 text-align: center;
 position: absolute;
 left: 50%;
 top: 35%;

<!DOCTYPE html>
<html>

<head>
 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Georgia" rel="stylesheet">
 <link href="./css/styles.css" rel="stylesheet">
 <title>FronDev - zadanie 2</title>
</head>

<body>
 <div id="hero-image">
 <header id="header">
 <img id="logo" src="./images/logo.png" alt="logo" />
 <nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
 </nav>
 <img id="hamburger" src="./images/hamburger.png" alt="hamburger" />
 <img id="search" src="./images/search.png" alt="search" />
 </header>
 <section id="caption">
 <p id="title">Web Design</p>
 <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>
 <img id="cta-btn" src="./images/btn.png" alt="cta-btn" />
 </section>
 <img id="play-btn" src="./images/play.png" alt="play" />
 </div>
 <section id="gallery">
 <article class="gallery-article" id="gallery-article-1">
 <p class="article-title">AMET CONDIMENTUM</p>
 <p class="article-subtitle">Dolor</p>
 </article>
 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>
 </article>
 <article class="gallery-article" id="gallery-article-3">
 <p class="article-title">CONDIMENTUM ULTRICIES</p>
 <p class="article-subtitle">Consectetur</p>
 </article>
 <article class="gallery-article" id="gallery-article-4">
 <p class="article-title">RIDICULUS ORNARE</p>
 <p class="article-subtitle">Ullamcorper</p>
 </article>
 </section>
 <footer>
 <section id="footer-links">
 <ul>
 <li>
 <h5 class="footer-link-header">Follow us</h5>
 </li>
 <li><a class="link" href="#">Twitter</a></li>
 <li><a class="link" href="#">Facebook</a></li>
 <li><a class="link" href="#">Linkedin</a></li>
 <li><a class="link" href="#">Pinterest</a></li>
 <li><a class="link" href="#">Youtube</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Get to know us</h5>
 </li>
 <li><a class="link" href="#">About</a></li>
 <li><a class="link" href="#">Policies</a></li>
 <li><a class="link" href="#">Careers</a></li>
 <li><a class="link" href="#">Press</a></li>
 <li><a class="link" href="#">Developers</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Locations</h5>
 </li>
 <li><a class="link" href="#">Detroit</a></li>
 <li><a class="link" href="#">London</a></li>
 <li><a class="link" href="#">Florida</a></li>
 <li><a class="link" href="#">Las Vegas</a></li>
 <li><a class="link" href="#">California</a></li>
 </ul>
 <ul>
 <li>
 <h5 class="footer-link-header">Our Mission</h5>
 </li>
 <li>
 <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 consectetur
 et. Sed pousere consectetur
 </p>
 </li>
 </ul>
 </section>
 <section id="copyright">
 <p id="copyright-text">Copyright 2016 @samiralley</p>
 </section>
 </footer>
</body>

</html>

edited Jul 23 at 16:37

Sam Onela

5,82961544

asked Mar 22 at 22:41

user3854620

161

edited Jul 23 at 16:37

Sam Onela

5,82961544

edited Jul 23 at 16:37

Sam Onela

5,82961544

edited Jul 23 at 16:37

Sam Onela

5,82961544

asked Mar 22 at 22:41

user3854620

161

asked Mar 22 at 22:41

user3854620

161

asked Mar 22 at 22:41

user3854620

161

I've added a runnable snippet to the question; it doesn't look quite correct because of the relative links, but it gives the gist. Feel free to remove if you don't like it.
â€“Â Dannnno
Mar 22 at 22:52

Looks like a fine start. As for next steps, you could create other pages and update the hyperlink stubs (<a href="#">) to point to them. You could try adding elements you see on other websites to your page. You could use CSS and/or JavaScript to add some animation and excitement to the page.
â€“Â Ryan Russon
Mar 22 at 23:37

When seeking feedback try to be specific on what you want to learn.
â€“Â JGallardo
Apr 20 at 17:22

add a commentÂ |Â

I've added a runnable snippet to the question; it doesn't look quite correct because of the relative links, but it gives the gist. Feel free to remove if you don't like it.
â€“Â Dannnno
Mar 22 at 22:52

Looks like a fine start. As for next steps, you could create other pages and update the hyperlink stubs (<a href="#">) to point to them. You could try adding elements you see on other websites to your page. You could use CSS and/or JavaScript to add some animation and excitement to the page.
â€“Â Ryan Russon
Mar 22 at 23:37

When seeking feedback try to be specific on what you want to learn.
â€“Â JGallardo
Apr 20 at 17:22

I've added a runnable snippet to the question; it doesn't look quite correct because of the relative links, but it gives the gist. Feel free to remove if you don't like it.
â€“Â Dannnno
Mar 22 at 22:52

Looks like a fine start. As for next steps, you could create other pages and update the hyperlink stubs (<a href="#">) to point to them. You could try adding elements you see on other websites to your page. You could use CSS and/or JavaScript to add some animation and excitement to the page.
â€“Â Ryan Russon
Mar 22 at 23:37

When seeking feedback try to be specific on what you want to learn.
â€“Â JGallardo
Apr 20 at 17:22

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
2
down vote

I have a few suggestions, mostly that you would benefit from leveraging inheritance in CSS by reworking your HTML5 Article tags

Rather than

<nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
</nav>

Where each <li> has the class, give a class to the <ul> like <ul class="nav-links"> then your css will be cleaner by doing .navlinks li

What happens is that not only is your original code bloated, but it requires manually updating each item if you need to add later. This can be time consuming in larger applications.

Your code for the articles is very bloated,

<section id="gallery">

 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>

It could be more like

<section id="gallery">
 <article>
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>

So and you can target the articles with inheritance

or even better

<section id="gallery">
 <article>
 <p>LOREM CURSUS</p>
 <p>Ligula</p>

And you can target the First paragraph using :nth-of-type and treat it like a title.

But really for SEO reasons, you should be using something more like

<section id="gallery">
 <article>
 <h1>LOREM CURSUS</h1> <!-- article title -->
 <h2>Ligula</h2> <!-- subtitle-->
 <p>Article content would be here... </p>

When you start using Sass you will see how much more efficient your code will be when you get used to nesting inside of wrapping classes.

Because then it would be more correct, especially for screenreaders that help people with disabilities, that way they can better navigate your site.

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f190248%2fhomepage-layout-styling%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

I have a few suggestions, mostly that you would benefit from leveraging inheritance in CSS by reworking your HTML5 Article tags

Rather than

<nav>
 <ul>
 <li><a class="nav-item" href="#home">Home</a></li>
 <li><a class="nav-item" href="#about">About</a></li>
 <li><a class="nav-item" href="#contact">Contact</a></li>
 </ul>
</nav>

Where each <li> has the class, give a class to the <ul> like <ul class="nav-links"> then your css will be cleaner by doing .navlinks li

What happens is that not only is your original code bloated, but it requires manually updating each item if you need to add later. This can be time consuming in larger applications.

Your code for the articles is very bloated,

<section id="gallery">

 <article class="gallery-article" id="gallery-article-2">
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>

It could be more like

<section id="gallery">
 <article>
 <p class="article-title">LOREM CURSUS</p>
 <p class="article-subtitle">Ligula</p>

So and you can target the articles with inheritance

or even better

<section id="gallery">
 <article>
 <p>LOREM CURSUS</p>
 <p>Ligula</p>

And you can target the First paragraph using :nth-of-type and treat it like a title.

But really for SEO reasons, you should be using something more like

<section id="gallery">
 <article>
 <h1>LOREM CURSUS</h1> <!-- article title -->
 <h2>Ligula</h2> <!-- subtitle-->
 <p>Article content would be here... </p>

When you start using Sass you will see how much more efficient your code will be when you get used to nesting inside of wrapping classes.

Because then it would be more correct, especially for screenreaders that help people with disabilities, that way they can better navigate your site.

搜尋此網誌

trjhtr