Skip to content
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.

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

Meowspace - Jackie #19

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open
Prev Previous commit
Next Next commit
adjusted space between header/main, fixed footer, cropped images, upd…
…ated learn more buttons
jackiewatanabe committed Mar 17, 2017
commit c0ae5869aaaea6f091eb30a8ea19c82e38c480dd
Binary file added assets/everybody-cropped.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/hero-resized.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 6 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
@@ -20,12 +20,14 @@ <h2><a href="index.html"> MeowSpace </a></h2>
</header>

<main>
<section id="main-logo">
<img src="assets/hero.jpg" alt="cat on floor"/>

<section id="main-logo">
<img src="assets/hero-resized.jpg" alt="cat on floor"/>
<h1> Meowspace </h1>
</section>

<section id="popular-posts">
<div>
<h2> Popular Posts </h2>

<article>
@@ -36,7 +38,6 @@ <h3> Steal the Warm Chair </h3>
<p><a href="#post1"> Learn More </a></p>
</article>


<article>
<h3> Cat not Kitten Around </h3>
<p>
@@ -68,6 +69,7 @@ <h3> Defense against the Dark Arts </h3>
</p>
<p><a href="#post5"> Learn More </a></p>
</article>
</div>

</section>

@@ -85,7 +87,7 @@ <h2> Join the Club </h2>
</section>

<section id="everybody">
<img src="assets/everybody.jpg" alt="" />
<img src="assets/everybody-cropped.jpg" alt="" />
<h2> Everybody wants to be a cat! </h2>

</section>
116 changes: 83 additions & 33 deletions styles/main.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Oswald|Pacifico|Quicksand|Roboto|Shadows+Into+Light');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Lobster+Two|Oswald|Pacifico|Quicksand|Roboto|Shadows+Into+Light');
/** {
border-style: solid;
border-color: red;
}*/



header {
/*border-bottom: : 10px;
border-color: black;*/
@@ -19,11 +21,17 @@ header {

header h2 a {
text-decoration: none;

margin: 40px;

font-size: 1.5em;
}

header h2 a:visited {
color: black;
}

header h2 a:hover {
color: white;
}
/*
header h2 a::nth-letter(5) {
text-transform: capitalize;
@@ -32,24 +40,32 @@ text-transform: capitalize;

header h2 {
float: left;
font-family: 'Pacifico', cursive;
font-family: 'Lobster Two', cursive;
font-style: italic;
font-weight: bold;
}

header nav {
float: right;
margin-right: 40px;
font-family: 'Quicksand';
}

header ul {
list-style: none;

}

header nav li {
float: left;
padding: 15px;
}

header nav li a {
text-decoration: none;
font-weight: bold;
color: black;
}

main h1, main h2 {
text-align: center;
}
@@ -59,8 +75,13 @@ main h1, main h2 {
padding: 0px;
}*/

main {
margin-top: -5px;
}

body {
margin:0px;
font-family: 'Quicksand';
}

#main-logo {
@@ -72,7 +93,7 @@ body {

/*position: relative;*/
width: 100%;
height: 400px;

top: 0px;
left: 0px;

@@ -81,13 +102,15 @@ body {
#main-logo h1 {

position: absolute;
top: 0px;
top: 70px;
font-size: 8em;
box-sizing: border-box;
text-align: center;
width: 100%;
font-family: 'Pacifico', cursive;

font-family: 'Lobster Two', cursive;
font-style: italic;
font-weight: bold;
opacity: .75
}
/*section #join-the-club {
display: inline-block;
@@ -102,14 +125,33 @@ padding: 30px;

section#popular-posts {

padding: 10px;
margin: 40px;
/*padding: 10px;*/
/*margin: 40px;*/
}

div {
margin: 30px;
padding:10px;
width: 95%;
height: 980px;
}

/*#popular-posts {
padding-bottom: 40px;
margin: 20px;
}*/

#popular-posts h2 {
font-family: 'Amatic SC', cursive;
font-size: 3em;
}

#popular-posts article {
float: left;
width: 275px;
height: 300px;
width: 25%;
height: 350px;


/*border: 10px;
border-color: black;*/
@@ -124,19 +166,21 @@ section#popular-posts {
}

#popular-posts a {
border: solid #000;
border: dotted #000;
border-width: 3 5px;
padding: 10px;
border-radius: 15px;
text-decoration: none;
text-transform: uppercase;
font-family: arial;
font-family: 'Amatic SC', cursive;
font-size: 1.5em;
color: black;
}

#popular-posts p {
margin: 30px;
text-align: center;
min-height: 175px;
}

#popular-posts a:hover {
@@ -146,54 +190,60 @@ section#popular-posts {
border-radius: 15px;
text-decoration: none;
text-transform: uppercase;
font-family: arial;
background-color: grey;
font-family: 'Amatic SC', cursive;
font-size: 1.5em;

background-color: pink;
color: white;
}

#join-the-club {
/*
clear: both;
border-style: solid;
border-color: gray;
border: 0 2px;*/

border-style: solid;
border-color: gray;
clear: both;
display: inline-block;
background-color: grey;
margin: -10px;

}

#join-the-club h2 {
font-family: 'Amatic SC', cursive;
font-size: 3em;
}

#join-the-club article {
clear: both;
float: left;
width: 45%;
text-align: justify;
padding: 30px;
padding: 40px;


}

#join-the-club img {

float: right;
max-width: 45%;
padding: 30px;
padding: 0px;

/*vertical-align: top;*/
}

#everybody h2{
clear: both;
position: absolute;
top: 0px;
text-align: center;
width: 100%;
box-sizing: border-box;
font-size: 750%;
font-family: 'Shadows Into Light', cursive;
font-family: 'Amatic SC', cursive;
padding: 30px;
}


#everybody {

clear: both;
display: inline-block;
position: relative;
@@ -207,12 +257,12 @@ section#popular-posts {


#everybody img {
clear: both;
position: relative;
background-size: cover;
width: 100%;
height: 600px;
top: 0px;

}


@@ -238,23 +288,23 @@ height: 350px;
}

p#disclaimer {
display:inline;
display: inline;
}

#copyright-disclaimer {
display: inline-block;
width: 48%;
text-align: justify;
padding: 30px;
float: left;
}


#footer-navigation {

/*float: right;
max-width: 45%;*/
float: left;
padding: 30px;

/*padding: 200px;*/
/*margin-top: 20px;
padding-top: 20px;*/
}