first test
This commit is contained in:
parent
515daf3190
commit
4dd0dd5030
BIN
assets/images/footerWave.webp
Normal file
BIN
assets/images/footerWave.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
assets/images/waveFlow.webp
Normal file
BIN
assets/images/waveFlow.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
@ -9,6 +9,15 @@ $beige: #E2E0C8
|
||||
$pink: #AE445A
|
||||
$color-bg: #f9f9f9
|
||||
$terra: #817363
|
||||
$lightBlue: #E2ECF4
|
||||
$salbeiLight: #EBF7F3
|
||||
$lightGold: #F8F1E1
|
||||
$lightLavender: #EEE0F7
|
||||
|
||||
$breakPointPhone: 480px // Smartphones
|
||||
$breakPointPad: 768px // Tablets
|
||||
$breakPointDesk: 1024px // Laptops & kleine Desktops
|
||||
$breakPointWide: 1440px // Große Desktops
|
||||
|
||||
@font-face
|
||||
font-family: 'OoohBaby'
|
||||
|
||||
230
pages/index.vue
230
pages/index.vue
@ -17,6 +17,19 @@
|
||||
|
||||
</div>
|
||||
<div class="whatIdo sectionStyle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="439 1148 424 402"
|
||||
class="shape blue"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
class="shape-fill"
|
||||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</svg>
|
||||
<h2>Was ich tue</h2>
|
||||
<p><b>Ich biete Dir einen mentalen Raum, in dem Du wieder spürst, wer Du bist.</b> </p><p>
|
||||
Denn ich nehme Menschen sehr genau wahr. Nicht nur das was sie sagen, sondern vor allem auch das, was sie nicht sagen. Ich spüre Stimmungen, innere Spannungen und emotionale Blockaden, oft bevor sie selbst sie greifen können.
|
||||
@ -24,8 +37,88 @@ Das ist keine Methode. Es ist meine Art, Menschen zu begegnen: tief, ehrlich und
|
||||
Ich sehe Zusammenhänge, wo andere sich wundern. Ich höre, was hinter den Worten mitschwingt und kann es für sie in Worte fassen. Klar. Ruhig. Ohne Urteil.
|
||||
Das ist der Raum, den ich halte: ein Raum, in dem du dich wieder spüren kannst. Ein Raum, in dem du beginnst zu verstehen, was dich innerlich blockiert. Nicht durch Analyse, sondern durch Verbindung. Nicht durch Druck, sondern durch echte Resonanz.</p>
|
||||
</div>
|
||||
<div class="becomeArea">
|
||||
<div class="sectionStyle" style="max-width:60%;">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="439 1148 424 402"
|
||||
class="shape salbei"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
class="shape-fill"
|
||||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</svg>
|
||||
<h2>Was Du von mir bekommst</h2>
|
||||
<p>
|
||||
<ul>
|
||||
<li><b>Klarheitssessions:</b> Intensive 90-Minuten-Gespräche, online oder persönlich.</li>
|
||||
<li><b>Begleitung:</b> 4 Wochen stille Begleitung mit Impulsen und Austausch.</li>
|
||||
<li><b>Spaziergänge & Gespräche:</b> In der Natur Klarheit finden, den Kopf frei bekommen.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
<div class="sectionStyle" style="margin-left: 15vw; margin-top: 3rem;max-width:55%;">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="439 1148 424 402"
|
||||
class="shape gold"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
class="shape-fill"
|
||||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</svg>
|
||||
<h2>Was Du nicht bekommst</h2>
|
||||
<p>
|
||||
<ul>
|
||||
<li><b>Keine Pseudo-Coaching-Methoden:</b></li>
|
||||
<li><b>Kein Leistungsdruck oder Optimierungszwang:</b></li>
|
||||
<li><b>Keine schnellen „Rezepte“:</b></li>
|
||||
<li><b>Nur Raum für Dich – in Deinem Tempo:</b></li>
|
||||
</ul>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="costBox">
|
||||
<div class="sectionStyle">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="439 1148 424 402"
|
||||
class="shape lavender"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
class="shape-fill"
|
||||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||||
fill-opacity="1"
|
||||
/>
|
||||
</svg>
|
||||
<h2>Dein Energieausgleich, um zu Dir selbst zu finden</h2>
|
||||
<p>Ich arbeite auf Spendenbasis. Du gibst, was es Dir wert ist. </p>
|
||||
<p class="hint"> (Als Orientierung für Dich: Mein regulärer Stundensatz liegt bei 95 €/h)</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer></footer>
|
||||
<footer>
|
||||
<div>
|
||||
<h3>Kontakt</h3>
|
||||
<p>Sabrina Hennrich</p>
|
||||
<p>Rausch 10</p>
|
||||
<p>82211 Herrsching am Ammersee</p>
|
||||
<p>Telefon: 0177 / 83 88 553</p>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
@ -72,17 +165,26 @@ body
|
||||
background-image: url('~/assets/images/Mandala.webp')
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
@media (max-width: $breakPointPad)
|
||||
top: 2rem
|
||||
width: 80%
|
||||
left: -40%
|
||||
&::after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 35%
|
||||
right: -15%
|
||||
width: 40%
|
||||
width: 60%
|
||||
max-width: 600px
|
||||
aspect-ratio: 1 / 1
|
||||
background-image: url('~/assets/images/spirale.webp')
|
||||
background-size: cover
|
||||
background-repeat: no-repeat
|
||||
z-index: 0
|
||||
@media (max-width: $breakPointPad)
|
||||
top: 20%
|
||||
width: 80%
|
||||
right: -50%
|
||||
main
|
||||
z-index: 2
|
||||
margin-top: -35vw
|
||||
@ -128,37 +230,131 @@ body
|
||||
img
|
||||
width: 100%
|
||||
max-width: 400px
|
||||
@media (max-width: $breakPointPad)
|
||||
margin-bottom: -4rem
|
||||
|
||||
// Mobile-Ansicht: eine Spalte
|
||||
@media (max-width: 768px)
|
||||
@media (max-width: $breakPointPad)
|
||||
grid-template-columns: 1fr
|
||||
.textBox,
|
||||
.imageBox
|
||||
max-width: 100%
|
||||
|
||||
.sectionStyle
|
||||
width: 80%
|
||||
margin: 4rem 10%
|
||||
position: relative
|
||||
width: 65%
|
||||
margin: 8rem 10% 1rem 10%
|
||||
z-index: 2
|
||||
background-color: rgba(255, 255, 255, 0.8)
|
||||
border-radius: 1rem
|
||||
border-radius: 15%
|
||||
padding: 1rem 2rem
|
||||
h2, p
|
||||
@media (max-width: $breakPointPad)
|
||||
width: 80%
|
||||
margin: 8rem 5vw 1rem 5vw
|
||||
.shape
|
||||
position: absolute
|
||||
top: -.5rem
|
||||
left: -.5rem
|
||||
width: 12rem
|
||||
aspect-ratio: 1 / 1
|
||||
z-index: 1
|
||||
|
||||
&.blue
|
||||
.shape-fill
|
||||
fill: $lightBlue
|
||||
|
||||
&.salbei
|
||||
.shape-fill
|
||||
fill: $salbeiLight
|
||||
|
||||
&.gold
|
||||
.shape-fill
|
||||
fill: $lightGold
|
||||
|
||||
&.lavender
|
||||
.shape-fill
|
||||
fill: $lightLavender
|
||||
|
||||
|
||||
h2, p, li
|
||||
z-index: 2
|
||||
position: relative
|
||||
color: $terra
|
||||
h2
|
||||
font-size: 180%
|
||||
&::before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: -2rem
|
||||
left: -3rem
|
||||
width: 20vw
|
||||
aspect-ratio: 1 / 1
|
||||
background-image: url('~/assets/images/shape.svg')
|
||||
background-size: cover
|
||||
z-index: 1
|
||||
z-index: 2
|
||||
p
|
||||
padding: 0 0 0 4vw
|
||||
font-size: 1.2rem
|
||||
&.hint
|
||||
font-size: 1rem
|
||||
margin-top: -1rem
|
||||
margin-left: 3rem
|
||||
li
|
||||
font-size: 1.1rem
|
||||
margin: 0.5rem 0
|
||||
|
||||
.becomeArea
|
||||
position: relative
|
||||
background-image: url('~/assets/images/waveFlow.webp')
|
||||
background-size: auto 100%
|
||||
background-repeat: no-repeat
|
||||
background-position: left bottom
|
||||
width: 100%
|
||||
padding: 1rem 0 25vw 15vw
|
||||
margin: -15vh 0 0 0
|
||||
@media (max-width: $breakPointPad)
|
||||
background-size: 100% auto
|
||||
|
||||
.costBox
|
||||
margin: -10vh 0 -10vw 0
|
||||
|
||||
footer
|
||||
display: grid
|
||||
align-items: end
|
||||
grid-template-columns: repeat(3, 1fr)
|
||||
gap: 2rem
|
||||
padding: 2rem 10%
|
||||
background-image: url('~/assets/images/footerWave.webp')
|
||||
background-size: 100% auto
|
||||
background-repeat: no-repeat
|
||||
background-position: right top
|
||||
width: 100%
|
||||
min-height: 20rem
|
||||
z-index: 1
|
||||
margin: 10rem 0 0 0
|
||||
position: relative
|
||||
|
||||
div
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-end // Inhalt im div nach unten
|
||||
|
||||
padding: 1rem 1rem 0 1rem
|
||||
margin: 0
|
||||
|
||||
h3, p
|
||||
padding: 0 0 .2rem 0
|
||||
margin: 0
|
||||
line-height: 1.4
|
||||
|
||||
h3
|
||||
color: $terra
|
||||
font-size: 1rem
|
||||
text-transform: uppercase
|
||||
font-family: $font-Header
|
||||
margin-bottom: .5rem
|
||||
p
|
||||
font-size: 1.1rem
|
||||
color: black
|
||||
|
||||
@media (max-width: $breakPointPad)
|
||||
grid-template-columns: 1fr
|
||||
background-position: left bottom
|
||||
background-size: 150% auto
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user