Round+ - social bar by @Codewith.it - Codewith.it

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

Referenze

<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
<title>Definisce il titolo della pagina web.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
relServe a definire la relazione tra il documento e una risorsa.
<iframe>Crea un frame all'interno di una pagina HTML.
srcIndica la provenienza di una risorsa esterna (tramite URL).

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

round - social bar

Jb Gradebook(2)

Custom JS alert box

Quiz ristrutturazione

JEANSON ANCHETA

Introduzione all programm

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>
<html>
  <head>
    <title>Social bar
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
  </head>
  <body>
    <div class="text">
      <p>
        Nascetur ridiculus, fermentum mon sagittis giacal magna praesent litora madres consequat sociosqu metus quam placerat volutpat giacal aliquam bibendum leo madres in trevai neque sit varius lobortis venenatis mauris sagittis vehicula interdum sem veiner nunc quis pharetra integer tristique . id vitae praesent purus fusce tempor dapibus laoreet elit quis ante tempor pharetra eros prie cubilia eu malesuada ambus ad pellentesque laoreet nisi suscipit quisque et leo ac lectus luctus tortor vulputate finibus erat aqua aqua ligula vitae metus et turpis post rhoncus morbi quisque habitant sed pellentesque et vitae dictum augue curae vivamus habitasse aquitrinum ridiculus.
      </p>
      <p>Donec sed torquent tristique et arcu lacinia consequat ac at pulvinar libero odio lameri dolor elit vestibulum pellentesque consectetur enim inceptos et sed torquent et gravida turpis lectus ac at justo auctor consectetur napel mollis nibh volutpat integer et ess lameri mon alon suspendisse libero velit habitasse sapien vitae et . romani lercius porta romani dignissim dictum alon etiam vine sem mattis rubus aenean varius non et phasellus nisl vulputate sit varius ess dapibus ullamcorper luctus madres curae condimentum id trevai iaculis lameri sagittis nibh elit suspendisse id Sed commodo sit in pellentesque Sed ut sed Sed ante donec cras elit alon sit
      </p>
      <p>
        Nascetur ridiculus, fermentum mon sagittis giacal magna praesent litora madres consequat sociosqu metus quam placerat volutpat giacal aliquam bibendum leo madres in trevai neque sit varius lobortis venenatis mauris sagittis vehicula interdum sem veiner nunc quis pharetra integer tristique . id vitae praesent purus fusce tempor dapibus laoreet elit quis ante tempor pharetra eros prie cubilia eu malesuada ambus ad pellentesque laoreet nisi suscipit quisque et leo ac lectus luctus tortor vulputate finibus erat aqua aqua ligula vitae metus et turpis post rhoncus morbi quisque habitant sed pellentesque et vitae dictum augue curae vivamus habitasse aquitrinum ridiculus.
      </p>
      <p>Donec sed torquent tristique et arcu lacinia consequat ac at pulvinar libero odio lameri dolor elit vestibulum pellentesque consectetur enim inceptos et sed torquent et gravida turpis lectus ac at justo auctor consectetur napel mollis nibh volutpat integer et ess lameri mon alon suspendisse libero velit habitasse sapien vitae et . romani lercius porta romani dignissim dictum alon etiam vine sem mattis rubus aenean varius non et phasellus nisl vulputate sit varius ess dapibus ullamcorper luctus madres curae condimentum id trevai iaculis lameri sagittis nibh elit suspendisse id Sed commodo sit in pellentesque Sed ut sed Sed ante donec cras elit alon sit
      </p>
    </div>
    <div id="social-bar">
      <a href="#" class="facebook"> 
        <i class="fa-brands fa-facebook">
        </i>
      </a>
      <a href="#"class="instagram"> 
        <i class="fa-brands fa-instagram">
        </i>
      </a>
      <a href="#"class="twitter"> 
        <i class="fa-brands fa-twitter">
        </i>
      </a>
      <a href="#"class="youtube"> 
        <i class="fa-brands fa-youtube">
        </i>
      </a>
      <a href="#"class="linkedin"> 
        <i class="fa-brands fa-linkedin">
        </i>
      </a> 
      <a href="#"class="email"> 
        <i class="fas fa-envelope">
        </i>
      </a>
    </div>
  </body>
</html>

.text{
  padding:20px 10%;
}
#social-bar {
  position: fixed;
  top:0;
  bottom:0;
  margin:auto;
  left:0;
  height:-webkit-fit-content;
  height:-moz-fit-content;
  height:fit-content;
}
#social-bar a {
  display: block;
  text-align: center;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding:12px;
  font-size: 22px;
  text-decoration:none;
  color: white;
  border-radius:25px;
  margin-bottom:2px;
}
#social-bar a:hover {
  border-radius:15px;
  opacity:0.8;
  transform: rotate(-25deg);
}
.facebook {
  background: #3B5998;
}
.twitter {
  background: #55ACEE;
}
.linkedin {
  background: #3985DD;
}
.instagram {
  background: #dd2a7b;
}
.youtube {
  background: #bb0000;
}
.email {
  background: #6F6F6F;
}
@media screen and (max-width:700px){
  #social-bar a {
    padding:8px;
  }
}