Skip to content

Add Css file #2

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
Ndibechinonso wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add Css file #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 11 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,40 @@
<!DOCTYPE>
<html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap">
<link rel="stylesheet" href="styles.css">

<title>Sanni's Journal</title>
</head>

<body>
<header>
<h1>Sanni's Journal</h1>
<h2>So fresh and so clean</h2>
<h2 class="hh2">So fresh and so clean</h2>
</header>
<main>
<article>
<article class="clearfix">
<h2>13/05/23: Spatulas</h2>
<p><img src="images/spatula.gif" alt="spatulas"></p>
<p>
Yesterday I went to the store and got some much-needed <a href="https://www.youtube.com/watch?v=2XbCWmY0eqY">spatulas!</a> (What better way to say I love myself than to buy myself a spatula?)
</p>
</article>
<article>
<article class="clearfix">
<h2>14/05/23: Cookie Monster Cupcakes</h2>
<p><img src="images/cookiemonster.jpg" alt="cookie monster"></p>
<p>My favorite cartoon character is Cookie Monster, and my favorite dessert is cupcakes, so Cookie Monster cupcakes are the best of both worlds.
</p>

<p>Did you know? Cookie Monster once said, <q>Sometimes me think what is love, and then me think love is what last cookie is for. Me give up the last cookie for you.</q> I wonder if the same applies for cupcakes? (If so, I don't think I can ever love ANYONE!)
</p>
</article>
</main>
<hr>
<hr style="margin-top: 20px;">
<footer>
<h2>Stay connected</h2>
<p>Join my mailing list.</p>
Expand Down
68 changes: 68 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@

body {
font-family: 'Gamja Flower', cursive;
font-weight: bold;
}

header {
position: static;
background-color: #e4572e;
font-family:'Chelsea Market', cursive;
text-align: center;
}

.clearfix {
overflow: auto;
}

.hh2 {
font-size: 15px;
color: white;
}

main {
background-color: #fffff2;
}

article {
position: relative;
width: 50%;
min-width: 600px;
margin: auto;
border: 4px solid #050401;
margin-bottom: 8px;
box-sizing:border-box;
box-shadow: 3px 3px 0 0 #e4572e;
}

img {
float: right;
}

footer {
text-align: center;
}

footer p {
margin: 5px;
}

footer h2 {
margin-bottom: -2px;
}

form p {
display: inline;
margin-right: 7;
}

form input{
box-shadow: 3px 3px 0 0 #e4572e;
}
article h2 {
margin: 0;
}

article p {
margin: 0;
}