8000 Review the index page HMTL and CSS and made some cosmetic alterations… · muses-code-js/js-intro-workshop@aff2c7f · GitHub
[go: up one dir, main page]
Skip to content
8000

Commit aff2c7f

Browse files
twalveButenkoT
twalve
authored and
ButenkoT
committed
Review the index page HMTL and CSS and made some cosmetic alterations (#10)
* Reset indents and revised copy Removed extraneous Google Fonts call Reset child indents to soft tab four spaces Revised the copy to reflect use cases Rationalised the class names * Set Mobilefirst, applied ideomatic changes Revised styles to Mobile first Reset font size so 1rem = 10px Used colour names Applied ideomatic changes to spacing and ordering Removed a couple of extraneous classes Restructured document to reflect DOM more closely Added a second breakpoint
1 parent dd184a2 commit aff2c7f

File tree

2 files changed

+130
-89
lines changed

2 files changed

+130
-89
lines changed

‎css/main.css

Lines changed: 82 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,131 @@
1-
html, body{
1+
html, body {
22
margin: 0;
33
padding: 0;
44
}
55

6-
body{
6+
html {
7+
font-size: 62.5%;
8+
}
9+
10+
body {
11+
align-items: center;
12+
background: #fee13d;
713
display: flex;
814
flex-direction: column;
9-
justify-content: center;
10-
align-items: center;
11-
background: #fee13d url(../img/woman.jpg) no-repeat bottom right;
12-
height: 100vh;
13-
min-height: 575px;
1415
font-family: 'Source Sans Pro', sans-serif;
15-
font-size: 16px;
16+
font-size: 100%;
17+
justify-content: center;
18+
min-height: 57.5rem;
1619
}
1720

18-
@media only screen and (max-width: 1024px) {
19-
body{
20-
background: #fee13d;
21-
}
21+
body * {
22+
box-sizing: border-box;
2223
}
2324

24-
header{
25+
header {
2526
box-sizing: border-box;
2627
flex: 0 1 auto;
28+
text-align: center;
2729
}
2830

29-
section{
30-
width: 100%;
31-
box-sizing: border-box;
32-
flex: 2 auto;
31+
h1 {
32+
font-size: 3.5rem;
33+
margin: 0 3.5rem;
3334
}
3435

35-
footer {
36-
width: calc( 100% - 60px);
37-
background-color: #000000;
38-
font-family: Georgia,serif;
39-
color: #ffffff;
40-
text-decoration: none;
41-
font-size: 0.9rem;
42-
padding: 0 30px;
43-
display: flex;
44-
flex-direction: row;
45-
justify-content: space-between;
46-
align-items: center;
36+
h2 {
37+
font-size: 3rem;
38+
margin: 0 3rem;
4739
}
4840

4941
img {
5042
width: 100%;
51-
max-width: 500px;
43+
max-width: 64rem;
5244
}
5345

54-
h1, #logo{
55-
text-align: center;
46+
a {
47+
color: inherit;
48+
text-decoration: none;
49+
}
50+
51+
abbr {
52+
text-decoration: none;
5653
}
5754

58-
h1{
59-
margin: 0 50px 50px 50px;
60-
font-size: 35px;
55+
main {
56+
flex: 2 auto;
57+
width: calc(100% - 4rem);
6158
}
6259

63-
.settings {
60+
main > div {
6461
margin: 0 auto;
65-
max-width: 600px;
62+
max-width: 64rem;
6663
}
6764

68-
.settings > p {
69-
font-size: 26px;
65+
main p {
66+
font-size: 2.6rem;
7067
}
7168

72-
footer > ul {
69+
main a {
70+
font-weight: 800;
71+
}
72+
73+
footer {
74+
background-color: black;
75+
padding: 1rem 1rem 2rem;
76+
width: 100%;
77+
}
78+
79+
footer > div {
80+
background-color: black;
81+
color: white;
82+
display: flex;
83+
flex-direction: row;
84+
font-family: Georgia, serif;
85+
font-size: 1.4rem;
86+
justify-content: space-between;
87+
margin: 0 auto;
88+
padding: 0 2rem;
89+
max-width: 64rem;
90+
}
91+
92+
footer ul {
7393
list-style: none;
74-
-webkit-padding-start: 0;
94+
margin: 0;
95+
padding: 0;
7596
}
7697

7798
footer li {
78-
padding: 5px;
99+
padding: .25rem;
100+
}
101+
102+
footer span {
103+
display: block;
79104
}
80105

81106
footer a {
82-
text-decoration: none;
83107
color: #9E9E9E;
84108
font-style: italic;
109+
text-decoration: none;
85110
}
86111

87112
footer a:hover {
88-
color: #ffffff;
113+
color: white;
89114
}
90115

91116
#surprise {
92117
color: red;
93-
font-size: 35px;
118+
font-size: 2.25rem;
119+
}
120+
121+
@media only screen and (min-width: 640px) {
122+
footer span {
123+
display: inline;
124+
}
125+
}
126+
127+
@media only screen and (min-width: 1024px) {
128+
body {
129+
background: #fee13d url(../img/woman.jpg) no-repeat bottom right;
130+
}
94131
}

‎index.html

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,52 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>NodeGirls JavaScript Workshop</title>
6-
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Source+Sans+Pro:200" rel="stylesheet">
7-
<link rel="stylesheet" href="css/main.css">
8-
</head>
9-
<body>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>NodeGirls JavaScript Workshop</title>
6+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200">
7+
<link rel="stylesheet" href="css/main.css">
8+
</head>
9+
<body>
10+
<header>
11+
<div id="logo">
12+
<img src="img/logo.png" alt="Welcome to Node Girls">
13+
</div>
14+
<h1>Hello everyone.</h1>
15+
<h2>Let's do some interactive coding today!</h2>
16+
</header>
1017

11-
<header>
12-
<div id="logo">
13-
<img src="img/logo.png" alt="node-girls-logo">
14-
</div>
15-
</header>
16-
17-
<section>
18-
<h1>Hello everyone. Let's do some interactive coding today! </h1>
19-
<div class="settings">
20-
<p>To open the browser console, double click on the screen (or press
21-
<i>'Command+Option+J'</i> on mac and <i>'F12'</i> on Windows) and console
22-
will appear at the bottom or on the right side of the screen. It will work
23-
for Chrome and Firefox after selecting <i>'Inspect'</i>.
24-
</p>
25-
<p>For Safari, go to <i>'Safari > Preferences > Advanced >
26-
and tick the box Show Develop menu in menu bar'</i>, restart Safari, and now you can
27-
double click on the page and select <i>'Inspect Element'</i> to see the console.
28-
</p>
29-
</div>
30-
</section>
31-
<footer>
32-
<ul>
33-
<li class="twitter">
34-
Twitter: <a href="https://twitter.com/NodeGirlsSydney" target="_blank" rel="noopener noreferrer">@NodeGirlsSydney</a>
35-
<a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a>
36-
</li>
37-
<li class="facebook">Facebook: <a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank" rel="noopener noreferrer">NodeGirlsAustralia</a></li>
38-
</ul>
39-
<ul>
40-
<li class="website">Website: <a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a></li>
41-
<li class="email">e-mail: <a href="mailto:info@nodegirls.com.au" target="_blank" rel="noopener noreferrer">info@nodegirls.com.au</a></li>
42-
</ul>
43-
</footer>
44-
45-
<script src="js/level1.js"></script>
46-
47-
</body>
18+
<main>
19+
<div>
20+
<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>
21+
<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>
22+
<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>
23+
</div>
24+
</main>
25+
<footer>
26+
<div>
27+
<ul>
28+
<li class="twitter">
29+
<span>Twitter:</span>
30+
<a href="https://twitter.com/NodeGirlsSydney" target="_blank" rel="noopener noreferrer">@NodeGirlsSydney</a>
31+
<a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a>
32+
</li>
33+
<li class="facebook">
34+
<span>Facebook:</span>
35+
<a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank" rel="noopener noreferrer">NodeGirlsAustralia</a>
36+
</li>
37+
</ul>
38+
<ul>
39+
<li class="website">
40+
<span>Website:</span>
41+
<a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a>
42+
</li>
43+
<li class="email">
44+
<span>e-mail:</span>
45+
<a href="mailto:info@nodegirls.com.au" target="_blank" rel="noopener noreferrer">info@nodegirls.com.au</a>
46+
</li>
47+
</ul>
48+
</div>
49+
</footer>
50+
<script src="js/level1.js"></script>
51+
</body>
4852
</html>

0 commit comments

Comments
 (0)
0