Performers component v1

styles/Footer.module.scss

@@ -9,7 +9,7 @@
   display: flex;
   justify-content: space-between;
   width: 50%;
-  align-items: start;
+  align-items: flex-start;
 }
 
 .middle {

styles/Home.module.scss

@@ -1,25 +0,0 @@
-.logoContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.logo {
-  width: 80%;
-  max-width: 1000px;
-  border-radius: 3px 3px 0px 0px;
-  padding-top: 3px;
-}
-
-.logoImage {
-  width: 100%;
-}
-
-.logoCredits {
-  font-size: 90%;
-  display: flex;
-  justify-content: right;
-  max-width: 990px;
-  padding-right: 10px;
-  margin-top: -10px;
-}

styles/Index.module.scss

@@ -0,0 +1,5 @@
+.indexContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

styles/Performers.module.scss

@@ -0,0 +1,50 @@
+.performersContainer {
+  display: flex;
+  flex-direction: column;
+  width: 47rem;
+  max-width: 100%;
+}
+
+.performerCard {
+  display: flex;
+  flex-direction: column;
+  background-color: #d5caf29d;
+  margin: 2rem;
+  padding: 2rem;
+}
+
+.performerTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  h2 {
+    margin-left: 1rem;
+  }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+.performerImage {
+  margin-right: 15rem;
+  height: 100px;
+  border-radius: 100%;
+}
+
+.performerButton {
+  height: 3rem;
+  width: 3rem;
+  background-color: transparent;
+  border: transparent;
+}
+
+.performerButton:hover {
+  svg {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}

styles/globals.scss

@@ -1,5 +1,5 @@
 html {
-  overflow-x: hidden;
+  overflow-x: scroll;
 }
 
 body {
@@ -24,7 +24,6 @@ main {
 }
 
 .page {
-  max-width: 40%;
   text-align: center;
   margin-bottom: 8rem;
 }