<h1>Sharing Bar</h1>
<p class="zoom-area"><b>CSS</b> for sharing bar. </p>
<section class="mobile-container">
  <p>Sample text: Here is a new SiloMag, the section that we bring you from Silo Creativo every two weeks, and where we share the latest news, resources and articles that we have found most interesting about graphic design, web design and WordPress.</p>
  <p>And in this SiloMag, about <b>graphic design</b>, we will see how we can improve our infographics, a magnificent collection of initials, and <b>the redesign of some icons that you are sure are very familiar to you.</b> On web design, we have a special source for UI, a very curious way to learn the properties of Flexbox, and a tool that facilitates the creation of animations on the web. </p>

  <aside class="social-sharing">
		<ul class="menu-social">
			<li class="social-item"><a href="http://twitter.com/intent/tweet?text=SiloCreativo&url=https://www.silocreativo.com/en/" target="_blank"><span class="screen-reader-text">Twitter</span></a></li>
			<li class="social-item"><a href="http://www.facebook.com/sharer.php?u=https://www.silocreativo.com/en/&t=SiloCreativo" target="_blank"><span class="screen-reader-text">Facebook</span></a></li>
			<li class="social-item"><a href="https://www.pinterest.com/pin/find/?url=https://www.silocreativo.com/en/" target="_blank"><span class="screen-reader-text">Pinterest</span></a></li>
			<li class="social-item"><a href="whatsapp://send?text=https://www.silocreativo.com/en/" data-action="share/whatsapp/share"><span class="screen-reader-text">Whatsapp</span></a></li>
			<li class="social-item newsletter"><span>Newsletter</span></li>
      <li class="social-item next"><a href="#">Next</a></li>
		</ul>
	</aside><!-- .social-sharing -->
</section><!-- .mobile-conteiner -->
<div class="link-container">
  <a target="_blank" href="https://www.silocreativo.com/en/create-floating-social-bar-html-css3/" class="more-link">Visit the original article</a>
</div>

.mobile-container {
  border-top: 2em solid rgba(230, 230, 230, 0.7);
  box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.4);
  position: relative;
  border-radius: 3px 3px 0 0;
  width: 600px;
  height: 320px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
}
.mobile-container:before {
  display: block;
  position: absolute;
  content: '';
  top: -1.25em;
  left: 1em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background-color: #f44;
  box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}
.mobile-container:after {
  display: block;
  position: absolute;
  content: '';
  top: -1.6em;
  left: 5.5em;
  width: calc(100% - 6em);
  height: 1.2em;
  border-radius: 2px;
  background-color: white;
}
.mobile-container p {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
}
.social-sharing {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

.social-sharing ul.menu-social {
	list-style: none;
	text-align: center;
	margin: 0;
	padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrapwrap;
  flex-wrap: nowrap;
}

.social-sharing ul.menu-social li {
	flex: 0 1 40px;
  height: 40px;
}
.social-sharing ul.menu-social li.newsletter {
	flex: 1 1 auto;
  line-height: 40px;
  position: relative;
  background-color: #fafafa;
  background-image: repeating-linear-gradient(135deg, #ffe4e1 0px, #ffe4e1 5px, transparent 5px, transparent 10px, #e1f3ff 10px, #e1f3ff 15px, transparent 15px, transparent 20px);
/*   background-image: repeating-linear-gradient(135deg, #f9c1bb 0px, #f9c1bb 5px, transparent 5px, transparent 10px, #9fc6e6 10px, #9fc6e6 15px, transparent 15px, transparent 20px); */
}
.social-sharing ul.menu-social li.next {
	flex: 1 1 auto;
}

.social-sharing ul.menu-social li a {
  display: block;
	color: #fff;
  text-decoration: none;
  width: 100%;
  height: 100%;
  line-height: 40px;
}

ul.menu-social li a[href*="facebook.com"] {
	background-color: #42c0f9;
}
ul.menu-social li a[href*="twitter.com"] {
	background-color: #43d2e4;
}
ul.menu-social li a[href*="pinterest.com"] {
	background-color: #ff7e56;
}
ul.menu-social li a[href*="whatsapp://send"] {
	background-color: #a8d673;
}
.social-sharing ul.menu-social li.newsletter span {
  color: #807F7F;
  display: inline-block;
  cursor: pointer;
}
/* .social-sharing ul.menu-social li.newsletter:after, 
.social-sharing ul.menu-social li.newsletter:before {
    content: '';
    width: 100%;
    height: 5px;
    display: block;
  position: absolute;
  left: 0;
    background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 5px, transparent 5px, transparent 10px, #83B3DB 10px, #84ADCB 15px, transparent 15px, transparent 20px);
}
.social-sharing ul.menu-social li.newsletter:before {
  top: 0;
}
.social-sharing ul.menu-social li.newsletter:after {
  bottom: 0;
} */
.social-sharing ul.menu-social li.next a {
  color: #807F7F;
  background-color: #ffecb8;
}

ul.menu-social li a::before {
	content: "\f135";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 20px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  line-height: 40px;
}
ul.menu-social li a[href*="facebook.com"]::before {
	content: "\f09a";
}
ul.menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}
ul.menu-social li a[href*="pinterest.com"]::before {
	content: "\f231";
}
ul.menu-social li a[href*="whatsapp://send"]::before {
	content: "\f232";
}

.social-sharing ul.menu-social li.next a::before {
	content: none;
}

.screen-reader-text {
	position: absolute;
	top: -9999em;
	left: -9999em;
}

/* demo stuff */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  background-color: #f1f1f1;
  margin-bottom: 50px;
}
html, button, input, select, textarea {
    font-family: 'Work Sans', Helvetica, sans-serif;
    color: #92a4ad;
}
h1 {
  text-align: center;
  margin: 30px 15px;
}
.zoom-area { 
  max-width: 490px;
  margin: 30px auto 30px;
  font-size: 19px;
  text-align: center;
}
.link-container {
  text-align: center;
}
a.more-link {
  text-transform: uppercase;
  font-size: 13px;
    background-color: transparent;
    padding: 10px 15px;
    border-radius: 0;
    color: #416475;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    text-decoration: none;
  margin-top: 50px;
  letter-spacing: 1px;
  border: 1px solid #ccc;
}

// Nothing to do here