From e32e48f77d8ce0e0e82fa8c7e7a8b32961f39f8e Mon Sep 17 00:00:00 2001
From: Agustin Paredes <nomegustabergamo@outlook.com>
Date: Sun, 4 Jun 2023 22:50:32 +0200
Subject: [PATCH] css

---
 Spotyfi.css | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html  | 114 ++++++++++++++++++++++++-----
 2 files changed, 300 insertions(+), 16 deletions(-)
 create mode 100644 Spotyfi.css

diff --git a/Spotyfi.css b/Spotyfi.css
new file mode 100644
index 000000000..2a8207a8e
--- /dev/null
+++ b/Spotyfi.css
@@ -0,0 +1,202 @@
+.body {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+#top-Bar {
+    background-color: whitesmoke;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    width: 100%;
+    height: 10%;
+    padding: 1px;
+    top: 0;
+}
+
+#section-logo {
+    margin-right: 1px;
+}
+
+#logo-top-bar {
+    width: 30%;
+    height: 30%;
+    display: inline-block;
+    margin: 7px;
+}
+
+
+#top-links {
+
+    display: flex;
+    list-style: none;
+    justify-content: space-between;
+    align-items: center;
+
+    /* border: 10px solid black; */
+
+
+}
+
+#top-links li a {
+    text-decoration: none;
+    color: rgb(0, 0, 0);
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: lighter;
+    font-size: 16px;
+}
+
+.fLinks {
+    /* border: 8px solid red; */
+    padding: 10px;
+    margin: 10px;
+    background-color: whitesmoke;
+
+
+}
+
+#background-img {
+
+    background-image: url("images/landing.jpg");
+    background-color: black;
+    height: 500px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+
+}
+
+/* #conteiner-img {
+    height: 50%;
+    border: 10px solid rgb(38, 0, 255);
+    margin: 0; */
+/* position: absolute; */
+/* justify-content: center; */
+/* color: rgb(255, 255, 255); */
+
+/* } */
+.overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+#text {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    /* border: 5px solid rgb(255, 255, 255); */
+    color: white;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 2px;
+    width: 59%;
+    background-color: rgba(0, 0, 0, 0, 5);
+    padding: 10px;
+    margin-top: 100px;
+
+    text-align: center;
+
+}
+
+
+
+#landing-bg {
+    width: 100%;
+    height: 50%;
+    display: inline-block;
+    border: 10px solid rgb(9, 255, 0);
+    margin: 0s;
+}
+
+
+
+
+#sec-title {
+    color: rgb(0, 0, 0);
+    border: 12 px salmon solid;
+    text-decoration: underline mediumaquamarine;
+    text-decoration-thickness: 2px;
+}
+
+#whats-On {
+    display: flex;
+    flex-direction: column;
+    /* border: 5px solid pink; */
+    justify-content: center;
+    align-items: center;
+
+
+}
+
+#million-Songs {
+    /* border: 5px solid greenyellow; */
+    display: flex;
+    flex-direction: row;
+}
+
+.on-Spotify img {
+    width: 40%;
+    height: 40%;
+}
+
+.on-Spotify h3 {
+    /* color: mediumaquamarine; */
+    font-weight: bold;
+    color: rgb(15, 161, 118);
+
+
+}
+
+.on-Spotify {
+    /* border: 3px solid black; */
+    margin: 10px;
+}
+
+#closing {
+    background-color: rgb(15, 161, 118);
+    display: flex;
+    flex-direction: row;
+
+}
+
+#yeezywest {
+    display: flex;
+    flex-direction: column;
+    /* border: 4px solid black; */
+    width: 100%;
+    color: white;
+    margin: 30px 10px 10px 50px;
+    font-weight: lighter;
+
+
+}
+
+#yeezywest article {}
+
+#yeezywest h2 {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+}
+
+#white-logo {
+    width: 20%;
+    height: 20%;
+    /* border: 10px solid red; */
+    margin: 19px;
+}
+
+#app {
+    width: 50%;
+    height: 90%;
+    margin: 25 20 20 20;
+}
+
+#test {
+    /* border: 10px solid black; */
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 0697f92fe..75c2f1c24 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,100 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Spotify Clone</title>
-    <!-- don't forget to link your styles -->
-  </head>
-  <body>
-    Premium Discover Help Download Music for everyone. Spotify is now free on mobile, tablet and computer. Listen to the
-    right music, wherever you are. What’s on Spotify? Millions of Songs There are millions of songs on Spotify HD Music
-    Listen to music as if you were listening live Stream Everywhere Stream music on your smartphone, tablet or computer
-    It’s as yeezy as Kanye West. Search Know what you want to listen to? Just search and hit play. Browse Check out the
-    latest charts, brand new releases and great playlists for right now. Discover Enjoy new music every Monday with your
-    own personal playlist. Or sit back and enjoy Radio.
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Spotify Clone</title>
+  <!-- don't forget to link your styles -->
+  <link rel="stylesheet" href="Spotyfi.css">
+
+</head>
+
+<body>
+  <header>
+
+    <div id="top-Bar">
+      <span id="section-logo"><img id="logo-top-bar" src="images/spotify-logo.png" alt="Logo"></span>
+      <nav>
+        <ul id="top-links">
+          <li class="fLinks"><a href="#">Premium</a></li>
+          <li class="fLinks"><a href="#">Discover</a></li>
+          <li class="fLinks"><a href="#">Help</a></li>
+          <li class="fLinks"><a href="#">Download</a></li>
+
+        </ul>
+      </nav>
+
+    </div>
+  </header>
+  <div id="background-img">
+
+
+
+    <!-- <span id="conteiner-img"> -->
+    <div class="overlay">
+      <!-- <img id="landing-bg" src="images/landing.jpg" alt="Concert photo."> -->
+      <div id="text">
+        <h1>Music for everyone.</h1>
+        <article>Spotify is now free on mobile, tablet and computer. Listen to the
+          right music, wherever you are.</article>
+      </div>
+    </div>
+    <!-- </span> -->
+
+
+
+
+
+  </div>
+  <div id="whats-On">
+    <h2 id="sec-title">What’s on Spotify? </h2>
+    <section id="million-Songs">
+      <span class="on-Spotify">
+
+        <img src="images/music-icon.png" alt="Music icon.">
+        <h3>Millions of Songs</h3>
+        <article>There are millions of songs on Spotify</article>
+
+      </span>
+      <span class="on-Spotify">
+
+        <img src="images/high-quality-icon.png" alt="Hd imagen of sound">
+        <h3>HD Music</h3>
+        <article>Listen to music as if you were listening live </article>
+
+      </span>
+      <span class="on-Spotify">
+
+        <img src="images/devices-icon.png" alt="Electronic devices-icon">
+        <h3>Stream Everywhere</h3>
+        <article>Stream music on your smartphone, tablet or computer</article>
+
+      </span>
+    </section>
+
+
+  </div>
+  <div id="closing">
+    <aside id="yeezywest">
+      <h2>It’s as yeezy as Kanye West.</h2>
+      <h3>Search</h3>
+      <article>Know what you want to listen to? Just search and hit play.</article>
+      <h3>Browse</h3>
+      <article>Check out the latest charts, brand new releases and great playlists for right now.</article>
+      <h3>Discover</h3>
+      <article>Enjoy new music every Monday with your
+        own personal playlist. Or sit back and enjoy Radio.</article>
+    </aside>
+    <span id="test"><img id="white-logo" src="images/spotify-icon-white.png" alt="White icon version">
+      <img id="app" src="images/spotify-app.jpg" alt="Preview of the app"></span>
+  </div>
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file