Skip to content

Commit c246f42

Browse files
HereshTHereshT
committed
Glasgow Class 6 - Heresh - HTML-CSS-Module-Project - Final 31 Jan 2023
Glasgow Class 6 - Heresh - HTML-CSS-Module-Project - Final 31 Jan 2023
1 parent 2eafd55 commit c246f42

16 files changed

+760
-519
lines changed

‎css/Karma Home Page CSS.css‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 16px;
4+
font-family: 'Roboto', sans-serif;
5+
}
6+
7+
body {
8+
border: 2px solid blue;
9+
margin: 50px;
10+
}
11+
12+
*,
13+
*:before,
14+
*:after {
15+
box-sizing: inherit;
16+
}
17+
18+
19+
/*navigation*/
20+
21+
.top-navigation {
22+
background-color: #fff;
23+
position: fixed;
24+
width: 100%
25+
}
26+
27+
.top-navigation .content {
28+
width: 970px;
29+
height: 4.375rem;
30+
margin: 0 auto;
31+
color: #838994;
32+
}
33+
34+
.top-navigation .links {
35+
float: right;
36+
font-size: 1rem;
37+
margin-top: 1.563rem;
38+
-webkit-font-smoothing: antialiased;
39+
}
40+
41+
.top-navigation li {
42+
display: inline-block;
43+
margin-left: 25px;
44+
}
45+
46+
.top-navigation .links .active {
47+
color: #4c5058;
48+
font-weight: 500;
49+
}
50+
51+
.top-navigation .links li:hover {
52+
cursor: pointer;
53+
color: #333333;
54+
}
55+
56+
.introduction {
57+
background-image: url('https://thinkful-ed.github.io/karma-clone/img/first-background.jpg');
58+
background-position: center bottom;
59+
background-repeat: no-repeat;
60+
background-size: cover;
61+
height: 45.938rem;
62+
background-position: 10 bottom;
63+
overflow: auto;
64+
}
65+
66+
.introduction .content {
67+
color: white;
68+
text-align: center;
69+
padding-top: 400px;
70+
}
71+
72+
.cases {
73+
text-align: center;
74+
}
75+
76+
.get-karma-today {
77+
margin-top: 80px;
78+
margin-bottom: 50px;
79+
display: grid;
80+
grid-template-columns: 1fr 1fr;
81+
justify-content: center;
82+
align-content: center;
83+
}
84+
85+
.get-karma-img {
86+
object-fit: cover;
87+
width: 100%;
88+
height: 100%;
89+
}
90+
91+
.get-karma-today1 {
92+
width: 100%;
93+
height: 100%;
94+
}
95+
96+
.get-karma-today2 {
97+
background-color: rgb(247, 229, 217);
98+
text-align: center;
99+
justify-items: center;
100+
padding: 30px;
101+
text-justify: auto;
102+
justify-content: center;
103+
}
104+
105+
button {
106+
text-shadow: none;
107+
border-style: none;
108+
border-radius: 4px;
109+
padding: 1rem;
110+
margin: 0 auto;
111+
background-color: rgb(236, 110, 6);
112+
color: white;
113+
}
114+
115+
116+
/*devices*/
117+
118+
.devices>li {
119+
width: 33%;
120+
box-sizing: border-box;
121+
height: 4em;
122+
display: inline-block;
123+
list-style: none;
124+
box-sizing: border-box;
125+
margin-left: -5%;
126+
margin-right: -5%;
127+
}
128+
129+
.social .twitter {
130+
color: #55acee;
131+
}
132+
133+
.social .icons {
134+
text-align: center;
135+
}
136+
137+
.social .icons>li {
138+
border-radius: 1.25rem;
139+
width: 2.5rem;
140+
height: 2.5rem;
141+
display: inline-block;
142+
margin: 1.25rem 5px;
143+
border: 1px solid #4927c4;
144+
padding: 0.625rem 0;
145+
text-align: center;
146+
}
147+
148+
.social,
149+
.content {
150+
-webkit-font-smoothing: antialiased;
151+
text-align: center;
152+
border: 0;
153+
font: inherit;
154+
vertical-align: baseline;
155+
box-sizing: border-box;
156+
padding: 0 0.938rem;
157+
margin: 0 auto;
158+
min-width: 37.5rem;
159+
}

0 commit comments

Comments
 (0)