added style files

css-files/all-meetups.css

@@ -0,0 +1,62 @@
+section {
+  max-width: 40rem;
+  margin: 3rem auto;
+}
+
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.meetup-item {
+  margin: 1rem 0;
+  background-color: #350490;
+  padding: 2rem;
+  color: white;
+  border-radius: 4px;
+}
+
+.meetup-summary {
+  display: flex;
+  align-items: flex-start;
+}
+
+.meetup-image {
+  margin-right: 2rem;
+}
+
+.meetup-image img {
+  width: 8rem;
+  height: 8rem;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.meetup-details h3 {
+  color: inherit;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 2rem;
+}
+
+.meetup-details address {
+  font-style: italic;
+}
+
+.meetup-actions {
+  margin-top: 1.5rem;
+  text-align: right;
+}
+
+.meetup-actions .btn {
+  background-color: #cb82fb;
+  border-color: #cb82fb;
+  color: #350490;
+  padding: 0.75rem 2rem;
+}
+
+.meetup-actions .btn:hover {
+  background-color: #ba82fb;
+  border-color: #ba82fb;
+}

css-files/base.css

@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Slab:wght@700&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  background-color: #ccc3db;
+  color: #3e3e41;
+}
+
+h1,
+h2,
+h3 {
+  font-family: 'Roboto Slab', sans-serif;
+  color: #222224;
+}
+
+button,
+.btn {
+  cursor: pointer;
+  font: inherit;
+  padding: 0.5rem 1.5rem;
+  background-color: #350490;
+  border: 1px solid #350490;
+  color: white;
+  border-radius: 4px;
+  text-decoration: none;
+}
+
+button:hover,
+.btn:hover {
+  background-color: #230161;
+  border-color: #230161;
+}
+
+#main-header {
+    width: 100%;
+    text-align: center;
+    padding: 2rem 0;
+}
+
+#main-header h1 {
+    font-size: 1.5rem;
+}
+
+#main-logo {
+    font-size: 3rem;
+    font-family: 'Roboto Slab', sans-serif;
+    text-decoration: none;
+    color: #350490;
+    font-weight: bold;
+}

css-files/meetup-detail.css

@@ -0,0 +1,88 @@
+article {
+  max-width: 60rem;
+  margin: 5rem auto;
+  border-radius: 6px;
+  background-color: #ede6f8;
+  border: 4px solid #350490;
+  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.25);
+  position: relative;
+  padding: 1rem;
+  text-align: center;
+}
+
+#main-image {
+  width: 10rem;
+  height: 10rem;
+  object-fit: cover;
+  position: absolute;
+  top: -5rem;
+  left: calc(50% - 5rem);
+  border-radius: 50%;
+  border: 4px solid #350490;
+}
+
+section:first-of-type {
+  margin-top: 6rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+address span {
+  font-weight: bold;
+}
+
+#details h2 {
+  margin-bottom: 0.5rem;
+}
+
+#details > p {
+  color: #665386;
+  padding: 1rem;
+  border-radius: 4px;
+  max-width: 80%;
+  margin: auto;
+}
+
+#details footer {
+  color: #696472;
+}
+
+#details footer a {
+  color: #350490;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+#registration ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#registration label {
+  font-weight: bold;
+  color: #46424d;
+  margin-right: 1rem;
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+#registration input {
+  font: inherit;
+  width: 40%;
+  background-color: #ebeaee;
+  border: 1px solid #4b4753;
+  border-radius: 4px;
+  padding: 0.25rem;
+}
+
+#registration-actions {
+  margin-top: 1.5rem;
+}
+
+#registration .errorlist {
+  margin-bottom: 0.5rem;
+  color: #880824;
+}

css-files/registration-confirmation.css

@@ -0,0 +1,37 @@
+main {
+  text-align: center;
+}
+
+#confirmation {
+  max-width: 50rem;
+  margin: 3rem auto;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  padding: 1rem;
+  background-color: #6633c4;
+  border-radius: 6px;
+  color: white
+}
+
+#confirmation h2 {
+  color: inherit;
+  font-size: 2rem;
+}
+
+#confirmation p {
+  font-size: 1.25rem;
+}
+
+#confirmation p a {
+  color: #cf74df;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+#continue p {
+  margin: 2rem 0;
+}
+
+#continue .btn {
+  font-size: 1.5rem;
+  padding: 1rem 2rem;
+}