flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Create shop page

Browse Source 
Make components: poster, poster product
This commit is contained in:
Shelby Kay
2021-10-27 22:48:31 +02:00
parent ad1b57fef2
commit 68f9743f17
9 changed files with 492 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/molecules/Poster.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
</script>
<div class="poster">
<img src="https://picsum.photos/326/475" width={326} height={475} alt="blob">
</div>

49
src/components/organisms/PosterProduct.svelte Normal file
View File

@@ -0,0 +1,49 @@
<script lang="ts">
import Button from '$components/atoms/Button.svelte'
import Image from '$components/atoms/Image.svelte'
</script>
<div class="poster-product grid">
<h2 class="title-huge">Melbourne</h2>
<div class="poster-product__buy">
<img src="/images/poster-display.jpg" alt="">
<div class="info">
<dl>
<dt>Houses Of <br /> Melbourne</dt>
<dd>Poster - 30€</dd>
</dl>
<Button
text="Add to cart"
color="beige"
/>
</div>
</div>
<div class="poster-product__images grid">
<picture class="image image--first photo shadow-box-light">
<img src="https://picsum.photos/656/493" width={656} height={493} alt="blob">
</picture>
<picture class="image image--second photo shadow-box-light">
<img src="https://picsum.photos/324/259" width={324} height={259} alt="blob">
</picture>
<picture class="image image--third photo shadow-box-light">
<img src="https://picsum.photos/324/416" width={324} height={416} alt="blob">
</picture>
</div>
<div class="poster-product__about grid">
<div class="text">
<p>This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.</p>
<p class="details">
Format: 40cm x 60cm (16” x 24”)<br>Printed on Recycled offset paper, 150gm/m2.<br>Frame not included.
</p>
</div>
</div>
<div class="poster-product__image grid">
<picture class="image image--fourth photo shadow-box-light">
<img src="https://picsum.photos/854/588" width={854} height={588} alt="blob">
</picture>
</div>
</div>