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

<body>
    <div class="wrapper">
        <div class="container">

            <header>
                <!-- <img id="header-img" src="https://image.freepik.com/free-vector/logo-with-outlined-guitar_1043-149.jpg"
                    alt="logo"> -->

                <img id="logo" src="https://img.icons8.com/cute-clipart/50/000000/rock-music.png" /><a href="#">
                    <h2>The Guitar</h2>
                </a>
                <nav>
                    <a href="#features">
                        <h3>Features</h3>
                    </a>
                    <a href="#guitar-video">
                        <h3>How it works</h3>
                    </a>
                    <a href="#price-menu">
                        <h3>Pricing</h3>
                    </a>
                </nav>
            </header>
            <section id="slogan">
                <h2>Handcrafted, home-made masterpieces</h2>
                <input type="email" name="email" id="get-started" placeholder="Enter your email"><br>
                <input type="submit" value="Get started" class="select">
            </section>

            <section id="features">

                <div class="features">
                    <div id="premium-material"><img src="https://img.icons8.com/nolan/96/best-seller.png" />
                        <h2>Premium Materials</h2>
                        <p>Our guitars use the shiniest brass which is sourced locally. This will increase the longevity
                            of your purchase.</p>
                    </div>
                    <div id="fast-shipping"><img src="https://img.icons8.com/fluent/96/000000/delivery.png" />
                        <h2>Fast Shipping</h2>
                        <p>We make sure you recieve your trombone as soon as we have finished making it. We also
                            provide free returns if you are not satisfied.</p>
                    </div>
                    <div id="quality-assurance">
                        <img src="https://img.icons8.com/color/96/000000/data-arrived.png" />
                        <h2>Quality Assurance
                        </h2>
                        <p>For every purchase you make, we will ensure there are no damages or faults and we will check
                            and
                            test the pitch of your instrument.</p>
                    </div>
                </div>
            </section>

            <div id="guitar-video">
                <video controls>
                    <source
                        src="https://player.vimeo.com/external/272251653.sd.mp4?s=f6b4f70e6e58d461722d877a048bd0bf43e74dd2&profile_id=164&oauth2_token_id=57447761"
                        type="video/mp4">
                    <source
                        src="https://player.vimeo.com/external/272251653.sd.mp4?s=f6b4f70e6e58d461722d877a048bd0bf43e74dd2&profile_id=164&oauth2_token_id=57447761"
                        type="video/ogg">
                </video>
            </div>
            <!-- <div id="price-menu"> -->
            <div class="price price1">
                <h2 class="guitar-name"> Acoustic Guitars</h2>
                <h3 class="guitar-price">600$</h3>
                <p class="about-guitar">An acoustic guitar is a musical instrument in the guitar family, that
                    projects the sounds of its
                    vibrating strings acoustically through the air.</p>
                <button class="select">Select</button>
            </div>
            <div class="price price2">
                <h2 class="guitar-name"> Eletric Guitars</h2>
                <h3 class="guitar-price">600$</h3>
                <p class="about-guitar">An electric guitar is a guitar that requires external amplification in order
                    to be heard at typical performance volumes. This is very popular..
                </p>
                <button class="select">Select</button>
            </div>
            <div class="price price3">
                <h2 class="guitar-name"> Bass Guitars</h2>
                <h3 class="guitar-price">600$</h3>
                <p class="about-guitar">The bass guitar, electric bass, or simply bass, is the lowest-pitched member
                    of the guitar family. It typically four to six strings or courses.</p>
                <button class="select">Select</button>
            </div>
            <!-- </div> -->
            <footer>
                <ul>
                    <li>Privacy</li>
                    <li>Terms</li>
                    <li>Contact</li>
                </ul>
                <span>&copy 2020 Original Guitar</span>
            </footer>

        </div>
    </div>
</body>
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
:root {
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrapper {
  /* margin: auto; */
}

body {
  font-family: "Lato", sans-serif;
  text-align: center;
  background-color: #eee;
  /* font-size: 30px; */
  /* margin: 1rem; */
}
.container {
/*   max-width: 1000px; */
  display: grid;
/*   margin: auto; */
  grid-template-columns: 1fr;
}

ul {
  list-style-type: none;
}
video {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: black;
}
a:hover {
  color: rgb(43, 38, 38);
}
p,
li {
  font-size: 1.1rem;
  text-align: center;
  padding: 0.5rem;
}
.price {
  border: 2px solid black;
  margin: 0.5rem auto auto auto;
  padding-bottom: 1rem;
  border-radius: 0.5rem;
  max-width: 300px;
  height: 350px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  /* padding: 0 3rem; */
}
.price h2 {
  padding: 1rem 3rem;
  margin-top: 0;
}
.guitar-name {
  background-color: #ddd;
  border-radius: inherit;
}
ul{
	list-style-type:none;
}

#get-started {
  width: 20rem;
  padding: 0.5rem;
  border: 2px solid #888;
  border-radius: 0.4rem;
}
::placeholder {
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
}
.select {
  padding: 0.25rem 1.5rem;
  margin-top: 0.4rem;
  border-radius: 0.4rem;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: inherit;
  cursor: pointer;
  border-style: outset;
  background-color: #f1c40f;
  text-transform: uppercase;
  /* border: 0; */
}
/* #price-menu {
  margin: auto;
} */

li {
  margin: auto;
}

.select:hover {
  transition-delay: 0.2s;
  background-color: #f0a500;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #eee;
  z-index: 1;
}

#slogan {
  margin-top: 16rem;
}

@media screen and (min-width: 53em) {
  .container {
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "header header header"
      "slogan slogan slogan"
      "features features features"
      "video video video"
      "price1 price2 price3"
      "footer footer footer";
  }

  header {
    grid-area: header;
  }
  .price1 {
    grid-area: price1;
  }
  .price2 {
    grid-area: price2;
  }
  footer {
    grid-area: footer;
  }
  .price3 {
    grid-area: price3;
  }
  #slogan {
    grid-area: slogan;
  }
  #features {
    grid-area: features;
  }
  #price-menu {
    grid-area: price-menu;
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-gap: 10px;
  }
  #guitar-video {
    grid-area: video;
  }
  nav,
  footer,
  ul {
    display: flex;
    justify-content: space-around;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.