A caso by @Sylviapedron - Codewith.it

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

References

controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<h2>Titolo di intestazione di secondo livello
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<meta>Definisce i meta dati di una pagina web.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.

Users

Log in to search for users

Explore

Find inspiration

POESIA UNA AL GIORNO

SEMI al FUTURO [Immagine Home]

JS Elementi del linguaggio es3

Introduzione all programm

X-Dsigner (Blu Eletric)– Web & U

Esercizio gatto

Primo esercizio in classe

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>
<!--commento di silvia -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - CSS only order process steps</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class='progress'>
  <div class='progress_inner'>
    <div class='progress_inner__step'>
      <label for='step-1'>Genesi</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-2'>La neve</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-3'>La svolta</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-4'>Un nuovo inizio</label>
    </div>
    <div class='progress_inner__step'>
      <label for='step-5'>I nostri cardini</label>
    </div>
    <input checked='checked' id='step-1' name='step' type='radio'>
    <input id='step-2' name='step' type='radio'>
    <input id='step-3' name='step' type='radio'>
    <input id='step-4' name='step' type='radio'>
    <input id='step-5' name='step' type='radio'>
    <div class='progress_inner__bar'></div>
    <div class='progress_inner__bar--set'></div>
    <div class='progress_inner__tabs'>
      <div class='tab tab-0'>
        <h1>Genesi</h1>
		<p>All’origine vi furono gli esperimenti dell’uomo che non fermarono il riscaldamento globale...</p>
      </div>
      <div class='tab tab-1'>
        <h1>La neve</h1>
		<p>In pochissimo ci ritrovammo ricoperti dalla neve come in un incubo spielberghiano, da cui temevano di non uscirne mai più...</p>
	  </div>
      <div class='tab tab-2'>
        <h1>La svolta</h1>
		<p>Da allora riuscimmo ad adattarci alla nuova forma di vita creatasi e finalmente all’alba del 2031 vediamo la luce...</p>
      </div>
      <div class='tab tab-3'>
        <h1>Un nuovo inizio</h1>
		<p>Abbiamo creato una società democratica e civile all’interno del nostro mezzo di trasposporto...</p>
      </div>
      <div class='tab tab-4'>
        <h1>I nostri cardini</h1>
		<p>Che tutela e protegge le minoranze ed è in grado di auto-alimenentarsi grazie all’innovazione della scienza.</p>
      </div>
    </div>
</div>
</body>
</html>

@import url("https://fonts.googleapis.com/css?family=Nunito:400,900");
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base, body .progress_inner #step-5:checked + div + div + div + div > .box_base, body .progress_inner #step-4:checked + input + div + div + div + div > .box_base, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base {
  top: 50%;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
  top: -30px;
  left: 0px;
  opacity: 0;
}

body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid, body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
  top: -20px;
  left: 0px;
  opacity: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
  top: -10px;
  left: 0px;
  opacity: 1;
}

body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
  top: 10px;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid, body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
  top: -1px;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon, body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
  top: 70%;
  left: 0px;
  opacity: 0;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow, body .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow {
  top: 0px;
  left: 0px;
  opacity: 0;
}

body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon {
  top: 50%;
  left: 0px;
  opacity: 1;
}
body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow, body .progress_inner #step-5:checked + div + div + div + div > .box_bow {
  top: -10px;
  left: 0px;
  opacity: 1;
}

body .progress_inner #step-5:checked + div + div + div + div > .box_tag {
  top: 10px;
  left: 20px;
  opacity: 1;
}
body .progress_inner #step-5:checked + div + div + div + div > .box_string {
  top: 10px;
  left: 20px;
  opacity: 1;
}

* {
  box-sizing: border-box;
}

body .progress_inner__status .box_string, body .progress_inner__status .box_tag, body .progress_inner__status .box_bow__right, body .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow, body .progress_inner__status .box_ribbon, body .progress_inner__status .box_item, body .progress_inner__status .box_base, body .progress_inner, body .progress_inner__step:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}

body .progress_inner__bar--set, body .progress_inner__bar {
  height: 6px;
  left: 10%;
  background: repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
  transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
  border-radius: 6px;
  width: 0;
  position: relative;
  z-index: -1;
}

body .progress_inner__step:before {
  width: 30px;
  height: 30px;
  color: #70afd0;
  background: white;
  line-height: 30px;
  border: 3px solid #a6cde2;
  font-size: 12px;
  top: 3px;
  border-radius: 100%;
  transition: all 0.4s;
  cursor: pointer;
  pointer-events: none;
}

body .progress_inner__step {
  width: 20%;
  font-size: 14px;
  padding: 0 10px;
  transition: all 0.4s;
  float: left;
  text-align: center;
  position: relative;
}
body .progress_inner__step label {
  padding-top: 50px;
  top: -20px;
  display: block;
  position: relative;
  cursor: pointer;
}
body .progress_inner__step:hover {
  color: white;
}
body .progress_inner__step:hover:before {
  color: white;
  background: #1ea4ec;
}

body {
  font-family: "Nunito", sans-serif;
  background: #a6cde2;
  color: #2e6c8e;
  text-align: center;
  font-weight: 900;
}
body .progress_inner {
  height: 200px;
  width: 700px;
}
body .progress_inner #step-5:checked + div {
  width: 80%;
}
body .progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-5:checked + div + div + div + div {
  right: 10%;
}
body .progress_inner #step-4:checked + input + div {
  width: 60%;
}
body .progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-4:checked + input + div + div + div + div {
  right: 30%;
}
body .progress_inner #step-3:checked + input + input + div {
  width: 40%;
}
body .progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-3:checked + input + input + div + div + div + div {
  right: 50%;
}
body .progress_inner #step-2:checked + input + input + input + div {
  width: 20%;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-2:checked + input + input + input + div + div + div + div {
  right: 70%;
}
body .progress_inner #step-1:checked + input + input + input + input + div {
  width: 0%;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
  opacity: 1;
  top: 0;
}
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
  right: 90%;
}
body .progress_inner__step:nth-of-type(1):before {
  content: url(Icone/book2.png);
}
body .progress_inner__step:nth-of-type(2):before {
  content: url(Icone/snow.png);
}
body .progress_inner__step:nth-of-type(3):before {
  content: url(Icone/svolta.png);
}
body .progress_inner__step:nth-of-type(4):before {
  content: url(Icone/gruppo2.png);
}
body .progress_inner__step:nth-of-type(5):before {
  content: url(Icone/v.png);
}
body .progress_inner__bar--set {
  width: 80%;
  top: -6px;
  background: #70afd0;
  position: relative;
  z-index: -2;
}
body .progress_inner__tabs .tab {
  opacity: 0;
  position: absolute;
  top: 40px;
  text-align: center;
  margin-top: 80px;
  box-shadow: 0px 2px 1px #80b7d5;
  padding: 30px;
  background: white;
  border-radius: 10px;
  transition: all 0.2s;
}

body .progress_inner__tabs .tab h1 {
  margin: 0;
}
body .progress_inner__tabs .tab p {
  font-weight: 400;
  opacity: 0.8;
}
body .progress_inner__status {
  width: 40px;
  height: 40px;
  top: -80px;
  transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
  transform: translateX(50%);
  position: absolute;
}
body .progress_inner__status div {
  opacity: 0;
  transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
  transition-delay: 300ms;
}
body .progress_inner__status div {
  position: absolute;
}
body .progress_inner__status .box_base {
  background: repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
  width: 36px;
  height: 40px;
  z-index: 1;
  border-radius: 1px;
}

body .progress_inner input[type=radio] {
  display: none;
}