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

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

Referenze

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<tbody>Definisce il contenuto principale di una tabella.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<title>Definisce il titolo della pagina web.
<hr>Inserisce una linea orizzontale
<input>Definisce un area di input per l'invio di dati e informazioni

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione n. 1

Banner cercatutto

Review of Functions I

Navbar Example 2

Eleganza Gioielli (Ufficiale)

Heads Or Tails Random Tally

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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;
}