Skip to content

Toni Tesori's solution to the Lorem Ipsum Blog Project #237

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

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

Toni Tesori's solution to the Lorem Ipsum Blog Project #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5a912ba
Added name to README
Ttesori Oct 31, 2017
448dbc3
Wrote initial markup
Ttesori Oct 31, 2017
ae1f956
Finish blog styles and HTML tweaks
Ttesori Oct 31, 2017
88b01c1
Add HTML title
Ttesori Oct 31, 2017
2260282
Forgot rounded corners
Ttesori Oct 31, 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
Expand Up @@ -3,3 +3,5 @@ assignment_markup_warmup_sprint

And 1 and 2! And 1, and 2...!
[An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)

Written by Toni Tesori
83 changes: 83 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css" />
<title>Lorem Micro Blog</title>
</head>

<body>
<header>
<h1>The Lorem Micro Blog</h1>
</header>
<div class="container">
<div class="ad-container">
<div class="ad">
<p>
Check out my vertically centered ad!
<a href="#"><img src="http://via.placeholder.com/250x250" /></a>
</p>
</div>
</div>

<main>
<header>
<h1>The Lorem Micro Blog</h1>
<h2>By Foo Bar</h2>
</header>

<section class="posts">
<article>
<header>
<h1>A Most Posty Post</h1>
<aside>Written 1/3/2020</aside>
</header>
<h3>First Thoughts...</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque.
</p>
<h3>Additional Thoughts...</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, cumque vel nobis quidem porro, in alias, et dolore atque aspernatur velit suscipit nostrum ipsam. Suscipit possimus vel voluptatum incidunt!
</p>
</article>

<article>
<header>
<h1>Another Posty Post</h1>
<aside>Written 1/2/2020</aside>
</header>
<h3>Only Thoughts...</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque.
</p>
</article>

<article>
<header>
<h1>A Posty Post</h1>
<aside>Written 1/2/2020</aside>
</header>
<h3>Be It Resolved</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae.
</p>
<p>
Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque.
</p>

</article>
</section>
<footer>
<p>
This copyrighted blogcast is presented by the authority of the Office of the Commissioner of Blogging. It may not be reproduced or retransmitted in any form, and the accounts and descriptions of this blog may not be disseminated without express written consent.
</p>
</footer>
</main>
</div>
</body>

</html>
123 changes: 123 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css';
html {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
}

body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.3;
padding: 4.5em 0 1em 0;
}

body>header {
background: #000;
color: #fff;
padding: 0.5em;
position: fixed;
top: 0;
width: 100%;
}

body>header h1 {
font-size: 1em;
text-transform: uppercase;
}

.ad-container {
display: none;
}

main>header {
background: #ccc;
padding: 0.5em 1em;
text-align: center;
line-height: 1;
margin-bottom: 1em;
}

main>header h1 {
margin-bottom: 0;
}

main>header h2 {
font-size: 1.3em;
font-style: italic;
font-weight: normal;
}

main article {
background: #eee;
padding: 0.5em 1em;
margin: 0.5em;
}

main article header {
text-align: center;
}

main article header h1 {
font-size: 1.5em;
margin-bottom: 0.15em;
}

footer {
background: #999;
font-size: 0.8em;
padding: 0.5em 1em;
}

@media only screen and (min-width: 500px) {
main .posts {
display: flex;
flex-flow: row wrap;
}
main article {
flex: 45%;
}
main article:last-child {
flex: 100%;
}
}

@media only screen and (min-width: 990px) {
.container {
display: flex;
flex-flow: row wrap;
margin: 0 auto;
max-width: 1200px;
}
.ad-container {
display: flex;
flex: 1;
align-items: center;
margin-right: 1em;
padding: 1em;
background: #aaa;
text-align: center;
}
main {
flex: 5;
margin: 0;
display: block;
}
main > header, main footer {
border-radius:1em;
}
main .posts {
flex-wrap: nowrap;
}
main .posts article {
margin: 0;
margin: 0 1em 1em 0;
flex: 33%;
}
main article:last-child {
margin-right: 0;
}
}