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

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

References

_topApre collegamenti ipertestuali nell'elemento parent assoluto
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<tfoot>Definisce il footer o sezione inferiore di una tabella.
classDefinisce una o più classi per elemento

Users

Log in to search for users

Explore

Find inspiration

Costruzione di tabella con html5

spiagge limitrofe

HTML con classi

Il mio primo sito

INFORMATICA - ESERCIZIO 1 RISOLTO

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