Index.html page changed(home page created)

Frontend/css/albums.css

@@ -0,0 +1,134 @@
+/**********
+ * ALBUMS *
+ **********/
+
+/* Container for 'Looking for music?' heading, 'Start listening to the best new releases' paragraph and 'launch web player' button */
+.albums-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 5rem 1.5rem;
+}
+
+/* 'Looking for music?' heading */
+.albums-content h2 {
+  font-size: 3rem;
+  margin-bottom: 1.5rem;
+  text-shadow: 0 0 0.1rem var(--black);
+}
+
+/* 'Start listening to the best new releases' paragraph */
+.albums-content p {
+  font-size: 1.8rem;
+  margin-bottom: 2rem;
+}
+
+/* 'Launch web player' button */
+.albums-content button {
+  padding: 1.5rem 4.5rem;
+  border-radius: 3rem;
+  outline: none;
+  background: var(--white);
+  color: var(--gray3);
+  font-weight: 700;
+  border-color: var(--gray3);
+  letter-spacing: 2px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.albums-content button:hover {
+  background: var(--gray3);
+  color: var(--white);
+}
+
+.albums-content button:active {
+  background: var(--black);
+  border-color: var(--black);
+}
+
+.albums-cards-container {
+  display: flex;
+  overflow: auto;
+  padding-bottom: 8rem;
+}
+
+/* Removes the horizontal scrollbar */
+.albums-cards-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Container for the album image and the album info */
+.album {
+  min-width: 50%;
+  padding-left: 3.5rem;
+  box-sizing: content-box;
+}
+
+.album:first-child {
+  padding-left: 1.5rem;
+}
+
+.album:last-child {
+  padding-right: 1.5rem;
+}
+
+.album img {
+  width: 100%;
+  box-shadow: 0.1rem 0.1rem 1.6rem -0.2rem rgba(0, 0, 0, 0.3);
+}
+
+.album img:hover {
+  cursor: pointer;
+}
+
+/* Container for the song title, artist name and play now button */
+.album-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Song title and artist name */
+/* This code will avoid text from wrapping to the next line and it will add an ellipsis at the end */
+.album-info h2,
+.album-info h4 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+/* Song title */
+.album-info h2 {
+  font-size: 1.75rem;
+  color: var(--gray2);
+  padding-top: 2rem;
+}
+
+/* Artist name */
+.album-info h4 {
+  font-size: 1.5rem;
+  color: var(--gray1);
+  margin: 1rem 0;
+}
+
+.album-info h2,
+.album-info h4 {
+  cursor: pointer;
+}
+
+/* Play now button */
+.album-info a {
+  font-size: 1.5rem;
+  color: var(--green2);
+  font-weight: 700;
+  letter-spacing: 2px;
+  transition: all 0.4s ease;
+}
+
+.album-info a:hover {
+  color: var(--green1);
+}

Frontend/css/base.css

@@ -0,0 +1,46 @@
+/*************** 
+ * BASE STYLES *
+ ***************/
+
+/* Variables */
+:root {
+  --blue: #2d46b9;
+  --white: #ffffff;
+  --black: #000000;
+  --green1: #1ed760;
+  --green2: #1db954;
+  --gray1: #c1c3c6;
+  --gray2: #919496;
+  --gray3: #616467;
+  --hero-bg-image:url("homed1.jpg");
+  --hero-terms-link: #efefef;
+}
+
+/* Overwrite browser defaults */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: "DM Sans", sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul {
+  list-style: none;
+}

Frontend/css/footer.css

@@ -0,0 +1,134 @@
+/********** 
+ * FOOTER *
+ **********/
+
+footer {
+  background: var(--black);
+  padding-top: 5rem;
+  padding-bottom: 2rem;
+}
+
+.footer-nav {
+  padding: 0 1.5rem;
+  margin: 0 auto;
+}
+
+.logo-footer {
+  padding-bottom: 5rem;
+}
+
+.logo-footer img {
+  width: 9rem;
+}
+
+.company-links,
+.communities-links {
+  margin-bottom: 6rem;
+}
+
+.company-links li,
+.communities-links li,
+.useful-links li {
+  color: var(--white);
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.company-links li a:hover,
+.communities-links li a:hover,
+.useful-links li a:hover {
+  color: var(--green1);
+}
+
+.company-links li:first-child,
+.communities-links li:first-child,
+.useful-links li:first-child {
+  color: var(--gray2);
+  font-weight: 700;
+  font-size: 1.3rem;
+  letter-spacing: 0.5px;
+  margin-bottom: 3rem;
+}
+
+.footer-nav li:last-child {
+  margin-bottom: 0;
+}
+
+.social-icons {
+  padding-top: 14rem;
+  padding-bottom: 1rem;
+}
+
+.social-icons ul {
+  display: flex;
+}
+
+.social-icons ul li {
+  margin-right: 1.5rem;
+  padding: 1rem;
+  background: #222326;
+  border-radius: 50%;
+}
+
+.social-icons img {
+  width: 2.3rem;
+  background: var(--white);
+  display: block;
+}
+
+.social-icons img:hover {
+  background: var(--green1);
+}
+
+.country {
+  text-align: right;
+  margin-bottom: 1rem;
+}
+
+.country a {
+  display: inline-block;
+}
+
+.country a:hover > span {
+  color: var(--green1);
+}
+
+.country span {
+  color: var(--gray2);
+  vertical-align: super;
+}
+
+.country img {
+  width: 2.5rem;
+  margin-left: 1rem;
+}
+
+.bottom-links {
+  display: flex;
+  justify-content: space-between;
+}
+
+.bottom-links ul {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+
+.bottom-links ul li {
+  margin-right: 2.6rem;
+  padding: 1rem 0;
+}
+
+.bottom-links span {
+  padding: 1rem 0;
+}
+
+.bottom-links a,
+.bottom-links span {
+  color: var(--gray2);
+}
+
+.bottom-links a:hover {
+  color: var(--green1);
+}