Skip to content

Commit c2360c8

Browse files
author
rakshithcgowda
committed
Rakshith Gowda HC
1 parent 42af2ed commit c2360c8

File tree

3 files changed

+270
-0
lines changed

3 files changed

+270
-0
lines changed

‎Intenship_suvidha/profile_page/img_of_profile/user2.jpg

8.41 KB
Loading

‎Intenship_suvidha/profile_page/profile_Page.html

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Profile page</title>
6+
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
7+
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="css/style.css">
10+
</head>
11+
<body>
12+
<section class="py-5 my-5">
13+
<div class="container">
14+
<h1 class="mb-5">Account Settings</h1>
15+
<div class="bg-white shadow rounded-lg d-block d-sm-flex">
16+
<div class="profile-tab-nav border-right">
17+
<div class="p-4">
18+
<div class="img-circle text-center mb-3">
19+
<img src="https://mindbodygreen-res.cloudinary.com/images/c_fill,g_faces:auto,w_360,h_360,q_auto,f_auto,fl_lossy/usr/QKNTXGf/james-dinicolantonio-pharmd.jpg" alt="Image" class="shadow">
20+
</div>
21+
<h4 class="text-center">Rakshith gowda</h4>
22+
</div>
23+
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
24+
<a class="nav-link active" id="account-tab" data-toggle="pill" href="#account" role="tab" aria-controls="account" aria-selected="true">
25+
<i class="fa fa-home text-center mr-1"></i>
26+
Account
27+
</a>
28+
<a class="nav-link" id="password-tab" data-toggle="pill" href="#password" role="tab" aria-controls="password" aria-selected="false">
29+
<i class="fa fa-key text-center mr-1"></i>
30+
Password
31+
</a>
32+
<a class="nav-link" id="security-tab" data-toggle="pill" href="#security" role="tab" aria-controls="security" aria-selected="false">
33+
<i class="fa fa-user text-center mr-1"></i>
34+
Security
35+
</a>
36+
<a class="nav-link" id="application-tab" data-toggle="pill" href="#application" role="tab" aria-controls="application" aria-selected="false">
37+
<i class="fa fa-tv text-center mr-1"></i>
38+
Application
39+
</a>
40+
<a class="nav-link" id="notification-tab" data-toggle="pill" href="#notification" role="tab" aria-controls="notification" aria-selected="false">
41+
<i class="fa fa-bell text-center mr-1"></i>
42+
Notification
43+
</a>
44+
</div>
45+
</div>
46+
<div class="tab-content p-4 p-md-5" id="v-pills-tabContent">
47+
<div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
48+
<h3 class="mb-4">Account Settings</h3>
49+
<div class="row">
50+
<div class="col-md-6">
51+
<div class="form-group">
52+
<label>First Name</label>
53+
<input type="text" class="form-control" value="Rakshith">
54+
</div>
55+
</div>
56+
<div class="col-md-6">
57+
<div class="form-group">
58+
<label>Last Name</label>
59+
<input type="text" class="form-control" value="gowda">
60+
</div>
61+
</div>
62+
<div class="col-md-6">
63+
<div class="form-group">
64+
<label>Email</label>
65+
<input type="text" class="form-control" value="rakshithg189@gmail.com">
66+
</div>
67+
</div>
68+
<div class="col-md-6">
69+
<div class="form-group">
70+
<label>Phone number</label>
71+
<input type="text" class="form-control" value="+91 9876543215">
72+
</div>
73+
</div>
74+
<div class="col-md-6">
75+
<div class="form-group">
76+
<label>Company</label>
77+
<input type="text" class="form-control" value="rakshith Workspace">
78+
</div>
79+
</div>
80+
<div class="col-md-6">
81+
<div class="form-group">
82+
<label>Designation</label>
83+
<input type="text" class="form-control" value="web Developer">
84+
</div>
85+
</div>
86+
<div class="col-md-12">
87+
<div class="form-group">
88+
<label>Bio</label>
89+
<textarea class="form-control" rows="4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore vero enim error similique quia numquam ullam corporis officia odio repellendus aperiam consequatur laudantium porro voluptatibus, itaque laboriosam veritatis voluptatum distinctio!</textarea>
90+
</div>
91+
</div>
92+
</div>
93+
<div>
94+
<button class="btn btn-primary">Update</button>
95+
<button class="btn btn-light">Cancel</button>
96+
</div>
97+
</div>
98+
<div class="tab-pane fade" id="password" role="tabpanel" aria-labelledby="password-tab">
99+
<h3 class="mb-4">Password Settings</h3>
100+
<div class="row">
101+
<div class="col-md-6">
102+
<div class="form-group">
103+
<label>Old password</label>
104+
<input type="password" class="form-control">
105+
</div>
106+
</div>
107+
</div>
108+
<div class="row">
109+
<div class="col-md-6">
110+
<div class="form-group">
111+
<label>New password</label>
112+
<input type="password" class="form-control">
113+
</div>
114+
</div>
115+
<div class="col-md-6">
116+
<div class="form-group">
117+
<label>Confirm new password</label>
118+
<input type="password" class="form-control">
119+
</div>
120+
</div>
121+
</div>
122+
<div>
123+
<button class="btn btn-primary">Update</button>
124+
<button class="btn btn-light">Cancel</button>
125+
</div>
126+
</div>
127+
<div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
128+
<h3 class="mb-4">Security Settings</h3>
129+
<div class="row">
130+
<div class="col-md-6">
131+
<div class="form-group">
132+
<label>Login</label>
133+
<input type="text" class="form-control">
134+
</div>
135+
</div>
136+
<div class="col-md-6">
137+
<div class="form-group">
138+
<label>re-Enter Your Password</label>
139+
<input type="text" class="form-control">
140+
</div>
141+
</div>
142+
<div class="col-md-6">
143+
<div class="form-group">
144+
<div class="form-check">
145+
<input class="form-check-input" type="checkbox" value="" id="recovery">
146+
<label class="form-check-label" for="recovery">
147+
Recovery
148+
</label>
149+
</div>
150+
</div>
151+
</div>
152+
</div>
153+
<div>
154+
<button class="btn btn-primary">Update</button>
155+
<button class="btn btn-light">Cancel</button>
156+
</div>
157+
</div>
158+
<div class="tab-pane fade" id="application" role="tabpanel" aria-labelledby="application-tab">
159+
<h3 class="mb-4">Application Settings</h3>
160+
<div class="row">
161+
<div class="col-md-6">
162+
<div class="form-group">
163+
<div class="form-check">
164+
<input class="form-check-input" type="checkbox" value="" id="app-check">
165+
<label class="form-check-label" for="app-check">
166+
App check
167+
</label>
168+
</div>
169+
<div class="form-check">
170+
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" >
171+
<label class="form-check-label" for="defaultCheck2">
172+
Lorem ipsum dolor sit.
173+
</label>
174+
</div>
175+
</div>
176+
</div>
177+
</div>
178+
<div>
179+
<button class="btn btn-primary">Update</button>
180+
<button class="btn btn-light">Cancel</button>
181+
</div>
182+
</div>
183+
<div class="tab-pane fade" id="notification" role="tabpanel" aria-labelledby="notification-tab">
184+
<h3 class="mb-4">Notification Settings</h3>
185+
<div class="form-group">
186+
<div class="form-check">
187+
<input class="form-check-input" type="checkbox" value="" id="notification1">
188+
<label class="form-check-label" for="notification1">
189+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum accusantium accusamus, neque cupiditate quis
190+
</label>
191+
</div>
192+
</div>
193+
<div class="form-group">
194+
<div class="form-check">
195+
<input class="form-check-input" type="checkbox" value="" id="notification2" >
196+
<label class="form-check-label" for="notification2">
197+
hic nesciunt repellat perferendis voluptatum totam porro eligendi.
198+
</label>
199+
</div>
200+
</div>
201+
<div class="form-group">
202+
<div class="form-check">
203+
<input class="form-check-input" type="checkbox" value="" id="notification3" >
204+
<label class="form-check-label" for="notification3">
205+
commodi fugiat molestiae tempora corporis. Sed dignissimos suscipit
206+
</label>
207+
</div>
208+
</div>
209+
<div>
210+
<button class="btn btn-primary">Update</button>
211+
<button class="btn btn-light">Cancel</button>
212+
</div>
213+
</div>
214+
</div>
215+
</div>
216+
</div>
217+
</section>
218+
219+
220+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
221+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
222+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
223+
</body>
224+
</html>

‎Intenship_suvidha/profile_page/sass/style.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
2+
3+
$primary: #007bff;
4+
$success: #28a745;
5+
$danger: #dc3545;
6+
$warning: #ffc107;
7+
8+
body {
9+
background: #f9f9f9;
10+
font-family: "Roboto", sans-serif;
11+
}
12+
13+
.shadow {
14+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
15+
}
16+
17+
.profile-tab-nav{
18+
min-width:250px;
19+
}
20+
.tab-content{
21+
flex:1;
22+
}
23+
.form-group {
24+
margin-bottom: 1.5rem;
25+
}
26+
27+
.nav-pills{
28+
a.nav-link{
29+
padding:15px 20px;
30+
border-bottom:1px solid #ddd;
31+
border-radius:0;
32+
color:#333;
33+
i{
34+
width:20px;
35+
}
36+
}
37+
}
38+
39+
.img-circle {
40+
img {
41+
height: 100px;
42+
width: 100px;
43+
border-radius: 100%;
44+
border: 5px solid #fff;
45+
}
46+
}

0 commit comments

Comments
 (0)