submitting Homework 2 #6

Merged
merged 2 commits into from Dec 12, 2018
File filter...
Filter file types
Jump to file or symbol
Failed to load files and symbols.
+504 −0
Diff settings

Always

Just for now

Prev

submitting Homework 3

  • Loading branch information...
“Luis
“Luis committed Dec 10, 2018
commit 59fe24fbd5b5931ff2f2fe9d84a037e5f342bf59
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monument | Blog</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i|Raleway:500,600" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body class="blog-page">

<header>
<div>
<h1><a href="index.html">Monument</a></h1>
</div>
</header>
<nav>
<a href="index.html#about">About</a>
<a href="index.html#gallery">Gallery</a>
<a href="blog.html">Blog</a>
<a href="index.html#contact">Contact</a>
</nav>

<div class="wrap grid-wrapper" id="main">
<section>
<article>
<h3>11/23/2016</h3>
<h2>A Visual Guide to the Southwest</h2>
<img src="images/blog_1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius soluta incidunt, eum quos consequuntur aliquam nobis velit mollitia iste, natus ex repellendus delectus quisquam et quae, in atque a. Perspiciatis excepturi ipsum temporibus, eius odit deleniti quasi voluptates eaque aliquam, iste consequatur repudiandae illo a. Voluptates eligendi reiciendis corporis itaque soluta fugit atque quaerat ipsum reprehenderit sapiente, voluptatem repellat eveniet fuga natus tempore modi vero distinctio nulla accusantium recusandae, omnis. Esse aliquam ea, similique repudiandae nihil numquam, neque enim perspiciatis. Facilis dolor praesentium impedit quidem, non unde accusantium, commodi error, soluta dolores modi blanditiis similique amet hic earum, reiciendis consectetur animi in. Exercitationem distinctio necessitatibus molestias quas laboriosam nam modi porro accusantium blanditiis, beatae incidunt aliquid nostrum laborum, magni cum recusandae autem doloremque qui perferendis iste non quaerat fugit. Aspernatur voluptatem impedit, enim!</p>
<img src="images/blog_2.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius soluta incidunt, eum quos consequuntur aliquam nobis velit mollitia iste, natus ex repellendus delectus quisquam et quae, in atque a. Perspiciatis excepturi ipsum temporibus, eius odit deleniti quasi voluptates eaque aliquam, iste consequatur repudiandae illo a. Voluptates eligendi reiciendis corporis itaque soluta fugit atque quaerat ipsum reprehenderit sapiente, voluptatem repellat eveniet fuga natus tempore modi vero distinctio nulla accusantium recusandae, omnis. Esse aliquam ea, similique repudiandae nihil numquam, neque enim perspiciatis. Facilis dolor praesentium impedit quidem, non unde accusantium, commodi error, soluta dolores modi blanditiis similique amet hic earum, reiciendis consectetur animi in. Exercitationem distinctio necessitatibus molestias quas laboriosam nam modi porro accusantium blanditiis, beatae incidunt aliquid nostrum laborum, magni cum recusandae autem doloremque qui perferendis iste non quaerat fugit. Aspernatur voluptatem impedit, enim!</p>
</article>
</section>
<aside></aside>
</div>

<footer>
<div class="wrap">
<div class="social-links">
<a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
<input type="text" placeholder="Email Address">
<button type="submit">Keep in Touch</button>
</div>

<p class="copyright">&copy;2016 Sarah Holden</p>
</footer>

<script src="js/app.js"></script>
</body>
</html>
@@ -0,0 +1,263 @@
/* ----------------------------------------
Base Styles
------------------------------------------- */
* {
box-sizing: border-box;
}

html {
font-size: 15px;
}

body {
font-family: 'Raleway', sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
text-transform: uppercase;
letter-spacing: .02em;
text-align: center;
color: #44545E;
}

/* Responsive images */
img {
max-width: 100%;
}

/* ----------------------------------------
Typography
------------------------------------------- */
p {
font-family: 'Lato', sans-serif;
text-transform: none;
line-height: 1.4;
}

h1, h2, h3, h4 {
font-weight: 600;
}

h1 {
font-size: 37.5px;
letter-spacing: 12px;
}

h2 {
margin-bottom: 45px;
}

h3 {
margin-bottom: 45px;
}

a {
text-decoration: none;
color: #7B98AA;
font-weight: 600;
}

a:hover {
color: #44545E;
transition: color .3s ease-in-out;
}



/* ----------------------------------------
Lists
------------------------------------------- */
ul a {
text-transform: none;
}

ul {
padding-left: 16px;
}

li {
text-align: left;
margin-bottom: 12.8px;
color: #44545E;

}

/* ----------------------------------------
Layout
------------------------------------------- */
section {
padding: 0 30px 54.4px 30px;
width: 70%;
text-align: left;
}

.wrap {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}

.grid-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

/* ----------------------------------------
Header
------------------------------------------- */
header {
padding-top: 30px;
background-image: url('../images/blog_header_bg.jpg');
background-size: cover;
background-position: center;
height: 350px;
margin-bottom: 48px;
}

nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
z-index: 100;
}

nav a {
font-weight: 600;
letter-spacing: 0.75px;
padding: 20px 60px;
display: inline-block;
border-bottom: none;
text-transform: uppercase;
}

h1 a,
h1 a:hover {
color: white;
margin-top: 122px;
display: inline-block;
}

/* ----------------------------------------
Footer
------------------------------------------- */
footer {
background-color: #CDF3F6;
overflow: auto;
}

footer .wrap {
padding: 30px 15px;
}

.social-links a {
font-size: 30px;
padding: 15px;
margin-bottom: 30px;
display: inline-block;
color: #44545E;
}

.copyright {
border-top: 2px solid #44545E;
padding: 15px 0 3px;
}

/* ----------------------------------------
Aside
------------------------------------------- */
aside {
width: 26%;
text-align: left;
padding-right: 16px;
}

aside h3 {
margin-bottom: 19.2px;
}

aside img {
margin: 32px 0;
}

aside {
padding-top: 48px;
}

/* ----------------------------------------
Articles
------------------------------------------- */
article h3 {
margin-bottom: 0;
}


/* ----------------------------------------
Buttons
------------------------------------------- */
button {
cursor: pointer;
outline: 0;
border: 2px solid #44545E;
color: #44545E;
padding: 8px 25.5px;
background-color: transparent;
font-weight: 500;
text-transform: uppercase;
font-size: 12.299px;
letter-spacing: 1.2px;
transition: all .3s ease-in-out;
}

button:hover {
background-color: #44545E;
color: white;
font-weight: 600;
}

/* ----------------------------------------
Forms
------------------------------------------- */
input {
margin-bottom: 12px;
margin-right: 30px;
padding: 11px 10px;
outline: 0;
width: 300px;
border: 0;
text-align: center;
}

::-webkit-input-placeholder {
color: #7C878E;
text-transform: uppercase;
letter-spacing: 0.75px;
font-size: 12.299px;
font-weight: 600;
}

:-moz-placeholder { /* Firefox 18- */
color: #7C878E;
text-transform: uppercase;
letter-spacing: 0.75px;
font-size: 12.299px;
font-weight: 600;
}

::-moz-placeholder { /* Firefox 19+ */
color: #7C878E;
text-transform: uppercase;
letter-spacing: 0.75px;
font-size: 12.299px;
font-weight: 600;
}

:-ms-input-placeholder {
color: #7C878E;
text-transform: uppercase;
letter-spacing: 0.75px;
font-size: 12.299px;
font-weight: 600;
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.