<!DOCTYPE html>
<html lang="en">

<head>
  <title>Original Headset</title>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <header id="header">
    <div class="logo">
      <img id="header-img" src="https://t4.ftcdn.net/jpg/01/19/91/89/240_F_119918954_yGDiD6KoGsJDoYVbxai5pK4DIg9j1Aaq.jpg" alt="Original headset">
      <h1>Headset</h1>
    </div>

    <nav id="nav-bar" class="nav">
      <a class="nav-link" href="#features">Features</a>
      <a class="nav-link" href="#description">Descriptions</a>
      <a class="nav-link" href="#pricing">Pricing</a>
      <!--User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.-->
    </nav>
  </header>

  <div id="second-part">
    <section id="sec-form">
      <h3>
        Kotion G2000 black and orange over-ear gamer headset with LED light
      </h3>
      <form id="form" action="https://www.freecodecamp.com/email-submit">

        <input name="email" id="email" type="email" placeholder="Enter your email" required />

        <input id="submit" type="submit" value="More infos" class="btn-submit">
      </form>
    </section>

    <section id="description">
      <img src="https://http2.mlstatic.com/D_NQ_NP_809104-MLA43711395308_102020-O.webp" alt="Headset Photo" id="img-des">

      <p class="paragraph-des">Experience the adrenaline of immersing
        yourself in the scene in another way! Having gaming-specific
        headphones completely changes your experience.
        With the Kotion G2000, you don't miss any details and hear the
        audio as it was intended by the creators.</p><br>
      <p class="paragraph-des">The perfect shape for you the over-ear design
        offers unparalleled comfort thanks to its cushions. At the same time,
        its highest-level surround sound becomes the protagonist of the scene.</p>
    </section>

  </div>

  <div>
    <section id="features">

      <div class="item-1">
        <div>
          <img class="img-item" src="https://http2.mlstatic.com/resources/frontend/ft-extended-v00/assets/vectorial/es_inalambrico_hp.svg" alt="">
        </div>

        <div>
          <h4>It's wireless: No</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p><br>
        </div>
      </div>

      <div class="item-1">
        <div>
          <img class="img-item" src="https://http2.mlstatic.com/resources/frontend/ft-extended-v00/assets/vectorial/con_microfono_hp.svg" alt="">
        </div>
        <div>
          <h4>With microphone: Yes</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p><br>
        </div>

      </div>

      <div class="item-1">
        <div>
          <img class="img-item" src="https://http2.mlstatic.com/resources/frontend/ft-extended-v00/assets/vectorial/con_luz_led_hp.svg" alt="">
        </div>
        <div>
          <h4>With LED light: Yes</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p><br>
        </div>
      </div>

    </section>

    <div>
      <iframe id="video" width="450" height="253"        src="https://www.youtube.com/embed/MX1rqQKl89Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
      </iframe>
    </div>

    <section id="pricing">
      <div class="headset-item">
        <h2>Black/blue</h2>
        <h3>Price: $97</h3>
        <img width="300" height="360" class="headset" src="https://http2.mlstatic.com/D_NQ_NP_809104-MLA43711395308_102020-O.webp" alt="Headset blue and black">
        <p class="select-item">Select</p>
      </div>

      <div class="headset-item">
        <h2>Black/orange</h2>
        <h3>Price: $97</h3>
        <img width="300" height="360" class="headset" src="https://http2.mlstatic.com/D_NQ_NP_930319-MLA43711395300_102020-O.webp" alt="Headset Black/Orange">
        <p class="select-item">Select</p>
      </div>

      <div class="headset-item">
        <h2>Black/red</h2>
        <h3>Price: $97</h3>
        <img width="300" height="360" class="headset" src="https://http2.mlstatic.com/D_NQ_NP_854320-MLA43711395304_102020-O.webp" alt="Headset Black/red">
        <p class="select-item">Select</p>
      </div>

    </section>

  </div>
  <footer>
    <div id="footer-sec">
      <p>
        <a href="#Privacy">Privacy</a>
        <a href="#Terms">Terms</a>
        <a href="#form">Contact</a>
      </p>
      <p id="copy">&copy;2021</p>
    </div>
  </footer>

</body>

</html>
@import "https://fonts.googleapis.com/css?family=Lato:400,700";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  text-align: center;
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  margin: 0 auto;
  min-height: 75px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #387aeb;
  background-color: #dafbff;
  border-bottom: solid 1px #387aeb;
  padding: 0 20px 10px;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
  display: flex;
  flex-direction: row;
  align-items: center;
}

@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

.logo > h1 {
  text-align: left;
}

@media (max-width: 650px) {
  .logo > h1 {
    text-align: center;
  }
}

nav {
  font-weight: 400;
}

.nav-link {
  text-decoration: none;
  margin: 5px;
  font-size: 18px;
  color: #387aeb;
}

.nav-link:hover {
  color: #075df3;
  font-weight: bold;
}

@media (max-width: 650px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
    margin: 2px;
  }
  nav li {
    padding-bottom: 5px;
  }
}

@media (max-width: 650px) {
  .logo > img {
    margin: 0 auto;
  }
}

#header-img {
  width: 10%;
}

#sec-form {
  margin-top: 100px;
}

@media (max-width: 650px) {
  #sec-form {
    margin-top: 225px;
  }

  @media (max-width: 650px) {
    #sec-form > h3 {
      font-size: 18px;
    }
  }
}

#container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

#form {
  margin: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#email {
  padding: 8px;
  width: 40%;
}

#email:active {
  border-bottom: 1px solid #387aeb;
}

.btn-submit {
  padding: 8px;
  width: 20%;
  margin-top: 15px;
  background-color: #387aeb;
  border: none;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
}

.btn-submit:hover {
  font-weight: normal;
}

@media (max-width: 650px) {
  #email {
    width: 80%;
  }

  .btn-submit {
    width: 50%;
    font-size: 16px;
  }
}

.btn-submit:hover {
  background-color: #1664ec;
}

#features {
  padding-top: 10px;
  margin: 15px;
}

.img-item {
  width: 75px;
  margin-bottom: 30px;
}

.item-1 {
  width: 60%;
  margin: 0 auto;
  padding: 5px 10px 5px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 650px) {
  .item-1 {
    width: 90%;
    padding: 5px;
  }

  .img-item {
    width: 0px;
    margin-bottom: 30px;
  }
}

.paragraph-des {
  width: 60%;
  margin: 0 auto;
  padding: 5px 10px 5px 10px;
}

@media (max-width: 650px) {
  .paragraph-des {
    width: 90%;
    padding: 2px;
    font-size: 18px;
  }
}

#pricing {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

@media (max-width: 720px) {
  #pricing {
    flex-direction: column;
  }
}

.headset-item {
  border: 1px solid gray;
  border-radius: 4px;
  width: auto;
  height: auto;
  margin-top: 20px;
}

h2 {
  background-color: #dafbff;
  padding: 10px;
  border-radius: 4px;
}

h3 {
  margin-top: 20px;
}

.headset {
  max-width: 100%;
}

.select-item {
  background-color: #387aeb;
  width: 45%;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 7px 0 7px 0;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select-item:hover {
  background-color: #035df8;
  color: #dafbff;
  width: 46%;
}

footer {
  background-color: #dafbff;
  height: 75px;
  margin-top: 30px;
}

p > a {
  font-size: 18px;
  padding: 10px;
  margin-top: 15px;
  text-decoration: none;
  position: relative;
  top: 25px;
}

#copy {
  position: relative;
  top: 25px;
  float: left;
  margin-left: 15px;
}

iframe{
  overflow-x: auto;
}
// !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js