‘My Full stack Engineering’ skill path

Projects Skill Path Projects
1

Hello,
I will be uploading my project codes here for your reviews, please help in pointing out any anomallies or a better way to approach some of the tasks given.
Luckily for me, I haven’t gotten stuck yet, and I hope when that time comes you’ll also be willing to help.

Thank you all in advance. :clap: :clap: :clap: :man_bowing:

Semantics Project

New York City

New york City is made up of five boroughs which include Queens, Manhattan, Brooklyn, th Bronx, and StatenIsland. The city is the home of approximately 8 million people.
In 1876, France gifted the Cityof New York what is known as the Statue of Liberty, which is currently located on Liberty Island and commonly visited by tourists.
However, it took 10 years to assemble and therefore wasn't unveiled until 1886.
Another tourist destination is Time Square. Time Square is commonly known for big buildings, Broadway shows, and bright neon signs.
This famous location was named after the The New York Times after the Times moved to that location. Prior to that, it was named Longacre square.
New York City is also known for its bridges that connect the boroughs and allow ease of transportation.

statue-of-liberty.jpeg896×631 29.5 KB
This is the Statue of Liberty, a popular tourist attraction located on Liberty Island.

The Scenery in NYC

While the view in the city is beautiful,the sounds are not as lovely.
Below you'll see an example of the view and the sound you'll deal with in NYC on a daily basis.

<footer>
  <p><strong>Posted by:</strong> <em>Aregbesola Oludare</em></p>
  <p><strong>Mail:</strong> <em>[email protected]</em></p>
</footer>
2

Elements Positioning
HTML Code

Elements Positioning 
<header>
    <nav>
      <ul>
        <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
      </ul>
    </nav>
</header>

<main>
  <div class="jumbotron">
    <div class="container">  
      <h1>We are Broadway</h1>
      <a href="#" class="btn-main"> Get Started </a>
    </div>
  </div>
</main>

<section class="supporting">
  <div class="container">
    
    <div class="col">
      <img src="https://content.codecademy.com/projects/broadway/design.svg">
      <h2>Design</h2>
      <p>Make your projects look great and interact beautifully.</p>
      <a href="#"> Learn More</a><br>
    </div>
    
    <div class="col">
      <img src="https://content.codecademy.com/projects/broadway/develop.svg">
      <h2>Develop</h2>
      <p>Use modern tools to turn your design into a web site</p>
      <a href="#"> Learn More</a><br>
    </div>
    
    <div class="col">
      <img src="https://content.codecademy.com/projects/broadway/deploy.svg">
      <h2>Deploy</h2>
      <p>Use modern tools to turn your design into a web site</p>
      <a href="#"> Learn More</a><br>
    </div>
    
  </div>
</section>

<footer>
  <div class="container">
    <p>&copy; Broadway 2017</p>
  </div>
</footer>

CSS Code.

html, body {
margin: 0;
padding: 0;
}

header {
background-color: #333333;
position: fixed;
width:100%;
z-index: 1
}

nav {
margin: 0;
padding: 20px 0;
}

nav li {
color: #fff;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 12px;
display: inline-block;
width:80px ;

}

main {
text-align: center;
position: relative;
top:80px;
}

main h1 {
color: #333;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}

footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
z-index: 1 ;
bottom: 0px;
width: 100%;
}

footer p {
font-family: ‘Raleway’, sans-serif;
text-transform: uppercase;
font-size: 11px;
}

.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}

.jumbotron {
height: 800px;
background-image: url(“https://content.codecademy.com/projects/broadway/bg.jpg”);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.btn-main {
background-color: #333;
color: #fff;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}

.btn-default {
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}

.supporting {
padding-top: 80px;
padding-bottom: 100px;
}

.supporting .col {
font-family: ‘Raleway’, sans-serif;
text-align: center;
display:inline-block;
width: 200px;
height: 200px;

}

.supporting img {
height: 32px;
}

.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}

.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}

.supporting a {
background-color: white;
color: #333333;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}

@media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}

.supporting .col {
width: 100%;
}
}.