-
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.
- Loading branch information
1 parent
6aec4ab
commit 46291fb
Showing
4 changed files
with
182 additions
and
0 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>BlogBase | Home</title> | ||
| <meta name="viewport" content="width=device-width , initial-scale=1.0"> | ||
| <link rel="stylesheet" href="public/fonts.css"> | ||
| <link rel="stylesheet" href="public/home.css"> | ||
| </head> | ||
| <body> | ||
| <!-- ___________________________________________________Mobile View____________________________________________ --> | ||
| <div class="topbar"> | ||
| <img src="public/images/main_logo.png" alt="logo"> | ||
| <p>BlogBase</p> | ||
|
|
||
| <div class="ham" id="ham"> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="sidebar" id="sidebar"> | ||
| <div class="user_name"> | ||
| <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"> | ||
| <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/> | ||
| </svg> | ||
| <p>Username</p> | ||
| </div> | ||
|
|
||
| <a href="#" style="margin-top: 60px;">Your Blogs</a> | ||
| <a href="#" style="color:red">Logout</a> | ||
| </div> | ||
|
|
||
| <script src="public/home.js"></script> | ||
| </body> | ||
| </html> |
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,133 @@ | ||
| *{-webkit-tap-highlight-color: transparent;} | ||
|
|
||
| body | ||
| { | ||
| display:flex; | ||
| flex-direction: column; | ||
| margin:0; | ||
| width: 100%; | ||
| font-size:0; | ||
| } | ||
|
|
||
| .topbar | ||
| { | ||
| display:flex; | ||
| width:100%; | ||
| height: auto; | ||
| margin:10px auto 0px 0px; | ||
| padding-bottom: 10px; | ||
| border-bottom: 1px solid rgba(0,0,0,0.3); | ||
| position: fixed; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .topbar img | ||
| { | ||
| display:flex; | ||
| width:30px; | ||
| height: auto; | ||
| margin:auto 0px auto 20px; | ||
| } | ||
|
|
||
| .topbar p | ||
| { | ||
| display:flex; | ||
| font-size:25px; | ||
| font-family: helvetica-bold; | ||
| color:black; | ||
| margin:auto auto auto 10px; | ||
| } | ||
|
|
||
| .ham , .hamopen | ||
| { | ||
| display:flex; | ||
| flex-direction: column; | ||
| margin:auto 20px auto auto; | ||
| cursor: pointer; | ||
| padding: 5px; | ||
| position: relative; | ||
| bottom: 3px; | ||
| overflow: hidden; | ||
| transition: 0.5s; | ||
| } | ||
|
|
||
| .ham div , .hamopen div | ||
| { | ||
| display: flex; | ||
| width:30px; | ||
| height: 5px; | ||
| background-color:#40128B; | ||
| border-radius: 50px; | ||
| margin:5px 0px 0px 0px; | ||
| transition: 0.5s; | ||
| } | ||
|
|
||
| .hamopen div:nth-child(1) | ||
| { | ||
| transform: translateY(10px) rotate(45deg); | ||
| } | ||
|
|
||
| .hamopen div:nth-child(2) | ||
| { | ||
| transform: translateX(60px); | ||
| } | ||
|
|
||
| .hamopen div:nth-child(3) | ||
| { | ||
| transform: translateY(-10px) rotate(-45deg); | ||
| } | ||
|
|
||
| .sidebar , .sideopen | ||
| { | ||
| display:flex; | ||
| flex-direction: column; | ||
| width:0px; | ||
| background-color: #3a3a3a; | ||
| height:100%; | ||
| position: fixed; | ||
| margin:0; | ||
| overflow: hidden; | ||
| transition: 0.5s; | ||
| position: fixed; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .sideopen | ||
| { | ||
| width:300px; | ||
| } | ||
|
|
||
| .user_name | ||
| { | ||
| display:flex; | ||
| margin:30px auto 0px auto; | ||
| width:fit-content; | ||
| } | ||
|
|
||
| .user_name svg | ||
| { | ||
| width:35px; | ||
| height: auto; | ||
| margin:auto 0px auto 0px; | ||
| fill:blueviolet; | ||
| } | ||
|
|
||
| .user_name p | ||
| { | ||
| display:flex; | ||
| font-family: helvetica-med; | ||
| font-size:25px; | ||
| color:white; | ||
| margin:auto 0px auto 15px; | ||
| } | ||
|
|
||
| .sidebar a, .sideopen a | ||
| { | ||
| display:flex; | ||
| font-size: 25px; | ||
| width:280px; | ||
| font-family: helvetica-med; | ||
| color:white; | ||
| margin:20px auto 0px 20px; | ||
| text-decoration: none; | ||
| } |
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,8 @@ | ||
| var ham = document.getElementById("ham"); | ||
| var sidebar = document.getElementById("sidebar"); | ||
|
|
||
| ham.onclick = function() | ||
| { | ||
| ham.classList.toggle("hamopen"); | ||
| sidebar.classList.toggle("sideopen"); | ||
| } |
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