Coming Soon Page. Uses Font Awesome for Social icons.
A Pen by Stan Williams on CodePen.
Coming Soon Page. Uses Font Awesome for Social icons.
A Pen by Stan Williams on CodePen.
<html lang="en" class="no-js"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Coming Soon!</title> | |
</head> | |
<body> | |
<div class="container-fluid blok1"> | |
<div class="container"> | |
<h1> | |
<span class="wrap"> | |
<span class="inner">We Are Launching Soon!</span> | |
</span> | |
</h1> | |
<h1> | |
<span class="wrap"> | |
<span class="inner">Follow Us To Get Notified! | |
</span> | |
</span> | |
</h1> | |
<h1> | |
<span class="wrap"> | |
<span class="inner"> | |
<a class="twitter" href="https://twitter.com/"><i class="fa fa-twitter"></i></a> | |
<a class="facebook" href="https://facebook.com/"><i class="fa fa-facebook"></i></a> | |
<a class="send" href="mailto:"><i class="fa fa-envelope-square"></i></a> | |
</span> | |
</span> | |
</h1> | |
</div> | |
</body> | |
</html> |
@import url(https://fonts.googleapis.com/css?family=Palantino:400,500,700); | |
*, | |
*:after, | |
*:before { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
h1 { | |
width: 500px; | |
font: bold 36px sans-serif; | |
font-family: 'Palantino', sans-serif; | |
letter-spacing: -1px; | |
color: #fff; | |
} | |
.container { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
bottom: auto; | |
right: auto; | |
-webkit-transform: translateX(-50%) translateY(-50%); | |
-moz-transform: translateX(-50%) translateY(-50%); | |
-ms-transform: translateX(-50%) translateY(-50%); | |
-o-transform: translateX(-50%) translateY(-50%); | |
transform: translateX(-50%) translateY(-50%); | |
} | |
.inner { | |
background: transparety; | |
position: relative; | |
padding: 7px; | |
text-transform: uppercase; | |
} | |
a.twitter { | |
font-family: 'social'; | |
font-size: 36px; | |
color: #22abf3; | |
text-decoration: none; | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
margin-right: 3%; | |
} | |
a.twitter:hover { | |
color: #cc2222; | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
} | |
a.facebook { | |
font-family: 'social'; | |
font-size: 36px; | |
color: #3b5998; | |
text-decoration: none; | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
margin-right: 3%; | |
} | |
a.facebook:hover { | |
color: #cc2222; | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
} | |
a.send { | |
font-family: 'social'; | |
font-size: 36px; | |
color: #b9804b; | |
text-decoration: none; | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
margin-right: 3%; | |
} | |
a.send:hover { | |
color: #cc2222; | |
-webkit-transition: all .3s ease; | |
-moz-transition: all .3s ease; | |
transition: all .3s ease; | |
} | |
html, body { | |
height: 100%; | |
width: 100%; | |
} | |
.blok1 { | |
height: 100%; | |
background-image: url(https://swsitedesign.com/wp-content/uploads/2018/09/bg_blogger-336371_4-web-100kb.jpg); | |
background-position: center center; | |
background-size: cover; | |
} | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> |