<!DOCTYPE html>
<html>
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Change ASEAN</title>
<meta name="description" content="Blog on Climate Change" />
<meta name="author" content="Ruvendren Gunasekeran, Sun Shu Qing Justina" />
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="style.css">
</head>
<body class="homepage">
<!-- Header
=================================================== -->
<header id="main-header">
<div class="header-inner">
<div class="logo">
<a href="">Change ASEAN.</a>
</div>
<nav id="nav-wrap">
<ul id="nav" class="nav">
<li class="current"><a href="">Home.</a></li>
<li><a href="">Stores.</a></li>
<li><a href="">Solutions.</a></li>
<li><a href="">About Us.</a></li>
<li><a href="">Volunteer With Us.</a></li>
</ul>
</nav> <!-- /nav-wrap -->
</div> <!-- /header-inner -->
</header>
<!-- Footer
================================================== -->
<footer></footer> <!-- /footer -->
</body>
</html>
// Code goes here
/* Body
---------------------------------------------------------------------- */
body {
background: #0e1015;
font: 15px/30px "merriweather-regular", serif;
font-weight: normal;
color: #0e1015;
}
/* Typography
--------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: "raleway-bold", sans-serif;
color: #252525;
font-style: normal;
text-rendering: optimizeLegibility;
margin: 18px 0 15px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit;
}
h1 {
font-size: 30px;
line-height: 36px;
margin-top: 0;
letter-spacing: -1px;
}
h2 {
font-size: 24px;
line-height: 30px;
}
h3 {
font-size: 20px;
line-height: 30px;
}
h4 {
font-size: 17px;
line-height: 30px;
}
h5 {
font-size: 14px;
line-height: 30px;
margin-top: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
h6 {
font-size: 13px;
line-height: 30px;
margin-top: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
p {
margin: 15px 0 15px 0;
}
p img {
margin: 0;
}
p.lead {
font: 17px/33px "merriweather-light", serif;
color: #707273;
}
strong, b {
font: 15px/30px "merriweather-bold", serif;
font-weight: normal;
}
small {
font-size: 11px;
line-height: inherit;
}
/* Lists
--------------------------------------------------------------------- */
ul {
margin-top: 15px;
margin-bottom: 15px;
}
ul {
list-style: disc;
margin-left: 17px;
}
/*
/* g. Header Styles
/* =================================================================== */
header {
height: 72px;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 990;
background: #0e1015;
text-align: center;
}
header .logo {
display: inline-block;
vertical-align: middle;
}
header .logo a {
margin: 0 20px 0 0;
width: 126px;
height: 12px;
font-family: "raleway-SemiBold", sans-serif;
text-decoration: none;
color: white;
font-size: 17px;
}
/* navigation
--------------------------------------------------------------------- */
/* nav-wrap */
#nav-wrap {
font: 11px "raleway-heavy", sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-block;
}
ul#nav li {
position: relative;
list-style: none;
height: 72px;
display: inline-block;
}
ul#nav li a {
display: inline-block;
padding: 17px 12px;
line-height: 38px;
text-decoration: none;
color: #c0cdd1;
}
ul#nav li a:hover {
color: white;
}
ul#nav li a:active {
background-color: transparent !important;
}
ul#nav li.current a {
background: #209907;
color: white;
}
/*
/* i. Footer Styles
/* =================================================================== */
footer {
padding-top: 36px;
padding-bottom: 42px;
font-size: 13px;
line-height: 24px;
position: relative;
color: #3C4142;
}
footer a, footer a:visited {
color: #a43b0a;
}
footer a:hover, footer a:focus {
color: white;
}
footer h3 {
font: 13px/24px "raleway-bold", sans-serif;
margin-bottom: 0;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
}
footer p {
margin: 12px 0;
}
footer .footer-about {
padding-right: 60px;
}
footer .right-cols .columns {
width: 50%;
word-wrap: break-word;
}
footer ul {
margin: 12px 0;
padding: 0;
list-style: none;
}
footer ul li {
margin: 0;
padding-left: 0;
line-height: 24px;
}
footer ul li a, footer ul li a:visited {
color: #3C4142;
}
footer .copyright {
margin: 0;
padding: 24px 18px 6px 18px;
clear: both;
}
/* back to top */
footer #go-top {
position: fixed;
bottom: 0;
right: 30px;
z-index: 900;
display: none;
}
footer #go-top a {
display: block;
padding: 12px 30px;
background: #d44d0d;
color: white;
text-align: center;
font: 12px/24px "raleway-heavy", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
footer #go-top a span {
margin-right: 10px;
}
footer #go-top a:hover {
background: #faec09;
color: #252525;
}