Skip to content

Wesley Maffly-Kipp completed HW assignment #5

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
maffkipp wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Wesley Maffly-Kipp completed HW assignment #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
65 changes: 64 additions & 1 deletion news_layout/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,64 @@
/* Write your CSS here */
/*General styling */
body {
font-family: "Arimo", sans-serif;
}

h2 {
font-size: 30pt;
}

p {
color: #444444;
}

footer {
color: #666666;
text-align: right;
}
.column {
background-color: #fdfdfd;
}

.article {
background-color: #B9DEFB;
margin: 10px;
padding: 20px;
box-shadow: 0 3px 3px 0 #888888;
line-height: 150%;
}

/* Flex spacing */
.columns {
display: flex;
}

.column {
display: flex;
flex-direction: column;
flex: 1;
}

.main-column {
flex: 2;
}

.article {
display: flex;
flex-direction: column;
flex: 1;
}

.article-body {
flex: 1;
}

.nested-column {
flex: 2;
}

@media screen and (max-width: 900px) {
.column, .columns {
display: block;
}
}

57 changes: 56 additions & 1 deletion news_layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,64 @@
<head>
<meta charset="utf-8">
<title>Flexbox Layout</title>
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Starter File -->
<div class="columns">
<div class="column main-column">

<article class="article">
<h2 class="article-title">Hello World</h2>
<p class="article-body">Before they sold out blue bottle occupy try-hard. Selvage occaecat chia consectetur non aesthetic mixtape cray small batch viral veniam. Pitchfork kogi taxidermy roof party forage iceland magna farm-to-table. Godard umami microdosing cloud bread ex irure DIY cray try-hard tilde marfa taiyaki sartorial sunt. Aute adipisicing godard XOXO microdosing dolor seitan church-key knausgaard. Deep v organic yr williamsburg DIY vice in ugh cardigan ad.</p>
<footer class="article-footer">0 comments</footer>
</article>

<div class="columns">
<div class="column nested-column">
<article class="article">
<h2 class="article-title">Once Upon a Time</h2>
<p class="article-body">Duis farm-to-table fam tote bag cold-pressed semiotics. Bespoke slow-carb taxidermy church-key pabst. Tumeric cornhole bicycle rights gentrify velit. Vice gochujang meh tumeric live-edge, four loko fingerstache. Veniam intelligentsia poutine cloud bread irure kitsch vinyl marfa locavore. Ethical lyft poke, flexitarian etsy blog hella chicharrones glossier cornhole green juice pok pok.</p>
<footer class="article-footer">0 comments</footer>
</article>
</div>
<div class="column">
<article class="article">
<h2 class="article-title">Over the Hills</h2>
<p class="article-body">Pitchfork fixie et, woke celiac nostrud nulla umami glossier coloring book. Chia dolor leggings sriracha sint.</p>
<footer class="article-footer">0 comments</footer>
</article>
<article class="article">
<h2 class="article-title">And Far Away</h2>
<p class="article-body">Vegan you probably haven't heard of them vinyl, man braid 8-bit fugiat vice single-origin coffee intelligentsia microdosing wolf helvetica.</p>
<footer class="article-footer">0 comments</footer>
</article>
</div>
</div>


</div>
<div class="column">

<article class="article">
<h2 class="article-title">Cool Stuff</h2>
<p class="article-body">Kitsch chillwave leggings aesthetic. Commodo four loko distillery af umami, dreamcatcher dolore yr. Non asymmetrical 8-bit food truck bushwick thundercats anim ut live-edge reprehenderit. Food truck XOXO bitters, viral locavore do pop-up la croix jianbing authentic blue bottle sed. Tofu ut ennui, crucifix irure bespoke gentrify narwhal subway tile consectetur voluptate.</p>
<footer class="article-footer">0 comments</footer>
</article>

<article class="article">
<h2 class="article-title">Three's Company</h2>
<p class="article-body">Photo booth kinfolk cloud bread, biodiesel pariatur brunch dolore squid brooklyn succulents. Helvetica activated charcoal aesthetic, occupy officia affogato cold-pressed freegan culpa hot chicken salvia snackwave. Mumblecore id cillum crucifix edison bulb vape taiyaki fingerstache et microdosing subway tile hashtag. Tumblr green juice man braid blue bottle keffiyeh deserunt anim cupidatat normcore tumeric.</p>
<footer class="article-footer">0 comments</footer>
</article>

<article class="article">
<h2 class="article-title">That's All, Folks</h2>
<p class="article-body">Poke ugh humblebrag id cillum skateboard activated charcoal thundercats banh mi post-ironic butcher leggings. Typewriter skateboard aliqua try-hard af art party occaecat ad selfies. Chia 3 wolf moon dolor narwhal, gentrify in adaptogen. XOXO YOLO street art laboris, sustainable consectetur aute subway tile literally air plant everyday carry typewriter swag qui.</p>
<footer class="article-footer">0 comments</footer>
</article>

</div>
</div>
</body>
</html>