forked from Its-Aman-Yadav/Community-Site
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request Its-Aman-Yadav#1189 from sau-mili/main
Profile page Added
- Loading branch information
Showing
3 changed files
with
360 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,208 @@ | ||
| /* Import Font Dancing Script */ | ||
| @import url(https://fonts.googleapis.com/css?family=Dancing+Script); | ||
|
|
||
| * { | ||
| margin: 0; | ||
| } | ||
|
|
||
| body { | ||
| background:linear-gradient(#ffcc12,white); | ||
| font-family: Arial; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* NavbarTop */ | ||
| .navbar-top { | ||
| background-color:#fffaee; | ||
| color: #333; | ||
| box-shadow: 0px 4px 8px 0px grey; | ||
| height: 70px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .title { | ||
| font-family: 'Dancing Script', cursive; | ||
| padding-top: 15px; | ||
| /* position: absolute; */ | ||
| left: 45%; | ||
| padding-left: 30%; | ||
| padding-right: 0px; | ||
| } | ||
|
|
||
| .navbar-top ul { | ||
|
|
||
| list-style-type: none; | ||
| margin: 0; | ||
| overflow: hidden; | ||
| padding: 18px 50px 0px 40px; | ||
| } | ||
|
|
||
| .navbar-top ul li { | ||
| float: left; | ||
| } | ||
|
|
||
| .navbar-top ul li a { | ||
| color: #333; | ||
| padding: 14px 16px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .icon-count { | ||
| background-color: #ff0000; | ||
| color: #fff; | ||
| float: right; | ||
| font-size: 11px; | ||
| left: -25px; | ||
| padding: 2px; | ||
| position: relative; | ||
| } | ||
|
|
||
| /* End */ | ||
|
|
||
| /* Sidenav */ | ||
| .sidenav { | ||
| background-color: #fffaee; | ||
| color: #333; | ||
| border-bottom-right-radius: 25px; | ||
| height: 86%; | ||
| left: 0; | ||
| overflow-x: hidden; | ||
| padding-top: 20px; | ||
| position: absolute; | ||
| top: 70px; | ||
| width: 25%; | ||
| } | ||
|
|
||
| .profile { | ||
| margin-bottom: 20px; | ||
| margin-top: -12px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .profile img { | ||
| border-radius: 50%; | ||
| box-shadow: 0px 0px 5px 1px grey; | ||
| } | ||
|
|
||
| .name { | ||
| font-size: 20px; | ||
| font-weight: bold; | ||
| padding-top: 20px; | ||
| } | ||
|
|
||
| .job { | ||
| font-size: 16px; | ||
| font-weight: bold; | ||
| padding-top: 10px; | ||
| } | ||
|
|
||
| .url, hr { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .url hr { | ||
| margin-left: 20%; | ||
| width: 60%; | ||
| } | ||
|
|
||
| .url a { | ||
| color: #818181; | ||
| display: block; | ||
| font-size: 20px; | ||
| margin: 10px 0; | ||
| padding: 6px 8px; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .url a:hover, .url .active { | ||
| background-color: #e8f5ff; | ||
| border-radius: 28px; | ||
| color: #000; | ||
| margin-left: 14%; | ||
| width: 65%; | ||
| } | ||
|
|
||
| /* End */ | ||
|
|
||
| /* Main */ | ||
| .main { | ||
| margin-top: 2%; | ||
| margin-left: 29%; | ||
| font-size: 28px; | ||
| padding: 0 10px; | ||
| width: 58%; | ||
| } | ||
|
|
||
| .main h2 { | ||
| color: #333; | ||
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | ||
| font-size: 24px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .main .card { | ||
| background-color: #fff; | ||
| border-radius: 18px; | ||
| box-shadow: 1px 1px 8px 0 grey; | ||
| height: auto; | ||
| margin-bottom: 20px; | ||
| padding: 20px 0 20px 50px; | ||
| } | ||
|
|
||
| .main .card table { | ||
| border: none; | ||
| font-size: 16px; | ||
| height: 270px; | ||
| width: 80%; | ||
| } | ||
|
|
||
| .edit { | ||
| position: absolute; | ||
| color: #e7e7e8; | ||
| right: 14%; | ||
| } | ||
|
|
||
| .social-media { | ||
| text-align: center; | ||
| width: 90%; | ||
| } | ||
|
|
||
| .fa-sm{ | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .social-media span { | ||
| margin: 0 10px; | ||
| } | ||
|
|
||
| .fa-facebook:hover { | ||
| color: #2d88ff !important; | ||
| } | ||
|
|
||
| .fa-twitter:hover { | ||
| color: #1da1f2 !important; | ||
| } | ||
|
|
||
| .fa-instagram:hover { | ||
| color: #ce2b94 !important; | ||
| } | ||
|
|
||
| .fa-invision:hover { | ||
| color: #5bffff !important; | ||
| } | ||
|
|
||
| .fa-github:hover { | ||
| color: #161414 !important; | ||
| } | ||
|
|
||
| .fa-whatsapp:hover { | ||
| color: #25d366 !important; | ||
| } | ||
|
|
||
| .fa-snapchat:hover { | ||
| color: #fffb01 !important; | ||
| } | ||
|
|
||
| /* End */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="profile.css" class="rel"> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> | ||
| </head> | ||
| <body> | ||
| <!-- Navbar top --> | ||
| <div class="navbar-top"> | ||
| <div class="title"> | ||
| <h1>My Profile</h1> | ||
| </div> | ||
| <div class="right:5%;"> | ||
| <!-- Navbar --> | ||
| <ul> | ||
| <li> | ||
| <a href="index.html"> | ||
| <span class="icon-count">29</span> | ||
| <i class="fa fa-home fa-2x"></i> | ||
|
|
||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#notification"> | ||
| <span class="icon-count">59</span> | ||
| <i class="fa fa-bell fa-2x"></i> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="#sign-out"> | ||
| <i class="fa fa-sign-out-alt fa-2x"></i> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <!-- End --> | ||
| </div> | ||
| <!-- End --> | ||
|
|
||
| <!-- Sidenav --> | ||
| <div class="sidenav"> | ||
| <div class="profile"> | ||
| <img src="images/img-1.jpg" alt="" width="100" height="100"> | ||
|
|
||
| <div class="name"> | ||
| ABC XYZ | ||
| </div> | ||
| <div class="job"> | ||
| Web Developer | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="sidenav-url"> | ||
| <div class="url"> | ||
| <a href="#profile" class="active">Profile</a> | ||
| <hr align="center"> | ||
| </div> | ||
| <div class="url"> | ||
| <a href="#settings">Settings</a> | ||
| <hr align="center"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- End --> | ||
|
|
||
| <!-- Main --> | ||
| <div class="main"> | ||
| <h2>IDENTITY</h2> | ||
| <div class="card"> | ||
| <div class="card-body"> | ||
| <i class="fa fa-pen fa-xs edit"></i> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td>Name</td> | ||
| <td>:</td> | ||
| <td>ABC XYZ</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Email</td> | ||
| <td>:</td> | ||
| <td>[email protected]</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Address</td> | ||
| <td>:</td> | ||
| <td>India</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Hobbies</td> | ||
| <td>:</td> | ||
| <td>Music, Painting</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Job</td> | ||
| <td>:</td> | ||
| <td>Web Developer</td> | ||
| </tr> | ||
| <tr> | ||
| <td>Skill</td> | ||
| <td>:</td> | ||
| <td>PHP, HTML, CSS, Javascript</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h2>SOCIAL MEDIA</h2> | ||
| <div class="card"> | ||
| <div class="card-body"> | ||
| <i class="fa fa-pen fa-xs edit"></i> | ||
| <div class="social-media"> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-facebook fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-instagram fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-invision fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-github fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-whatsapp fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| <span class="fa-stack fa-sm"> | ||
| <i class="fas fa-circle fa-stack-2x"></i> | ||
| <i class="fab fa-snapchat fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- End --> | ||
| </body> | ||
| </html> |