Skip to content

Ashton's Meowspace #26

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.

Sign up for GitHub

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

Open
ashtn wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Ashton's Meowspace #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6896d36
linked main and normalize css to html, added styles to header
ashtn Mar 17, 2017
2a52b28
defined main-title id, added background image to main title 'meow-space'
ashtn Mar 17, 2017
037193a
added main-content id, added border and button styles to article, sti…
ashtn Mar 17, 2017
36f2cdd
added styles to club section, still needs work but moving on to next …
ashtn Mar 17, 2017
4e818d2
added background image for everybody section and changed font color t…
ashtn Mar 17, 2017
6c3cc4d
aligned disclaimer to the left and footer nav to the right
ashtn Mar 17, 2017
b97196d
whooo added a google font
ashtn Mar 17, 2017
55d4f50
eod
ashtn Mar 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
<head>
<meta charset="UTF-8">
<title>Meowspace</title>
<link rel="stylesheet" type="text/css" href="Styles/normalize.css">
<link rel="stylesheet" type="text/css" href="Styles/main.css">
</head>

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

<nav>
<ul>
<li><a href="#login"> Login </a></li>
Expand All @@ -20,10 +21,10 @@ <h2><a href="index.html"> Meowspace </a></h2>

<main>
<section>
<h1> Meowspace </h1>
<h1 id="main-title"> Meowspace </h1>
</section>

<section>
<section id="main-content">
<h2> Popular Posts </h2>

<article>
Expand Down Expand Up @@ -69,15 +70,17 @@ <h3> Defense against the Dark Arts </h3>

</section>

<section>
<section id="club">
<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>
<div>
<img alt="Cat playing with mouse on chair" src="assets/join_club.jpg">
</div>
</section>

<section>
<section id="everybody">
<h2> Everybody wants to be a cat! </h2>
</section>
</main>
Expand Down
182 changes: 182 additions & 0 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
@import url('https://fonts.googleapis.com/css?family=Barrio');

/*colors: #495e77
#7c7486
#b7c4bb*/


h1, h2, h3 {
font-family: Barrio; sans-serif;
}

a:hover { color: #7c7486; }

header {
background-color: #b7c4bb;
padding: 2% 2% 1% 2%;
position: fixed;
top: 0px;
width: 100%;
}

header h2 a {
text-decoration: none;
color: black;
float: left;
}

nav ul {
list-style-type: none;
display:inline-block;
padding-right: 60px;
text-align:center;
/*text-decoration: none;*/
}

nav li { display:inline }



nav li a {
text-decoration: none;
white-space:nowrap;
color: #495e77
}

nav { float: right;}


#main-title {
background-image: url("../assets/hero.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding-top: 16%;
padding-bottom: 16%;
text-align:center;
font-size: 700%
}


#main-content {
padding-left: 8%;
padding-right: 8%;
margin-bottom: 6%;
}

#main-content h2 {
text-align: center;
}

#main-content article {
display:inline-block;
border-style: solid;
width: 240px;
height: 300px;
border-radius: 6%;
vertical-align: top;
padding: 0px;
margin-bottom: 5%;
margin-left: 2%;
background-color: #7c7486;
}

#main-content h3 {
/*border-style: solid;*/
/*border-width: .1em;*/
border-bottom: solid;
text-align: center;
padding-bottom: 8%
}

#main-content a {
border-style: solid;
color: black;
border-radius: 10%;
position: center;
}

#main-content p:first-child {
position: relative;
bottom: 0px
}

#main-content p > a {
text-align: center;
border-style: solid;
border-radius: 60px;
margin: 20px;
position: center;
padding: 12px 54px;
}


#club {
background-color: #b7c4bb;
padding: 5% 8% 34% 8%;
border-style: hidden;
}


#club h2 {
/*display:inline;*/
margin: 0px;
max-width: 40%;
font-size: 3.0em;
border-bottom-style: inset;

}

#club p {
float: left;
max-width: 50%;
font-size: 1.5em;
/*border-style: solid;
height: 300px;
width: 450px;*/
}

#club img {
float: right;
height: 260px;
width: 400px;
/*position: relative; */
/*margin-bottom: 6%;*/
}


#everybody {
clear: both;
background-image: url("../assets/everybody.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding-top: 2%;
padding-bottom: 10%;
text-align:center;
font-size: 3em;
}

#everybody h2 {
color: white;
}

footer h4 {
display: inline;
float: left;
/*position: absolute;*/
/*left: 0px*/
}

#disclaimer {
position: relative;
display: inline-block;
float: left;
/*max-width: 100px;*/
max-width: 50%;
/*clear: both;*/
}

footer nav {
position: relative;
}
Loading