<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<body>
    <header id="header">
        <img id="header-img" src="https://www.italyimport.com.br/wp-content/uploads/2017/12/lofo-final-site.png">
        <nav id=nav-bar>
            <!-- Missing User Story #5 -->
            <a class="nav-link" href="#pricing">Prices</a>
            <a class="nav-link" href="#video">Preview</a>
            <a class="nav-link" href="#products">Our Products</a>
        </nav>
    </header>
    <section>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <h2>The Best Italian Wines</h2>
            <input id="email" name="email" type="email" placeholder="Enter your e-mail address" required>
            <input id="submit" type="submit" value="Get Started">
        </form>
    </section>
    <section id="products">
        <div class="content">
            <i class="fas fa-wine-bottle"></i>
            <div>
                <h2>Premium Wines</h2>
                <p>We make sure to import only Premium Italian Wines</p>
            </div>
            <i class="fas fa-truck"></i>
            <div>
                <h2>Fast Shipping</h2>
                <p>You receive your wines within two days.</p>
            </div>
            <i class="fas fa-certificate"></i>
            <div>
                <h2>Certificated Wines</h2>
                <p>We only work with internationally certified wines.</p>
            </div>
        </div>
    </section>
    <section>
        <iframe id="video" width="640" height="360"
            src="https://www.youtube.com/embed?v=mjL6Zpklzjk" frameborder="0" allowfullscreen>
        </iframe>
    </section>
    <section id="pricing">
        <div class="wine">
            <h4>Amarone </h4>
            <h3>$53</h3>
            <p>Grape: Corvina Veronese</p>
            <p>Pairing: Meat and cheeses.</p>
            <p>Alcoholic Strenght: 15%</p>
            <input id="buynow" type="submit" value="Buy Now!">
        </div>
        <div class="wine"> 
            <h4>Barbera d'Alba</h4>
            <h3>$16</h3>
            <p>Grape: Barbera</p>
            <p>Pairing: Meat and Pasta</p>
            <p>Alcoholic Strenght: 14.5%</p>
            <input id="buynow" type="submit" value="Buy Now!">
        </div>
        <div class="wine">
            <h4>Chianti</h4>
            <h3>$23</h3>
            <p>Grape: Sangiovese</p>
            <p>Pairing: Meat and Pasta</p>
            <p>Alcoholic Strenght: 14%</p>
            <input id="buynow" type="submit" value="Buy Now!">
        </div>
    </section>
    <footer>
        <div class="foot">
            <a href="">Privacy</a>
            <a href="">Terms</a>
            <a href="">Contact</a> 
            <p>Copyright 2021, ItalyImport</p>
        </div>
    </footer>
</body>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> 
</html>
/* reset the browser */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* set up the body */

body {
    font-family: sans-serif;
    /* background: rgb(192,167,192); */
    background-image: linear-gradient(to right top, #2fa148, #2fa148, #60b265, #60b265, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #d83e30, #d83e30, #a80f00 , #a80f00);
}

/* Styling header */

header{
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
}

/* Ajust the logo  */
#header-img{
    height: auto; 
    width: auto; 
    max-width: 100px; 
    max-height: 100px;
    position:absolute;
    top: 12px;
    left: 34px;
    z-index: 100;
}

/* The navigation bar */
#nav-bar {
    width: 100%; /* Full width */
}

/* Links inside the navbar */
.nav-link{
    float: right; 
    display: block;
    color: rgb(63, 56, 56);
    text-align: center;
    padding: 36px 30px;
    text-decoration: none;
  }
  
/* Change background on mouse-over */
#nav-bar a[href="#products"]:hover {
    background: #2fa148;
    /* color: black; */
}

#nav-bar a[href="#video"]:hover {
    background: whitesmoke;
    /* color: black; */
}

#nav-bar a[href="#pricing"]:hover {
    background: #d83e30;
    /* color: black; */
}


/* positioning form */
#form{
    width: 100%;
    height: 70vh;
    display: flex; 
    flex-direction: column;
    justify-content:center;
    align-items: center; 
    color: black;
}

/* styling e-mail */
#email{
    border-radius: 1em;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    outline: none;
    border-color: black;
}

/* styling submit */
#submit{
    border-radius: 1em;
    padding: 5px;
    margin-top: 10px;
    font-size: 1em;
    color:  whitesmoke;
    outline: none;
    background-color:  black;
    border-color:  black;
}

#buynow{
    border-radius: 1em;
    padding: 5px;
    margin-top: 10px;
    font-size: 1em;
    outline: none;
    color: white;
    background-color: black;
}

/* Styling texts */
#products{
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}

.content{
    display: grid;
    grid-template-columns: min-content auto;
    align-items: center;
    grid-gap: 60px;
    color:  black;
}
  
.fas{
    font-size: 50px;
  }

 /* styling video */

#video{
    display: block;
    margin: auto;
}

/* Styling pricing */

#pricing{
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.wine{
    padding: 2%;
    border: 1px solid black;  
    margin: 50px;
    text-align: center;
    color: black;
    line-height: 200%;
    flex: 1 1 0px; 
    background-color: white; 
}

h4{
    font-family: 'Lucida Sans';
    font-size:x-large;
}

/* Styling footer */
footer{
    text-align: right;
    background-color:  white;
    color: rgb(63, 56, 56);
}

.foot{
    margin-right: 90px;
    line-height: 200%;
    font-size: 0.8em;
}

.foot > a{
    padding-left: 20px;
}

/* medias */

@media (max-width: 600px) {
    
    #header {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
  
    #form {
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 50px;
        padding-top:80px;
  }
    
    
  #products {
    margin-top: 0px;
    padding-top: 50px;
  }
    
 
    .fas {
        display: flex;
        padding-top:0.5rem;
        align-items: flex-start;
        justify-content: center;
        height: 125px;
        width: 20vw;
  }
    
    #pricing {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        margin-bottom: 80px;
        margin-top: 100px !important;
  }

  #video{
    width: 370px; 
    height: 180px;
  }
      
    .foot > a {
    display: flex;
    justify-content: center;
  }
    .foot > p {
    display: flex;
    justify-content: center;
  }
    
}
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.