Skip to content

Commit 5bc1c96

Browse files
mounikaperimounikaperi
committed
Adding Styles
1 parent 08fa22a commit 5bc1c96

File tree

2 files changed

+107
-15
lines changed

2 files changed

+107
-15
lines changed

‎Project-CreditCardLandingPage/index.html

+33-15
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,46 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="styles.css">
79
<title>Credit Card Landing Page</title>
810
</head>
11+
912
<body>
10-
<nav>
11-
<img src="images/logo.png" alt="Logo" />
12-
<div>
13-
<ul>
14-
<li>Home</li>
15-
<li>Features</li>
16-
<li>Pricing</li>
17-
<li>About us</li>
18-
</ul>
13+
<div class="navbar">
14+
<img src="images/icons/Logo.svg" alt="Logo" class="logo" />
15+
<ul class="list-items">
16+
<li>Home</li>
17+
<li>Features</li>
18+
<li>Pricing</li>
19+
<li>About us</li>
20+
<ul class="contactus-items">
21+
<li>Eng<span class="arrow-down"></span></li>
22+
<li><img src="images/icons/btn-pink-bg.svg" alt="button-pink" class="button-pink" /></li>
23+
<li class="contactus">Contact Us</li>
24+
</ul>
25+
</div>
26+
<div class="section-main">
27+
<div class="section-main__left">
28+
<h1 class="heading-primary">Simplify All Transactions in <span>One Card</span></h1>
29+
<p>Hurry up and join now, with this you can manage your daily finances easily and safely.</p>
30+
<p>get started &rarr;</p>
31+
<div>
32+
<p>42K<span>+</span></p>
33+
<p>Happy Active User</p>
34+
<img src="images/icons/Vector 402.svg" alt="Vertical Slash" />
35+
<p>12K<span>+</span></p>
36+
<p>Years Experience</p>
37+
</div>
1938
</div>
20-
<div>
21-
<ul>
22-
<li>Eng</li>
23-
<li>Contact Us</li>
24-
</ul>
39+
<div class="section-main__right" >
40+
<img src="images/photos/frontCards.png" alt="Front Cards" class="front-cards" />
41+
<img src="images/photos/backCards.png" alt="Back Cards" class="back-cards" />
2542
</div>
26-
</nav>
43+
</div>
2744
</body>
45+
2846
</html>

‎Project-CreditCardLandingPage/styles.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
}
5+
body {
6+
background-color: #1f1f1f;
7+
font-family: sans-serif;
8+
}
9+
.navbar {
10+
display: flex;
11+
padding-top: 1.2rem;
12+
}
13+
.logo {
14+
padding-left: 14rem;
15+
margin-right: 12rem;
16+
padding-top: 1rem;
17+
}
18+
.list-items {
19+
display: flex;
20+
align-items: center;
21+
gap: 3rem;
22+
margin-right: 6rem;
23+
}
24+
.list-items li {
25+
font-size: 0.9rem;
26+
padding-top: 1.2rem;
27+
white-space: nowrap;
28+
text-decoration: none;
29+
list-style: none;
30+
color: #d8d5d5;
31+
}
32+
.contactus-items {
33+
display: flex;
34+
align-items: center;
35+
gap: 1rem;
36+
margin-left: 10rem;
37+
position: relative;
38+
}
39+
.contactus-items li {
40+
display: flex;
41+
padding-top: 1rem;
42+
white-space: nowrap;
43+
justify-content: center;
44+
align-items: center;
45+
font-size: 0.9rem;
46+
}
47+
.arrow-down {
48+
margin-left: 0.45rem;
49+
padding-top: 0.01rem;
50+
height: 0;
51+
width: 0;
52+
border: 4px solid transparent;
53+
border-top-color: #d8d5d5;
54+
}
55+
.contactus {
56+
position: absolute;
57+
top: 0.2rem;
58+
right: -2.8rem;
59+
}
60+
/* Main section */
61+
.section-main {
62+
display : flex;
63+
margin-top: 6rem;
64+
padding-left: 6rem;
65+
}
66+
.section-main__left {
67+
padding-left: 8rem;
68+
}
69+
.heading-primary {
70+
font-size: 4rem;
71+
color: #fff;
72+
font-family: sans-serif;
73+
font-weight: 100;
74+
}

0 commit comments

Comments
 (0)