From 553da84fd1bfc7c11bf31a395bbab22d0e82b9b7 Mon Sep 17 00:00:00 2001
From: missmeowness <lbarvinskayaa@gmail.com>
Date: Tue, 11 Apr 2023 19:18:11 +0300
Subject: [PATCH] Add mockup for spaces

---
 src/app/connect/connect.css  | 49 +++++++++++++++++++++++++++
 src/app/connect/connect.html | 64 ++++++++++++++++++++++++++++++++++++
 2 files changed, 113 insertions(+)

diff --git a/src/app/connect/connect.css b/src/app/connect/connect.css
index cd39588..89cc5ff 100644
--- a/src/app/connect/connect.css
+++ b/src/app/connect/connect.css
@@ -44,6 +44,33 @@
   align-self: flex-end;
 }
 
+.spaces {
+  border-radius: 10px;
+  margin-left: 11em;
+  margin-right: 2em;
+  padding: 1.5em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.spaces-card {
+  max-width: 274px;
+  border-radius: 15px;
+  background-color: rgba(170, 255, 85, 0.75);
+}
+
+.spaces-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1em;
+}
+
+.spaces-header-image {
+  background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
+  background-size: cover;
+}
+
 .start-button {
   border-radius: 40px;
   min-width: 140px;
@@ -182,12 +209,21 @@
     margin-right: auto !important;
     margin-left: auto !important;
   }
+  .spaces {
+    max-width: 944px;
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
 }
 
 @media only screen and (min-width: 1024px) {
   .card {
     margin-right: 11em;
   }
+
+  .spaces {
+    margin-right: 11em;
+  }
 }
 
 @media only screen and (max-width: 760px) {
@@ -204,6 +240,13 @@
     margin-right: 2em;
     padding: 2em;
   }
+
+  .spaces {
+    font-size: 0.8em;
+    margin-left: 2em;
+    margin-right: 2em;
+    padding: 1em;
+  }
 }
 
 @media only screen and (max-width: 700px) {
@@ -231,6 +274,12 @@
     margin-right: 0.2em;
     padding: 0;
   }
+
+  .spaces {
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+    padding: 0;
+  }
 }
 
 @media only screen and (max-width: 400px) {
diff --git a/src/app/connect/connect.html b/src/app/connect/connect.html
index 910ed8f..3e0b7b8 100644
--- a/src/app/connect/connect.html
+++ b/src/app/connect/connect.html
@@ -22,6 +22,70 @@
     </div>
   </div>
   <div class="connect-content">
+    <mat-card class="spaces">
+      <mat-card-content>
+        <h1 class="centered">Spaces</h1>
+        <div class="spaces-container">
+        <mat-card class="spaces-card">
+          <mat-card-header>
+            <div mat-card-avatar class="spaces-header-image"></div>
+            <mat-card-title>Shiba Inu</mat-card-title>
+            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+          </mat-card-header>
+          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+          <mat-card-content>
+            <p>
+              The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+              A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+              bred for hunting.
+            </p>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-button>LIKE</button>
+            <button mat-button>SHARE</button>
+          </mat-card-actions>
+        </mat-card>
+        <mat-card class="spaces-card">
+          <mat-card-header>
+            <div mat-card-avatar class="spaces-header-image"></div>
+            <mat-card-title>Shiba Inu</mat-card-title>
+            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+          </mat-card-header>
+          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+          <mat-card-content>
+            <p>
+              The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+              A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+              bred for hunting.
+            </p>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-button>LIKE</button>
+            <button mat-button>SHARE</button>
+          </mat-card-actions>
+        </mat-card>
+        <mat-card class="spaces-card">
+          <mat-card-header>
+            <div mat-card-avatar class="spaces-header-image"></div>
+            <mat-card-title>Shiba Inu</mat-card-title>
+            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+          </mat-card-header>
+          <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+          <mat-card-content>
+            <p>
+              The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
+              A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
+              bred for hunting.
+            </p>
+          </mat-card-content>
+          <mat-card-actions>
+            <button mat-button>LIKE</button>
+            <button mat-button>SHARE</button>
+          </mat-card-actions>
+        </mat-card>
+      </div>
+      </mat-card-content>
+    </mat-card>
     <mat-card class="card first-card">
       <mat-card-content>
         <h1 class="centered">New ways to connect with humanity</h1>