Sito by @gpl97 - Codewith.it

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

References

<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
titleIndica informazioni aggiuntive riguardo un elemento HTML
animationDefinisce i parametri dell'animazione di un elemento o selettore
<head>Tag primario di un documento HTML
<abbr>Inserisce abbreviazioni e acronimi
<b>Formatta il testo in grassetto

Users

Log in to search for users

Explore

Find inspiration

Blocco visualizzazione PC

sanchez ximena html 3

Indovina il Numero - Gioco

Adobe PDF Shared 4

ex informatica 2

Esercitazione n. 1(2)

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