Skip to content

Commit 0193cec

Browse files
MoTaKhMoTaKh
committed
Karma Project
1 parent 0fd3caf commit 0193cec

File tree

2 files changed

+144
-0
lines changed

2 files changed

+144
-0
lines changed

‎css/style.css‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,96 @@ body {
55
font-family: 'Roboto', sans-serif;
66
-webkit-font-smoothing: antialiased;
77
}
8+
nav {
9+
display: flex;
10+
justify-content: space-between;
11+
margin-top: 1%;
12+
}
13+
.nav-items{
14+
margin-top: 1%;
15+
margin-right: 10%;
16+
}
17+
18+
.nav-items a{
19+
padding: 10px;
20+
text-decoration: none;
21+
color: gray;
22+
}
23+
.nav-items a:first-child{
24+
font-weight: bolder;
25+
}
26+
.nav-items a:hover{
27+
color: orange;
28+
}
29+
.logo{
30+
width: 25%;
31+
margin-left: 35%;
32+
33+
}
34+
.intro{
35+
display: flex;
36+
flex-direction: column;
37+
background: url(../img/first-background.jpg);
38+
align-items: center;
39+
color: white;
40+
padding-top: 10%;
41+
padding-bottom: 10%;
42+
margin-top: 2%;
43+
}
44+
.intro button{
45+
background-color: orange;
46+
margin-top: 3%;
47+
padding: 1%;
48+
}
49+
.Karma-cards{
50+
display: flex;
51+
justify-content: space-around;
52+
padding: 5%;
53+
54+
}
55+
.Karma-cards img{
56+
width: 100%;
57+
}
58+
.karma-ads h3{
59+
text-align: center;
60+
font-size: 1.5rem;
61+
padding: 4%;
62+
}
63+
.contacts h5{
64+
text-align: center;
65+
66+
}
67+
.soc-media{
68+
display: flex;
69+
justify-content:center;
70+
}
71+
.soc-media img{
72+
width: 2%;
73+
padding: 1%;
74+
}
75+
footer{
76+
text-align: center;
77+
font-weight:lighter;
78+
color: gainsboro;
79+
}
880

81+
@media only screen and (max-width: 600px) {
82+
.nav-items{
83+
margin-right: 3%;
84+
}
85+
.intro h2{
86+
font-size: 0.9rem;
87+
}
88+
.Karma-cards img{
89+
width: 70%;
90+
}
91+
.Karma-cards h4{
92+
font-size: 0.8rem;
93+
}
94+
.soc-media img{
95+
width: 5%;
96+
}
97+
}
998
/**
1099
* Add your custom styles below
11100
*

‎index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,61 @@
1010
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
1111
</head>
1212
<body>
13+
<nav>
14+
<div>
15+
<img class="logo" src="img/karma-logo.svg" alt="logo">
16+
</div>
17+
<div class="nav-items">
18+
<a href="#">Meet Karma</a>
19+
<a href="#">How it works</a>
20+
<a href="#">Store</a>
21+
<a href="#">Blog</a>
22+
<a href="#">Help</a>
23+
<a href="#">Login</a>
24+
</div>
25+
26+
</nav>
27+
<section class="intro">
28+
<h1>Introducing Karma</h1>
29+
<h2>Bring WiFi with you,everywhere you go.</h2>
30+
<button>Learn More</button>
31+
</section>
32+
33+
<section class="karma-ads">
34+
<h3>Everyone needs a little Karma</h3>
35+
<div class="Karma-cards">
36+
<div>
37+
<img src="img/icon-devices.svg" alt="devices">
38+
<h4>Internet for all devices</h4>
39+
</div>
40+
<div>
41+
<img src="img/icon-coffee.svg" alt="coffee">
42+
<h4>Boost your productivity</h4>
43+
</div>
44+
<div>
45+
<img src="img/icon-refill.svg" alt="refill">
46+
<h4>Pay as you Go</h4>
47+
</div>
48+
</div>
49+
50+
</section>
51+
52+
<hr>
53+
54+
<section class="contacts">
55+
<h5>Join us on</h5>
56+
<div class="soc-media">
57+
<img src="img/twitter-icon.svg" alt="twitter">
58+
<img src="img/facebook-icon.svg" alt="facebook-icon">
59+
<img src="img/instagram-icon.svg" alt="instgram">
60+
61+
</div>
62+
63+
</section>
64+
65+
<footer>
66+
<h6>&copy; Karma Mobility.Inc</h6>
67+
</footer>
1368

1469
<!-- Add your HTML markup here -->
1570
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->

0 commit comments

Comments
 (0)