mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-06-11 12:53:12 +00:00
Add About and Booking page
Add help dropdowns on checkout Add Image With Text component
This commit is contained in:
parent
d9bea89c0b
commit
cd2aaa355c
6 changed files with 123 additions and 13 deletions
44
front/src/components/ImageWithText.svelte
Normal file
44
front/src/components/ImageWithText.svelte
Normal file
|
@ -0,0 +1,44 @@
|
|||
<script lang="ts">
|
||||
export let image: string;
|
||||
export let toRight = false;
|
||||
</script>
|
||||
|
||||
<div class="image-with-text" class:toRight={toRight}>
|
||||
<img src={image} alt="With Text">
|
||||
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/vars";
|
||||
|
||||
.image-with-text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
> img {
|
||||
margin-right: $spacing-normal;
|
||||
|
||||
max-width: 500px;
|
||||
max-height: 350px;
|
||||
|
||||
border-radius: $border-radius-large;
|
||||
}
|
||||
|
||||
> .container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.toRight {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
> img {
|
||||
margin-right: 0;
|
||||
margin-left: $spacing-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue