Skip to content

Commit 3a34d3a

Browse files
MrJay07MrJay07
committed
footer updated
2 parents 99c355f + e9a53d8 commit 3a34d3a

File tree

6 files changed

+228
-27
lines changed

6 files changed

+228
-27
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎css/styles.css

Lines changed: 101 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
temp{
1+
temp {
22
color: #BDFA3E;
33
color: #DB7A12;
44
color: #ED13EA;
55
color: #066AD6;
66
color: #19BF19;
7+
color: #F3CD20;
78
}
89

910
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');
@@ -26,11 +27,12 @@ li {
2627
a {
2728
text-decoration: none;
2829
}
29-
.header{
30+
31+
.header {
3032
border-bottom: 1px solid #101010;
3133
}
3234

33-
.navbar {
35+
.navbar {
3436
display: flex;
3537
justify-content: space-between;
3638
align-items: center;
@@ -61,21 +63,21 @@ a {
6163
margin-left: 5rem;
6264
}
6365

64-
.nav-link{
66+
.nav-link {
6567
font-size: 1.6rem;
6668
font-weight: 400;
6769
color: #19BF19;
6870
}
6971

70-
.nav-link:hover{
72+
.nav-link:hover {
7173
color: #DB7A12;
7274
}
7375

7476
.nav-logo {
7577
width: 200px;
7678
}
7779

78-
.profile{
80+
.profile {
7981
width: 40%;
8082
}
8183

@@ -119,17 +121,100 @@ a {
119121
}
120122
}
121123
/* Main content */
122-
.main-content {
123-
width: 100%;
124-
display: inline-block;
125-
background: #333;
126-
height: 50vh;
127-
text-align: center;
128-
font-size: 22px;
129-
font-weight: 700;
130-
text-decoration: underline;
124+
.landing{
125+
height: 100vh;
126+
display: flex;
127+
align-items: center;
128+
justify-content: center;
129+
color: #101010;
130+
font-size: 100px;
131+
}
132+
133+
#aboutMain {
134+
color: #ffffff;
135+
background-color: #DB7A12 !important;
136+
z-index: 2;
137+
height: auto;
138+
padding: 7% 0 5% 0;
139+
display: flex;
140+
justify-content: center;
141+
flex-direction: column;
142+
}
143+
144+
#aboutH1 {
145+
height: auto;
146+
width: auto;
147+
margin-left: 5%;
148+
text-align: left;
149+
}
150+
151+
#aboutText {
152+
max-width: 100%;
153+
display: flex;
154+
justify-content: center;
155+
align-items: center;
156+
}
157+
158+
#aboutText div {
159+
display: flex;
160+
align-items: center;
161+
justify-content: center;
162+
width: 80%;
163+
padding-right: 5%;
164+
margin-left: 5%;
165+
}
166+
167+
.pt-5 {
168+
font-family: -apple-system, BlinkMacSystemFont,
169+
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
170+
'Open Sans', 'Helvetica Neue', sans-serif;
171+
font-weight: 700;
172+
font-size: calc(0.9vw + 0.9vh + 0.5vmin);
173+
text-align: justify;
174+
}
175+
176+
#aboutImg {
177+
max-width: 70%;
178+
width: 66%;
179+
display: flex;
180+
align-items: center;
181+
justify-content: center;
182+
}
183+
184+
@media only screen and (max-width: 990px) {
185+
#aboutH1 {
186+
height: auto;
187+
max-width: 40%;
188+
margin-top: 5%;
189+
padding-left: 5%;
190+
}
191+
192+
#aboutText {
193+
flex-direction: column;
194+
justify-content: center;
195+
align-items: center;
196+
}
197+
198+
#aboutText {
199+
width: 100%;
200+
font-size: 20px;
201+
padding: 0px;
202+
flex-direction: column-reverse;
131203
}
132204

205+
div p {
206+
font-size: 4.1vw;
207+
}
208+
209+
#aboutImg {
210+
width: 70%;
211+
}
212+
213+
#aboutAbout {
214+
margin-bottom: 5%;
215+
}
216+
}
217+
133218
/* footer */
134219

135220
.footer {
@@ -138,7 +223,7 @@ a {
138223
box-sizing: border-box;
139224
width: 100%;
140225
text-align: left;
141-
font: bold 16px sans-serif;
226+
font: bold 20px sans-serif;
142227
padding: 55px 50px;
143228
}
144229

‎images/About.svg

Lines changed: 3 additions & 0 deletions
Loading

‎images/grp 1.png

116 KB
Loading

‎index.html

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<meta charset="UTF-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
9+
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />
810
<title>Suvidha Website</title>
911
<link rel="stylesheet" href="css/styles.css">
1012
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@@ -16,6 +18,7 @@
1618
<section id="title">
1719

1820
<!-- NAV BAR -->
21+
<!-- section for navbar, make it responsive for different size screen -->
1922

2023
<header class="header">
2124
<nav class="navbar">
@@ -28,10 +31,10 @@
2831
<a href="#" class="nav-link">Jobs</a>
2932
</li>
3033
<li class="nav-item">
31-
<a href="#" class="nav-link">Login</a>
34+
<a href="login.html" class="nav-link">Login</a>
3235
</li>
3336
<li class="nav-item">
34-
<a href="#" class="nav-link">Register</a>
37+
<a href="signup.html" class="nav-link">Register</a>
3538
</li>
3639
<li class="nav-item">
3740
<img class="profile" src="images/profile.png" alt="">
@@ -45,19 +48,39 @@
4548
</nav>
4649
</header>
4750

48-
49-
50-
<!-- section for navbar, make it responsive for different size screen -->
51-
52-
53-
5451
</section>
5552

56-
5753
<!-- mention the required sections -->
58-
<section class="main-content">Main content</section>
5954

55+
<!-- Landing page -->
56+
<section class="landing">
57+
<div>
58+
landing Page section
59+
</div>
60+
</section>
6061

62+
<!-- About us section -->
63+
<section class="AboutUs">
64+
<div id="aboutMain">
65+
<div id="aboutAbout">
66+
<img id="aboutH1" src="images/About.svg" />
67+
</div>
68+
<div id="aboutText" s>
69+
<div>
70+
<p class="pt-5">
71+
Suvidha Mahila Mandal is a non-profit organization working to impart education among the financially
72+
challenged sections to help them realize parity in education and strength of little minds in building
73+
a promising future. The organization has provisions of student internships, student mentorship and the
74+
scope to volunteer. Through these programmes, the organization aims to achieve the vision of imparting
75+
innovative education that stays with the students forever and equip them for the unforeseen future.
76+
</p>
77+
</div>
78+
<div id="aboutImg" class="pt-5">
79+
<img src="images/grp 1.png" alt="" style="height: auto; max-width: 100%" />
80+
</div>
81+
</div>
82+
</div>
83+
</section>
6184

6285

6386
<footer class="footer">
@@ -111,7 +134,6 @@
111134
</div>
112135

113136
<!-- section for the footer -->
114-
115137
</footer>
116138
<script src="js/index.js"></script>
117139
</body>

‎login.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
10+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
13+
<link rel="stylesheet" href="css/signup.css">
14+
</head>
15+
16+
<body>
17+
18+
<a href="index.html" class="text-right home-icon mx-4 p-1">
19+
<i class="bi bi-house-fill"></i>
20+
</a>
21+
22+
<div class="login-page" id="login-page">
23+
<div class="form form-login w-75" id="form-login">
24+
<div class="login-form">
25+
<div class="login text-center">
26+
<div class="login-header">
27+
<h3>LOGIN</h3>
28+
<p>Please enter your credentials to login.</p>
29+
</div>
30+
</div>
31+
<div class="text-center d-flex justify-content-center align-items-center">
32+
<form class="login-form w-75">
33+
<input class="rounded" type="text" placeholder="username" />
34+
<input class="rounded" type="password" placeholder="password" />
35+
<button class="rounded">login</button>
36+
<p class="message">Not registered? <a href="#" onclick="showSignUpForm()">Create an account</a>
37+
</p>
38+
</form>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<div class="form signup-form w-75 d-none" id="form-signup">
44+
<div class="login text-center">
45+
<div class="login-header">
46+
<h3>Sign Up</h3>
47+
<p>Please enter your details to signup.</p>
48+
</div>
49+
</div>
50+
<div class="d-flex justify-content-center align-items-center">
51+
<form class="login-form w-75">
52+
<p>First name:</p>
53+
<input class="rounded" type="text" placeholder="First name" />
54+
<p>Last name :</p>
55+
<input class="rounded" type="text" placeholder="Last name" />
56+
<p>Contact No :</p>
57+
<input class="rounded" type="text" placeholder="Contact No" />
58+
<p>Email Address :</p>
59+
<input class="rounded" type="email" placeholder="Email Address" />
60+
<p>Gender :</p>
61+
62+
<label for="male">Male
63+
<input type="radio" id="male" name="gender" value="M">
64+
</label>
65+
66+
<label for="female">Female
67+
<input type="radio" id="female" name="gender" value="F">
68+
</label>
69+
70+
<p for="dob">Date of Birth :</p>
71+
<input type="date" id="dob" name="dob">
72+
73+
<button class="rounded">Sign up</button>
74+
<p class="message"><a href="#" onclick="backToLoginForm()"><i
75+
class="bi bi-arrow-left fa-4x mx-2"></i>Back to login</a>
76+
</p>
77+
</form>
78+
</div>
79+
</div>
80+
81+
82+
</div>
83+
84+
85+
<script src="js/login.js"></script>
86+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
87+
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
88+
crossorigin="anonymous"></script>
89+
</body>
90+
91+
</html>

0 commit comments

Comments
 (0)