Skip to content

Commit cff93eb

Browse files
AdibabAdibab
committed
commit
1 parent 04e6245 commit cff93eb

File tree

2 files changed

+72
-17
lines changed

2 files changed

+72
-17
lines changed

‎css/style.css‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ body {
1515
*
1616
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
1717
*/
18+
/* body */
1819
header{
1920
display: flex;
2021
flex-direction: row;
@@ -25,11 +26,13 @@ header{
2526
img{
2627
width: 40%;
2728
}
29+
/* logo style */
2830
#karmalogo{
2931
height: 5%;
3032
width: 5%;
3133
display: block;
3234
}
35+
/* Navigation styles */
3336
nav{
3437
width: 60%;
3538
}
@@ -42,8 +45,56 @@ ul{display: flex;
4245
color: black;
4346
}
4447

45-
main section{
46-
border: 2px solid black;
47-
height: 200%;
48+
/* body first section */
49+
#firstOne{
50+
height: 100vh;
51+
display: block;
52+
background-image: url('https://ichef.bbci.co.uk/news/976/cpsprodpb/1676D/production/_113931029_composite.jpg');
53+
border: 1px solid black;
54+
position: relative;
4855
}
56+
#firstOne > article{
57+
position: relative;
58+
text-align: center;
59+
border: 1px solid red;
60+
vertical-align: middle;
61+
padding: 2%;
62+
margin: 10%;
63+
}
64+
/* button style */
65+
#submit-btn{
66+
background-color: darkorange;
67+
color: white;
68+
border-radius: 4px;
69+
border: orange;
70+
font-size: 14px;
71+
padding: 2%;
72+
73+
}
74+
/* body second section */
75+
#second-one-headline{
76+
border: 1px solid black;
77+
height: 50vh;
78+
79+
}
80+
#second-one-headline, p{
81+
text-align: center;
82+
font-size: 1rem;
83+
font-weight: normal;
84+
}
85+
/* body- second section - article */
86+
#second-one-description{
87+
display: flex;
88+
flex-direction:row;
89+
justify-content: space-between;
90+
padding-top:2%;
91+
padding-left: 5%;
92+
padding-right: 5%;
93+
}
94+
.secondOneArticle{
95+
border: 1px solid black;
96+
height:10%;
97+
width: 30%;
98+
}
99+
49100

‎index.html‎

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,33 @@
3131
</header>
3232

3333
<main>
34-
<section>
35-
<img id="" src="" alt="">
36-
<p>
34+
<section id="firstOne">
35+
<article>
3736
<h1>Introducing Karma</h1>
3837
<h2>Bring WiFi with you, everywhere you go</h2>
39-
<button name="submit"> Learn More </button>
40-
</p>
38+
<button id="submit-btn" name="submit"> Learn More </button>
39+
</article>
4140
</section>
42-
<section>
43-
<h1> Everyone needs a little Karma </h1>
44-
<article>
45-
<img src="" alt="icon-devices">
41+
42+
<section id="second-one-headline">
43+
<h2> Everyone needs a little Karma </h2>
44+
45+
<section id="second-one-description">
46+
<article class="secondOneArticle">
47+
<img src="img/icon-devices.svg" alt="icon-devices">
4648
<p> Internet for all icon-devices</p>
4749
</article>
48-
<article>
49-
<img src="" alt="icon-coffee">
50+
51+
<article class="secondOneArticle">
52+
<img src="img/icon-coffee.svg" alt="icon-coffee">
5053
<p> Boost your productivity</p>
5154
</article>
52-
<article>
53-
<img src="" alt="icon-refills">
55+
<article class="secondOneArticle">
56+
<img src="img/icon-refill.svg" alt="icon-refills">
5457
<p> PAy as you go</p>
5558
</article>
56-
59+
60+
</section>
5761
</section>
5862
<footer>
5963
<p> Join us on</p>

0 commit comments

Comments
 (0)