mirror of
https://github.com/block-core/blockcore-notes.git
synced 2024-09-29 22:40:44 +00:00
Add mockup for spaces
This commit is contained in:
parent
3753967807
commit
553da84fd1
@ -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) {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user