-
-
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
ea14a98
commit c80a774
Showing
9 changed files
with
540 additions
and
81 deletions.
There are no files selected for viewing
Empty file.
Empty file.
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 |
|---|---|---|
| @@ -1,79 +1,290 @@ | ||
| body { | ||
| font-family: 'Arial', sans-serif; | ||
| @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); | ||
|
|
||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f4f4f4; | ||
| color: #333; | ||
| box-sizing: border-box; | ||
| -webkit-user-select: none; | ||
| user-select: none; | ||
| } | ||
|
|
||
| html { | ||
| font-size: 62.5%; | ||
| } | ||
|
|
||
| :root { | ||
| --container-height: 90%; | ||
| --container-width: 90%; | ||
| --component-background: rgba(0, 0, 0, 0.45); | ||
| } | ||
|
|
||
| body { | ||
| background: url("https://dynamicwallpaper.club/landing-vids/1.png"); | ||
| background-size: cover; | ||
| background-attachment: fixed; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| font-family: "Poppins", sans-serif; | ||
| } | ||
|
|
||
| .container { | ||
| background: rgba(0, 0, 0, 0.2); | ||
| transition: 0.3s ease; | ||
| -webkit-backdrop-filter: blur(30px); | ||
| backdrop-filter: blur(30px); | ||
| border-radius: 15px; | ||
| width: var(--container-width); | ||
| height: var(--container-height); | ||
| position: relative; | ||
| } | ||
|
|
||
| header { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| height: 30px; | ||
| position: relative; | ||
| } | ||
|
|
||
| section.window--buttons { | ||
| position: absolute; | ||
| top: 15px; | ||
| left: 15px; | ||
| } | ||
|
|
||
| section.window--buttons .window__close { | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| background: #f00; | ||
| display: inline-block; | ||
| border-radius: 50%; | ||
| transition: 0.3s ease; | ||
| } | ||
|
|
||
| section.window--buttons .window__close:hover { | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| section.window--buttons .window__minimize { | ||
| margin-left: 5px; | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| background: #f57c00; | ||
| display: inline-block; | ||
| border-radius: 50%; | ||
| transition: 0.3s ease; | ||
| } | ||
|
|
||
| section.window--buttons .window__minimize:hover { | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| section.window--buttons .window__maximize { | ||
| margin-left: 5px; | ||
| width: 1.5rem; | ||
| height: 1.5rem; | ||
| background: #4caf50; | ||
| display: inline-block; | ||
| border-radius: 50%; | ||
| transition: 0.3s ease; | ||
| } | ||
|
|
||
| section.window--buttons .window__maximize:hover { | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| aside { | ||
| overflow: scroll; | ||
| height: 90%; | ||
| margin-top: 20px; | ||
| float: left; | ||
| width: 200px; | ||
| position: sticky; | ||
| top: 0; | ||
| } | ||
|
|
||
| aside a { | ||
| display: block; | ||
| margin-top: 7px; | ||
| margin-left: 15px; | ||
| padding: 0.7rem 4rem; | ||
| font-family: "Poppins", sans-serif; | ||
| font-size: 1.5rem; | ||
| background: none; | ||
| width: 170px; | ||
| border-radius: 10px; | ||
| border: 0; | ||
| color: white; | ||
| transition: 0.2s ease; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| aside a:hover { | ||
| background: rgba(0, 0, 0, 0.55); | ||
| -webkit-backdrop-filter: blur(20px); | ||
| backdrop-filter: blur(20px); | ||
| } | ||
|
|
||
| aside a.active { | ||
| background: rgba(0, 0, 0, 0.55); | ||
| -webkit-backdrop-filter: blur(20px); | ||
| backdrop-filter: blur(20px); | ||
| } | ||
|
|
||
| aside .version { | ||
| position: absolute; | ||
| left: 15px; | ||
| display: grid; | ||
| bottom: 15px; | ||
| } | ||
|
|
||
| .navbar { | ||
| background-color: #005f73; | ||
| overflow: hidden; | ||
| padding: 10px 0; | ||
| aside .version h1 { | ||
| color: #fff; | ||
| font-weight: 400; | ||
| margin-left: 10px; | ||
| font-size: 1.3rem; | ||
| place-items: center; | ||
| } | ||
|
|
||
| .navbar-nav { | ||
| list-style: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .content { | ||
| color: white; | ||
| padding: 15px; | ||
| border-radius: 30px; | ||
| height: 90%; | ||
| margin-right: 20px; | ||
| overflow: scroll; | ||
| } | ||
|
|
||
| .content .ideas { | ||
| display: flex; | ||
| } | ||
|
|
||
| .content .ideas .idea { | ||
| background: var(--component-background); | ||
| width: 50%; | ||
| padding: 20px; | ||
| border-radius: 20px; | ||
| -webkit-backdrop-filter: blur(20px); | ||
| backdrop-filter: blur(20px); | ||
| transition: 0.3s ease; | ||
| } | ||
|
|
||
| .content .ideas .idea:nth-of-type(2) { | ||
| margin-left: 15px; | ||
| } | ||
|
|
||
| .content .ideas .idea p { | ||
| color: gray; | ||
| font-size: 1.2rem; | ||
| } | ||
|
|
||
| .content .ideas .idea:hover { | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| .content .feed { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .content .feed h1:nth-of-type(1) { | ||
| font-size: 2.2rem; | ||
| } | ||
|
|
||
| .content .feed .stream { | ||
| width: 100%; | ||
| background: var(--component-background); | ||
| padding: 1.3rem 0.7rem; | ||
| border-radius: 10px; | ||
| margin-top: 10px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
| transition: 0.4s ease; | ||
| } | ||
|
|
||
| .nav-item { | ||
| padding: 10px 20px; | ||
| .content .feed .stream .updt-left { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .nav-item a { | ||
| text-decoration: none; | ||
| color: white; | ||
| transition: color 0.3s, background-color 0.3s; | ||
| .content .feed .stream .updt-left h1 { | ||
| font-size: 1.7rem; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .nav-item a:hover { | ||
| background-color: #0a9396; | ||
| color: #e9d8a6; | ||
| border-radius: 5px; | ||
| .content .feed .stream .updt-left img { | ||
| width: 35px; | ||
| } | ||
|
|
||
| .active { | ||
| color: black !important; | ||
| .content .trending { | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .main-content { | ||
| padding: 20px; | ||
| text-align: center; | ||
| .content .trending h1:nth-last-of-type(1) { | ||
| font-size: 2.2rem; | ||
| } | ||
|
|
||
| .video-container { | ||
| max-width: 600px; | ||
| margin: auto; | ||
| border: 1px solid #ddd; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| padding: 10px; | ||
| background-color: white; | ||
| .content .trending .grid { | ||
| display: grid; | ||
| grid-template-rows: repeat(4, 25%); | ||
| grid-template-columns: 25% 25% 25% 25%; | ||
| margin-top: 10px; | ||
| gap: 5px; | ||
| } | ||
|
|
||
| .content .trending .grid .grid__app { | ||
| background: var(--component-background); | ||
| padding: 13px; | ||
| display: inline-block; | ||
| display: flex; | ||
| height: fit-content; | ||
| border-radius: 10px; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .content .trending .grid .grid__app h1 { | ||
| font-size: 1.7rem; | ||
| } | ||
|
|
||
| .content .trending .grid .grid__app button { | ||
| background: dodgerblue; | ||
| color: #fff; | ||
| border: 0; | ||
| outline: 0; | ||
| border-radius: 30px; | ||
| width: 30%; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .content .trending .grid .grid__app button:hover { | ||
| background: #65b3f2; | ||
| } | ||
|
|
||
| .content .trending .grid .grid__app button:active { | ||
| background: #0e6eb8; | ||
| } | ||
|
|
||
| #videoCanvas { | ||
| max-width: 100%; | ||
| height: 400px; | ||
| border: 1px solid #ddd; | ||
| width: 75%; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| /* Responsive Styling */ | ||
| @media only screen and (max-width: 600px) { | ||
| .navbar-nav { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .nav-item a { | ||
| margin-bottom: 5px; | ||
| /* Space out items in mobile view */ | ||
| @media (max-width: 768px) { | ||
| .content .trending .grid { | ||
| grid-template-columns: repeat(2, 50%); | ||
| grid-template-rows: repeat(4, 25%); | ||
| } | ||
|
|
||
| .video-container { | ||
| width: 90%; | ||
| aside { | ||
| display: none; | ||
| } | ||
| } |
Oops, something went wrong.