<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cardo:ital@1&family=Open+Sans:wght@700&family=Raleway:wght@400;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ActiveBox</title> </head> <body> <!--Header--> <header class="header"> <div class="container"> <div class="header__iner"> <div class="header__logo"> <img src="img/ActiveBox.png" alt="#"> </div> <nav class="nav"> <a class="nav__link" href="#" >Features</a> <a class="nav__link" href="#" >Works</a> <a class="nav__link" href="#" >Our Team</a> <a class="nav__link" href="#" >Testimonials</a> <a class="nav__link" href="#" >Download</a> </nav> </div> </div> </header> <!--Header--> <!--intro--> <div class="intro"> <div class="container"> <div class="intro__inner"> <h1 class="intro__title"> Your Favorite One Page Multi Purpose Template </h1> <h2 class="intro__subtitle"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magnavel scelerisque nisl consectetur et. </h2> <a class="btn btn--red" href="#">Find Out More</a> </div> </div> </div> <!--intro--> <!--features--> <div class="container"> <div class="features"> <div class="features__item"> <img class="features_icon" src="img/easily.png" alt="#"> <h4 class="features_title">Easily Customised</h4> <div class="features_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</div> </div> <div class="features__item"> <img class="features_icon" src="img/responcive.png" alt="#"> <h4 class="features_title">Responsive REady</h4> <div class="features_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</div> </div> <div class="features__item"> <img class="features_icon" src="img/modern.png" alt="#"> <h4 class="features_title">Modern Design</h4> <div class="features_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</div> </div> <div class="features__item"> <img class="features_icon" src="img/clean.png" alt="#"> <h4 class="features_title">Clean Code</h4> <div class="features_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</div> </div> <div class="features__item"> <img class="features_icon" src="img/ready.png" alt="#"> <h4 class="features_title">Ready to Ship</h4> <div class="features_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</div> </div> <div class="features__item"> <img class="features_icon" src="img/download.png" alt="#"> <h4 class="features_title">Download for Free</h4> <div class="features_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</div> </div> </div> </div> </body> </html>
body { margin: 0; font-family: 'Raleway', sans-serif; font-size: 14px; color: #6c7279; -webkit-font-smoothing: antialiased; background-color: #fff; } *:before *:after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6{
margin: 0;
}
p {
margin: 0 0 10px;
}
/* container
==========*/
.container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
/* Header
=======*/
.header {
width: 100%;
height: 100px;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
.header__iner {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #515369;
padding: 35px 0;
}
/* Header
=======*/
/* nav
====*/
.nav {
display: flex;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.nav__link{
margin-left: 50px;
color: #fff ;
text-decoration: none;
opacity: .75;
transition: opacity .1s linear;
}
.nav__link:first-child{
margin-left: 0;
}
.nav__link:hover {
opacity: 1;
}
/* intro
======*/
.intro{
display: flex;
flex-direction: column;
justify-content: center;
height: 750px;
padding-top: 100px;
background: #31344e url("../img/intro.png")
center no-repeat;
background-size: cover;
}
.intro__inner{
width: 100%;
max-width: 970px;
margin: 0 auto;
text-align: center;
}
.intro__title{
margin: 0 0 30px;
font-family: 'Opeb sans', sans-serif;
font-size: 65px;
line-height: 1.1;
color: #fff;
font-weight: 700;
text-transform: uppercase;
}
.intro__subtitle{
margin-bottom: 60px;
font-size: 22px;
color: #fff;
line-height: 1.5;
font-weight: 400;
}
/* button
=======*/
.btn{
display: inline-block;
vertical-align: top;
padding: 14px 40px;
border-radius: 2px;
border: 0;
cursor: pointer;
font-family: inherit;
font-size: 13px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
transition: background .1s linear;
}
.btn--red{
background-color: #e84545;
}
.btn--red:hover{
background-color: #be3b3b;
}
/*features
========*/
.features{
display: flex;
flex-wrap: wrap;
margin: 100px 0;
}
.features__item{
width: 33.3333%;
padding: 0 40px;
margin: 25px 0;
text-align: center;
}
.features_icon{
margin-bottom: 25px;
}
.features_title{
margin-bottom: 20px;
font-size: 14px;
color: #2d3033;
font-weight: 700;
text-transform: uppercase;
}
.features_text{
font-size: 14px;
line-height: 1.5;
color: 6c7279;
}
