Starting Place for CSS class | Skillshare Projects

15

--

Starting Place for CSS class

Starting Place for CSS class

Here's what I have thus far - end of lesson 3. 

 

Questions: cant seem to get the spacing right from the right and left edges (for the logo and the links). And... my 'Hello' in the middle looks nice, but too tall of a 'chin' under the content... 

 

Here's the css: 

/*styles go here*/

/* GENERAL STYLES */

* {
font-family: sans-serif;
}
.container {
max-width: 1200px;
margin: 0 auto;
}

/* NAVIGATION STYLES */

.navigation{
background: #4F5D75;
overflow: auto;
padding: 10px;
}

.nav-logo {
float: left;
padding-top: 10px;
width: 180px;
}

.nav-logo img {
width: 100%;
}

.nav-items {
display: inline-block;
float: right;
}

.nav-items ul {
padding: 0;
}

.nav-items ul li {
display: inline-block;
margin: 0 5px 0 5px;
}

.nav-items ul li a {
color: #ffffff;
text-decoration: none;
}

.nav-items ul li a:hover {
color: orange;
}

/* header */

.header {
background: url('../images/workspace.jpg');
background-size: cover;
background-position: center;
height: 80vh;
/*80% of the viewport height*/
position: relative;
text-align: center;
}

.header .header-text {
background: rgba(1, 1, 1, 0.8);
color: #ffffff;
display: block;
margin: auto;
max-height: 220px;
max-width: 500px;
padding: 40px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}

.header .header-arrow {
position: absolute;
bottom: 40px;
}

 

and here's the index: 

<!DOCTYPE html>
<html>
<head>
<!--meta data-->
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
</head>
<body>
<!--nav start-->
<nav class="navigation">
<div class+"container">
<div class="nav-logo">
<img src="assets/images/verity-logo.png" alt+"Profile image">
</div>
<div class="nav-items">
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--nav end-->

<!-- header start -->
<div class="header">
<div class="container">
<div class="header-text">
<h1>Hey, I'm Verity</h1>
<p>Front End Developer From Syney, Australia</p>
</div>
<a href="#" class="header-arrow">
<svg width="48px" height="19px" viewBox="0 0 48 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Arrow</title>
<desc>Downward arrow</desc>
<defs></defs>
<g id="Welcome" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="Desktop" transform="translate(-489.000000, -466.000000)" stroke="#FFFFFF" stroke-width="3">
<g id="Group-2" transform="translate(491.000000, 468.000000)">
<path d="M0.5,0.5 L21.5,14.5" id="Line"></path>
<path d="M22.5,0.5 L43.5,14.5" id="Line" transform="translate(33.000000, 7.500000) scale(-1, 1) translate(-33.000000, -7.500000) "></path>
</g>
</g>
</g>
</svg>
</a>
</div>
</div>
<!-- header end -->

</body>
</html>

 

Any thoughts on what I'm missing here? 

 

I like the course in general, but am frustrated by the un-explained use of keyboard shortcuts or pasting in pre-typed out code without discussing what was done there. 

Comments

Please sign in or sign up to comment.