Skip to content

Commit e1eb62d

Browse files
csinozichcsinozich
committed
Nav, img, mixins, button
1 parent b711908 commit e1eb62d

File tree

7 files changed

+383
-31
lines changed

7 files changed

+383
-31
lines changed

‎Self-Study-Questions.txt

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
1. What is the difference between an adaptive website and a fully responsive website?
2+
3+
An adaptive website has breakpoints and is only adaptive at these points, but not between them. A responsive website not only has breakpoints, but uses responsive units so that the website is responsible at all sizes.
4+
5+
2. Describe what it means to be mobile first vs desktop first.
6+
7+
Mobile design is generally built functionality-first, making sure that the bare minimum need for the website is available on the smallest screen. Later, it will layer in 'extras' for larger resolutions. Desktop first layers in all of those 'extras' first, focusing on the main design for the website, and then pares down to become mobile-friendly.
8+
9+
3. What does `font-size: 62.5%` in the `html` tag do for us when using `rem` units?
10+
11+
Sets font-size to base ten, so rem units will logically reflect pixels (e.g., 16px = 1.6rem)
12+
13+
4. How would you describe preprocessing to someone new to CSS?
14+
15+
Preprocessing is a way to introduce a different syntax to CSS based on preference that automatically compiles to standard CSS for a website to read.
16+
17+
5. What is your favorite concept in preprocessing? What is the concept that gives you the most trouble?
18+
19+
I'm _really_ loving the nesting portion of LESS. I find this significantly easier to manage and organize. Media queries within LESS give me trouble - both nested and escaped, but especially as escapes. I think with time it'll come to me, but I'm struggling a little with navigating escapes within imported files.

‎css/index.css

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
html,
6+
body,
7+
div,
8+
span,
9+
applet,
10+
object,
11+
iframe,
12+
h1,
13+
h2,
14+
h3,
15+
h4,
16+
h5,
17+
h6,
18+
p,
19+
blockquote,
20+
pre,
21+
a,
22+
abbr,
23+
acronym,
24+
address,
25+
big,
26+
cite,
27+
code,
28+
del,
29+
dfn,
30+
em,
31+
img,
32+
ins,
33+
kbd,
34+
q,
35+
s,
36+
samp,
37+
small,
38+
strike,
39+
strong,
40+
sub,
41+
sup,
42+
tt,
43+
var,
44+
b,
45+
u,
46+
i,
47+
center,
48+
dl,
49+
dt,
50+
dd,
51+
ol,
52+
ul,
53+
li,
54+
fieldset,
55+
form,
56+
label,
57+
legend,
58+
table,
59+
caption,
60+
tbody,
61+
tfoot,
62+
thead,
63+
tr,
64+
th,
65+
td,
66+
article,
67+
aside,
68+
canvas,
69+
details,
70+
embed,
71+
figure,
72+
figcaption,
73+
footer,
74+
header,
75+
hgroup,
76+
menu,
77+
nav,
78+
output,
79+
ruby,
80+
section,
81+
summary,
82+
time,
83+
mark,
84+
audio,
85+
video {
86+
margin: 0;
87+
padding: 0;
88+
border: 0;
89+
font-size: 100%;
90+
font: inherit;
91+
vertical-align: baseline;
92+
}
93+
/* HTML5 display-role reset for older browsers */
94+
article,
95+
aside,
96+
details,
97+
figcaption,
98+
figure,
99+
footer,
100+
header,
101+
hgroup,
102+
menu,
103+
nav,
104+
section {
105+
display: block;
106+
}
107+
body {
108+
line-height: 1;
109+
}
110+
ol,
111+
ul {
112+
list-style: none;
113+
}
114+
blockquote,
115+
q {
116+
quotes: none;
117+
}
118+
blockquote:before,
119+
blockquote:after,
120+
q:before,
121+
q:after {
122+
content: '';
123+
content: none;
124+
}
125+
table {
126+
border-collapse: collapse;
127+
border-spacing: 0;
128+
}
129+
* {
130+
box-sizing: border-box;
131+
}
132+
html {
133+
font-size: 62.5%;
134+
}
135+
html,
136+
body {
137+
font-family: 'Ubuntu', sans-serif;
138+
color: #5E6164;
139+
}
140+
h1,
141+
h2,
142+
h3,
143+
h4,
144+
h5 {
145+
font-family: 'Russo One', sans-serif;
146+
color: #23293B;
147+
}
148+
h2 {
149+
font-size: 3.2rem;
150+
}
151+
h3 {
152+
font-size: 2.8rem;
153+
}
154+
p {
155+
font-size: 1.6rem;
156+
line-height: 1.4;
157+
}
158+
.container {
159+
max-width: 800px;
160+
width: 100%;
161+
margin: 0 auto;
162+
}
163+
nav {
164+
width: 100%;
165+
background-color: #F6F6F6;
166+
}
167+
nav .nav {
168+
width: 800px;
169+
margin: 0 auto;
170+
display: flex;
171+
flex-direction: column;
172+
align-items: center;
173+
justify-content: center;
174+
}
175+
nav .nav h1 {
176+
font-size: 3rem;
177+
margin: 20px 0;
178+
}
179+
nav .nav .navigation {
180+
width: 60%;
181+
display: flex;
182+
justify-content: space-evenly;
183+
padding: 10px 0;
184+
}
185+
nav .nav .navigation a {
186+
text-decoration: none;
187+
color: black;
188+
font-size: 1.4rem;
189+
}
190+
footer {
191+
color: #22283B;
192+
background: #f4f4f4;
193+
padding: 20px 0;
194+
border: 1px double #e0e0e0;
195+
border-radius: 10px;
196+
display: flex;
197+
justify-content: center;
198+
align-items: center;
199+
}
200+
.home .intro img {
201+
border-radius: 5px;
202+
}
203+
.home .intro h2 {
204+
padding: 15px;
205+
}
206+
.home .intro p {
207+
padding: 0 15px;
208+
}
209+
.home .space-images {
210+
display: flex;
211+
flex-wrap: wrap;
212+
width: 100%;
213+
}
214+
.home .space-images img {
215+
width: 28%;
216+
margin: 20px 2.5%;
217+
border-radius: 20px;
218+
height: 100%;
219+
}
220+
.home .visit-planets {
221+
padding: 15px;
222+
}
223+
.home .visit-planets h3 {
224+
margin-top: 11px;
225+
}
226+
.home .visit-planets p {
227+
margin-top: 13px;
228+
}
229+
.home .walk {
230+
margin-top: 60px;
231+
border-top: 1px solid #dee2e6;
232+
padding: 50px 60px;
233+
display: flex;
234+
justify-content: center;
235+
}
236+
.home .walk .walk-text {
237+
width: 50%;
238+
}
239+
.home .walk .walk-text h3 {
240+
margin-bottom: 10px;
241+
}
242+
.home .walk .walk-text p {
243+
margin-bottom: 26px;
244+
}
245+
.home .walk .walk-text .btn {
246+
height: 40px;
247+
width: 100px;
248+
color: white;
249+
font-size: 1.8rem;
250+
background-color: #22283A;
251+
text-align: center;
252+
padding: 10px 0;
253+
border-radius: 5px;
254+
}
255+
.home .walk .walk-text .btn:hover {
256+
background-color: white;
257+
color: #22283A;
258+
}
259+
.home .walk .walk-img {
260+
width: 46%;
261+
margin-left: 4%;
262+
}
263+
.home .walk .walk-img img {
264+
width: 100%;
265+
height: auto;
266+
border-radius: 10px;
267+
}

‎index.html

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,37 @@
33
<html lang="en">
44
<head>
55
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
67

78
<title>SpaceWalkers</title>
89

910
<link href="https://fonts.googleapis.com/css?family=Russo+One|Ubuntu" rel="stylesheet">
1011
<link href="css/index.css" rel="stylesheet">
1112

12-
<!--[if lt IE 9]>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
14-
<![endif]-->
1513
</head>
1614

1715
<body>
1816

19-
<!-- navigation code here -->
17+
<nav>
18+
<div class='nav'>
19+
<h1>SpaceWalkers</h1>
20+
<div class='navigation'>
21+
<a href='#'>Home</a>
22+
<a href='#'>About Us</a>
23+
<a href='#'>Blog</a>
24+
<a href='#'>Contact</a>
25+
<a href='#'>Sign In</a>
26+
</div>
27+
</div>
28+
</nav>
2029

2130
<div class="container home">
2231

2332
<header class="intro">
24-
<!-- image code here -->
33+
<img src='img/main-header.png'>
2534

2635
<h2>Lift Off</h2>
27-
36+
2837
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would fall apart. Seeing this has to change a man.</p>
2938
</header>
3039

@@ -33,29 +42,29 @@ <h2>Lift Off</h2>
3342
<img src="img/sky.png" class="sky" alt="Space sky image">
3443
<img src="img/launch.png" class="launch" alt="Launching rocket">
3544
</section>
36-
45+
3746
<section class="visit-planets">
38-
47+
3948
<h3>Can We Visit Planets?</h3>
40-
49+
4150
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet.</p>
42-
51+
4352
<p>Which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it.</p>
4453
</section>
45-
54+
4655
<section class="walk">
4756
<div class="walk-text">
4857
<h3>Let's Go For A Walk</h3>
4958

5059
<p>The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round.</p>
51-
60+
5261
<p>Suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth.</p>
53-
62+
5463
<div class="btn">
5564
Sign Up
5665
</div>
5766
</div>
58-
67+
5968
<div class="walk-img">
6069
<img src="img/space-walk.png" alt="Space walking astronaut">
6170
</div>
@@ -68,4 +77,4 @@ <h3>Let's Go For A Walk</h3>
6877

6978
</div>
7079
</body>
71-
</html>
80+
</html>

0 commit comments

Comments
 (0)