Skip to content

Commit d3abfc2

Browse files
nsaimknsaimk
committed
main-container-up is done
Includes background-image
1 parent ceaa366 commit d3abfc2

File tree

3 files changed

+114
-16
lines changed

3 files changed

+114
-16
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/style.css‎

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
2-
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
1+
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
32

43
body {
5-
font-family: 'Roboto', sans-serif;
6-
-webkit-font-smoothing: antialiased;
4+
font-family: "Roboto", sans-serif;
5+
-webkit-font-smoothing: antialiased;
76
}
87

98
/**
@@ -16,4 +15,81 @@ body {
1615
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
1716
*/
1817

18+
/* HEADER style */
19+
20+
.header {
21+
display: flex;
22+
justify-content: space-around;
23+
gap: 300px;
24+
border: 2px solid grey;
25+
height: 80px;
26+
align-items: center;
27+
}
28+
29+
.nav-list {
30+
color: rgb(160, 158, 158);
31+
display: flex;
32+
list-style: none;
33+
justify-content: space-between;
34+
border: 2px solid grey;
35+
width: 500px;
36+
}
37+
38+
/* END of HEADER style */
39+
40+
/* MAIN style */
41+
.main {
42+
display: flex;
43+
flex-direction: column;
44+
text-align: center;
45+
}
46+
47+
.main-container-up {
48+
background-image: url("../img/first-background.jpg"); /* The image used */
49+
background-color: #cccccc; /* Used if the image is unavailable */
50+
height: 500px; /* You must set a specified height */
51+
background-position: center; /* Center the image */
52+
background-repeat: no-repeat; /* Do not repeat the image */
53+
background-size: cover; /* Resize the background image to cover the entire container */
54+
/* background-size: cover;
55+
background-repeat: no-repeat;
56+
position: fixed; */
57+
display: flex;
58+
flex-direction: column;
59+
border-bottom: 2px solid grey;
60+
color: white;
61+
height: 670px;
62+
align-items: center;
63+
justify-content: center;
64+
}
65+
66+
.up-button{
67+
background-color: orange;
68+
color: white;
69+
padding: 10px 30px;
70+
border-radius: 5px;
71+
}
72+
73+
.main-container-down {
74+
align-content: center;
75+
}
76+
77+
/* END of MAIN style */
78+
79+
/* FOOTER style */
80+
.footer {
81+
border-top: 3px solid grey;
82+
text-align: center;
83+
}
84+
.social-media-icons {
85+
justify-content: center;
86+
}
87+
88+
.social_media_icon {
89+
height: 18px;
90+
border: 1px solid gray;
91+
border-radius: 50%;
92+
padding: 10px;
93+
}
1994

95+
/* END of FOOTER style */

‎index.html‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,37 +20,56 @@
2020
<!-- Add your HTML markup here -->
2121
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
2222
<!-- All the images you need are in the 'img' folder -->
23+
2324
<header class="header">
2425
<img src="./img/karma-logo.svg" alt="" style="height: 50px" />
2526
<nav>
26-
<ul>
27-
<li>
28-
<a href="#"><strong>Meet Karma</strong></a>
29-
</li>
27+
<ul class="nav-list">
28+
<li><a href="#"><strong>Meet Karma</strong></a></li>
3029
<li><a href="#">How it Works</a></li>
31-
<li><a href="./store.html"></a>Store</li>
30+
<li><a href="#">Store</a></li>
3231
<li><a href="#">Blog</a></li>
3332
<li><a href="#">Help</a></li>
3433
<li><a href="#">Login</a></li>
3534
</ul>
3635
</nav>
3736
</header>
37+
<!-- MAIN -->
3838
<main class="main">
39-
<div>
40-
<h2>Introducing Karma</h2>
41-
<p>Bring WiFi with you, everywhere you go.</p>
42-
<button>Learn More</button>
39+
<div class="main-container-up">
40+
<h1>Introducing Karma</h1>
41+
<h2>Bring WiFi with you, everywhere you go.</h2>
42+
<button class="up-button">Learn More</button>
4343
</div>
44-
<div>
44+
<!-- -->
45+
<div class="main-containe-down">
4546
<h2>Everyone needs a little Karma.</h2>
4647
<p>Internet for all devices</p>
4748
<p>Boost your productivity</p>
4849
<p>Pay as You Go</p>
4950
</div>
5051
</main>
52+
<!-- FOOTER -->
5153
<footer class="footer">
52-
<p>Join us on</p>
53-
<p>Karma mobility inc.</p>
54+
<p><strong>Join us on</strong></p>
55+
<div class="social-media-icons">
56+
<img
57+
src="./img/twitter-icon.svg"
58+
alt="twitter icon"
59+
class="social_media_icon"
60+
/>
61+
<img
62+
src="./img/facebook-icon.svg"
63+
alt="facebook icon"
64+
class="social_media_icon"
65+
/>
66+
<img
67+
src="./img/instagram-icon.svg"
68+
alt="instagram icon"
69+
class="social_media_icon"
70+
/>
71+
</div>
72+
<p style="color: rgb(199, 198, 198)">Karma mobility, inc.</p>
5473
</footer>
5574
</body>
5675
</html>

0 commit comments

Comments
 (0)