Skip to content

Commit 8638882

Browse files
Sslim123Sslim123
committed
i update the css file
1 parent 94c9e67 commit 8638882

3 files changed

Lines changed: 120 additions & 45 deletions

File tree

‎.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": 5502
3+
}

‎css/style.css‎

Lines changed: 99 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,41 @@
1+
*{
12

2-
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
3-
4-
body {
5-
font-family: 'Roboto', sans-serif;
6-
-webkit-font-smoothing: antialiased;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
body{
7+
font-family:Georgia, 'Times New Roman', Times, serif ;
78
}
9+
header{
10+
width: 90%;
11+
height: 90px;
12+
margin: auto;
13+
}
14+
#headerSvg{
15+
position: relative;
16+
top: 40px;
17+
left:80px;
818

9-
/**
10-
* Add your custom styles below
11-
*
12-
* Remember:
13-
* - Be organised, use comments and separate your styles into meaningful chunks
14-
* for example: General styles, Navigation styles, Hero styles, Footer etc.
15-
*
16-
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
17-
*/
18-
ul{
19+
}
20+
ul {
1921
display: flex;
20-
flex-direction: row;
2122
justify-content: space-around;
23+
align-items: center;
2224
margin-left: 550px;
25+
font-size: 1.5em;
2326
margin-right: 150px;
24-
27+
border-radius: .5em;
28+
29+
}
30+
li{
31+
list-style: none;
32+
padding: 4px;
33+
color: black;
34+
width: 160px;
35+
height: 50px;
36+
margin: 0px 10px;
37+
border-radius: .5em;
38+
text-align: center;
2539
}
2640
a:hover{
2741
background-color: rgb(255, 217, 0);
@@ -30,37 +44,95 @@ body {
3044
.main-class {
3145
background-image: url("../img/first-background.jpg");
3246
background-repeat: no-repeat;
33-
width: 100%;
47+
width: 80%;
48+
border-radius: .5em;
49+
margin: auto;
3450
height: 700px;
51+
position: relative;
52+
top: 10px;
3553
}
3654
#id1{
3755
display:block ;
3856
text-align : center;
3957
color: white;
4058
padding: 100px;
59+
font-size: 1.5em;
60+
61+
}#id1 button{
62+
width: 100px;
63+
height: 50px;
64+
background-color: rgba(156, 122, 3, 0.97);
65+
border-radius: 1em;
66+
color: blanchedalmond;
67+
margin: 30px;
68+
border: none;
69+
}.section1{
70+
margin: auto;
71+
font-size: 1.5em;
72+
margin-top: 150px ;
4173
}
4274
.section1 :first-child{
4375
text-align: center;
44-
}
45-
.section1{
46-
margin-top: 150px ;
47-
76+
margin: 30px;
4877
}
4978
.div-main {
50-
display: grid;
51-
grid-template-columns: auto auto auto;
52-
text-align: center ;
79+
display: flex;
80+
justify-content: space-around;
81+
align-items: center;
82+
5383
}
5484
.section2{
55-
margin-top: 150px;
85+
margin: 150px 15px;
86+
font-size: 1.4em;
5687
}
5788
.section2 :first-child{
5889
text-align: center;
90+
margin: 10px;
5991
}
6092
.section2 :last-child{
6193
text-align: center;
6294
}
6395
#div2 {
6496
display: flex;
65-
justify-content: center;
97+
align-items: center;
98+
justify-content: center;
99+
}
100+
@media screen and (max-width: 440px) {
101+
header{
102+
height: 200px;
103+
background-color: brown;
104+
display: flex;
105+
align-items: center;
106+
flex-direction: column;
107+
108+
} header ul a{
109+
display: inline;
110+
margin-top: 100px;
111+
left: 50px;
112+
width: 400px;
113+
height: 200px;
114+
border-radius: .5em;
115+
background-color: blue;
116+
117+
} a{
118+
list-style: none;
119+
width: 100px;
120+
height: 50px;
121+
background-color: rgba(156, 122, 3, 0.97);
122+
}
123+
}
124+
@media screen and (max-width: 440px) {
125+
.div-main{
126+
display: flex;
127+
align-items: center;
128+
flex-direction: column;
129+
background-color: aqua;
130+
}
131+
}@media screen and (max-width: 440px) {
132+
.section2{
133+
display: flex;
134+
align-items: center;
135+
flex-direction: column;
136+
background-color: aqua;
137+
}
66138
}

‎index.html‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,28 +11,28 @@
1111
</head>
1212
<body>
1313
<header>
14-
<div>
15-
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 144 216">
14+
<div id="headerSvg">
15+
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 144 216">
1616
<path fill="#F15B2A"
1717
d="M126.1 212.9c4.1 4.1 10.7 4.1 14.8 0 4.1-4.1 4.1-10.7 0-14.8l-28.6-28.6 18.1-18.1c8.4-8.4 13.6-20 13.6-32.9C144 92.8 123.2 72 97.5 72S51 92.8 51 118.5c0 12.8 5.2 24.5 13.6 32.9l18.1 18.1-18.1 18.1c-4.6 4.6-11 7.5-18.1 7.5-14.1 0-25.6-11.5-25.6-25.6v-159C20.9 4.7 16.2 0 10.5 0 4.7 0 0 4.7 0 10.5v159C0 195.2 20.8 216 46.5 216c12.8 0 24.5-5.2 32.9-13.6l18.1-18.1 28.6 28.6zm-46.7-76.3c-4.6-4.6-7.5-11-7.5-18.1 0-14.1 11.5-25.6 25.6-25.6 14.1 0 25.6 11.5 25.6 25.6 0 7.1-2.9 13.5-7.5 18.1l-18.1 18.1-18.1-18.1z" />
1818
</svg>
1919

2020
</div>
21-
<nav class="navbar">
22-
<ul>
23-
<a>meet karma</a>
24-
<a>how its work</a>
25-
<a>store</a>
26-
<a>blog</a>
27-
<a>help</a>
28-
<a>login</a>
21+
<nav class="navbar">
22+
<ul>
23+
<li><a>meetkarma</a></li>
24+
<li><a>how work</a></li>
25+
<li><a>store</a></li>
26+
<li><a>blog</a></li>
27+
<li><a>help</a></li>
28+
<li><a>login</a></li>
2929
</ul>
30-
</nav>
30+
</nav>
3131
</header>
3232
<main class="main-class">
3333
<div id="id1">
34-
<h1>interducting karma</h1>
35-
<p>bring WIFI with you, Everywhere you go</p>
34+
<h1>interducting karma</h1><br>
35+
<p>bring WiFi with you,<br> Everywhere you go</p>
3636
<button>learn more</button>
3737
</div>
3838
</main>
@@ -67,26 +67,26 @@ <h1>interducting karma</h1>
6767
</div>
6868

6969
</section>
70-
<section class="section2">
70+
<footer class="section2">
7171
<p>Join Us On</p>
7272
<div id="div2">
7373
<div>
74-
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 30 30">
74+
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="40" viewBox="0 0 30 30">
7575
<path
7676
d="M12 27V15H8v-4h4V8.852C12 4.785 13.98 3 17.36 3c1.62 0 2.476.121 2.882.176V7h-2.305C16.5 7 16 7.758 16 9.29V11h4.203l-.57 4H16v12zm0 0"
7777
fill="#173f8a" />
7878
</svg>
7979
</div>
8080
<div>
81-
<svg xmlns="http://www.w3.org/2000/svg" width="50pt" height="50pt" viewBox="0 0 50 50">
81+
<svg xmlns="http://www.w3.org/2000/svg" width="40pt" height="40pt" viewBox="0 0 50 50">
8282
<path
8383
d="M50.063 10.438a20.57 20.57 0 01-5.91 1.62 10.309 10.309 0 004.523-5.687 20.648 20.648 0 01-6.531 2.492 10.258 10.258 0 00-7.504-3.246c-5.68 0-10.286 4.602-10.286 10.281 0 .805.094 1.59.27 2.344-8.547-.43-16.121-4.523-21.195-10.746a10.243 10.243 0 00-1.39 5.172c0 3.566 1.812 6.715 4.573 8.562a10.274 10.274 0 01-4.66-1.289v.13c0 4.984 3.547 9.136 8.246 10.085a10.29 10.29 0 01-4.644.172c1.312 4.082 5.11 7.063 9.605 7.145A20.613 20.613 0 012.39 41.87c-.831 0-1.648-.047-2.449-.144a29.053 29.053 0 0015.762 4.62c18.914 0 29.258-15.667 29.258-29.253 0-.446-.012-.895-.027-1.332a20.904 20.904 0 005.129-5.325zm0 0"
8484
fill="#3498db" /></svg>
8585

8686
</div>
8787

8888
<div>
89-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" width="20" height="20">
89+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" width="40" height="40">
9090
<radialGradient id="a" cx="332.14" cy="2511.81" r="3263.54" gradientUnits="userSpaceOnUse">
9191
<stop offset=".09" stop-color="#fa8f21" />
9292
<stop offset=".78" stop-color="#d82d7e" />
@@ -106,7 +106,7 @@ <h1>interducting karma</h1>
106106
</div>
107107
</div>
108108
<p>karma mobility inc</p>
109-
</section>
109+
</footer>
110110

111111
</body>
112112
</html>

0 commit comments

Comments
 (0)