Skip to content

Matt Cain submitting Flexbox-News Homework #20

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

Matt Cain submitting Flexbox-News Homework #20

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
167 changes: 166 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,166 @@
/* Write your CSS here */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);

html {
background: mediumseagreen;
font-size: 14px;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
min-width: 300px;
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
}

body {
color: #666;
font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
}

a {
text-decoration: none;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

div, h2, p, figure {
margin: 0;
padding: 0;
}

.header {
color: white;
padding: 40px 0 20px;
text-align: center;
}

.header h1 {
font-size: 40px;
font-weight: bold;
}

.header h2 a {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
color: white;
font-size: 20px;
opacity: 0.5;
}

.header h2 a:hover {
border-bottom-color: white;
opacity: 1;
}

.main {
margin: 0 auto;
max-width: 1040px;
padding: 10px;
}

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

.article {
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #666;
display: flex;
flex: 1;
flex-direction: column;
flex-basis: auto;
margin: 10px;
}

.article:hover,
.article:focus {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
color: #444;
}

.article-image {
background: #eee;
display: block;
padding-top: 75%;
position: relative;
width: 100%;
}

.article-image img {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.article-image.is-3by2 {
padding-top: 66.6666%;
}

.article-image.is-16by9 {
padding-top: 56.25%;
}

.article-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
}

.article-title {
color: #333;
flex-shrink: 0;
font-size: 1.4em;
font-weight: 700;
line-height: 1.2;
}

.article-content {
flex: 1;
margin-top: 5px;
}

.article-info {
display: flex;
font-size: 0.85em;
justify-content: space-between;
margin-top: 10px;
}

@media screen and (min-width: 800px) {
.columns,
.column {
display: flex;
}
}

@media screen and (min-width: 1000px) {
.first-article {
flex-direction: row;
}

.first-article .article-body {
flex: 1;
}

.first-article .article-image {
height: 300px;
order: 2;
padding-top: 0;
width: 400px;
}

.main-column {
flex: 3;
}

.nested-column {
flex: 2;
}
}
160 changes: 159 additions & 1 deletion news_layout/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,168 @@
<html>
<head>
<meta charset="utf-8">
<title>Flexbox Layout</title>
<title>Matt's Guitars</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- Starter File -->
</body>
</html>
<header class="header">
<h1>Matt's Guitars</h1>
<h2><a href="https://www.facebook.com/matt.cain.140">My Facebook</a></h2>
</header>

<main class="main columns">
<section class="column main-column">
<a class="article first-article" href="#">
<figure class="article-image is-4by3">
<img src="https://media.sweetwater.com/store/manufacturer/Fender/about/strat_full.jpg" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Fender Stratocaster
</h2>
<p class="article-content">
This is my Fender Stratocaster. It has lasers. It literally shoots lasers at Republicans. I'm not joking. As you can see it's totally badass. It's sunglasses are not pictured as they're being repaired by the International Space Laboratory. Even more amazing than all that is the fact that this guitar is a eunuch. No penis. Rock on.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>

<div class="columns">
<div class="column nested-column">
<a class="article" href="#">
<figure class="article-image is-16by9">
<img src="https://media.sweetwater.com/store/manufacturer/Fender/about/tele_full.jpg" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Fender Telecaster
</h2>
<p class="article-content">
Oh my god. Holy lord. This thing was with me when I played before Ted Cruz at the Republican National Convention. Ted Cruz was caught looking at porn on Twitter the other day. That's why I've named this guitar "Lyin' Ted." It was filmed during the infamous 90s porn flick "Hollywood Hot Tubs" in the scene where a truck driver slams into a police barricade and pirahnas burst out of every orifice in the earth.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
</div>

<div class="column">
<a class="article" href="#">
<figure class="article-image is-16by9">
<img src="https://media.sweetwater.com/store/manufacturer/Gibson/about/les_paul_full.jpg" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Gibson Les Paul
</h2>
<p class="article-content">
Not a big deal. Hakeem Olajuwon played this guitar at Larry David's bat mitzvah.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
<a class="article" href="#">
<div class="article-body">
<h2 class="article-title">
Think About Your Dad.
</h2>
<p class="article-content">
What's your dad like?
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
<a class="article" href="#">
<div class="article-body">
<h2 class="article-title">
The Earth is Flat
</h2>
<p class="article-content">
The universe is a series of flat circles surrounded by flat brimmed hats.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
</div>
</div>
</section>

<section class="column">
<a class="article" href="#">
<figure class="article-image is-3by2">
<img src="http://images.gibson.com/Products/Electric-Guitars/Designer/Gibson-USA/Flying-V-120/Gallery-Images/DV120CWCH1-Finish-Shot.jpg" alt="">
</figure>
<div class="article-body">
<h2 class="article-title">
Gibson Flying V
</h2>
<p class="article-content">
This thing coupled with socks in your pants tends to get the ladies swooning. Use at your own risk if you have a wife. No lie.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
<a class="article" href="#">
<div class="article-body">
<h2 class="article-title">
Fun Fact #1
</h2>
<p class="article-content">
Did you know that my first dog was named Spot and I named him because I thought that was an original name for a dog? I was 5. Gimme a break.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
<a class="article" href="#">
<div class="article-body">
<h2 class="article-title">
Fun Fact #2
</h2>
<p class="article-content">
I once had a date with someone who liked Toby Keith. After I placed a restraining order on her I bought a hot dog and ate it on the side of Highway 123.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
<a class="article" href="#">
<div class="article-body">
<h2 class="article-title">
Fun Fact #3
</h2>
<p class="article-content">
I really am trying to be a web developer. I'm scared. Hold me.
</p>
<footer class="article-info">
<span>By Matt Cain</span>
<span>0 comments</span>
</footer>
</div>
</a>
</section>
</main>