<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" herf="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"> <div class="wrapper"> <div class="card"> <span><i class="fas fa-info"></i></span> <h1>Hi</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, libero explicabo similique eius minus at nam ipsa assumenda aliquid necessitatibus! </p> </div> </div>

body{ padding: 0px; margin: 0px; height:100vh; font-family: 'Lato'; background-color: #dadada; } .wrapper{ position: relative; top:50%; left:50%; width: 20em; transform: translate(-50%,-50%); display: block; color: #fff; } .card{ padding: 1em; background-color: #f0645e; width:300px; clip-path: circle(8% at 93% 16%); transition: all .5s ease-in-out; cursor: pointer; } .card:hover{ clip-path: circle(75%); background-color: #00979c; } .card span{ float: right; transition: all .5s; position: relative; margin-right: 3px; } .card h1{ margin: 0px; } .card p{ white-space: pre-line; padding: 0px; margin: 0px; } /* footer */ footer { background-color: #222; color: #fff; font-size: 14px; bottom: 0; position: fixed; left: 0; right: 0; text-align: center; z-index: 999; } footer p { margin: 10px 0; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } footer .fa-heart{ color: red; } footer .fa-instagram{ color: #f0007c; } fotter .fa-linkedin{ color:#0073b1; } footer .fa-codepen{ color:#fff } footer a { color: #3c97bf; text-decoration: none; } /* footer */ /* youtubeButton */ .youtubeBtn{ position:fixed; left:50%; bottom:45px; cursor:pointer; transition:all .3s; vertical-align:middle; transform:translateX(-50%); text-align: center; outline:none; } .youtubeBtn i{ font-size:30px; } .youtubeBtn a{ color:#ff0000; text-shadow: 0px 2px 5px rgba(0,0,0,.5); animation: youtubeAnim 1000ms steps(20) infinite normal; } .youtubeBtn a:hover{ color:#c9110f; transition:all .3s; text-shadow: none; } .youtubeBtn i:active{ transform:scale(.9); transition:all .3s; } .youtubeBtn span{ font-family: 'Lato'; font-weight:100; color:#000; display:block; font-size:12px; } @keyframes youtubeAnim{ 0%{ color:#c9110f; } 100%{ color:#ff0000; } }