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

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

Referenze

enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
<tr>Definisce le righe di una tabella (rows)
<object>Incorpora risorse varie nella pagina web.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
downloadConsente di scaricare file al click di collegamento ipertestuale.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Array of Colors

Nuovo sito travel

I Nostri Servizi

schwebish gemund

il museo di leonardo

Esercitazione 1

prova museo (2)

Costruzione di tabella con html5

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