generated from pesto-students/PestoPlus
-
Notifications
You must be signed in to change notification settings - Fork 1
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 #2 from pesto-students/week-1
Week-1: assignment and the html CSS changes Got the approval
- Loading branch information
Showing
5 changed files
with
407 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "cSpell.words": [ | ||
| "Cattyboard" | ||
| ] | ||
| } |
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,97 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Assignment 1</title> | ||
| <link href="./style.css" rel="stylesheet"> | ||
| <link rel="stylesheet" | ||
| href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" /> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <!-- Header side Section --> | ||
| <section class="sideNav"> | ||
| <nav class="side-nav"> | ||
| <ul> | ||
| <li><i class="las la-bars"></i></li> | ||
| <li><i class="las la-home"></i></li> | ||
| <li><i class="las la-search"></i></li> | ||
| <li><i class="las la-volume-up"></i></li> | ||
| <li><i class="las la-user"></i></li> | ||
| <li><i class="las la-cog"></i></li> | ||
| <li><i class="lab la-spotify"></i></li> | ||
| <li><i class="lab la-soundcloud"></i></li> | ||
| </ul> | ||
| </nav> | ||
| </section> | ||
| <section class="center"> | ||
| <!-- image and description sections --> | ||
| <section class="description"> | ||
| <div class="image-section"> | ||
| <img src="https://vif1g.csb.app/src/assets/cattyboard.jpg" alt="Cattyboard Hot Chart 100!" srcset=""> | ||
| </div> | ||
| <div class="description-section"> | ||
| <h2>CattyBoard Top 100 Single Charts (11.06.36)</h2> | ||
| <p>UnKnown Artist</p> | ||
| <p>2016.Artists. 100 Songs</p> | ||
| <ul class="mini-controller"> | ||
| <li><i class="las la-play"></i>Play All</li> | ||
| <li><i class="las la-plus"></i>Add to</li> | ||
| <li><i class="las la-ellipsis-h"></i>More</li> | ||
| </ul> | ||
| </div> | ||
| </section> | ||
| <!-- controller section --> | ||
| <section class="controller"> | ||
| <table> | ||
| <tr> | ||
| <td>1. One Dance</td> | ||
| <td>Crake feat CatKid & Cyla</td> | ||
| <td>2:54</td> | ||
| <td><a href="#">CATTY CLOUD SYNC</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td>2. Panda</td> | ||
| <td>Cattee</td> | ||
| <td>4:06</td> | ||
| <td><a href="#">CATTY CLOUD SYNC</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td>3. Can't stop the feeling</td> | ||
| <td>Catin Cimberlake</td> | ||
| <td>3:56</td> | ||
| <td><a href="#">CATTY CLOUD SYNC</a></td> | ||
| </tr> | ||
| <tr> | ||
| <td>4. Work From Home</td> | ||
| <td>Cat Harmony from Colla</td> | ||
| <td>3:34</td> | ||
| <td><a href="#">CATTY CLOUD SYNC</a></td> | ||
| </tr> | ||
| </table> | ||
| </section> | ||
| </section> | ||
| <!-- Footer Section --> | ||
| <section class="footer"> | ||
| <img src="https://vif1g.csb.app/src/assets/cattyboard.jpg" alt="Cattyboard Hot Chart 100!" /> | ||
| <div class="left-info"> | ||
| <p>If it Ain't Love</p> | ||
| <p>Catson Derulo</p> | ||
| </div> | ||
| <div class="player-icons"> | ||
| <i class="las la-step-backward"></i> | ||
| <i class="las la-pause pause-icon"></i> | ||
| <i class="las la-step-forward"></i> | ||
| <i class="las la-undo-alt"></i> | ||
| <i class="las la-random"></i> | ||
| </div> | ||
| </section> | ||
| </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,164 @@ | ||
| * { | ||
| font-family: "Lato", sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body { | ||
| height: 100vh; | ||
| width: 100vw; | ||
| } | ||
|
|
||
| .sideNav { | ||
| height: 100%; | ||
| width: 35px; | ||
| position: fixed; | ||
| z-index: 1; | ||
| top: 0; | ||
| left: 0; | ||
| overflow-x: hidden; | ||
| padding-top: 20px; | ||
| } | ||
|
|
||
| .side-nav li i { | ||
| color: #000000; | ||
| margin: 32px 0px 30px 10px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .center { | ||
| height: calc(100% - 80px); | ||
| } | ||
|
|
||
| .description { | ||
| margin-top: 0; | ||
| margin-left: 35px; | ||
| display: flex; | ||
| align-items: center; | ||
| height: calc(100% - 360px); | ||
| background-color: #696868; | ||
| color: aliceblue; | ||
| } | ||
|
|
||
| .image-section { | ||
| margin: 50px; | ||
| } | ||
|
|
||
| .description img { | ||
| width: 200px; | ||
| height: 200px; | ||
| } | ||
|
|
||
| .description-section { | ||
| margin: 0px 10px 0px 20px; | ||
| } | ||
|
|
||
| .description-section h2 { | ||
| font-weight: 500; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .description-section p { | ||
| font-size: 0.8rem; | ||
| } | ||
|
|
||
| .mini-controller { | ||
| display: flex; | ||
| margin-top: 90px; | ||
| } | ||
|
|
||
| .mini-controller li { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin-right: 10px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .mini-controller li i { | ||
| margin-right: 3px; | ||
| font-weight: bolder; | ||
| } | ||
|
|
||
| .controller { | ||
| margin-left: 35px; | ||
| height: 55%; | ||
| width: 97%; | ||
| } | ||
|
|
||
| .controller table { | ||
| height: 60%; | ||
| width: 100%; | ||
| margin: 10px; | ||
| font-weight: 500; | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| .controller tbody { | ||
| display: table; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .controller tr:nth-child(even) { | ||
| background-color: #f0f0f0; | ||
| border-radius: 3px; | ||
| } | ||
|
|
||
| .controller td { | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .controller td a { | ||
| margin-left: 200px; | ||
| color: blue; | ||
| border: 1px solid black; | ||
| text-decoration: none; | ||
| padding: 3px; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .footer { | ||
| display: flex; | ||
| height: 5rem; | ||
| width: 100%; | ||
| background-color: #43689b; | ||
| position: absolute; | ||
| z-index: 100; | ||
| } | ||
|
|
||
| .footer img { | ||
| height: 4rem; | ||
| width: 4rem; | ||
| position: absolute; | ||
| margin: 12px; | ||
| } | ||
|
|
||
| .footer p { | ||
| color: white; | ||
| font-size: 0.8rem; | ||
| margin: 0 0 6px 100px; | ||
| } | ||
|
|
||
| .left-info { | ||
| margin-top: 35px; | ||
| width: 50%; | ||
| } | ||
|
|
||
| .player-icons { | ||
| width: 50%; | ||
| display: flex; | ||
| justify-content: space-around; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .player-icons i { | ||
| cursor: pointer; | ||
| font-weight: 800; | ||
| color: white; | ||
| } | ||
|
|
||
| .pause-icon { | ||
| font-size: 1.7rem; | ||
| font-weight: bolder; | ||
| } |
Oops, something went wrong.