<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Justine Evans">
<meta name="description" content="Baking Blog">
<link rel="stylesheet" type="text/css" href="fonts.css">
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>So Sweet: A Blog about Baking</title>
</head>
<body>
<div class="main-container">
<header>
<!-- Site links for menu: -->
<menu id="navigation">
<div id="site-links">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">Archives</a>
<div class="dropdown">
<a href="#" id="dropdown-group" class="menu-item">More...</a>
<div class="dropdown-content">
<a href="#" class="dropdown-item">About</a>
<a href="#" class="dropdown-item">Contact</a>
<a href="#" class="dropdown-item">Sister Sites</a>
</div>
</div>
</div>
<div id="social-links">
<a href="https://www.facebook.com" class="social-item">
<img src="https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/logo-facebook.png" title="Find us on Facebook!" />
</a>
<a href="https://www.instagram.com" class="social-item">
<img src="https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/logo-instagram.png" title="See us on Instagram!" />
</a>
<a href="https://twitter.com" class="social-item">
<img src="https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/logo-twitter.png" title="Follow us on Twitter!" />
</a>
</div>
</menu>
<!-- Area for site logo, title, and slogan: -->
<div class="site-heading">
<a href="http://www.freepik.com">
<div class="site-logo under-img">
<img src="https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/site-logo-under.png" class="under-img" alt="Cupcake-shaped Logo" title="Site Logo" />
</div>
<div class="site-logo over-img">
<img src="https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/site-logo-over.png" class="over-img" alt="Cupcake-shaped Logo" title="Site Logo" />
</div>
</a>
<h1 id="site-title">So Sweet!</h1>
<h2 id="site-slogan">A Blog about Baking</h2>
</div>
</header>
<main>
<!-- Blog post: -->
<h2 class="post-title">Blog Post Title</h2>
<p class="post-subtitle">
Date: 20 Nov 2017 <br/>
Author: <span id="autor">Justine</span>
</p>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed ex non erat maximus tempus at sit amet massa. Mauris tortor lacus, tempor at posuere et, pulvinar quis diam. Morbi scelerisque consequat velit, id convallis felis gravida sed. Donec nec lacus justo. Vivamus quam elit, volutpat tincidunt sodales ut, efficitur nec sapien. Aenean pharetra sem ac nisl convallis porttitor et sed ipsum. Fusce facilisis feugiat ligula, sit amet aliquam tortor aliquam dapibus. Ut libero mauris, malesuada non congue sed, volutpat non sapien. Vestibulum pharetra vitae est ac luctus. Cras ac enim libero. In elementum ultricies pulvinar. Vestibulum facilisis elit id erat vehicula, sit amet tempus nulla euismod. Proin quis nisl iaculis, vulputate nibh rhoncus, malesuada enim. Mauris elementum placerat commodo. Morbi egestas convallis enim, eget sagittis lacus lobortis sed. Ut blandit malesuada neque lobortis semper.</p>
<div class="pull-quote" id="quote-1">
<q>Etiam eleifend nibh sit amet consequat malesuada.</q>
</div>
<p>Nulla vitae efficitur nisl. Vestibulum et nisl a ipsum elementum tristique eu nec sem. Suspendisse convallis viverra elementum. Etiam eleifend nibh sit amet consequat malesuada. Nam non ipsum luctus, mollis lorem ac, interdum orci. Integer ornare sit amet diam in fringilla. Suspendisse ornare iaculis elit ac imperdiet. Proin id orci condimentum, fringilla risus id, consectetur arcu. Vivamus ac sodales magna. Quisque eu consectetur ex, sit amet dapibus lorem. Fusce molestie sem sit amet eros congue, eget iaculis massa mollis. Nam sapien lorem, ultrices tempor hendrerit non, varius et augue. Phasellus sit amet mattis tellus. Cras commodo dignissim tellus id dictum.</p>
<p>Nam fermentum magna sed lectus placerat, sed vestibulum risus pretium. Mauris nec ex facilisis, lacinia felis vitae, viverra dolor. Nam id condimentum nisi, nec viverra ante. Praesent gravida pulvinar ipsum eu vehicula. Morbi egestas ex aliquet est posuere, sed euismod nunc fermentum. Praesent vel ex maximus, elementum turpis in, volutpat enim. In et neque eros. Phasellus vestibulum malesuada odio. Nam ultrices eros sed felis posuere congue. Sed volutpat vehicula felis. Duis ultricies pretium sem sit amet sollicitudin. Aliquam ornare, quam tempor volutpat luctus, sapien turpis imperdiet purus, a varius ligula lacus id ipsum. Mauris pretium interdum nulla. Pellentesque vel mattis augue. </p>
</div>
<div class="archives-link">
<a href="#">
<div class="button">
<h4 id="archives">Browse Archives</h4>
</div>
</a>
</div>
</main>
<div class="line"></div>
<footer>
<!-- Copyright and other information: -->
<p>(c) Justine Evans, 2017</p>
</footer>
</div>
</body>
</html>
/*------------------------
| CSS for General Styling |
------------------------*/
/* SITE-WIDE ELEMENTS: */
body {
background-color: lightblue;
background-image: url('https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/site-border.png');
background-repeat: repeat-x;
background-attachment: fixed;
}
h1, span {
margin: 0;
font-family: 'Pacifico', cursive;
color: saddlebrown;
text-align: center;
}
h4 {
font-family: 'Arvo', serif;
weight: bold;
font-size: 1em;
}
q {
font-family: 'Arvo', serif;
font-size: 2em;
font-weight: bold;
font-style: italic;
}
a {
font-family: 'Arvo', serif;
text-decoration: none;
color: inherit;
font-weight: bold;
}
* {
font-family: 'Arvo', serif;
color: #000;
}
/* LAYOUT AREAS: */
.main-container {
width: 60%;
max-width: 700px;
margin: 3em auto;
padding: 3em;
background-color: #FFF;
border-right: 15px solid #999;
border-bottom: 15px solid #666;
}
header {
}
main {
text-align: justify;
margin: 3em 0;
}
footer {
text-align: center;
font-size: .75em;
margin-top: 3em;
}
/* LAYOUT PIECES: */
/* Site information: */
.site-heading {
width: 50%;
margin: 4em auto;
padding: 30px;
position: relative;
z-index: 1;
border: 5px double salmon;
text-align: center;
}
#site-title {
margin: .5em;
line-height: 1em;
font-size: 3em;
}
#site-slogan {
font-size: 1em;
letter-spacing: 1px;
text-transform: uppercase;
color: salmon;
}
.site-logo {
margin: auto;
margin-top: -60px;
display: block;
postion: relative;
z-index: 2;
}
.under-img {
width: 60px;
height: 60px;
z-index: 3;
}
.over-img {
width: 60px;
height: 60px;
z-index: 4;
}
.over-img:hover {
opacity: 0;
}
/* Blog post: */
.post-title {
}
.post-subtitle {
margin-left: 15px;
padding: 5px;
border-left: 5px double salmon;
}
.post-content {
line-height: 1.45em;
}
.post-content p {
margin: 2em 0em;
}
.post-content p:first-letter {
margin-right: 1px;
font-size: 2em;
font-weight: 400;
color: chocolate;
}
/* Pull quote: */
.pull-quote {
width: 30%;
min-width: 200px;
padding: 1.5em;
margin: 2em 0 0 2em;
float: right;
background-image: url('https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/quote-left.svg');
background-size: 75px 75px;
background-repeat: no-repeat;
background-position: left top;
text-align: right;
}
.pull-quote:hover {
background-image: url('https://media-ed-online.github.io/intro-web-dev/modules/topic-09/layout-ex4/images/quote-right.svg');
background-size: 75px 75px;
background-repeat: no-repeat;
background-position: right bottom;
}
/* Read more: */
.archives-link {
min-height: 5em;
}
.button {
width: 12em;
margin: auto;
padding: 0em .5em;
position: relative;
background-color: chocolate;
border-color: #999 #666 #666 #999;
border-width: 10px 15px 15px 10px;
border-style: solid;
text-align: center;
}
.button:active {
background-color: saddlebrown;
border-color: #666 #999 #999 #666;
border-width: 15px 10px 10px 15px;
border-style: solid;
}
.button:active {
background-color: saddlebrown;
border-color: #666 #999 #999 #666;
border-width: 15px 10px 10px 15px;
border-style: solid;
}
.button h4 {
letter-spacing: 1px;
text-transform: uppercase;
color: #FFF;
}
.button h4:hover {
text-decoration: underline overline;
text-decoration-color: white;
text-decoration-style: wavy;
}
.button h4:active {
color: salmon;
text-decoration: underline overline;
text-decoration-color: salmon;
text-decoration-style: wavy;
}
/* Decorative line break: */
.line {
border-top: 5px double salmon;
}
/*----------------------------------
| CSS with Font-Linking Information |
----------------------------------*/
/* Linking a Google font: */
@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i');
/*------------------------
| CSS for Navigation Menu |
------------------------*/
/* MENU BAR (CONTAINER): */
menu {
margin: 0;
padding: 0;
background-color: chocolate;
}
/* TOP-LEVEL LINKS: */
#site-links {
margin: 0;
padding: 0;
display: inline-block;
}
#site-links .menu-item {
width: 6em;
padding: 0.5em 1em;
display: inline-block;
background-color: chocolate;
text-align: center;
color: #FFF;
}
#site-links .menu-item:hover {
background-color: saddlebrown;
color: salmon;
text-decoration: underline overline;
text-decoration-color: salmon;
text-decoration-style: wavy;
}
/* DROPDOWN: */
#site-links .dropdown {
display: inline-block;
width: 6em;
}
#site-links .dropdown-content {
display: none;
position: absolute;
background-color: saddlebrown;
z-index: 5;
}
#site-links .dropdown-content a {
color: #FFF;
font-family: 'Arvo', serif;
}
#site-links .dropdown-content a:hover {
color: saddlebrown;
font-weight: 900;
}
#site-links .dropdown:hover .dropdown-content {
display: block;
}
#site-links .dropdown-item {
min-width: 6em;
padding: .5em 1em;
display: block;
text-align: center;
}
.dropdown-item:hover {
background-color: chocolate;
}
/* SOCIAL MEDIA ACCOUNTS: */
#social-links {
padding: .5em;
display: inline-block;
float: right;
}
#social-links .social-item {
margin: 0px 5px;
}
#social-links img {
width: 20px;
height: 20px;
opacity: .5;
}
#social-links img:hover {
opacity: 1;
}