366

--

Front-End Project

Code after last CSS Lesson ---- 

<!DOCTYPE html>
<html lang= "en">
<head>

<title>LEARN HTML + CSS| Home</title>

<link href='assets\css\layout.css' rel="stylesheet">
<link href='assets\css\theme.css' rel="stylesheet">

<style type="text/css">
</style>

</head>
<body>

<nav class="nav">
<div class="container">
<div class="logo">
<img src="assets\images\logo.png" alt="cloudie">
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>

</nav>
<header>

<div class="title-wrapper">
<h1 class ="header-title">Brojima, U Ready?</h1>
<h3 class="header-subtitle"><a href="">Let's HOWL</a></h3>
</div>

</header>
<section class="calltoaction">
<div class="container">
<div class="intro">
<h3 class="section-title white">Call to action</h3>
<p>
Two missisippi gravediggers struck...
</p>

</div>
<div class="intro right">
<a href="/" class="call-button">WHAT?</a>
</div>
</div>
</section>

<section class="works">
<div class="container">
<h3 class="section-title grey works pad">WORKS</h3>
<div class="column">
<img src="assets\images\cards1.jpg" alt="Works">
<img src="assets\images\cards1.jpg" alt="Works">
</div>

<div class="column">
<img src="assets\images\cards2.jpg" alt="Works">
<img src="assets\images\cards2.jpg" alt="Works">
</div>
<div class="column">
<img src="assets\images\cards1.jpg" alt="Works">
<img src="assets\images\cards1.jpg" alt="Works">
</div>

</div>
</section>
<section class="testimonials pad">
<div class="container">
<h3 class="section-title grey2">testimonials</h3>
<p>"Applicake chocolate cake wafer toffee pie soufflé wafer. Tart marshmallow wafer macaroon cheesecake jelly. Gingerbread cookie soufflé sweet roll sweet roll jelly-o"</p>
</div>
</section>

<section class="map">
<div class="container">
<h3 class= "section-title pad white"> located </h3>

</section>
<footer class="footer">
<div class="container">
<ul class="footer-menu">
<li>Home</li>
<li>| About</li>
<li>| Portfolio</li>
<li>| Contact</li>
</ul>
</div>
</footer>

</body>
</html>

THEME.CSS

body {

font-family: helvetica;

}

.white {
color: #ffffff;
}

.grey {
color: #515f67;
}

.grey2 {

color: #8c9498;
text-transform: uppercase;
}

header{

background-image: url('../images/header.jpg');
background-position: center center;
background-size: cover;
height: 700px;
width: 100%;
}

.header-title{
background-color: #293137;
color: #ffffff;
font-size:70px;
margin: auto;
text-transform: uppercase;
padding: 25px;


}

.header-subtitle {

background-color: #278EF5;
color: #ffffff;
font-size: 33px;
margin: 75px auto 0 auto;
text-transform: uppercase;
padding: 10px;
opacity: .5;
-webkit-transition:0.3s ease-in-out;
}

.header-subtitle:hover {
opacity: 1;

-webkit-transition:0.3s ease-in-out;

}

.nav {
background-color: #293137;

}

.menu {
color: #ffffff;

}

.menu > li {

font-size: 22px;
font-weight: bold;
-webkit-transition: 0.3s color ease-in-out;
}

.menu li:hover{

color:#2b8bd2;
-webkit-transition: 0.3s color ease-in-out;
}

.footer-menu {

color: #fff;
}

.calltoaction {
background-color: #e25b40;
height: 300px;
width: 100%;
}

.section-title {
font-size: 50px;
font-weight: 100;
text-transform: uppercase;
}


.intro > p {
color: #ffffff;
font-size: 25px;
margin-top: 35px;
line-height: 25px;

}

.call-button {
border:5px solid #fff;
font-size: 30px;
color: #ffffff;
padding: 10px 30px;
}

.column {
float: left;
width: 33%
}

.column img {
max-width: 80%;
margin: auto 0 auto 0;
display: block;
padding-bottom: 100px;
opacity: .5;
transform:scale(0.7);
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
transition:0.3s ease-in-out;
}

.column img:hover {
opacity: 1;
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
transition:0.3s all ease-in-out 0s;
-webkit-transition:0.3s all ease-in-out 0s;
-moz-transition:0.3s all ease-in-out 0s;
-o-transition:0.3s all ease-in-out 0s;
}


.testimonials{

background-color: #ebebeb;
}

.testimonials p {

font-size: 24px;
font-weight: lighter;
line-height: 55px;
color: #515f67;
padding-top: 40px;
}


.pad {
padding-top: 50px;
padding-bottom: 40px;
}

.map {
background-image: url('../images/map.png');
background-color: #353f47;
background-size: cover;
margin: 0;
height: 600px;
width: 100%;

}

.footer {
background-color: #293137;

LAYOUT.CSS

*{

-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
}

section {

overflow: hidden;
}

body {

margin: 0px;
}

ul {
list-style: none;
margin: 0;
padding: 0;

}

header {
position:relative;

}

a {
text-decoration: none;
color: #ffffff;

}

h1, h3, p {
margin: 0;
}

.nav {

height:140px;
width: 100%;

}

.title-wrapper {
padding-top: 300px;
text-align: center;
width:100%;
}
.header-title{

width: 850px;

}

.header-subtitle {


width: 250px;

}

.container {
margin: auto;
max-width: 960px;
width: 100%;
}

.logo {
float: left;
padding-top: 20px;
width: 320px;


}

.menu {

display: inline-block;
float: right;
width: 400px;
padding-top: 70px;

}

.menu > li {
display: inline-block;
padding: 0 10px 0 0;


}

.footer {

height: 130px;
}

.footer-menu{
display: inline-block;
float:;
width: 400px;
padding-top: 45px;

}

.footer-menu >li {

display: inline-block;
padding: 0 10px 0 0 ;
}

.calltoaction {
padding-top: px;
}

.intro {
float: left;
padding-top: 40px;
width: 50%;
}

.right {

width:50%;
float: right;
text-align: center;
padding-top: 65px;
padding-right: 60px;
}

.testimonials {


}

Comments

Please sign in or sign up to comment.