Skip to content

Commit 0c7a000

Browse files
pamelsspamelss
committed
Navegation
nav centre using flex
1 parent 42724b9 commit 0c7a000

File tree

2 files changed

+136
-101
lines changed

2 files changed

+136
-101
lines changed

‎css/style.css‎

Lines changed: 119 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,151 @@
11

22
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
3-
html {
4-
font-family: sans-serif;
5-
}
6-
7-
.logo1 {
8-
display: flex;
9-
align-items: center;
10-
justify-content: space-between;
11-
}
12-
.logo{
13-
padding: 0 1.6rem;
14-
max-width: 25px;
15-
}
16-
.list {
17-
list-style-type: none;
18-
display: flex;
19-
}
20-
.navlist {
21-
padding: 1.5rem;
22-
}
23-
.navlink {
24-
text-decoration: none;
25-
font-size: 20px;
26-
}
27-
.navlist:first-child > a {
28-
color: var(--grey-dark);
29-
}
30-
31-
.navlink:hover,
32-
.list:focus {
33-
color: orange;
34-
}
3+
body{
4+
width: 100%;
5+
margin: 0px;
6+
display: block;
7+
}
8+
9+
* {
10+
box-sizing: border-box;
11+
}
12+
13+
html {
14+
font-family: sans-serif;
15+
}
16+
17+
header {
18+
width: 100%;
19+
display: flex;
20+
flex-direction: row;
21+
justify-content: space-around;
22+
height: 5rem;
23+
margin-top: 1rem;
24+
margin-bottom: 1rem;
25+
}
26+
27+
.logo1 {
28+
width: 50%;
29+
}
30+
31+
.img{
32+
padding-top: 1rem;
33+
}
34+
35+
.list {
36+
width: 100%;
37+
display: flex;
38+
flex-direction: row;
39+
justify-content: space-around;
40+
align-items: center;
41+
align-content: centre;
42+
list-style: none;
43+
padding: auto;
44+
gap: 1rem;
45+
}
46+
47+
.list a{
48+
text-decoration: none;
49+
}
50+
51+
.list :nth-child(1) {
52+
color: rgb(118, 123, 125);
53+
}
54+
55+
.bar {
56+
font-weight: 900;
57+
}
3558

3659
/* main */
3760

38-
main{
39-
background-image: url(/img/first-background.jpg);
40-
padding: 12rem;
41-
background-position: center;
42-
}
43-
main div{
44-
text-align: center;
45-
color: white
46-
}
47-
main div h2{
48-
font-size: 2rem;
49-
font-weight: 200;
50-
}
51-
main div button {
52-
background-color: rgb(175, 56, 23);
53-
border: none
54-
55-
}
56-
main div button a{
57-
text-decoration: none;
58-
color: white;
61+
main{
62+
background-image: url(/img/first-background.jpg);
63+
background-size: cover;
5964

65+
background-position: center;
66+
color: #fff;
67+
68+
}
69+
70+
.karma{
71+
display: flex;
72+
flex-direction: column;
73+
justify-content: center;
74+
align-items: center;
75+
color: white;
76+
height: 35rem;
77+
width: 100%;
78+
}
79+
80+
.main p{
81+
font-size: 2rem;
82+
font-weight: 200;
83+
}
84+
85+
main div button {
86+
background-color: rgb(175, 56, 23);
87+
border: none;
88+
}
89+
90+
main div button a {
91+
text-decoration: none;
92+
color: white;
6093
}
6194

6295
/* Article */
6396

6497
article{
65-
display: flex;
66-
justify-content: space-around;
98+
display: flex;
99+
justify-content: space-around;
67100
}
68-
article img{
69-
width: 60%;
70-
height: 60%;
71-
101+
102+
article img {
103+
width: 60%;
104+
height: 60%;
72105
}
73-
h5{
74-
font-size: 1rem;
75-
font-weight: 500;
106+
107+
h5 {
108+
font-size: 1rem;
109+
font-weight: 500;
76110
}
77111

78-
hr{
79-
width: 90%;
80-
color: lightgrey;
112+
hr {
113+
width: 90%;
114+
color: lightgrey;
81115
}
82116

83117
/* footer */
84118

85-
p{
86-
text-align:center;
87-
font-size: 23px;
119+
p {
120+
text-align:center;
121+
font-size: 23px;
88122
}
89123

90124
.media ul{
91-
display: flex;
92-
justify-content: center;
93-
gap: 1.5rem;
94-
list-style: none;
125+
display: flex;
126+
justify-content: center;
127+
gap: 1.5rem;
128+
list-style: none;
129+
padding-left: 0px;
95130

96131
}
97-
.media img{
98-
width: 1.3rem;
99-
height: 1.3rem;
100132

133+
.media img{
134+
width: 1.3rem;
135+
height: 1.3rem;
101136
}
137+
102138
footer ul li{
103-
border: 1px solid #bdc3c7;
104-
border-radius: 50%;
105-
padding: 1rem;
139+
border: 1px solid #bdc3c7;
140+
border-radius: 50%;
141+
padding: 1rem;
106142
}
107-
h6{
108-
color:darkgrey;
109-
text-align: center;
110-
font-weight: 250;
111-
font-size: 15px;
112143

144+
h6{
145+
color:darkgrey;
146+
text-align: center;
147+
font-weight: 250;
148+
font-size: 15px;
113149
}
114150

115151

‎index.html‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,25 @@
1111
</head>
1212

1313
<body>
14-
<div class="logo1">
15-
<img class="logo" src="./img/karma-logo.svg" alt="Logo"></img>
16-
<div>
17-
<ul class="list">
18-
<li class="navlist"><a class="navlink" href="#">Meet Karma</a></li>
19-
<li class="navlist"><a class="navlink" href="#">How it Works</a></li>
20-
<li class="navlist"><a class="navlink" href="#">Store</a></li>
21-
<li class="navlist"><a class="navlink" href="#">Blog</a></li>
22-
<li class="navlist"><a class="navlink" href="#">Help</a></li>
23-
<li class="navlist"><a class="navlink" href="#">Login</a></li>
24-
</ul>
25-
</div>
26-
27-
</div>
14+
<header>
15+
<img class="img" src="./img/karma-logo.svg" alt="Logo"></img>
16+
<nav class="logo1">
17+
<ul class="list">
18+
<li><a class="bar" href="#">Meet Karma</a></li>
19+
<li><a href="#">How it Works</a></li>
20+
<li><a href="#">Store</a></li>
21+
<li><a href="#">Blog</a></li>
22+
<li><a href="#">Help</a></li>
23+
<li><a href="#">Login</a></li>
24+
</ul>
25+
</nav>
26+
</header>
2827

2928
<main>
30-
<div>
29+
<div class="karma">
3130
<h1> Introducing karma <h1>
32-
<h2> Bring WiFi with you, everywhere you go.<h2>
33-
<button><a href="#">Learn More</a></button>
31+
<p> Bring WiFi with you, everywhere you go.<p>
32+
<button><a href="#">Learn More</a></button>
3433
</div>
3534

3635
</main>
@@ -67,7 +66,7 @@ <h5>Pas as You Go</h5>
6766
<li><a href="#"><img src="./img/instagram-icon.svg"></a></li>
6867
</ul>
6968
</div>
70-
69+
7170
</footer>
7271
<h6>&copy; Karma Mobility, Inc.</h6>
7372
</body>

0 commit comments

Comments
 (0)