Skip to content

Commit 612c7ab

Browse files
youweb3youweb3
committed
Add menu
1 parent eaa099e commit 612c7ab

4 files changed

Lines changed: 327 additions & 35 deletions

File tree

‎css/store.css‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
body {
2+
font-family: 'Roboto', sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
5+
margin: 0.5rem 1rem;
6+
padding: 0.5rem 1rem;
7+
}
8+
9+
header{
10+
display: flex;
11+
justify-content: space-between;
12+
width: 90%;
13+
margin: auto;
14+
height: 4rem;
15+
align-items: center;
16+
}
17+
18+
19+
nav {
20+
flex: basis 70%;
21+
22+
}
23+
24+
.logo {
25+
flex-basis:20%;
26+
}
27+
28+
ul{
29+
display:flex;
30+
}
31+
32+
ul li{
33+
list-style: none;
34+
line-height:100%;
35+
}
36+
37+
ul li a {
38+
text-decoration: none;
39+
dispaly: block;
40+
font-style: normal;
41+
font-weight: normal;
42+
font-size: 20px;
43+
font-family: Arial, Helvetica, sans-serif;
44+
color: fff;
45+
padding:0 10px;
46+
}
47+
48+
main{
49+
display: flex;
50+
width: 90%;
51+
margin: auto;
52+
height: 53rem;
53+
/* border: 1px solid red; */
54+
55+
}
56+
57+
.name{
58+
width: 50%;
59+
height: 908px;
60+
margin-right: auto;
61+
}
62+
63+
form{
64+
/* margin: auto; */
65+
display: flex;
66+
flex-direction: column;
67+
/* align-items: center; */
68+
/* justify-content: center; */
69+
}
70+
71+
.name h1{
72+
margin: auto;
73+
padding: 60px 0;
74+
color: #e68d67;
75+
width: 20rem;
76+
font-size: 29px;
77+
}
78+
79+
80+
.img{
81+
background-image: url(../level-2/store-image_by-andrew-neel-unsplash.jpg);
82+
background-repeat: no-repeat;
83+
background-size: cover;
84+
width: 50%;
85+
height: 848px;
86+
87+
}
88+
.a{
89+
display: flex;
90+
}
91+
92+
.city{
93+
display: flex;
94+
}
95+
96+
.address{
97+
width: 348px;
98+
}
99+
100+
.address2{
101+
width: 348px;
102+
}
103+
104+
.Last-name{
105+
margin-left: 1rem;
106+
}
107+
108+
.select-your-city{
109+
width: 153px;
110+
}
111+
112+
113+
button{
114+
background-color: red;
115+
width: 269px;
116+
height: 70px;
117+
border-radius: 4px;
118+
}
119+
120+
121+
122+
.footer{
123+
margin-top: 6rem;
124+
}
125+
126+
.footer p {
127+
padding-bottom: 1rem;
128+
text-align: center;
129+
font-size: 0.85rem;
130+
}
131+
132+
.flexbox2{
133+
display: flex;
134+
justify-content: center;
135+
136+
}

‎css/style.css‎

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,63 @@ ul li a {
4848
padding:0 10px;
4949
}
5050

51+
/* main */
52+
53+
.main-img{
54+
background-image: url("../img/first-background.jpg") ;
55+
background-size: cover;
56+
background-repeat: no-repeat ;
57+
width: 90%;
58+
height: 500px;
59+
margin: auto;
60+
color: white;
61+
display: flex;
62+
flex-flow: column wrap;
63+
justify-content: center;
64+
align-content: center;
65+
margin-bottom: 60px;
66+
}
67+
68+
.homepage-extended{
69+
/* border: 1px solid red; */
70+
display: flex;
71+
flex-direction: row;
72+
justify-content: space-between;
73+
align-items: center;
74+
margin: 4rem;
75+
}
76+
.homepage-extended p{
77+
text-align: justify;
78+
}
79+
80+
.homepage-extended button{
81+
align-self:flex-end;
82+
justify-content: center;
83+
84+
}
85+
86+
.homepage-extended img{
87+
width: 400px;
88+
height: 300px;
89+
}
90+
91+
.btn1{
92+
background-color: red;
93+
border:none;
94+
border-radius:12px;
95+
font-size: 15px;
96+
padding: 16px ;
97+
width: 150px;
98+
text-decoration: none;
99+
margin:auto;
100+
}
101+
.btn2{
102+
display: flex;
103+
flex-direction: row;
104+
justify-content: center;
105+
margin: auto;
106+
}
107+
51108
.text{
52109
text-align: center;
53110
font-size: 2rem;
@@ -65,31 +122,7 @@ ul li a {
65122
height: 15%;
66123
}
67124

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-
}
82125

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-
}
93126

94127
.head{
95128
text-align: center;
@@ -107,7 +140,7 @@ ul li a {
107140

108141
/* *footer* */
109142
.footer{
110-
margin-top: 5rem;
143+
margin-top: 2rem;
111144
}
112145

113146
.footer p {
@@ -119,15 +152,7 @@ ul li a {
119152
.flexbox2{
120153
display: flex;
121154
justify-content: center;
122-
123-
124-
}
125155

126-
.box{
127-
width: 5%;
128-
height: 5%;
129-
margin: 5px;
130-
border: 1px solid blue;
131156
}
132157

133158
/**

‎index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<ul>
2222
<li><a href="#">Meet Karma</a></li>
2323
<li><a href="#">How it Work</a></li>
24-
<li><a href="#">Store</a></li>
24+
<li><a href="./store.html">Store</a></li>
2525
<li><a href="#">Blog</a></li>
2626
<li><a href="#">Help </a></li>
2727
<li><a href="#">Log in </a></li>
@@ -61,7 +61,13 @@ <h2>everyone needs a little karma</h2>
6161
</div>
6262

6363
</section>
64-
<hr>
64+
65+
<section class="homepage-extended">
66+
<img src="level-2\homepage-feature.png" alt="">
67+
<p>"Wherever I am, I just don't<br>worry about my connection<br>anymore"</p>
68+
<br>
69+
<button class="btn2">Get Karma today</button>
70+
</section>
6571
</main>
6672

6773

0 commit comments

Comments
 (0)