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

Add services section

Browse source
This commit is contained in:
Paul Nicoué 2023-02-13 17:23:36 +01:00
parent fd3f7c1838
commit 27dbca54f3
10 changed files with 189 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app.vue
View file

@ -40,7 +40,6 @@
/ 100%;
place-content: start center;
place-items: center center;
row-gap: 4rem;
&__main {
grid-area: app-main;

48
assets/styles/main.scss
View file

@ -18,7 +18,7 @@
--black-font-weight: 900;
--h1-font-size: 2rem;
--h2-font-size: 2rem;
--h3-font-size: 1.8rem;
--h3-font-size: 1.4rem;
--button-font-size: 1.4rem;
--text-font-size: 1.2rem;
--caption-font-size: 1.1rem;
@ -35,9 +35,10 @@
// Dimensions
--regular-content-max-width: Min(100%, 80rem);
--small-content-max-width: Min(100%, 60rem);
--section-max-width: Min(100%, 80rem);
--content-max-width: Min(100%, 60rem);
--regular-icon-size: 2rem;
--regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
--small-icon-size: calc(var(--text-font-size) * var(--line-height));
--button-gap: 0.5rem;
@ -45,18 +46,18 @@
// Colors
--eerie-black: #212121;
--sonic-silver: #7a7a7a;
--silver: #C2C2C2;
--gray: #7A7A7A;
--white-smoke: #F5F5F5;
--emerald: #72C080;
--granny-smith-apple: #A3F3B0;
--middle-green: #428F53;
--rajah: #F9B262;
--primary-color: var(--eerie-black);
--primary-color-light: var(--sonic-silver);
--primary-color-light: var(--gray);
--primary-color-dark: black;
--secondary-color: white;
--secondary-color-dark: var(--silver);
--secondary-color-dark: var(--white-smoke);
--accent-color: var(--emerald);
--accent-color-light: var(--granny-smith-apple);
--accent-color-dark: var(--middle-green);
@ -106,8 +107,9 @@ h2 {
}
h3 {
font-family: var(--text-font-family);
font-family: var(--title-font-family);
font-size: var(--h3-font-size);
font-weight: var(--medium-font-weight);
}
p {
@ -145,6 +147,14 @@ a {
}
}
// --------------------------------------------------
// LIST STYLE
// --------------------------------------------------
ul {
list-style: disc outside;
}
// --------------------------------------------------
// BUTTON STYLE
// --------------------------------------------------
@ -276,6 +286,28 @@ form {
}
}
// --------------------------------------------------
// SECTION STYLE
// --------------------------------------------------
section {
max-width: var(--section-max-width);
padding: 4rem 2rem;
@media screen and (min-width: $tablet-media-query) {
padding: 4rem;
}
@media screen and (min-width: $desktop-media-query) {
padding: 6rem;
}
}
@mixin hero-section {
max-width: unset;
width: 100%;
}
// --------------------------------------------------
// SMOOTH SCROLLING
// --------------------------------------------------

3
components/AppError.vue
View file

@ -61,11 +61,10 @@
main {
width: 100%;
padding: 0 2rem;
}
.error {
width: 100%;
@include hero-section;
display: grid;
grid:
'title' minmax(var(--h1-font-height), auto)

2
components/ContactForm.vue
View file

@ -104,7 +104,7 @@
// --------------------------------------------------
.contact-form {
max-width: var(--small-content-max-width);
max-width: var(--content-max-width);
display: grid;
grid:
'name name' auto

6
components/ContactHeader.vue
View file

@ -1,6 +1,6 @@
<template>
<section class="contact-header">
<div class="contact-header">
<h2 class="contact-header__title">
<div></div>
<div>Contact</div>
@ -30,7 +30,7 @@
</svg>
</a>
</div>
</section>
</div>
</template>
@ -44,7 +44,7 @@
// --------------------------------------------------
.contact-header {
max-width: var(--small-content-max-width);
max-width: var(--content-max-width);
display: grid;
place-content: start;
place-items: start;

3
components/ContactSection.vue
View file

@ -1,6 +1,6 @@
<template>
<section id="contact" class="contact">
<section class="contact">
<ContactHeader class="contact__header" />
<ContactForm class="contact__form" />
</section>
@ -17,7 +17,6 @@
// --------------------------------------------------
.contact {
max-width: var(--regular-content-max-width);
display: grid;
grid:
'header' auto

6
components/HeroArrowDown.vue
View file

@ -1,6 +1,6 @@
<template>
<a class="hero-arrow-down" tabindex="-1" aria-hidden="true" href="#contact" target="_self">
<a class="hero-arrow-down" tabindex="-1" aria-hidden="true" href="#services" target="_self">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
<line x1="12" y1="5" x2="12" y2="19"></line>
<polyline points="19 12 12 19 5 12"></polyline>
@ -19,8 +19,8 @@
// --------------------------------------------------
.hero-arrow-down {
width: calc(var(--regular-icon-size) + 1rem);
height: calc(var(--regular-icon-size) + 1rem);
width: var(--regular-icon-wrapper-size);
height: var(--regular-icon-wrapper-size);
display: flex;
justify-content: center;
align-items: center;

5
components/HeroSection.vue
View file

@ -54,7 +54,7 @@
// --------------------------------------------------
.hero {
width: 100%;
@include hero-section;
height: 100vh;
height: 100svh;
display: grid;
@ -62,8 +62,7 @@
'.' 1fr
'title' auto
'.' minmax(6rem, 1fr)
'arrow-down' auto
'.' 2rem
'arrow-down' var(--regular-icon-wrapper-size)
/ 100%;
place-content: center;
place-items: center;

132
components/ServicesSection.vue Normal file
View file

@ -0,0 +1,132 @@
<template>
<div class="services-wrapper">
<section id="services" class="services">
<div class="services__illustration">
<svg viewBox="0 0 1139.17088 654.54324" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="586.171" y="32.543" width="255" height="2" fill="var(--primary-color)"/>
<rect x="796" y="22" width="28" height="28" fill="var(--error-color)"/>
<path d="M 841 34 L 807 34 L 807 0 L 841 0 L 841 34 Z M 808.478 32.522 L 839.522 32.522 L 839.522 1.478 L 808.478 1.478 L 808.478 32.522 Z" fill="var(--primary-color)"/>
<rect x="304.171" y="447.543" width="733" height="2" fill="var(--primary-color)"/>
<circle cx="246.827" cy="521.765" r="59.243" fill="var(--secondary-color-dark)"/>
<circle cx="256.46" cy="513.095" r="59.243" fill="var(--error-color)"/>
<path d="M 320.171 654.543 C 253.199 654.543 211.341 582.043 244.827 524.043 C 278.313 466.043 362.029 466.043 395.516 524.043 C 403.151 537.269 407.171 552.272 407.171 567.543 C 407.117 615.569 368.198 654.489 320.171 654.543 Z M 320.171 482.543 C 254.738 482.543 213.843 553.377 246.559 610.043 C 279.276 666.71 361.067 666.71 393.784 610.043 C 401.244 597.122 405.171 582.464 405.171 567.543 C 405.118 520.621 367.094 482.596 320.171 482.543 Z" fill="var(--primary-color)"/>
<rect x="192.672" y="652.543" width="255" height="2" fill="var(--primary-color)"/>
<rect x="406.171" y="560.543" width="733" height="2" fill="var(--primary-color)"/>
<rect x="471" y="550" width="28" height="28" fill="var(--error-color)"/>
<rect x="1078" y="550" width="28" height="28" fill="var(--error-color)"/>
<path d="M 516 562 L 482 562 L 482 528 L 516 528 L 516 562 Z M 483.478 560.522 L 514.522 560.522 L 514.522 529.478 L 483.478 529.478 L 483.478 560.522 Z" fill="var(--primary-color)"/>
<path d="M 1123 562 L 1089 562 L 1089 528 L 1123 528 L 1123 562 Z M 1090.478 560.522 L 1121.522 560.522 L 1121.522 529.478 L 1090.478 529.478 L 1090.478 560.522 Z" fill="var(--primary-color)"/>
</g>
<g>
<path d="M 683.793 18.652 L 423.623 18.652 L 423.623 13.29 L 305.652 13.29 L 305.652 18.652 L 44.41 18.652 C 34.691 18.652 26.812 26.531 26.812 36.251 L 26.812 392.503 C 26.812 402.222 34.691 410.101 44.41 410.101 L 683.793 410.101 C 693.512 410.101 701.391 402.222 701.391 392.503 L 701.391 36.251 C 701.391 26.531 693.512 18.652 683.793 18.652 Z" fill="var(--primary-color)"/>
<rect x="50.406" y="49.754" width="627.391" height="353.913" fill="var(--accent-color)"/>
<polygon points="498.374 403.667 50.406 403.667 50.406 49.754 498.374 403.667" opacity="0.1"/>
<circle cx="363.565" cy="33.667" r="6.435" fill="var(--accent-color)"/>
<rect x="614.917" y="56.934" width="24.492" height="24.492" fill="var(--secondary-color-dark)"/>
<path d="M 650.78 92.797 L 621.04 92.797 L 621.04 63.057 L 650.78 63.057 L 650.78 92.797 Z M 622.333 91.504 L 649.487 91.504 L 649.487 64.35 L 622.333 64.35 L 622.333 91.504 Z" fill="var(--primary-color)"/>
<circle cx="148.574" cy="316.876" r="60.307" fill="var(--secondary-color-dark)"/>
<path d="M 163.171 354.543 C 104.667 354.543 68.101 291.21 97.353 240.543 C 126.606 189.877 199.737 189.877 228.989 240.543 C 235.66 252.097 239.171 265.202 239.171 278.543 C 239.124 320.497 205.125 354.496 163.171 354.543 Z M 163.171 204.543 C 106.206 204.543 70.603 266.21 99.085 315.543 C 127.568 364.877 198.775 364.877 227.257 315.543 C 233.752 304.294 237.171 291.533 237.171 278.543 C 237.125 237.693 204.021 204.589 163.171 204.543 Z" fill="var(--primary-color)"/>
<rect x="439.102" y="145.279" width="200.307" height="5.248" fill="var(--primary-color)"/>
<rect x="439.102" y="161.898" width="200.307" height="5.248" fill="var(--primary-color)"/>
<rect x="439.102" y="178.518" width="200.307" height="5.248" fill="var(--primary-color)"/>
<rect x="439.102" y="195.137" width="200.307" height="5.248" fill="var(--primary-color)"/>
<rect x="439.102" y="211.757" width="200.307" height="5.248" fill="var(--primary-color)"/>
<rect x="509.953" y="240.622" width="58.605" height="12.246" fill="var(--primary-color)"/>
<path d="M 719.007 397.232 L 657.778 397.232 L 657.778 392.82 C 657.778 392.337 657.386 391.946 656.903 391.946 L 635.91 391.946 C 635.427 391.946 635.035 392.337 635.035 392.82 L 635.035 397.232 L 621.915 397.232 L 621.915 392.82 C 621.915 392.337 621.523 391.946 621.04 391.946 L 600.047 391.946 C 599.564 391.946 599.173 392.337 599.173 392.82 L 599.173 397.232 L 586.052 397.232 L 586.052 392.82 C 586.052 392.337 585.66 391.946 585.177 391.946 L 564.184 391.946 C 563.701 391.946 563.31 392.337 563.31 392.82 L 563.31 397.232 L 550.189 397.232 L 550.189 392.82 C 550.189 392.337 549.798 391.946 549.314 391.946 L 528.322 391.946 C 527.838 391.946 527.447 392.337 527.447 392.82 L 527.447 397.232 L 514.326 397.232 L 514.326 392.82 C 514.326 392.337 513.935 391.946 513.452 391.946 L 492.459 391.946 C 491.976 391.946 491.584 392.337 491.584 392.82 L 491.584 397.232 L 478.463 397.232 L 478.463 392.82 C 478.463 392.337 478.072 391.946 477.589 391.946 L 456.596 391.946 C 456.113 391.946 455.721 392.337 455.721 392.82 L 455.721 397.232 L 442.6 397.232 L 442.6 392.82 C 442.6 392.337 442.209 391.946 441.726 391.946 L 277.281 391.946 C 276.798 391.946 276.407 392.337 276.407 392.82 L 276.407 397.232 L 263.286 397.232 L 263.286 392.82 C 263.286 392.337 262.894 391.946 262.411 391.946 L 241.418 391.946 C 240.935 391.946 240.544 392.337 240.544 392.82 L 240.544 397.232 L 227.423 397.232 L 227.423 392.82 C 227.423 392.337 227.032 391.946 226.548 391.946 L 205.556 391.946 C 205.072 391.946 204.681 392.337 204.681 392.82 L 204.681 397.232 L 191.56 397.232 L 191.56 392.82 C 191.56 392.337 191.169 391.946 190.686 391.946 L 169.693 391.946 C 169.21 391.946 168.818 392.337 168.818 392.82 L 168.818 397.232 L 155.697 397.232 L 155.697 392.82 C 155.697 392.337 155.306 391.946 154.823 391.946 L 133.83 391.946 C 133.347 391.946 132.955 392.337 132.955 392.82 L 132.955 397.232 L 119.835 397.232 L 119.835 392.82 C 119.835 392.337 119.443 391.946 118.96 391.946 L 97.967 391.946 C 97.484 391.946 97.092 392.337 97.092 392.82 L 97.092 397.232 L 83.972 397.232 L 83.972 392.82 C 83.972 392.337 83.58 391.946 83.097 391.946 L 62.104 391.946 C 61.621 391.946 61.229 392.337 61.229 392.82 L 61.229 397.232 L 20.993 397.232 C 9.399 397.232 0 406.631 0 418.225 L 0 427.717 C 0 439.311 9.399 448.71 20.993 448.71 L 719.007 448.71 C 730.601 448.71 740 439.311 740 427.717 L 740 418.225 C 740 406.631 730.601 397.232 719.007 397.232 Z" fill="var(--primary-color)"/>
</g>
<g>
<path d="M 1057.171 231.958 L 1054.793 231.958 L 1054.793 166.797 C 1054.793 145.968 1037.908 129.083 1017.079 129.083 L 879.025 129.083 C 858.197 129.083 841.312 145.968 841.312 166.797 L 841.312 524.278 C 841.312 545.107 858.197 561.992 879.025 561.992 L 1017.079 561.992 C 1037.908 561.992 1054.793 545.107 1054.793 524.278 L 1054.793 278.341 L 1057.171 278.341 L 1057.171 231.958 Z" fill="var(--primary-color)"/>
<path d="M 1046.761 169.013 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 169.013 C 851.723 153.462 864.33 140.855 879.881 140.853 L 896.711 140.853 C 893.124 149.653 899.598 159.284 909.101 159.283 L 988.191 159.283 C 997.695 159.284 1004.169 149.653 1000.581 140.853 L 1018.601 140.853 C 1034.153 140.855 1046.76 153.462 1046.761 169.013 Z" fill="var(--accent-color)"/>
<path d="M 1046.761 487.853 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 333.763 L 968.591 426.093 L 970.591 427.673 L 992.331 444.843 L 994.361 446.453 L 1046.761 487.853 Z" opacity="0.1"/>
<rect x="929.684" y="211.179" width="24.492" height="24.492" fill="var(--secondary-color-dark)"/>
<path d="M 939.059 217.303 L 939.059 247.043 L 968.799 247.043 L 968.799 217.303 L 939.059 217.303 Z M 967.509 245.753 L 940.349 245.753 L 940.349 218.593 L 967.509 218.593 L 967.509 245.753 Z" fill="var(--primary-color)"/>
<circle cx="937.241" cy="498.707" r="43.868" fill="var(--secondary-color-dark)"/>
<path d="M 950.171 532.543 C 907.832 532.543 881.37 486.71 902.54 450.043 C 923.709 413.377 976.633 413.377 997.803 450.043 C 1002.63 458.404 1005.171 467.889 1005.171 477.543 C 1005.137 507.905 980.533 532.509 950.171 532.543 Z M 950.171 424.543 C 909.372 424.543 883.872 468.71 904.272 504.043 C 924.672 539.377 975.671 539.377 996.071 504.043 C 1000.722 495.986 1003.171 486.847 1003.171 477.543 C 1003.139 448.286 979.429 424.576 950.171 424.543 Z" fill="var(--primary-color)"/>
<rect x="878.621" y="280.875" width="141.24" height="5.248" fill="var(--primary-color)"/>
<rect x="878.621" y="297.494" width="141.24" height="5.248" fill="var(--primary-color)"/>
<rect x="878.621" y="314.114" width="141.24" height="5.248" fill="var(--primary-color)"/>
<rect x="878.621" y="330.733" width="141.24" height="5.248" fill="var(--primary-color)"/>
<rect x="878.621" y="347.352" width="141.24" height="5.248" fill="var(--primary-color)"/>
<rect x="928.58" y="376.218" width="41.324" height="12.246" fill="var(--primary-color)"/>
</g>
</svg>
</div>
<h2 class="services__title">Prestations</h2>
<ul class="services__list">
<li><h3>Intégration web et développement front-end</h3>
<p>Retranscription fidèle de maquettes dans le respect des standards W3C et de la charte graphique définie par votre agence.</p>
</li>
<li><h3>Conception de site internet sur mesure</h3>
<p>Accompagnement de votre entreprise ou association dans la création ou la refonte de son site vitrine ou e-commerce.</p>
</li>
</ul>
</section>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.services-wrapper {
width: 100%;
display: flex;
justify-content: center;
color: var(--primary-color);
background-image: var(--button-gradient);
background-size: 100%;
}
.services {
display: grid;
grid:
'illustration' auto
'title' auto
'list' auto
/ 1fr;
place-content: start center;
place-items: start center;
gap: 2rem;
&__illustration {
grid-area: illustration;
width: 100%;
display: flex;
justify-content: center;
svg {
max-width: 35rem;
height: auto;
}
}
&__title {
grid-area: title;
place-self: start;
}
&__list {
grid-area: list;
display: flex;
flex-direction: column;
gap: 2rem;
}
@media screen and (min-width: $tablet-media-query) {
&__list {
flex-direction: row;
gap: 4rem;
}
}
}
</style>

16
pages/index.vue
View file

@ -2,6 +2,7 @@
<main>
<HeroSection class="hero-section" />
<ServicesSection class="services-section" />
<ContactSection class="contact-section" />
</main>
@ -27,31 +28,26 @@
main {
width: 100%;
padding: 0 2rem;
display: grid;
grid:
'hero-section' auto
'services-section' auto
'contact-section' auto
/ 1fr;
place-content: start center;
place-items: start center;
row-gap: 4rem;
.hero-section {
grid-area: hero-section;
}
.services-section {
grid-area: services-section;
}
.contact-section {
grid-area: contact-section;
}
@media screen and (min-width: $tablet-media-query) {
padding: 0 4rem;
}
@media screen and (min-width: $desktop-media-query) {
padding: 0 6rem;
}
}
</style>