host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add form section

Browse source
This commit is contained in:
Paul Nicoué 2023-01-20 18:08:51 +01:00
parent c6705914e0
commit 2a4cf52465
33 changed files with 1031 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

57
components/ContactSection.vue Normal file
View file

@ -0,0 +1,57 @@
<template>
<section class="contact">
<ContactDecoration class="contact__decoration" />
<ContactHeader class="contact__header" />
<ContactForm class="contact__form" />
</section>
</template>
<script setup>
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// LAYOUT & STYLE
// --------------------------------------------------
.contact {
width: var(--content-width);
display: grid;
grid:
'decoration header' auto
'decoration form' auto
/ auto 1fr;
place-content: start stretch;
place-items: start stretch;
row-gap: 4rem;
column-gap: 2rem;
&__decoration {
grid-area: decoration;
}
&__header {
grid-area: header;
}
&__form {
grid-area: form;
}
@media screen and (min-width: $tablet-media-query) {
column-gap: 4rem;
}
@media screen and (min-width: $desktop-media-query) {
grid:
'decoration header form' auto
/ auto 1fr 2fr;
column-gap: 6rem;
}
}
</style>