project-freecodecamp.org by @giorgio-g97 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<label>Mostrare un testo di etichetta per un elemento di input.
<object>Incorpora risorse varie nella pagina web.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
_parentApre collegamenti ipertestuali nell'elemento genitore
<pre>Indica una parte di testo preformattato
<iframe>Crea un frame all'interno di una pagina HTML.

Users

Log in to search for users

Explore

Find inspiration

Orologio analogico

Scheda Tecnica Honor Magic 6 Pro

FORM PROF DA PROVARE

Indice di un libro (es in classe)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/10ff9e7e6b.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header id="header">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="logo-image" />
      <nav id="nav-bar">
      <a class="nav-link" href="#features">Features</a>
      <a class="nav-link" href="#video">How it works</a>
      <a class="nav-link" href="#price">Pricing</a>
      </nav>
    </header>
    <section id="hero">
      <h2>Iscriviti</h2>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input name="email" id="email" placeholder="insert here your mail" type="email">
        <input id="submit" class="btn" type="submit" value="ISCRIVITI ORA">
      </form>
    </section>
    <main id="main-page">
      <div id="features">
        <ul>
          <li>
            <div class="icon">
            <i class="fa-solid fa-fire-flame-curved"></i>
            </div>
            <div class="desc">
            <h2>Premium Materials</h2>
            <p> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase. </p>
          </div>
          </li>
          <li>
            <div class="icon">
            <i class="fa-solid fa-truck-fast"></i>
          </div>
            <div class="desc">
            <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>
          </li>
          <li>
            <div class="icon">
            <i class="fa-solid fa-battery-full"></i>
          </div>
            <div class="desc">
            <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>
          </li>
        </ul>
      </div>
    </main>
    <div id="video">
    <iframe width="560" height="315" src="https://cdn.coverr.co/videos/coverr-swimming-pool-5823/1080p.mp4" id="video" autoplay muted></iframe>  
    </div>
    <div id="price">
      <div class="price-rect" id="flauto">
      	<div class="title">Flauto</div>
        <h2>€600</h2>
        <ol>
          <li>Lorem</li>
          <li>Ipsum</li>
          <li>dolor</li>
        </ol>
        <input type="submit" class="price-btn" value="Scegli">
      </div>
      <div class="price-rect" id="trombetta">
      <div class="title">Trombetta</div>
        <h2>€700</h2>
        <ol>
          <li>Lorem</li>
          <li>Ipsum</li>
          <li>dolor</li>
        </ol>
        <input type="submit" class="price-btn" value="Scegli">
      </div>
      <div class="price-rect" id="trombone">
        <div class="title">Trombone</div>
        <h2>€850</h2>
        <ol>
          <li>Lorem</li>
          <li>Ipsum</li>
          <li>dolor</li>
        </ol>
        <input type="submit" class="price-btn" value="Scegli">
      </div>
    </div>
    <footer>
      <ul>
        <li>Privacy</li>
        <li>Terms</li>
        <li>Contact</li>
      </ul>
      <span>Copywright 2023, Original Trombones</span>
    </footer>
  </body>
</html>

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

#header {
  top: 0;
  position: fixed;
  background-color: #eee;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header-img {
  width: 40%;
}

#nav-bar {
  font-weight: 400;
  font-size: 1.3rem;
  width: 35vw;
  display: flex;
  justify-content: space-around;
}

#nav-bar a {
  text-decoration: none;
  color: #023047;
}

#hero {    
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}

#form {
  display:flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.btn {
  background-color: darkorange;
  width: 150px;
  height: 30px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
}

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

#features {
  margin-top: 30px;
}

ul {
  list-style: none;
}

.icon {
  font-size: 3rem;
  display:flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  width: 20vw;
  color: darkorange;
}

li {
  display: flex;
}

.desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 125px;
  width: 80vw;
  padding: 5px;
}

#video {
  display: flex;
  justify-content: center;
}

#price {
  margin-top: 260px;
  display: flex;
  justify-content: center;
}

.price-rect {
  width: 25vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 1px black;
  border-radius: 3px;
  margin: 10px;
}

.title {
  padding: 15px 0px;
  text-transform: uppercase;
  text-align: center;
  color: black;
  background-color: #ddd;
  width: 100%;
}

.price-rect h2 {
  margin-top: 15px;
}

.price-rect ol {
  margin: 15px 0;
}

.price-btn {
  background-color: darkorange;
  color: black;
  font-weight: 600;
  width: 60%;
  height: 40px;
  border: none;
  border-radius: 5px;
  margin: 20px;
}

footer {
  padding: 15px 0;
  width: 100%;
  background-color: #ddd;
  height: 80px;
}

footer ul {
  display: flex;
  justify-content: flex-end;
}

footer ul li {
  margin: 0px 10px;
}

footer span {
  margin-top: 5px;
  display: flex;
  justify-content: end;
}