Skip to content

Review the index page HMTL and CSS and made some cosmetic alterations #10

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

Merged
merged 2 commits into from
Jul 31, 2017
Merged

Review the index page HMTL and CSS and made some cosmetic alterations #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2905468
Reset indents and revised copy
twalve Jul 21, 2017
dcac74b
Set Mobilefirst, applied ideomatic changes
twalve Jul 21, 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
127 changes: 82 additions & 45 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,131 @@
html, body{
html, body {
margin: 0;
padding: 0;
}

body{
html {
font-size: 62.5%;
}

body {
align-items: center;
background: #fee13d;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fee13d url(../img/woman.jpg) no-repeat bottom right;
height: 100vh;
min-height: 575px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
font-size: 100%;
justify-content: center;
min-height: 57.5rem;
}

@media only screen and (max-width: 1024px) {
body{
background: #fee13d;
}
body * {
box-sizing: border-box;
}

header{
header {
box-sizing: border-box;
flex: 0 1 auto;
text-align: center;
}

section{
width: 100%;
box-sizing: border-box;
flex: 2 auto;
h1 {
font-size: 3.5rem;
margin: 0 3.5rem;
}

footer {
width: calc( 100% - 60px);
background-color: #000000;
font-family: Georgia,serif;
color: #ffffff;
text-decoration: none;
font-size: 0.9rem;
padding: 0 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
h2 {
font-size: 3rem;
margin: 0 3rem;
}

img {
width: 100%;
max-width: 500px;
max-width: 64rem;
}

h1, #logo{
text-align: center;
a {
color: inherit;
text-decoration: none;
}

abbr {
text-decoration: none;
}

h1{
margin: 0 50px 50px 50px;
font-size: 35px;
main {
flex: 2 auto;
width: calc(100% - 4rem);
}

.settings {
main > div {
margin: 0 auto;
max-width: 600px;
max-width: 64rem;
}

.settings > p {
font-size: 26px;
main p {
font-size: 2.6rem;
}

footer > ul {
main a {
font-weight: 800;
}

footer {
background-color: black;
padding: 1rem 1rem 2rem;
width: 100%;
}

footer > div {
background-color: black;
color: white;
display: flex;
flex-direction: row;
font-family: Georgia, serif;
font-size: 1.4rem;
justify-content: space-between;
margin: 0 auto;
padding: 0 2rem;
max-width: 64rem;
}

footer ul {
list-style: none;
-webkit-padding-start: 0;
margin: 0;
padding: 0;
}

footer li {
padding: 5px;
padding: .25rem;
}

footer span {
display: block;
}

footer a {
text-decoration: none;
color: #9E9E9E;
font-style: italic;
text-decoration: none;
}

footer a:hover {
color: #ffffff;
color: white;
}

#surprise {
color: red;
font-size: 35px;
font-size: 2.25rem;
}

@media only screen and (min-width: 640px) {
footer span {
display: inline;
}
}

@media only screen and (min-width: 1024px) {
body {
background: #fee13d url(../img/woman.jpg) no-repeat bottom right;
}
}
92 changes: 48 additions & 44 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,52 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NodeGirls JavaScript Workshop</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Source+Sans+Pro:200" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<head>
<meta charset="UTF-8">
<title>NodeGirls JavaScript Workshop</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div id="logo">
<img src="img/logo.png" alt="Welcome to Node Girls">
</div>
<h1>Hello everyone.</h1>
<h2>Let's do some interactive coding today!</h2>
</header>

<header>
<div id="logo">
<img src="img/logo.png" alt="node-girls-logo">
</div>
</header>

<section>
<h1>Hello everyone. Let's do some interactive coding today! </h1>
<div class="settings">
<p>To open the browser console, double click on the screen (or press
<i>'Command+Option+J'</i> on mac and <i>'F12'</i> on Windows) and console
will appear at the bottom or on the right side of the screen. It will work
for Chrome and Firefox after selecting <i>'Inspect'</i>.
</p>
<p>For Safari, go to <i>'Safari > Preferences > Advanced >
and tick the box Show Develop menu in menu bar'</i>, restart Safari, and now you can
double click on the page and select <i>'Inspect Element'</i> to see the console.
</p>
</div>
</section>
<footer>
<ul>
<li class="twitter">
Twitter: <a href="https://twitter.com/NodeGirlsSydney" target="_blank" rel="noopener noreferrer">@NodeGirlsSydney</a>
<a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a>
</li>
<li class="facebook">Facebook: <a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank" rel="noopener noreferrer">NodeGirlsAustralia</a></li>
</ul>
<ul>
<li class="website">Website: <a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a></li>
<li class="email">e-mail: <a href="mailto:info@nodegirls.com.au" target="_blank" rel="noopener noreferrer">info@nodegirls.com.au</a></li>
</ul>
</footer>

<script src="js/level1.js"></script>

</body>
<main>
<div>
<p>On <a href="https://www.google.com/chrome/browser/desktop/index.html">Chrome</a> and <a href="https://www.mozilla.org/en-GB/firefox/new/">Firefox</a>, to open the Browser Console, invoke the context/right click menu and select <i>'Inspect'</i>. The console will appear at the bottom or on the right side of the screen.</p>
<p>If you're ready for a shortcut, press <i>'<abbr title="Command">CMD</abbr>+<abbr title="Option">OPT</abbr>+J'</i> on Mac, or <i>'F12'</i> on Windows</p>
<p>On <a href="https://support.apple.com/en-au/HT204416">Safari</a>, go to <i>'Safari > Preferences > Advanced >'</i> and tick the box Show Develop Menu in menu bar, restart Safari, and now you can double click on the page and select <i>'Inspect Element'</i> to see the console.</p>
</div>
</main>
<footer>
<div>
<ul>
<li class="twitter">
<span>Twitter:</span>
<a href="https://twitter.com/NodeGirlsSydney" target="_blank" rel="noopener noreferrer">@NodeGirlsSydney</a>
<a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a>
</li>
<li class="facebook">
<span>Facebook:</span>
<a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank" rel="noopener noreferrer">NodeGirlsAustralia</a>
</li>
</ul>
<ul>
<li class="website">
<span>Website:</span>
<a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a>
</li>
<li class="email">
<span>e-mail:</span>
<a href="mailto:info@nodegirls.com.au" target="_blank" rel="noopener noreferrer">info@nodegirls.com.au</a>
</li>
</ul>
</div>
</footer>
<script src="js/level1.js"></script>
</body>
</html>