WIP Session 1

html/chat1/styles.css

@@ -0,0 +1,123 @@
+body {
+    background-color: #1c1c1c;
+    color: #e1e1e1;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 24px;
+    margin: 0;
+}
+
+header p {
+    font-size: 14px;
+}
+
+header a {
+    color: #4a90e2;
+}
+
+.top-products h2 {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.top-products p {
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+
+.top-products a {
+    color: #4a90e2;
+}
+
+.product-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.product {
+    display: flex;
+    justify-content: space-between;
+    background-color: #333;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.product-info {
+    display: flex;
+    gap: 10px;
+}
+
+.icon {
+    width: 40px;
+    height: 40px;
+    background-color: #555;
+    border-radius: 5px;
+}
+
+.standup { background-image: url('standup.png'); }
+.tori { background-image: url('tori.png'); }
+.tyms { background-image: url('tyms.png'); }
+.zapcardz { background-image: url('zapcardz.png'); }
+.peek { background-image: url('peek.png'); }
+
+.details {
+    display: flex;
+    flex-direction: column;
+}
+
+.details h3 {
+    font-size: 16px;
+    margin: 0;
+}
+
+.details p {
+    font-size: 14px;
+    margin: 5px 0;
+}
+
+.tags {
+    display: flex;
+    gap: 5px;
+    font-size: 12px;
+}
+
+.tags span {
+    background-color: #4a90e2;
+    padding: 2px 5px;
+    border-radius: 3px;
+}
+
+.upvote {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+}
+
+.upvote button {
+    background: none;
+    border: none;
+    color: #4a90e2;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.upvote button:hover {
+    color: #ff9900;
+}