60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template>
|
|
|
|
<section id="contact" class="contact">
|
|
<ContactHeader class="contact__header" />
|
|
<ContactForm class="contact__form" />
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// STYLE
|
|
// --------------------------------------------------
|
|
|
|
.contact {
|
|
position: relative;
|
|
display: grid;
|
|
grid:
|
|
'header' auto
|
|
'form' auto
|
|
/ 1fr;
|
|
place-content: start stretch;
|
|
place-items: start stretch;
|
|
row-gap: 4rem;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light), var(--primary-color));
|
|
}
|
|
|
|
&__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:
|
|
'header form' auto
|
|
/ 1fr 2fr;
|
|
column-gap: 6rem;
|
|
}
|
|
}
|
|
|
|
</style>
|