Skip to content

Commit

Permalink
fiddled with a bunch of stuff but I forgot exactly what, oops!
Browse files Browse the repository at this point in the history
  • Loading branch information
@add2point71dots
add2point71dots committed Mar 17, 2017
1 parent 8c3373f commit e9f6e05
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 85 deletions.
24 changes: 13 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@

<head>
<meta charset="UTF-8">
<title>Meowspace</title>
<title>MeowSpace</title>
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="shortcut icon" href="assets/favicon.ico">
</head>

<body>
<header>
<h2><a href="index.html"> Meowspace </a></h2>
<h2><a href="index.html"> MeowSpace </a></h2>

<nav>
<ul>
Expand All @@ -21,9 +21,9 @@ <h2><a href="index.html"> Meowspace </a></h2>
</nav>
</header>

<main class="clear">
<section class="banner">
<h1> Meowspace </h1>
<main>
<section class="banner clear">
<h1> MeowSpace </h1>
</section>

<section id="popular-posts">
Expand Down Expand Up @@ -69,34 +69,36 @@ <h3> Defense against the Dark Arts </h3>
<p><a href="#post5"> Learn More </a></p>
</article>
</section>
<div class="clear"></div>
</section>

<section id="join-the-club" class="indent clear">
<section class>
<section id="join-the-club" class="indent">
<section class="col-left">
<h2> Join the Club </h2>
<p>
Cats go for world domination chase red laser dot. Flop over. Play riveting piece on synthesizer keyboard poop in the plant pot for shove bum in owner's face like camera lens. With tail in the air i could pee on this if i had the energy hola te quiero yet claw drapes mewl for food at 4am.
</p>
</section>
<img alt="Cat playing with mouse on chair" src="assets/join_club.jpg">
<img class="col-right" alt="Cat playing with mouse on chair" src="assets/join_club.jpg">
</section>
<section class="clear banner">
<h2> Everybody wants to be a cat! </h2>
</section>
</main>
<footer class="indent">
<section id="disclaimer">
<section id="disclaimer" class="col-left">
<h4> &copy; 2016 </h4>
<p>
Meowspace is not responsible for, and expressly disclaims all liability for, damages of any kind arising out of use, reference to, or reliance on any information contained within the site. While the information contained within the site is periodically updated, no guarantee is given that the information provided in this Web site is correct, complete, and up-to-date.
MeowSpace is not responsible for, and expressly disclaims all liability for, damages of any kind arising out of use, reference to, or reliance on any information contained within the site. While the information contained within the site is periodically updated, no guarantee is given that the information provided in this Web site is correct, complete, and up-to-date.
</p>
</section>
<nav>
<nav class="col-right">
<ul>
<li><a href="#about"> About </a></li>
<li><a href="#contact"> Contact </a> </li>
</ul>
</nav>
<div class="clear"></div>
</footer>
</body>
</html>
189 changes: 115 additions & 74 deletions styles/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,54 @@
/*** main structure ***/
/*** google fonts ***/
@import url('https://fonts.googleapis.com/css?family=Coming+Soon|Rock+Salt');

/*** general styling ***/
body {
margin: 2%;
border: solid #000 1px;
width: 96%;
margin: auto;
border: solid #7F2915 2px;
}

main {
margin-top: 70px;
}

p {
text-align: justify;
}

a {
text-decoration: none;
color: #7F2915;
transition: all 0.25s;
}

a:hover {
color: #E5B182;
}

img {
border-radius: 10px;
box-shadow: 3px 3px 5px #7F2915;
}

/*** header ***/
header {
background-color: #374960;
padding: 10px;
font-family: 'Coming Soon', cursive;
background-image: linear-gradient(#CC735F 0%, #E5B182 100%);
position: fixed;
z-index: 1;
height: 70px;
width: inherit;
margin: auto;
}

header h2 {
float: left;
display: inline-block;
margin: 12px 0 0 30px;
font-size: 2.5em;
padding: 0;
}

header a {

}

/*** header nav ***/
header nav {
float: right;
Expand All @@ -39,126 +66,140 @@ section.banner:first-of-type {
background-image: url("../assets/hero.jpg");
}

section.banner h1 {
animation: fadein 5s;
}

@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

section.banner:last-of-type {
background-image: url("../assets/everybody.jpg");
margin-top: 30px;
}

section.banner {
border-top: solid black 1px;
border-bottom: solid black 1px;
border-top: solid #7F2915 2px;
border-bottom: solid #7F2915 2px;
background-size: 100%;
background-position: 0 50%;
height: 300px;
}

section.banner h1, section.banner h2 {
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin-top: 90px;
text-align: center;
color: #fff;
}

/*** popular posts ***/
#popular-posts h2 {
font-size: 2em;
margin-top: 100px;
text-align: center;
color: #E5B182;
text-shadow: #000 1px 0 10px;
}

/*** repeated structural formatting ***/
.indent {
width: 80%;
max-width: 800px;
margin: auto;
/*border: solid #000 1px;*/
}

#popular-posts h3 {
.col-left {
display: inline-block;
float: left;
width: 48%;
vertical-align: top;
}

.col-right {
display: inline-block;
width: 47%;
margin-left: 5%;
vertical-align: top;
}

/*** popular posts ***/
#popular-posts {
border-bottom: solid #7F2915 2px;
padding-bottom: 20px;
}

#popular-posts h2 {
text-align: center;
padding: 0 5px 15px;
border-bottom: solid #000 1px;
font-size: 2em;
font-family: 'Coming Soon', cursive;
color: #7F2915;
}

#popular-posts article {
border: solid #000 1px;
border: solid #7F2915 2px;
border-radius: 10px;
margin: 1% 1%;
margin: 2%;
float: left;
width: 31%;
min-height: 300px;
width: 28.5%;
}

#popular-posts h3 {
font-family: 'Coming Soon', cursive;
min-height: 42px;
background-color: #CC735F;
color: #7F2915;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
text-align: center;
padding: 15px 4%;
margin: 0;
border-bottom: solid #7F2915 2px;
}

#popular-posts p:first-of-type {
padding: 4%;
height: 140px;
overflow: scroll;
}

#popular-posts a {
background-color: #CC735F;
display: block;
margin: auto;
text-align: center;
border: solid #000 1px;
border: solid #7F2915 2px;
width: 80%;
margin: auto;
padding: 2%;
border-radius: 10px;
}

#popular-posts article p:first-of-type {
padding: 4%;
min-height: 150px;
text-align: justify;
}

/*** join the club ***/
#join-the-club {
margin-top: 30px 0;
padding: 20px 0;
}

#join-the-club section {
display: inline-block;
width: 48%;
vertical-align: top;
}

#join-the-club p {
text-align: justify;
margin-top: 30px;
}

#join-the-club img, footer nav {
width: 48%;
margin-left: 3%;
#join-the-club h2 {
text-align: center;
color: #7F2915;
font-family: 'Coming Soon', cursive;
}

/*** footer ***/
footer {
padding: 10px 0;
}

#disclaimer h4, #disclaimer p {
display: inline;
padding: 20px 0;
}

footer #disclaimer {
float: left;
width: 48%;
font-size: .75em;
text-align: justify;
}

footer nav {
display: inline-block;
width: 48%;
margin-left: 3%;
}

/*** fonts ***/
a {
text-decoration: none;
}

/*** floats ***/
.left {
float: left;
#disclaimer h4, #disclaimer p {
display: inline;
}

.right {
float: right;
footer nav {
font-family: 'Coming Soon', cursive;
font-size: 1.2em;
}

/*** clear class ***/
.clear {
clear: both;
}

0 comments on commit e9f6e05

Please sign in to comment.