Skip to content

Commit eaa099e

Browse files
youweb3youweb3
committed
karma
1 parent 2eafd55 commit eaa099e

File tree

6 files changed

+199
-3
lines changed

6 files changed

+199
-3
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": 5502
3+
}

‎css/style.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,132 @@
44
body {
55
font-family: 'Roboto', sans-serif;
66
-webkit-font-smoothing: antialiased;
7+
8+
margin: 0.5rem 1rem;
9+
padding: 0.5rem 1rem;
710
}
811

12+
header{
13+
display: flex;
14+
justify-content: space-between;
15+
width: 90%;
16+
margin: auto;
17+
height: 4rem;
18+
align-items: center;
19+
}
20+
21+
22+
nav {
23+
flex: basis 70%;
24+
25+
}
26+
27+
.logo {
28+
flex-basis:20%;
29+
}
30+
31+
ul{
32+
display:flex;
33+
}
34+
35+
ul li{
36+
list-style: none;
37+
line-height:100%;
38+
}
39+
40+
ul li a {
41+
text-decoration: none;
42+
dispaly: block;
43+
font-style: normal;
44+
font-weight: normal;
45+
font-size: 20px;
46+
font-family: Arial, Helvetica, sans-serif;
47+
color: fff;
48+
padding:0 10px;
49+
}
50+
51+
.text{
52+
text-align: center;
53+
font-size: 2rem;
54+
font-weight: verdana;
55+
}
56+
57+
.flexbox-container{
58+
display: flex;
59+
justify-content: space-around;
60+
61+
}
62+
63+
.flexbox-item{
64+
width: 15%;
65+
height: 15%;
66+
}
67+
68+
.main-img{
69+
background-image: url("../img/first-background.jpg") ;
70+
background-size: cover;
71+
background-repeat: no-repeat ;
72+
width: 90%;
73+
height: 500px;
74+
margin: auto;
75+
color: white;
76+
display: flex;
77+
flex-flow: column wrap;
78+
justify-content: center;
79+
align-content: center;
80+
margin-bottom: 60px;
81+
}
82+
83+
.btn1{
84+
background-color: red;
85+
border:none;
86+
border-radius:12px;
87+
font-size: 15px;
88+
padding: 16px ;
89+
width: 150px;
90+
text-decoration: none;
91+
margin:auto;
92+
}
93+
94+
.head{
95+
text-align: center;
96+
font-size: 2rem;
97+
padding-top: 20rem;
98+
}
99+
100+
101+
.container {
102+
display: flex;
103+
flex-direction: row;
104+
justify-content: space-around;
105+
align-items: center;
106+
}
107+
108+
/* *footer* */
109+
.footer{
110+
margin-top: 5rem;
111+
}
112+
113+
.footer p {
114+
padding-bottom: 1rem;
115+
text-align: center;
116+
font-size: 0.85rem;
117+
}
118+
119+
.flexbox2{
120+
display: flex;
121+
justify-content: center;
122+
123+
124+
}
125+
126+
.box{
127+
width: 5%;
128+
height: 5%;
129+
margin: 5px;
130+
border: 1px solid blue;
131+
}
132+
9133
/**
10134
* Add your custom styles below
11135
*

‎img/instagram-icon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎img/karma-logo.svg‎

Lines changed: 2 additions & 1 deletion
Loading

‎img/twitter-icon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎index.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,74 @@
1414
<!-- Add your HTML markup here -->
1515
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
1616
<!-- All the images you need are in the 'img' folder -->
17+
18+
<header>
19+
<div class="logo"><img src="./img/karma-logo.svg" alt=""></div>
20+
<Nav>
21+
<ul>
22+
<li><a href="#">Meet Karma</a></li>
23+
<li><a href="#">How it Work</a></li>
24+
<li><a href="#">Store</a></li>
25+
<li><a href="#">Blog</a></li>
26+
<li><a href="#">Help </a></li>
27+
<li><a href="#">Log in </a></li>
1728

29+
</ul>
30+
</Nav>
31+
32+
</header>
33+
34+
35+
<main>
36+
<section class="main-img">
37+
<h1> Introducing Karma</h1>
38+
<p>bring wifi with you</p>
39+
<button class="btn1">Learn More</button>
40+
</section>
41+
<section class="text">
42+
<h2>everyone needs a little karma</h2>
43+
</section>
44+
45+
<section class="main-icon">
46+
47+
<div class="flexbox-container">
48+
<div class="flexbox-item left"><img src="./img/icon-devices.svg">
49+
<p>
50+
internet for all devices
51+
</p>
52+
</div>
53+
<div class="flexbox-item center"><img src="./img/icon-coffee.svg">
54+
<p>boost your prodoctivity</p>
55+
56+
</div>
57+
<div class="flexbox-item right"><img src="./img/icon-refill.svg">
58+
<p>pays a go</p>
59+
60+
</div>
61+
</div>
62+
63+
</section>
64+
<hr>
65+
</main>
66+
67+
68+
<!-- <footer></footer> -->
69+
<footer class="footer">
70+
<p> <strong>join us on</strong></p>
71+
72+
<div class="flexbox2">
73+
<div class="box item1"><img src="./img/twitter-icon.svg">
74+
</div>
75+
<div class="box item2"><img src="./img/facebook-icon.svg">
76+
</div>
77+
<div class="box item3"><img src="./img/instagram-icon.svg">
78+
</div>
79+
<div class="axis main-axis"></div>
80+
<div class="axis cross-axis"></div>
81+
82+
</div>
83+
<p>karma mobility.lnc</p>
84+
85+
</footer>
1886
</body>
1987
</html>

0 commit comments

Comments
 (0)