index.html
<!DOCTYPE html>
<html>
<head>
<title>Layout Demo</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="inner">
<section class="logo">
<h1>Layout Demo</h1>
<p>Welcome the the world of css layout</p>
</section>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="jobs.html">Jobs</a></li>
</ul>
</nav>
</div>
</header>
<main>
<article>
<section class="article-intro">
<h1>Code 201</h1>
<p> Welcome to Code 201! This is a class that builds on your foundational knowledge of HTML, CSS, JavaScript, git, and general web development, to prepare you for the deep dive of any Code 301 class.</p>
<p>In this course you will build a strong software development foundation and learn how to use HTML, CSS, JavaScript, and various libraries to create fully-functional web apps. You will learn the methods and tools of professional software developers through studying computer science concepts, such as data structures and algorithms, and common development tools, including Atom, Git, and Terminal.</p>
</section>
<section class="article-body">
<h1> Creating a HTML element with javascript</h1>
<p> There are only three steps to creating an html element</p>
<ol>
<li>create the element</li>
<li>set its content</li>
<li>add it to the document</li>
</ol>
</section>
<section class="article-body">
<h1>Using the command Line</h1>
<p>Using the command line can be really scarry but once you get the hang of it, it makes being a developer way easier</p>
<h2>Creating a directory</h2>
<div class="code">
<p><strong>$</strong> mkdir <em>[directory name]</em></p>
</div>
<h2>Changing current working directory</h2>
<div class="code">
<p><strong>$</strong> cd <em>[/path/to/file]</em></p>
</div>
<h2>Creating a file</h2>
<div class="article-body">
<p><strong>$</strong> touch <em>[filename]</em></p>
</div>
</section>
</article>
</main>
<footer>
<p>Code Fellows ©</p>
</footer>
</body>
</html>css/style.css
/*
* dark-pink: #ffaaaa
* light-pink: #ffb5b5
* dark-blue: #799bb2
* light-blue: #7aadcc
*/
body {
background-color: #faaaaa;
padding: 0px;
}
header, main, footer{
padding: 10px;
background-color: #fff;
margin: 10px;
border-radius: 10px;
}
header {
position: fixed;
width: 100%;
top: 0px;
margin:0px;
border-radius: 0px;
outline: dotted 1px blue;
}
main {
padding-top: 110px;
margin-bottom: 10px;
border-radius: 10px;
padding-left: 20px;
padding-right: 20px;
}
footer {
}
a {
color: #fff;
text-decoration: none;
}
header section {
display: inline-block;
}
header nav {
position: absolute;
top: 60%;
right: 30px;
outline: solid 2px blue;
}
header * {
margin-bottom: 5px;
}
header nav li {
display: inline;
padding: 3px;
background-color: #799bb2;
border-radius: 4px;
}
.logo h1 {
color: #799bb2;
font-size: 3em;
margin-bottom: 0px;
margin-top: 0px;
}
.logo p {
margin-top: 10px;
color: #7aadcc;
}
article section {
width: 60;
}
article h1,h2 {
color: #799bb2;
}