HTML reset copy

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="sticky"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> <a href="#" class="instagram"><i class="fa fa-instagram"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="print"><i class="fa fa-print"></i></a> </div> <div class="text"> <p>text....</p> </div>

CSS reset copy

body {margin:0;height:2000px;} .sticky { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .sticky a { display: block; text-align: center; padding: 16px; transition: all 0.3s ease; color: white; font-size: 20px; } .sticky a:hover { background-color: #000; } .facebook { background: #3B5998; color: white; } .twitter { background: #007FFF; color: #fff; } .instagram { background: #833AB4; color: white; } .print { background: #cd7f32; color: white; } .youtube { background: #bb0000; color: white; } .text { margin-left: 75px; font-size: 30px; color: white; }