Skip to content

Commit dbdacf2

Browse files
john-smilgajohn-smilga
committed
project number 4 switched back to local styles
1 parent e8d4afd commit dbdacf2

File tree

4 files changed

+308
-4
lines changed

4 files changed

+308
-4
lines changed

‎4-navbar/final/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
rel="stylesheet"
1010
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
1111
/>
12-
<!-- global styles -->
13-
<linkrel="stylesheet" href="../../global.css" />
12+
1413
<!-- styles -->
1514
<linkrel="stylesheet" href="styles.css" />
1615
</head>

‎4-navbar/final/styles.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,156 @@
1+
/*
2+
===============
3+
Fonts
4+
===============
5+
*/
6+
@importurl("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
7+
8+
/*
9+
===============
10+
Variables
11+
===============
12+
*/
13+
14+
:root{
15+
/* dark shades of primary color*/
16+
--clr-primary-1:hsl(205,86%,17%);
17+
--clr-primary-2:hsl(205,77%,27%);
18+
--clr-primary-3:hsl(205,72%,37%);
19+
--clr-primary-4:hsl(205,63%,48%);
20+
/* primary/main color */
21+
--clr-primary-5:hsl(205,78%,60%);
22+
/* lighter shades of primary color */
23+
--clr-primary-6:hsl(205,89%,70%);
24+
--clr-primary-7:hsl(205,90%,76%);
25+
--clr-primary-8:hsl(205,86%,81%);
26+
--clr-primary-9:hsl(205,90%,88%);
27+
--clr-primary-10:hsl(205,100%,96%);
28+
/* darkest grey - used for headings */
29+
--clr-grey-1:hsl(209,61%,16%);
30+
--clr-grey-2:hsl(211,39%,23%);
31+
--clr-grey-3:hsl(209,34%,30%);
32+
--clr-grey-4:hsl(209,28%,39%);
33+
/* grey used for paragraphs */
34+
--clr-grey-5:hsl(210,22%,49%);
35+
--clr-grey-6:hsl(209,23%,60%);
36+
--clr-grey-7:hsl(211,27%,70%);
37+
--clr-grey-8:hsl(210,31%,80%);
38+
--clr-grey-9:hsl(212,33%,89%);
39+
--clr-grey-10:hsl(210,36%,96%);
40+
--clr-white:#fff;
41+
--clr-red-dark:hsl(360,67%,44%);
42+
--clr-red-light:hsl(360,71%,66%);
43+
--clr-green-dark:hsl(125,67%,44%);
44+
--clr-green-light:hsl(125,71%,66%);
45+
--clr-black:#222;
46+
--ff-primary:"Roboto", sans-serif;
47+
--ff-secondary:"Open Sans", sans-serif;
48+
--transition: all 0.3s linear;
49+
--spacing:0.1rem;
50+
--radius:0.25rem;
51+
--light-shadow:05px15pxrgba(0,0,0,0.1);
52+
--dark-shadow:05px15pxrgba(0,0,0,0.2);
53+
--max-width:1170px;
54+
--fixed-width:620px;
55+
}
56+
/*
57+
===============
58+
Global Styles
59+
===============
60+
*/
61+
62+
*,
63+
::after,
64+
::before{
65+
margin:0;
66+
padding:0;
67+
box-sizing: border-box;
68+
}
69+
body{
70+
font-family:var(--ff-secondary);
71+
background:var(--clr-grey-10);
72+
color:var(--clr-grey-1);
73+
line-height:1.5;
74+
font-size:0.875rem;
75+
}
76+
ul{
77+
list-style-type: none;
78+
}
79+
a{
80+
text-decoration: none;
81+
}
82+
h1,
83+
h2,
84+
h3,
85+
h4{
86+
letter-spacing:var(--spacing);
87+
text-transform: capitalize;
88+
line-height:1.25;
89+
margin-bottom:0.75rem;
90+
font-family:var(--ff-primary);
91+
}
92+
h1{
93+
font-size:3rem;
94+
}
95+
h2{
96+
font-size:2rem;
97+
}
98+
h3{
99+
font-size:1.25rem;
100+
}
101+
h4{
102+
font-size:0.875rem;
103+
}
104+
p{
105+
margin-bottom:1.25rem;
106+
color:var(--clr-grey-5);
107+
}
108+
@media screen and (min-width:800px){
109+
h1{
110+
font-size:4rem;
111+
}
112+
h2{
113+
font-size:2.5rem;
114+
}
115+
h3{
116+
font-size:1.75rem;
117+
}
118+
h4{
119+
font-size:1rem;
120+
}
121+
body{
122+
font-size:1rem;
123+
}
124+
h1,
125+
h2,
126+
h3,
127+
h4{
128+
line-height:1;
129+
}
130+
}
131+
/* global classes */
132+
133+
/* section */
134+
.section{
135+
padding:5rem0;
136+
}
137+
138+
.section-center{
139+
width:90vw;
140+
margin:0 auto;
141+
max-width:1170px;
142+
}
143+
@media screen and (min-width:992px){
144+
.section-center{
145+
width:95vw;
146+
}
147+
}
148+
main{
149+
min-height:100vh;
150+
display: grid;
151+
place-items: center;
152+
}
153+
1154
/*
2155
===============
3156
Navbar

‎4-navbar/setup/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
rel="stylesheet"
1010
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
1111
/>
12-
<!-- global styles -->
13-
<linkrel="stylesheet" href="../../global.css" />
12+
1413
<!-- styles -->
1514
<linkrel="stylesheet" href="styles.css" />
1615
</head>

‎4-navbar/setup/styles.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,156 @@
1+
/*
2+
===============
3+
Fonts
4+
===============
5+
*/
6+
@importurl("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
7+
8+
/*
9+
===============
10+
Variables
11+
===============
12+
*/
13+
14+
:root{
15+
/* dark shades of primary color*/
16+
--clr-primary-1:hsl(205,86%,17%);
17+
--clr-primary-2:hsl(205,77%,27%);
18+
--clr-primary-3:hsl(205,72%,37%);
19+
--clr-primary-4:hsl(205,63%,48%);
20+
/* primary/main color */
21+
--clr-primary-5:hsl(205,78%,60%);
22+
/* lighter shades of primary color */
23+
--clr-primary-6:hsl(205,89%,70%);
24+
--clr-primary-7:hsl(205,90%,76%);
25+
--clr-primary-8:hsl(205,86%,81%);
26+
--clr-primary-9:hsl(205,90%,88%);
27+
--clr-primary-10:hsl(205,100%,96%);
28+
/* darkest grey - used for headings */
29+
--clr-grey-1:hsl(209,61%,16%);
30+
--clr-grey-2:hsl(211,39%,23%);
31+
--clr-grey-3:hsl(209,34%,30%);
32+
--clr-grey-4:hsl(209,28%,39%);
33+
/* grey used for paragraphs */
34+
--clr-grey-5:hsl(210,22%,49%);
35+
--clr-grey-6:hsl(209,23%,60%);
36+
--clr-grey-7:hsl(211,27%,70%);
37+
--clr-grey-8:hsl(210,31%,80%);
38+
--clr-grey-9:hsl(212,33%,89%);
39+
--clr-grey-10:hsl(210,36%,96%);
40+
--clr-white:#fff;
41+
--clr-red-dark:hsl(360,67%,44%);
42+
--clr-red-light:hsl(360,71%,66%);
43+
--clr-green-dark:hsl(125,67%,44%);
44+
--clr-green-light:hsl(125,71%,66%);
45+
--clr-black:#222;
46+
--ff-primary:"Roboto", sans-serif;
47+
--ff-secondary:"Open Sans", sans-serif;
48+
--transition: all 0.3s linear;
49+
--spacing:0.1rem;
50+
--radius:0.25rem;
51+
--light-shadow:05px15pxrgba(0,0,0,0.1);
52+
--dark-shadow:05px15pxrgba(0,0,0,0.2);
53+
--max-width:1170px;
54+
--fixed-width:620px;
55+
}
56+
/*
57+
===============
58+
Global Styles
59+
===============
60+
*/
61+
62+
*,
63+
::after,
64+
::before{
65+
margin:0;
66+
padding:0;
67+
box-sizing: border-box;
68+
}
69+
body{
70+
font-family:var(--ff-secondary);
71+
background:var(--clr-grey-10);
72+
color:var(--clr-grey-1);
73+
line-height:1.5;
74+
font-size:0.875rem;
75+
}
76+
ul{
77+
list-style-type: none;
78+
}
79+
a{
80+
text-decoration: none;
81+
}
82+
h1,
83+
h2,
84+
h3,
85+
h4{
86+
letter-spacing:var(--spacing);
87+
text-transform: capitalize;
88+
line-height:1.25;
89+
margin-bottom:0.75rem;
90+
font-family:var(--ff-primary);
91+
}
92+
h1{
93+
font-size:3rem;
94+
}
95+
h2{
96+
font-size:2rem;
97+
}
98+
h3{
99+
font-size:1.25rem;
100+
}
101+
h4{
102+
font-size:0.875rem;
103+
}
104+
p{
105+
margin-bottom:1.25rem;
106+
color:var(--clr-grey-5);
107+
}
108+
@media screen and (min-width:800px){
109+
h1{
110+
font-size:4rem;
111+
}
112+
h2{
113+
font-size:2.5rem;
114+
}
115+
h3{
116+
font-size:1.75rem;
117+
}
118+
h4{
119+
font-size:1rem;
120+
}
121+
body{
122+
font-size:1rem;
123+
}
124+
h1,
125+
h2,
126+
h3,
127+
h4{
128+
line-height:1;
129+
}
130+
}
131+
/* global classes */
132+
133+
/* section */
134+
.section{
135+
padding:5rem0;
136+
}
137+
138+
.section-center{
139+
width:90vw;
140+
margin:0 auto;
141+
max-width:1170px;
142+
}
143+
@media screen and (min-width:992px){
144+
.section-center{
145+
width:95vw;
146+
}
147+
}
148+
main{
149+
min-height:100vh;
150+
display: grid;
151+
place-items: center;
152+
}
153+
1154
/*
2155
===============
3156
Navbar

0 commit comments

Comments
(0)