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

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

References

selectedPre-seleziona un elemento di input
disabledImpedisce la modifica di un input
maxImposta il valore numerico o temporale massimo per un elemento input
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Users

Log in to search for users

Explore

Find inspiration

Twitchpage3okok

Fotogallery SEMI al FUTURO

JS Strutture dati e funzioni es3

Map System using Leaflet

HTML con CSS esempio generale

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