pesto-students · github-classroom · Apr 12, 2022 · Apr 14, 2022 · Apr 14, 2022 · Apr 14, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,148 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node
+# Edit at https://www.toptal.com/developers/gitignore?templates=node
+
+### Node ###
+
+# Config Directories
+config/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+# End of https://www.toptal.com/developers/gitignore/api/node
diff --git a/Week-1/cattyboard/2Eq--cattyboard.jpg b/Week-1/cattyboard/2Eq--cattyboard.jpg
diff --git a/Week-1/cattyboard/FinalResult-Screenshot.jpg b/Week-1/cattyboard/FinalResult-Screenshot.jpg
diff --git a/Week-1/cattyboard/index.html b/Week-1/cattyboard/index.html
@@ -0,0 +1,100 @@
+<!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>CattyBoard Top 100 Single Charts(11.06.36)</title>
+    <link rel="stylesheet" href="styles.css" type="text/css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.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&display=swap" rel="stylesheet">
+</head>
+
+<body>
+    <nav>
+        <div class="fleximgs">
+            <img src="https://img.icons8.com/ios-filled/50/000000/menu-rounded.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/home.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/search--v1.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/speaker.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/user.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/settings.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/spotify.png" />
+            <img src="https://img.icons8.com/ios-filled/50/000000/soundcloud.png" />
+        </div>
+    </nav>
+    <header class="inline">
+        <img id="albumimg" src="2Eq--cattyboard.jpg" alt="album image">
+        <div class="container">
+            <div>
+                <h2>CattyBoard Top 100 Single Charts (11.06.36)</h2>
+                <p>
+                    Unknown Artist <br>
+                    2016. Charts. 100 Songs
+                </p>
+            </div>
+            <div class="innerflex">
+                <p>
+                    <span> &#9654; Play all </span>
+                    <span> &#43; Add to </span>
+                    <span> &#8230; More </span>
+                </p>
+            </div>
+        </div>
+    </header>
+    <section class="inline">
+        <table>
+            <tbody>
+                <tr>
+                    <td>1. One Dance</td>
+                    <td>Crake feat CatKid & Cyla</td>
+                    <td>2:54</td>
+                    <td> <span class="syncstyle"> CATTY CLOUD SYNC </span></td>
+                </tr>
+                <tr>
+                    <td>2. Panda</td>
+                    <td>Cattee</td>
+                    <td>4:06</td>
+                    <td> <span class="syncstyle"> CATTY CLOUD SYNC </span></td>
+                </tr>
+                <tr>
+                    <td>3. Cant Stop the Feeling</td>
+                    <td>Catin Cimberlake</td>
+                    <td>3:56</td>
+                    <td> <span class="syncstyle"> CATTY CLOUD SYNC </span></td>
+                </tr>
+                <tr>
+                    <td>4. Work From Home</td>
+                    <td>Cat Harmony feat Colla</td>
+                    <td>3:34</td>
+                    <td> <span class="syncstyle"> CATTY CLOUD SYNC </span></td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <div class="clearfix"></div>
+    <footer>
+        <div class="innerfooterflex">
+            <img id="footeralbumimg" src="2Eq--cattyboard.jpg" alt="album image">
+            <div>
+                <p>If It Ain't Love</p>
+                <p>Catson Derulo</p>
+            </div>
+        </div>
+        <div>
+            <div id="playcontrols">
+                <img style="transform: rotate(180deg);" src="https://img.icons8.com/ios-glyphs/30/ffffff/end--v1.png" />
+                <img src="https://img.icons8.com/ios-glyphs/30/ffffff/pause--v1.png" />
+                <img src="https://img.icons8.com/ios-glyphs/30/ffffff/end--v1.png" />
+                <img src="https://img.icons8.com/ios-glyphs/30/ffffff/repeat.png" />
+                <img src="https://img.icons8.com/ios-glyphs/30/ffffff/replay.png" />
+                <img src="https://img.icons8.com/fluency-systems-filled/48/ffffff/swap-paths.png" />
+            </div>
+        </div>
+    </footer>
+</body>
+
+</html>
diff --git a/Week-1/cattyboard/styles.css b/Week-1/cattyboard/styles.css
@@ -0,0 +1,141 @@
+* {
+    font-family: 'Lato', sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+nav {
+    min-width: 4%;
+    height: 80vh;
+    background-color: #F0F0F0;
+    float: left;
+}
+
+img {
+    background: transparent;
+}
+
+header.inline {
+    width: 96%;
+    height: 44vh;
+    background-color: #454545;
+    float: right;
+}
+
+section.inline {
+    height: 36vh;
+    width: 96%;
+    /* background-color: rgb(72, 82, 235); */
+    float: right;
+}
+
+div.clearfix {
+    clear: both;
+}
+
+footer {
+    width: 100%;
+    height: 20vh;
+    background-color: #43689B;
+    display: flex;
+    color: white;
+    justify-content: space-between;
+    align-items: center;
+}
+
+footer img {
+    width: 16vh;
+    margin: 12px;
+    padding: 4px;
+}
+
+.innerfooterflex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.innerfooterflex p {
+    padding: 4px;
+}
+
+nav img {
+    display: block;
+    padding: 3.25vh 0;
+    width: 16px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+
+
+/* .fleximgs {
+    display: flex;
+    flex-direction: column;
+} */
+
+
+table {
+    margin: 16px;
+    width: 96%;
+    background: transparent;
+    border-collapse: collapse;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+table td {
+    padding: 8px;
+    /* border: 1px solid green; */
+}
+
+table tr:nth-child(2n) {
+    background-color: lightgrey;
+}
+
+header.inline {
+    display: flex;
+}
+
+header.inline img {
+    padding: 16px;
+    margin: 0 16px;
+}
+
+header div.container {
+    margin: 16px;
+    display: flex;
+    flex-direction: column;
+    color: white;
+    justify-content: space-between;
+}
+
+header div.container p {
+    font-size: 0.85rem;
+}
+
+h2 {
+    margin-bottom: 12px
+}
+
+.innerflex {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.innerflex span {
+    padding-right: 12px;
+}
+
+span.syncstyle {
+    color: blue;
+    border: 1px solid black;
+    padding: 4px;
+    font-weight: bold;
+}
+
+footer #playcontrols img {
+    width: 32px;
+    padding: 0 24px;
+}