Taught by Tina May
In this practical activity, we’re going to build three variations of a simple splash page, all using the same HTML.
Our HTML:
<div class="capped-width">
<h1> I'm Tina May </h1>
<h2> I help entrepreneurs and marketers get online with beautiful, <a href="#"> responsive websites.</a> </h2>
<nav>
<a href="#"> Facebook <span> ⤏ </span> </a>
<a href="#"> Instagram <span> ⤏ </span> </a>
<a href="#"> LinkedIn <span> ⤏ </span> </a>
</nav>
</div>
And our CSS:
/*
font-family: 'Merriweather', serif;
font-family: 'Source Sans Pro', sans-serif;
*/
* {
padding: 0;
margin:0;
box-sizing: border-box;
}
body {
padding: 5%;
background-color: #ff6b6b;
font-family: 'Merriweather', serif;
color: white;
min-height: 100vh;
display: flex;
align-items: center;
}
.capped-width {
max-width: 600px;
}
h1 {
font-weight: 300;
font-size: 3rem;
margin-bottom: 0.5rem;
}
h2 {
font-weight: 300;
margin-bottom: 1rem;
}
a {
color: inherit;
}
nav a {
display: inline-block;
padding-top: 1rem;
padding-right: 1rem;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
a:hover {
color: orange;
}
a span {
padding-left: 0.4rem;
}
You can choose a gradient from uiGradients.com and then apply it to the body. You can keep this as to left or to right but you can also change it diagonally like to top right.
background: #fdc830;
background: -webkit-linear-gradient(to left top, #fdc830, #f37335);
background: linear-gradient(to left top, #fdc830, #f37335);
Then we’ll also add some icons from FontAwesome. First, let’s add the icon library in the Settings > Stuff for <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
And we’ll replace our text links with icons.
<a href="#"> <i class="fab fa-facebook"></i> </a>
<a href="#"> <i class="fab fa-instagram"></i> </a>
<a href="#"> <i class="fab fa-linkedin-in"></i> </a>
And we’ll style them.
.fab {
font-size: 1.5rem;
}
You can search for patterns on Toptal here.
body {
background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/dark-honeycomb.png');
}
Have a go for yourself and let us know how you go creating your own splash page via our instagram DMs or live chat!