forked from fdnd-task/lose-your-head-the-client-case
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into Footer-component-#31
- Loading branch information
Showing
9 changed files
with
323 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
<script> | ||
// if the button is pressed isClicked = true and the animation starts playing | ||
// exporting the variables so i can use them to change the button everywhere its imported | ||
export let backgroundColor = "var(--secondary-color)"; // Changes the background color | ||
export let textColor = "var(--light)"; // Changes the text color | ||
export let label = ""; // Changes the label text | ||
export let href = "#"; // Changes the href | ||
export let title = ""; // Changes the alt text | ||
export let showSvg = true; // Turns the svg on or off | ||
export let transparent = true; // Turns the transparency mediaquery on or off at 600px screen width | ||
</script> | ||
|
||
<!-- html --> | ||
|
||
<!-- You can change the href and alt variable to change the text --> | ||
<a | ||
{href} | ||
{title} | ||
style="color: {textColor}; background-color: {backgroundColor};" | ||
class:transparent={transparent} | ||
> | ||
<!-- If the variable showSvg is set to true the svg will show --> | ||
{#if showSvg} | ||
<svg width="100" height="100" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="m25 2c-12.69 0-23 10.31-23 23 0 4.0791 1.1187 7.8859 2.9844 11.209l-2.9473 10.521a1.0001 1.0001 0 0 0 1.2031 1.2402l10.971-2.7188c3.2237 1.721 6.8817 2.748 10.789 2.748 12.69 0 23-10.31 23-23s-10.31-23-23-23zm0 2c11.61 0 21 9.3905 21 21s-9.3905 21-21 21c-3.722 0-7.2079-0.97036-10.238-2.666a1.0001 1.0001 0 0 0-0.72852-0.097656l-9.6074 2.3809 2.5762-9.1914a1.0001 1.0001 0 0 0-0.099609-0.7793c-1.8417-3.1229-2.9023-6.7564-2.9023-10.646 0-11.61 9.3905-21 21-21zm-8.3574 9c-0.64104 0-1.5565 0.23849-2.3086 1.0488-0.45172 0.48672-2.334 2.3207-2.334 5.5449 0 3.3615 2.3314 6.2621 2.6133 6.6348h0.001953v0.001953c-0.02674-0.03514 0.3578 0.52172 0.87109 1.1895 0.5133 0.66773 1.2311 1.5447 2.1328 2.4941 1.8035 1.8988 4.3391 4.0934 7.4863 5.4355 1.4493 0.61717 2.5927 0.98981 3.459 1.2617 1.6054 0.5041 3.0676 0.42747 4.166 0.26562 0.82216-0.12108 1.7264-0.51584 2.6211-1.082 0.89469-0.56619 1.7715-1.2702 2.1582-2.3398 0.27701-0.76683 0.41782-1.4755 0.46875-2.0586 0.02546-0.29156 0.028695-0.54888 0.009765-0.78711-0.01897-0.23823 0.0013-0.42071-0.2207-0.78516-0.46557-0.76442-0.99282-0.78437-1.543-1.0566-0.30567-0.15128-1.1759-0.57625-2.0488-0.99219-0.8719-0.41547-1.6269-0.78344-2.0918-0.94922-0.29374-0.10568-0.65243-0.25782-1.1699-0.19922-0.51749 0.0586-1.0286 0.43198-1.3262 0.87305-0.28205 0.41807-1.4175 1.7583-1.7637 2.1523-0.0046-0.0028 0.02544 0.011039-0.11133-0.056641-0.42813-0.21189-0.95173-0.39205-1.7266-0.80078-0.77483-0.40873-1.7441-1.0123-2.8047-1.9473v-0.001953c-1.5786-1.3898-2.6844-3.1346-3.0332-3.7207 0.023499-0.02796-0.002795 0.005901 0.046874-0.042969l0.001954-0.001953c0.35652-0.35115 0.67247-0.77056 0.93945-1.0781 0.37854-0.43609 0.54559-0.82052 0.72656-1.1797 0.36067-0.71583 0.15985-1.5035-0.048828-1.918v-0.001953c0.01441 0.02867-0.11288-0.25219-0.25-0.57617-0.13751-0.32491-0.31279-0.74613-0.5-1.1953-0.37442-0.89836-0.79243-1.9059-1.041-2.4961v-0.001954c-0.29285-0.69513-0.68904-1.1959-1.207-1.4375-0.51799-0.2416-0.97563-0.17291-0.99414-0.17383h-0.001954c-0.36964-0.017052-0.77527-0.021484-1.1777-0.021484zm0 2c0.38554 0 0.76564 0.004701 1.084 0.019531 0.32749 0.01632 0.30712 0.017661 0.24414-0.011719-0.06399-0.02984 0.02283-0.03953 0.20898 0.40234 0.24341 0.57785 0.66348 1.5891 1.0391 2.4902 0.18779 0.45057 0.36354 0.87342 0.50391 1.2051 0.14036 0.33165 0.21642 0.51683 0.30469 0.69336v0.001953l0.001953 0.001953c0.08654 0.17075 0.078888 0.06143 0.048828 0.12109-0.21103 0.41883-0.23966 0.52166-0.45312 0.76758-0.32502 0.37443-0.65655 0.792-0.83203 0.96484-0.15353 0.15082-0.43055 0.38578-0.60352 0.8457-0.17323 0.46062-0.09238 1.0926 0.18555 1.5645 0.37003 0.62819 1.5894 2.6129 3.4844 4.2812 1.1934 1.052 2.3052 1.7483 3.1934 2.2168 0.88817 0.46852 1.6116 0.74215 1.7734 0.82227 0.38438 0.19023 0.80448 0.33795 1.293 0.2793 0.48849-0.05865 0.90964-0.35504 1.1777-0.6582l0.001953-0.001953c0.3568-0.40451 1.417-1.6151 1.9258-2.3613 0.02156 0.0076 0.0145 0.0017 0.18359 0.0625v0.001953h0.001953c0.0772 0.02749 1.0441 0.46028 1.9062 0.87109s1.7372 0.8378 2.0215 0.97852c0.41033 0.20308 0.60422 0.33529 0.6543 0.33594 0.003384 0.087985 0.006804 0.18333-0.00586 0.32812-0.03507 0.40164-0.14243 0.95757-0.35742 1.5527-0.10532 0.29136-0.65389 0.89227-1.3457 1.3301s-1.5339 0.74704-1.8457 0.79297c-0.9376 0.13815-2.0508 0.18859-3.2734-0.19531-0.84773-0.26609-1.9048-0.61053-3.2734-1.1934-2.7758-1.1838-5.135-3.1983-6.8203-4.9727-0.84264-0.8872-1.5178-1.7131-1.998-2.3379-0.4794-0.62364-0.68874-0.94816-0.86328-1.1777l-0.001953-0.001953c-0.30983-0.40973-2.207-3.0487-2.207-5.4258 0-2.5158 1.1685-3.5023 1.8008-4.1836 0.33194-0.35766 0.69484-0.41016 0.8418-0.41016z"/> | ||
</svg> | ||
{/if} | ||
<!-- You can change the label variable to change the text --> | ||
<span>{label}</span> | ||
</a> | ||
|
||
<style> | ||
a { | ||
display: inline-flex; | ||
justify-content: center; | ||
align-items: center; | ||
border-radius: 10px; | ||
font-size: 2em; | ||
font-weight: bold; | ||
border: none; | ||
padding: 0.5em 1.5em 0.5em 1.5em; | ||
cursor: pointer; | ||
transition: 0.1s ease; | ||
} | ||
a:hover { | ||
scale: 0.8; | ||
background-color: var(--hover); | ||
} | ||
a:hover svg { | ||
transform: scale(1.5); | ||
} | ||
span, | ||
svg { | ||
background-color: transparent; | ||
} | ||
svg { | ||
width: 1.5em; | ||
height: auto; | ||
fill: var(--light); | ||
margin-right: 0.5em; | ||
transition: transform 0.3s ease; | ||
} | ||
/* Media queries */ | ||
/* All .transparent classes will be active when the boolean transparent is set to true */ | ||
@media only screen and (max-width: 600px) { | ||
a { | ||
padding: 0.3em; | ||
} | ||
a.transparent { | ||
background-color: transparent !important; | ||
} | ||
a.transparent:hover { | ||
background-color: transparent; | ||
} | ||
.transparent span { | ||
display: none; | ||
} | ||
.transparent svg { | ||
margin: 0; | ||
} | ||
} | ||
@media only screen and (max-width: 350px) { | ||
a { | ||
padding: 0.1; | ||
} | ||
span { | ||
font-size: 0.5em; | ||
} | ||
svg { | ||
width: 1em; | ||
margin-right: 0.1em; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
<script> | ||
// logic goes here | ||
</script> | ||
<header class="header"> | ||
<div class="header-left"> | ||
<button> | ||
<span></span> | ||
<span></span> | ||
<span></span> | ||
</button> | ||
<figure> | ||
<img width="93px" alt="veronica logo" src="/veronica-logo.svg"> | ||
</figure> | ||
<nav> | ||
<ol> | ||
<li><a href="#">Home</a></li> | ||
<li><a href="#">Ondek</a></li> | ||
<li><a href="#">Radio</a></li> | ||
</ol> | ||
</nav> | ||
</div> | ||
<div class="header-right"> | ||
<button class="whatsapp"> | ||
<figure> | ||
<img width="24px" alt="whatsapp naar ons" src="/whatsapp-white-icon.svg"> | ||
</figure> | ||
</button> | ||
<button class="search"> | ||
<figure> | ||
<img width="24px" alt="whatsapp naar ons" src="/whatsapp-white-icon.svg"> | ||
</figure> | ||
</button> | ||
</div> | ||
</header> | ||
|
||
|
||
<style> | ||
.header{ | ||
padding: 1rem 2rem; | ||
background-color: var(--primary-color); | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100vw; | ||
@media only screen and (min-width: 960px) { | ||
justify-content: space-between; | ||
padding: 1rem 2rem; | ||
} | ||
} | ||
/* left box of the flex */ | ||
.header .header-left{ | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
justify-content: center; | ||
gap: 4rem; | ||
} | ||
.header .header-left button{ | ||
padding: 0px; | ||
border: none; | ||
} | ||
/* dropdown button */ | ||
.header .header-left button span{ | ||
height: 2px; | ||
width: 24px; | ||
background-color: var(--light); | ||
position: absolute; | ||
} | ||
.header .header-left button span:nth-child(1){ | ||
margin-top: -10px; | ||
} | ||
.header .header-left button span:nth-child(2){ | ||
margin-top: -2px; | ||
} | ||
.header .header-left button span:nth-child(3){ | ||
margin-top: 6px; | ||
} | ||
/* navigation menu */ | ||
.header .header-left > button, nav{ | ||
display: none; | ||
/* on large screen */ | ||
@media only screen and (min-width: 960px) { | ||
display: block; | ||
} | ||
} | ||
.header .header-left ol{ | ||
display: flex; | ||
flex-direction: row; | ||
gap: 2rem; | ||
padding-inline-start: 0px; | ||
} | ||
.header .header-left ol li{ | ||
list-style-type: none; | ||
} | ||
.header .header-left ol li > a{ | ||
box-shadow: 0px 0px 0px 0px rgba(255,255,255,1); | ||
color: var(--light); | ||
font-size: 1em; | ||
text-transform: uppercase; | ||
text-decoration: none; | ||
padding: 0.25em 0em; | ||
} | ||
.header .header-left ol li > a:hover{ | ||
box-shadow: 0px 2px 0px 0px rgba(255,255,255,1); | ||
transition: ease-in 0.2s; | ||
color: var(--light); | ||
font-size: 1em; | ||
} | ||
/* right box of the flex */ | ||
.header .header-right{ | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
/* mobile whatsapp button */ | ||
.header .header-right .whatsapp{ | ||
padding: 0px; | ||
background-color: var(--primary-color); | ||
border: none; | ||
right: 1rem; | ||
position: absolute; | ||
} | ||
.header .header-right figure{ | ||
margin: 1rem; | ||
/* on large screen */ | ||
@media only screen and (min-width: 960px) { | ||
display: none; | ||
} | ||
} | ||
/* desktop search button whatsapp button */ | ||
.header .header-right .search{ | ||
display: none; | ||
@media only screen and (min-width: 960px) { | ||
display: block; | ||
padding: 0px; | ||
background-color: var(--primary-color); | ||
border: none; | ||
} | ||
} | ||
.header .header-right .search figure{ | ||
display: none; | ||
/* on large screen */ | ||
@media only screen and (min-width: 960px) { | ||
display: block; | ||
margin-right: 4rem; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,9 @@ | ||
<script> | ||
import Header from "../lib/header/Header.svelte"; | ||
import Footer from '../lib/footer/Footer.svelte'; | ||
</script> | ||
|
||
|
||
<slot /> | ||
|
||
|
||
<Footer /> | ||
<Header/> | ||
<Footer/> | ||
|
||
<slot></slot> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.