Skip to content

Instantly share code, notes, and snippets.

@stanwmusic

stanwmusic/coming-soon-page-with-font-awesome-icons.markdown

Created September 1, 2018 10:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stanwmusic/03ea35fb4f43ef77f2f9842ac47e538b to your computer and use it in GitHub Desktop.
Save stanwmusic/03ea35fb4f43ef77f2f9842ac47e538b to your computer and use it in GitHub Desktop.
Download ZIP
Coming Soon Page with Font Awesome Icons
Raw
coming-soon-page-with-font-awesome-icons.markdown
Raw
index.html
<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>
Raw
style.css
@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 {
background-color: #000;
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;
}
@stanwmusic
Copy link
Author

Demo: https://codepen.io/Stanssongs/full/aaJvKb/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment