Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

markup_warmup by davey-wright #224

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

markup_warmup by davey-wright #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d92bd24
added name to README.md
Sep 13, 2017
1450d9a
first draft of markup warmup
Sep 13, 2017
e939990
add fixed positioning to nav and margins
Sep 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
assignment_markup_warmup_sprint
===============================

Submitted By: Davey Wright

And 1 and 2! And 1, and 2...!
[An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)
84 changes: 84 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html>
<head>
<title>Markup Warmup</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<nav>
<h1>The Lorem Micro Blog</h1>
</nav>

<div class="flex-container">
<aside>
<p> This is a vertically aligned advertisement</p>
</aside>

<main>
<header>
<h1>The Lorem Micro Blog</h1>
<h2>Boom Shaka Laka</h2>
</header>

<div class='flex-container'>
<section>
<header>
<h2>Boom Ting Ling</h2>
<time>Posted on 09/12/89</time>
</header>
<article>
<h3>Some thoughts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>

<h3>Some more thoughts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco </p>
</article>
</section>

<section>
<header>
<h2>Ting ling Tsing Tsao</h2>
<time>Posted on 09/12/89</time>
</header>
<article>
<h3>My only thoughts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit </p>
</article>
</section>

<section>
<header>
<h2>Peach senderrrrr</h2>
<time>Posted on 12/05/90</time>
</header>
<article>
<h3>One thought</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim</p>
<h3>Two thoughts</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit </p>
</article>
</section>
</div>

<footer>
<p>Copyright the Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
</p>
</footer>
</main>
</div>
</body>
</html>
48 changes: 48 additions & 0 deletions reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
177 changes: 177 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@

body {
color: #333;
}

h1 {
font-size: 48px;
margin-bottom: 24px;
}

h2 {
font-size: 24px;
margin-bottom: 12px;
}

h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}

p {
font-size: 16px;
line-height: 24px;
margin-bottom: 24px;
}

article p:last-of-type {
margin-bottom: 24px;
}

nav {
display: block;
position: fixed;
width: 100%;
height: 60px;
background: tomato;
}

nav h1 {
margin-top: 14px;
margin-left: 20px;
font-size: 32px;
display: block;
}

header, footer {
border-radius: 15px;
}

main, aside {
margin-top: 84px;
}

main > header {
margin-bottom: 24px;
text-align: center;
background: lightgreen;
padding: 24px 20px;
}

aside {
width:20%;
margin-right: 40px;
background: lightpink;
display: flex;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 500px;
}

aside p {
text-align: center;
background: #eee;
padding: 50px 20px;
width: 70%;
}

.flex-container {
max-width: 990px;
margin: 0 auto;
display: flex;
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
justify-content: center;
}

main {
width: 60%;
}

main .flex-container {
justify-content: space-between;
margin-bottom: 24px;
}

main section {
width: 30%;
padding: 24px 20px;
margin-right: 20px;
background: lightblue;
}

main section:last-of-type {
margin-right: 0px;
}

main section header {
text-align: center;
}

time {
font-size: 16px;
margin-bottom: 36px;
position: relative;
display: block;
}

footer{
background: violet;
padding: 24px 20px;
margin-bottom: 24px;
}


@media only screen and (max-width: 990px) {
aside {
display: none;
}

nav h1 {
margin-bottom: 0px;
}

header, footer {
border-radius: 0px;
margin-bottom: 0px;
}

main {
margin-top: 60px;
width: 100%;
}

main .flex-container {
flex-wrap: wrap;
justify-content: center;
}

main section {
margin-right: 0px;
width: 40%;
}

main section:first-of-type {
margin-right: 20px;
}

main section:last-of-type {
margin-top: 20px;
width: 85%;
}
}