Skip to content

Instantly share code, notes, and snippets.

@joshuastronomy

joshuastronomy/index.html

Created May 25, 2017 20:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshuastronomy/e74b35a92ca876ec85931eafdd340108 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshuastronomy/e74b35a92ca876ec85931eafdd340108 to your computer and use it in GitHub Desktop.
Download ZIP
css project day 4
Raw
index.html
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title></title>
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link charset="utf-8" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media=
"screen" rel="stylesheet" title="no title">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Josefin+Sans|Noto+Serif" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<nav>
<ul class="nav-row">
<li class="nav-item">
<a href="">About me</a>
</li>
<li class="nav-item">
<a href=""><i aria-hidden="true" class="fa fa-facebook" id="facebook"></i></a>
</li>
<li class="nav-item">
<a href="">Contact me</a>
</li>
</ul>
</nav>
<header class="page-header">
<section class="header-content">
<h1 class="main-heading">i Beer</h1>
<h3 class="sub-heading">Write Thirsty My Friend</h3>
</section>
</header>
<main>
<div class="blog-row">
<div class="item">
<div class="icon-wrapper">
<i aria-hidden="true" class="fa fa-flask"></i>
</div>
<div class="meta">
<div class="date">
<span>Date:</span> <span>5/17/2017</span>
</div>
<div class="category">
<span>Category:</span> <span>science</span>
</div>
</div>
<h4 class="entry-title">Freaky 'dragon' dinosaur</h4>
<div class="blog-img" id="dino">
<img src="/Users/joshuastronomy/Documents/TIY/week1/day4/CSSproject/img/dino.jpg" /></div>
<p class="primary-txt">While excavating for oil in Alberta in March 2011, miner Shawn Funk spotted something
unusual. What he found that day turned out to be one of the most stunning and important fossils unearthed in
decades.</p>
</div>
<div class="item">
<div class="icon-wrapper">
<i aria-hidden="true" class="fa fa-newspaper-o"></i>
</div>
<div class="meta">
<div class="date">
<span>Date:</span> 4/21/2017
</div>
<div class="category">
<span>Category:</span> <span>Beer</span>
</div>
</div>
<h4 class="entry-title">Dos X X</h4>
<div class="blog-img" id="xx"><img src="/Users/joshuastronomy/Documents/TIY/week1/day4/CSSproject/img/xx.png" /></div>
<p class="primary-txt">Dos Equis is a lager that was originally brewed by the German-born Mexican brewer
Wilhelm Hasse in 1897. The brand was named “Siglo XX” (“20th century”) to commemorate the arrival of the new
century, and the bottles were marked with the Roman numerals “XX”, or “Dos Equis” (two Xs).</p>
<p class="primary-txt">The main brand Dos Equis XX Special Lager is a 4.45% abv pale lager sold in green
bottles. Dos Equis XX Ambar is a 4.7% Vienna-style amber lager sold in brown bottles, and was first exported to
the United States in 1973.</p>
</div>
<div class="item">
<div class="icon-wrapper">
<i aria-hidden="true" class="fa fa-newspaper-o"></i>
</div>
<div class="meta">
<div class="date">
<span>Date:</span> 4/26/2017
</div>
<div class="category">
<span>Category:</span> <span>Beer</span>
</div>
</div>
<h4 class="entry-title">Inviting Parody</h4>
<p class="primary-txt">Freeing a trapped bear, leading a midnight hike through the jungle, playing a rousing
game of jai alai—it’s all in a day’s work for the Most Interesting Man in the World. The 15 second spots are
brilliantly written with quotable quips that invite parody – “The police often question him just because they
find him interesting;” “He once had an awkward moment, just to see how it feels;” “His blood smells like
cologne;” “His beard alone has experienced more than a lesser man’s entire body.”</p>
<p class="primary-txt">Sunburned and silver-haired, Goldsmith’s character dangles a bottle of Dos Equis from
thumb and forefinger, presumably unwinding after his latest escapade. “I don’t always drink beer,” he rumbles.
“But when I do, I prefer Dos Equis.”</p>
</div>
<div class="item">
<div class="icon-wrapper">
<i aria-hidden="true" class="fa fa-plane"></i>
</div>
<div class="meta">
<div class="date">
<span>Date:</span> <span>3/1/2017</span>
</div>
<div class="category">
<span>Category:</span> <span>Travel</span>
</div>
</div>
<h4 class="entry-title">A floating city of millionaires</h4>
<div class="blog-img" id="yhact-img"><img src="/Users/joshuastronomy/Documents/TIY/week1/day4/CSSproject/img/yhact.jpg" /></div>
<p class="primary-txt">Stepping onto The World feels like boarding a 21st-century Titanic, such is its scale
and grandeur. Sitting majestically in Hong Kong's Victoria Harbor, this gleaming 644 feet-long white vessel is
the largest, and probably most exclusive, "residential yacht" on earth.</p>
</div>
</div>
<aside>
<div class="auth-pic">
<img src="/Users/joshuastronomy/Documents/TIY/week1/day4/CSSproject/img/author.jpeg" />
</div>
<h3 class="aside-heading">Jonathan Goldsmith</h3>
<p class="primary-txt" id="bio">Jonathan Goldsmith (born September 26, 1938) is an American actor. He began his
career on the New York stage, then started a career in film and television. He appeared in several TV shows from
the 1960s to the 1990s. He is best known for appearing in television commercials for Dos Equis beer, from 2006 to
2016, as the character The Most Interesting Man in the World.</p>
<p class="primary-txt">Jonathan has made over 350 television appearances in his career. Among them was the role
of Marvin Palmer in the 1964 Perry Mason episode, "The Case of the Blonde Bonanza." To advance his acting career,
Goldsmith moved to California from New York in 1966. Like many aspiring actors, he found it difficult to gain
enough acting work to survive and wound up working various jobs, including driving a garbage truck and working in
construction, to help make ends meet.</p>
</aside>
</main>
<footer>
<span>iBlog 2017</span>
</footer>
</body>
</html>
Raw
main.css
*, *:before, *:after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html {
width: 1280px;
line-height: 1.6;
}
.nav-row {
padding: 35px;
background-color: #2E2D2B;
font-size: 12pt;
color: white;
font-family: Josefin Sans;
text-transform: uppercase;
font-weight: bold;
display: flex;
justify-content: space-between;
list-style-type: none;
}
.nav-row a {
text-decoration: none;
color: white;
padding: 100px;
}
.header-content {
background-image: url(/Users/joshuastronomy/Documents/TIY/week1/day4/CSSproject/img/header-img.jpg);
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 600px;
bottom-margin: -50px;
}
.main-heading {
font-family: Josefin Sans;
font-size: 10em;
color: #2E2D2B;
letter-spacing: 200%;
margin-bottom: -130px;
}
.sub-heading {
font-family: Dancing Script;
color: white;
font-size: 5em;
text-shadow: 5px 5px 5px grey;
}
main {
padding: 50px;
width: 1150px;
margin: 0 auto;
margin-top: -75px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
background-color: #FEF9EC;
box-shadow: 2px 2px 4px 2px grey;
}
main p {
font-size: 16px;
}
.blog-row {
display: flex;
flex-direction: column;
width: 300px;
}
.item {
width: 400px;
margin: 30px;
padding: 20px;
background-color: white;
box-shadow: 2px 2px 5px grey;
}
#dino img {
float: right;
width: 50%;
height: 50%
padding:10px;
}
#xx img {
float: right;
width: 50%;
height: 50%
}
#yhact-img img {
float: right;
width: 50%;
height: 50%;
padding: 10px;
}
.icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
main i {
color: white;
background-color: grey;
border-radius: 50%;
padding: 10px;
}
.meta {
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 12px;
}
.entry-title {
font-family: Josefin Sans;
font-size: 16pt;
}
aside {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 300px;
height: 1000px;
background-color: #EFEADF;
margin: 30px;
padding: 20px;
box-shadow: 2px 2px 5px grey;
}
.aside-heading {
text-align: center;
font-family: Josefin Sans;
font-size: 16pt;
}
aside .primary-txt {
}
.auth-pic {
display: flex;
flex-direction: column;
align-items: center;
}
.auth-pic img {
margin: 10px;
width: 75%;
height: 75%;
border-radius: 50%;
}
.date, .category {
text-transform: uppercase;
}
footer {
background-color: #2E2D2B;
text-align: center;
text-transform: uppercase;
color: white;
margin: 20px;
}
span: last-of-type {
font-size: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment