Card by @glo-code - Codewith.it

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

Referenze

<em>Formatta il testo in corsivo/italico enfatizzato
<label>Mostrare un testo di etichetta per un elemento di input.
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<div>Crea contenitori generici o sezioni in una pagina

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

spese universitarie

Mova AI Generico

Éclat Couture - Alta Moda Artigia

terne pitagoriche

Curriculum vitae

Pagina di esempio

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>
<htlm>
 <head> 
<title>Cards</title>
</head> 
<body>
  <header>
<div class= "container">
  <div class="flex-items">Home</div>
  <div>
    <select class="box">
      <option class="">About</option>
    <option class="box1">My portafolio</option>
    <option class="box2">My new projects</option>
    <option class="box3">Future</option>
    </select>
  </div>
   <div class="flex-items">Contact</div>
  <form>
    <input id="loginbutton" type="button" value="Login">
  </form>
</div> 
    <h1 class="space">Code</h1>
  </header>
<div class= "cont">
<div class="flexx">
For personal account
</div>
<div class="flex-it">Free</div>
<div class="flex">0 /montly</div>
  <form>
    <input id="buttonn" type="button" value="Start free">
  </form>
  </div>
  <div class="secondcard">
    <div class="account">For business account</div>
    <div class="service">$20</div>
    <div class="secondservice">/Monthly subscription</div>
  <form action="" method="get">
    <input id="subscription" type="button" value="Add to cart">
    <input id="terms" type="checkbox" required target="blanck">
    <span>Accept the terms of conditions</span>
  </form>
  </div>
  <div class="threecard">
    <div class="Business"> For business account </div>
    <div class="Money">$50</div>
    <div class="Year">/Annual subscription</div>
    <form>
      <input id="buttonstop" type="button" value="Add to cart">
    </form>
  </div>
    </div>
  </div>
<footer></footer>
  </body>
</htlm>

*
body{
box-sizing:border-box;
  overflow:scroll;
}
.container{
  display:flex;
  background-color:white;
  flex-direction:row;
  justify-content:center;
  gap:30px;
  width:300px;
  position:fixed;
  right:400px;
  font-size:20px;
}
.cont{
  display:flex;
  background-color:white;
  flex-direction:column;
  padding:50px;
  margin-top:50px;
  width:100px;
  height:200px;
  border:3px solid black;
  border-radius:5px;
  margin:50px;
  background:rgb(0,125,255);
  background:linear-gradient(90deg,rgba(0,127,255)5%,rgba(50,127,200)20%,rgba(34,74,89)80%);
  position:absolute;
  left:150px;
}
.flex-it{
  font-size:30px;
  text-align:center;
  font-weight:bold;
}
.flex{
  padding:10px;
  text-align:center;
}
.flexx{
 font-size:10px;
  margin-bottom:30px;
  margin-top:-30px;
  margin-left:-30px;
}
#buttonn{
 width:100px;
  border-radius:15px;
  margin-top:20px;
  font-size:12px;
  border-bottom-color:black;
}
#loginbutton{
  width:80px;
  padding:50px;
  position:absolute;
  right:-200px;
  font-size:12px;
  }
.secondcard{
  display:flex;
  flex-direction:column;
  background-color:white;
  padding:50px;
  margin-left:500px;
  height:350px;
  width:200px;
  border:3px solid black;
  margin-top:50px;
  box-sizing:border-box;
  gap:20px;
  box-shadow:1px 1px black;
}
.service{
padding:20px;
  width:40px;
  font-size:30px;
  height:30px;
  font-weight:bold;
}
.secondservice{
  margin-top:-30px;
  margin-left:20px;
}
.account{
font-size:15px;
  margin-top:-15px;
  margin-left:-10px;
  justify-content:space-between;
}
#terms{
margin-top:35px;
  width:15px;
  margin-left:-20px;
}
#subscription{
font-size:15px;
  border:2px solid black;
  border-radius:2px;
  transition-duration:0.4s;
  cursor:pointer;
}
#subscription:hover{
background:linear-gradient(90deg, rgb(0,50,80,0.5)10%, rgb(0,10,100,0.5)40%, rgb(0,30,50,0.5)20%);
}
span{
  font-size:13px;
}
.threecard{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  width:100px;
  padding:50px;
  height:200px;
  border:3px solid black;
  border-radius:3px; 
  margin-left:800px;
  margin-top:-350px;
  background:linear-gradient(90deg,rgb(20,70,95   )10%,rgb(30,40,70)10%,rgb(10,70,80)10%,rgb(50,100,200)80%); 
  opacity:0.9;
}
.Business{
margin-top:-10px;
  font-size:15px;
}
.Money{
  margin-top:50px;
  font-weight:bold;
  font-size:30px;
  text-align:center;
  margin-right:30px;
}
.Year{
 text-align:center;
 font-size:15px;
  margin-bottom:20px;
}
#buttonstop{
border-bottom:3px solid black;
 border-color:black;
  font-size:15px;
}
.space{
margin-bottom:80px;
  margin-top:50px;
  font-size:20px; 
  margin-left:100px;
}
header{
display:fixed;
  transition-duration:0.4s;
  cursor:pointer;
}
header:hover{
border-bottom:1px solid black; 
  opacity:0.5;
border-bottom-width:10px;

}
footer{
position:absolute;
bottom:500px;
}
.flex-items:hover{
  color:blue;
  animation-duration:4s;
  box-shadow:2px 4px blue;
}
.about:hover{
  color:blue;
  animation-duration:4s;
  box-shadow:2px 4px blue; 
  }
.box{
  background-color:rgb(255,255,255);
  border:1px solid black;
  margin-bottom:70px;
  width:80px;
  font-size:15px;
  margin-left:-20px;
  border:none;
  }
.box1{
  margin-bottom:5px;
  }
.box2{
  margin-bottom:5px;
}
.box3{
  margin-bottom:5px;
}
.box:hover{
  visibility:visible;

}