Skip to content

css-exercise-one #50

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
cerealbeast wants to merge 6 commits into
base: master
Choose a base branch
from
Open

css-exercise-one #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
005543c
css-exercise-onw
cerealbeast Sep 11, 2019
54b79c5
second commit
cerealbeast Sep 12, 2019
ed88b06
second commit
cerealbeast Sep 13, 2019
086e69d
second commit
cerealbeast Sep 17, 2019
80426dc
third commit
cerealbeast Sep 17, 2019
302ce98
final commit
cerealbeast Sep 18, 2019
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
48 changes: 48 additions & 0 deletions css/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
45 changes: 39 additions & 6 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,69 @@
body
body {
font-size: 14px;
}

nav {
background color: yellow;
background-color: yellow;
height: 100px;
margin-top: -10px;
position: fixed;
width: 100%;

}

section {
margin: 0 auto;
margin: auto;
width: 60%;
}

h1 {
font-family sans-serif;
font-family: sans-serif;
font-size: 2em;
}

.example, h3 {
padding-top: 30px;
text-align center
text-align: left;
}

h3 {
font-family: sans-serif;
font-size: 1.3em;
padding-top: 30px;
text-align: left;
}

/**** lower three divs ****/

form {
/* display: flex; */
flex-flow: column nowrap;
align-items: center;
}

.element {
background-color: green;
height: 100px;
margin 10px 0;
width: 100%;
}

.purple {
background-color: purple;
height: 100px;
margin 10px 0;
width: 100%;
}

.yellow {
background-color: yellow;
height: 100px;
margin 10px 0;
width: 100%;
}

.blue {
background-color: blue;
height: 100px;
margin 10px 0;
width: 100%;
}
24 changes: 19 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<title>css exercise one</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</link>
</head>
<body>
<nav>
Expand All @@ -28,15 +30,27 @@ <h3>This is text for a div element</h3>
<div class="element">
<h3>This is text for a div element</h3>
</div>
<div class="element">
<div class="purple">
<h3>This is text for a div element</h3>
</div>
<div class="element">
<div class="yellow">
<h3>This is text for a div element</h3>
</div>
<div class="element">
<div class="blue">
<h3>This is text for a div element</h3>
</div>
</section>
</body>
</html>
© 2019 GitHub, Inc.
Terms
Privacy
Security
Status
Help
Contact GitHub
Pricing
API
Training
Blog
About