335

2

Web Design & Dev

My HTML markup progress...

Here is all my coding:

  • INDEX

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

<meta charset="utf-8" />
<meta name="description" content="My Website">
<meta name="author" content="Annette Ruchala">
<meta name="keywords" content="how to build a website">
<title>AR Website | Home</title>

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

</head>
<body>

<nav class="nav">
<div class="container">
<div class="logo">
<img src="assets/images/logo.png" alt="Cloudie" />
</div>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</div>
</nav>

<header>
<div class="title-wrapper">
<h1 class="header-title">my first website</h1>
<h3 class="header-subtitle">HTML5, CSS3, & JAVASCRIPT</h3>
</div>


</header>

<section class="call-to-action">
<div class="container">
<div class="intro">
<h3 class="section-title white">Call to action</h3>
<p>
You know you really want to click this button.
</p>
</div>
<div class="intro right">
<a href="/" class="call-button">Click here</a>
</div>
</div>
</section>

<section class="works">
<div class="container">
<h3 class="section-title gray works">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>
</section>

<section class="testimonials">
<div class="container">
<h3 class="section-title gray2">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 white">Located</h3>
</div>
</section>

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

</body>
</html>

  • LAYOUT

body {
margin: 0;
}

section {
overflow: hidden;
}

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

a {
color: inherit;
text-decoration: none;
}

p, h1, h3 {
margin: 0;
}

h3 {
padding-bottom: 20px;
padding-top: 20px;
}

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

.nav {
height: 100px;
width: 100%;
}

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

.logo {
float: left;
width: 320px;
}

.menu {
display: inline-block;
float: right;
width: 300px;
}

.menu > li {
font-size: 20px;
display: inline-block;
}

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

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

.right {
float: left;
width: 50%;
}

  • THEME (UPDATED CODE AFTER CSS LESSON)

body {
font-family: Helvetica;
}

.white {
color: #fff;
}

.gray {
color: #515f67;
}

.gray2 {
color: #8c9498;
}

.nav {
background-color: #293137;
}

.menu {
color: #fff;
padding-top: 40px;
}

.menu > li {
font-size: 20px;
padding: 0 10px 0 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;

}

.menu li:hover {
color: #2b8bd2;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
}


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

.header-title {
background-color: #2f363b;
color: #fff;
font-size: 65px;
font-weight: bold;
margin: auto;
text-transform: uppercase;
width: 700px;
}

.header-subtitle {
background-color: #2b8bd2;
color: #fff;
font-size: 30px;
font-weight: 100;
margin: 50px auto 0 auto;
width: 450px;
}

.call-to-action {
background-color: #e25b40;
height: 213px;
width: 100%;
}

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

.intro > p {
color: #fff;
}

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

.right {
text-align: center;
padding-top: 60px;
}

.intro p {
color: #fff;
font-size: 25px;
line-height: 40px;
margin-top: 10px;

}

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

.column img {
margin: auto;
max-width: 80%;
opacity: 0.7;
padding-bottom: 80px;
transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-o-transform: scale(0.7);
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;

}

.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;
height: 175px;
}

.testimonials p {
color: #515f67;
font-size: 18px;
font-style: oblique;
font-weight: 100;
line-height: 30px;
opacity: 0.6;
}

.map {
background-color: #353f47;
background-image: url('../images/map.png');
background-size: cover;
height: 586px;
}

footer {
background-color: #191e22;
height: 100px;
}

.footer-menu {
padding-top: 30px;
}

.footer-menu li {
color: #fff;
font-size: 13px;
font-weight: 100;
display: inline-block;
padding-right: 10px;
}

UPDATED CODEPEN URL http://codepen.io/ughnett/pen/bVGjmM

Comments

Please sign in or sign up to comment.