Skip to content

Commit fede5ec

Browse files
EbtesammmEbtesammm
committed
module project 1
1 parent b587720 commit fede5ec

File tree

4 files changed

+253
-4
lines changed

4 files changed

+253
-4
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎css/normalize.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,4 +433,5 @@ table {
433433
td,
434434
th {
435435
padding: 0;
436-
}
436+
}
437+

‎css/style.css‎

Lines changed: 165 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11

2-
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
32

4-
body {
3+
body{
54
font-family: 'Roboto', sans-serif;
65
-webkit-font-smoothing: antialiased;
7-
}
6+
font-size: 16px;
7+
8+
}
9+
10+
11+
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
12+
13+
14+
15+
16+
817

918
/**
1019
* Add your custom styles below
@@ -17,3 +26,156 @@ body {
1726
*/
1827

1928

29+
30+
31+
32+
33+
.header-container{
34+
35+
display: flex;
36+
align-items: flex-end;
37+
justify-content: space-between;
38+
}
39+
40+
.logo{
41+
padding-left: 50px;
42+
padding-top: 20px;
43+
width:30px;
44+
}
45+
46+
47+
.navbar{
48+
list-style-type: none;
49+
margin: 0;
50+
padding:0;
51+
display: flex;
52+
justify-content: flex-end;
53+
margin-right: 30px;
54+
gap:10px;
55+
56+
57+
}
58+
59+
.navbar, a{
60+
text-decoration: none;
61+
color:#333333be;
62+
}
63+
64+
.navbar a:hover{
65+
color:rgb(255, 94, 0);
66+
}
67+
68+
69+
.main-cover{
70+
width:300px;
71+
72+
}
73+
74+
.section-one{
75+
text-align: center;
76+
padding:10vw;
77+
background-image: url("/img/first-background.jpg" );
78+
background-size: cover;
79+
color:white;
80+
81+
82+
83+
}
84+
85+
button {
86+
background-color:rgb(255, 94, 0);
87+
border-radius: 4px;
88+
border: rgb(255, 128, 0) ;
89+
padding-top: 10px;
90+
padding-bottom: 10px;
91+
padding-left: 20px;
92+
padding-right: 20px;
93+
margin-top: 30px;
94+
95+
}
96+
97+
98+
99+
100+
.section-two-bar,ul{
101+
102+
list-style-type: none;
103+
display: flex;
104+
gap:10rem;
105+
justify-content: center;
106+
107+
108+
109+
}
110+
111+
.section-two-bar img{
112+
width: 150px;
113+
114+
}
115+
116+
h4{
117+
text-align: center;
118+
padding: 20px;
119+
}
120+
121+
hr{
122+
border: none;
123+
border-top: 2px solid #ddd;
124+
}
125+
126+
127+
128+
129+
130+
.media{
131+
display: flex;
132+
gap:10rem;
133+
justify-content: center;
134+
135+
}
136+
137+
.media img{
138+
height: 50px;
139+
width: 50px;
140+
border: 1px solid #6159596c;
141+
border-radius: 70px;
142+
padding: 10px;
143+
144+
145+
}
146+
147+
148+
149+
@media (max-width:568px){
150+
151+
.section-two-bar,ul{
152+
list-style-type: none;
153+
display: flex;
154+
gap: 10rem;
155+
justify-content: center;
156+
flex-direction: column;
157+
align-items: center;
158+
}
159+
.header-container {
160+
display: flex;
161+
align-items: center;
162+
flex-wrap: nowrap;
163+
flex-direction: column;
164+
165+
}
166+
.logo {
167+
/* padding-left: 50px; */
168+
padding-top: 20px;
169+
width: 30px;
170+
padding-right: 60px;
171+
padding-bottom: 30px;
172+
}
173+
.media {
174+
display: flex;
175+
gap: 10rem;
176+
justify-content: center;
177+
flex-direction: column-reverse;
178+
align-content: center;
179+
align-items: center;
180+
}
181+
}

‎index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,88 @@
1515
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
1616
<!-- All the images you need are in the 'img' folder -->
1717

18+
19+
<header>
20+
<div class="header-container">
21+
<img src="img/karma-logo.svg" class="logo">
22+
<nav>
23+
<ul class="navbar">
24+
<li><a href="#karma"> <b>Meet Karma</b></a> </li>
25+
<li> <a href="#how-it-work">How it work</a> </li>
26+
<li><a href="#store" >Store</a></li>
27+
<li> <a href="#blog">Blog</a></li>
28+
<li><a href="#help">Help </a></li>
29+
<li> <aLogin</li>
30+
</ul>
31+
</nav>
32+
</div>
33+
</header>
34+
35+
<br>
36+
<br>
37+
<main>
38+
39+
<section class="section-one">
40+
<h1> introducing karma</h1>
41+
<p>Bring wifi with you,everywhere you go </p>
42+
<button> Learn More</button>
43+
</section>
44+
45+
<br><br>
46+
<h4> Everyone needs a little Karma</h4>
47+
48+
49+
<section class="section-two-bar">
50+
51+
52+
<ul>
53+
<li>
54+
<img src="img/icon-devices.svg">
55+
<p>Internet For all devices</p>
56+
</li>
57+
<li>
58+
<img src="img/icon-coffee.svg">
59+
<p> Boost your productivity</p>
60+
</li>
61+
<li>
62+
<img src="img/icon-refill.svg">
63+
<p> Pay as you go</p>
64+
</li>
65+
66+
</ul>
67+
</section>
68+
69+
70+
71+
<br>
72+
73+
<hr>
74+
75+
<br>
76+
77+
<footer> <h4>Join us</h4>
78+
<br><br>
79+
<div class="media">
80+
<img src="img/twitter-icon.svg">
81+
<img src="img/facebook-icon.svg">
82+
<img src="img/instagram-icon.svg">
83+
</div>
84+
<br><br>
85+
<h4>&copy karma mobility</h4>
86+
87+
</footer>
88+
89+
</main>
90+
91+
92+
<!-- <main class="main-container">
93+
<h1> introducing karma</h1>
94+
<p> bring wifi with you,everywhere you go </p>
95+
<button> learn more</button>
96+
</main> -->
97+
98+
99+
100+
18101
</body>
19102
</html>

0 commit comments

Comments
 (0)