From 7a5b6a9368d3114c2e024d8caeee97159679d8b2 Mon Sep 17 00:00:00 2001 From: kurtounet Date: Wed, 6 Mar 2024 22:17:08 +0100 Subject: [PATCH] Formulaire ok --- index.html | 27 +++++++++++++-------------- sass/dist/style.css | 38 ++++++++++++++++++++------------------ sass/dist/style.min.css | 2 +- sass/style.css | 39 ++++++++++++++++++++------------------- sass/style.css.map | 2 +- sass/style.sass | 41 ++++++++++++++++++++++------------------- 6 files changed, 77 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index 785cf09..97b681f 100644 --- a/index.html +++ b/index.html @@ -118,13 +118,12 @@

Mon parcourt Pro

Mes Projets

-

Voici quelques-uns de mes projets :

Technologies

-

Technologies Apprises :

+

Technologies utilisées :

@@ -133,28 +132,28 @@

Technologies

Contactez-moi

- Je suis ravi que vous envisagiez de me contacter pour discuter de votre projet ou pour toute autre demande. - Que vous - ayez une question, souhaitiez en savoir plus sur mon travail, ou envisagiez une collaboration, je suis ici - pour écouter - et répondre à vos besoins. Veuillez remplir le formulaire ci-dessous avec vos détails et votre message, et je - vous - recontacterai dès que possible. + Je suis ravi que vous envisagiez de me contacter. + Veuillez remplir le formulaire ci-dessous avec vos détails et votre message, + et je vous recontacterai dès que possible.

- + - + + + - - + + + +
diff --git a/sass/dist/style.css b/sass/dist/style.css index 5d95683..a6a9895 100644 --- a/sass/dist/style.css +++ b/sass/dist/style.css @@ -51,6 +51,11 @@ body #divPopup { width: 200px; height: 200px; } +body h2 { + text-align: center; + padding: 2rem; + font-size: 2rem; +} body header, body footer { background-color: #D94423; } @@ -150,11 +155,9 @@ nav ul li p { } main section { - display: flex; - flex-direction: column; padding-top: 10vh; height: 100vh; - width: 100vw; + width: 100%; /*border-bottom: 2px solid rgba(250, 250 , 250, 1)*/ } main section#accueil { @@ -292,7 +295,6 @@ main section#competences { height: fit-content; } main section#technologies { - width: 100%; display: flex; flex-direction: column; align-items: center; @@ -309,18 +311,21 @@ main section#technologies .card-tech { justify-content: space-between; box-shadow: 2px 7px 6px -6px rgba(0, 0, 0, 0.75); margin: 10px; + width: 290px; +} +main section#technologies .card-tech h3 { + padding: 1rem; } main section#technologies .card-tech ul { border-radius: 8px; list-style-type: none; display: flex; flex-wrap: wrap; - flex-direction: row; - justify-content: space-between; + align-items: center; + justify-content: space-around; background-color: #ffffff; width: fit-content; margin: 10px; - padding: 0.5rem; } main section#technologies .card-tech ul li { display: flex; @@ -336,22 +341,15 @@ main section#contact { height: fit-content; display: flex; flex-direction: column; - align-items: center; - justify-content: space-around; - width: 100%; -} -main section#contact h2 { - text-align: center; - padding: 1rem; } main section#contact p { padding: 1rem; } main section#contact form { - height: fit-content; display: flex; flex-direction: column; - width: 100%; + align-content: center; + margin: 2rem; } main section#contact form label { padding: 1rem 0.5rem; @@ -359,12 +357,16 @@ main section#contact form label { main section#contact form input { padding: 0.5rem 1rem; } +main section#contact form textarea { + font-size: 1rem; + padding: 0.5rem 0.5rem; + height: 200px; +} main section#contact form button { border-radius: 8px; padding: 1rem 0; - margin: 1rem 0; + margin: 2rem 0; background-color: #0477BF; - width: 100%; } footer { diff --git a/sass/dist/style.min.css b/sass/dist/style.min.css index dfac32e..78454b2 100644 --- a/sass/dist/style.min.css +++ b/sass/dist/style.min.css @@ -1 +1 @@ -@charset "UTF-8";body #btn-arrow,header,nav{position:fixed}header div,nav ul{align-content:center}main section#a-propos,nav ul{height:fit-content}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype')}html{widows:100%}a,body,h2,h3,li,p,ul{padding:0;margin:0;font-family:Roboto,sans-serif;font-size:16px;text-decoration:none}body{color:#fff;background-color:#110f0f}body .light-mode{color:#0D0D0D;background-color:#fff}body footer,body header,header{background-color:#D94423}.open-menu,body #btn-arrow,nav{background-color:#F2C335}body #btn-arrow{border-radius:50%;bottom:20px;right:20px;width:3rem;height:3rem;display:flex;justify-content:center;cursor:pointer}body #btn-arrow svg{fill:#0D0D0D;object-fit:contain;margin:.5rem}body #divPopup{display:none;position:absolute;top:10vh;left:10vh;z-index:1000;background-color:#fff;border:2px solid #D94423;border-radius:8px;width:200px;height:200px}header{height:10vh;width:100%;display:flex;justify-content:space-between;z-index:99}header div{display:flex;justify-content:center;align-items:center}header div h1{display:none}header div div#menu-burger{display:block;position:relative;right:50px}.open-menu{display:flex;flex-direction:column;animation:slideOpenMenu .5s ease-in-out}@keyframes slideOpenMenu{from{transform:translateX(-100%)}to{transform:translateX(0)}}.close-menu{display:flex;flex-direction:column;animation:slideCloseMenu .5s ease-in-out forwards}@keyframes slideCloseMenu{from{transform:translateX(0)}to{transform:translateX(-100%)}}nav{display:none;top:0;left:0;height:100vh;width:50vw;z-index:100}nav div#menu-close{display:flex;justify-content:flex-end}nav ul,nav ul li a{display:flex;flex-direction:column}nav ul{list-style-type:none;align-items:center}nav ul li{list-style-type:none}nav ul li a{align-items:center;color:#0D0D0D;text-decoration:none;padding:1rem}main section,main section#accueil{flex-direction:column;display:flex}nav ul li a img{width:2rem;height:2rem}nav ul li p{font-size:1.5rem}main section{padding-top:10vh;height:100vh;width:100vw}main section#accueil{color:#fff;align-items:center}main section#accueil h1{font-size:3rem;text-align:center}main section#accueil h2{color:#F2C335;font-size:2rem;padding:.5rem;margin:.5rem}main section#accueil p{width:80%;text-align:justify;padding:20px}main section#a-propos .flex-col-center{display:flex;flex-direction:column;align-items:center}main section#a-propos .box{display:flex;flex-direction:row;align-items:flex-start}main section#a-propos .year{color:#D94423;font-size:1rem;padding:0}main section#a-propos .bullet{background-color:#D94423;width:15px;height:15px;border-radius:50%;z-index:10;margin:.5rem}main section#a-propos .line{background-color:#fff;width:2px;height:80px}main section#a-propos .job-card{background-color:#fff;border-radius:8px;border:2px solid #D94423;color:#0D0D0D;height:100%;width:300px;margin:.5rem;padding:.5rem}main section#a-propos .job-card h3{font-size:1rem;color:#D94423;display:inline-block}main section#a-propos .job-card p{font-size:1rem;padding:0}main section#a-propos .job-card ul{display:flex;list-style-type:none;flex-direction:column}main section#projets{height:fit-content}main section#projets div#article-projet{display:flex;flex-wrap:wrap;justify-content:center;color:#0D0D0D}main section#projets div#article-projet article{background-color:#fff;height:fit-content;width:270px;display:flex;flex-direction:column;align-items:center;border-radius:8px;border:2px solid #D94423;margin:10px;padding:.5rem}main section#projets div#article-projet article ul{list-style-type:none;display:flex;flex-wrap:wrap;justify-content:space-evenly;padding:1rem}main section#projets div#article-projet article .logo-techno-card{width:5vh;height:5vh}main section#projets div#article-projet article img{width:100%;height:100%;border-radius:20px}main section#projets div#article-projet article h3,main section#projets div#article-projet article p{padding:.5rem}main section#projets div#article-projet article p{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main section#projets div#article-projet article a{background-color:#0477BF;color:#fff;font-weight:700;border-radius:8px;padding:.5rem;margin:.5rem;text-decoration:none}main section#competences{height:fit-content}main section#technologies{width:100%;display:flex;flex-direction:column;align-items:center;height:fit-content}main section#technologies .card-tech{background-color:#fff;border:2px solid #D94423;border-radius:8px;color:#0D0D0D;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:2px 7px 6px -6px rgba(0,0,0,.75);margin:10px}main section#technologies .card-tech ul{border-radius:8px;list-style-type:none;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;background-color:#fff;width:fit-content;margin:10px;padding:.5rem}main section#technologies .card-tech ul li{display:flex;flex-direction:column;align-items:center;margin:.5rem}main section#technologies .card-tech ul li img{width:50px;height:50px}main section#contact{height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:space-around;width:100%}main section#contact h2{text-align:center;padding:1rem}main section#contact p{padding:1rem}main section#contact form{height:fit-content;display:flex;flex-direction:column;width:100%}main section#contact form label{padding:1rem .5rem}main section#contact form input{padding:.5rem 1rem}main section#contact form button{border-radius:8px;padding:1rem 0;margin:1rem 0;background-color:#0477BF;width:100%}footer{text-align:center}@media screen and (min-width:576px){footer,header{background-color:#0477BF}}@media screen and (min-width:768px){header,nav,nav ul{display:flex}header{background-color:#F2C335;flex-direction:row;justify-content:space-between}header div#menu-burger{display:none;position:relative;right:10px}nav{background-color:#fff00;justify-content:space-between;position:fixed;top:0;left:100px;height:fit-content;width:100%;z-index:1000}nav div#menu-close{display:none}nav ul{flex-direction:row}nav ul img{height:25px;width:25px}}@media screen and (min-width:992px){footer,header{background-color:#D94423}} \ No newline at end of file +@charset "UTF-8";body #btn-arrow,header,nav{position:fixed}main section#a-propos,nav ul{height:fit-content}body h2,footer,main section#accueil h1{text-align:center}@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype')}html{widows:100%}a,body,h2,h3,li,p,ul{padding:0;margin:0;font-family:Roboto,sans-serif;font-size:16px;text-decoration:none}body{color:#fff;background-color:#110f0f}body .light-mode{color:#0D0D0D;background-color:#fff}.open-menu,body #btn-arrow,nav{background-color:#F2C335}body footer,body header,header{background-color:#D94423}body #btn-arrow{border-radius:50%;bottom:20px;right:20px;width:3rem;height:3rem;display:flex;justify-content:center;cursor:pointer}body #btn-arrow svg{fill:#0D0D0D;object-fit:contain;margin:.5rem}body #divPopup{display:none;position:absolute;top:10vh;left:10vh;z-index:1000;background-color:#fff;border:2px solid #D94423;border-radius:8px;width:200px;height:200px}body h2{padding:2rem;font-size:2rem}header{height:10vh;width:100%;display:flex;justify-content:space-between;z-index:99}header div{display:flex;justify-content:center;align-content:center;align-items:center}header div h1{display:none}header div div#menu-burger{display:block;position:relative;right:50px}.open-menu{display:flex;flex-direction:column;animation:slideOpenMenu .5s ease-in-out}.close-menu,nav ul{display:flex;flex-direction:column}@keyframes slideOpenMenu{from{transform:translateX(-100%)}to{transform:translateX(0)}}.close-menu{animation:slideCloseMenu .5s ease-in-out forwards}@keyframes slideCloseMenu{from{transform:translateX(0)}to{transform:translateX(-100%)}}nav{display:none;top:0;left:0;height:100vh;width:50vw;z-index:100}nav div#menu-close{display:flex;justify-content:flex-end}nav ul{list-style-type:none;align-items:center;align-content:center}main section#accueil,nav ul li a{flex-direction:column;display:flex}nav ul li{list-style-type:none}nav ul li a{align-items:center;color:#0D0D0D;text-decoration:none;padding:1rem}nav ul li a img{width:2rem;height:2rem}nav ul li p{font-size:1.5rem}main section{padding-top:10vh;height:100vh;width:100%}main section#accueil{color:#fff;align-items:center}main section#accueil h1{font-size:3rem}main section#accueil h2{color:#F2C335;font-size:2rem;padding:.5rem;margin:.5rem}main section#accueil p{width:80%;text-align:justify;padding:20px}main section#a-propos .flex-col-center{display:flex;flex-direction:column;align-items:center}main section#a-propos .box{display:flex;flex-direction:row;align-items:flex-start}main section#a-propos .year{color:#D94423;font-size:1rem;padding:0}main section#a-propos .bullet{background-color:#D94423;width:15px;height:15px;border-radius:50%;z-index:10;margin:.5rem}main section#a-propos .line{background-color:#fff;width:2px;height:80px}main section#a-propos .job-card{background-color:#fff;border-radius:8px;border:2px solid #D94423;color:#0D0D0D;height:100%;width:300px;margin:.5rem;padding:.5rem}main section#a-propos .job-card h3{font-size:1rem;color:#D94423;display:inline-block}main section#a-propos .job-card p{font-size:1rem;padding:0}main section#a-propos .job-card ul{display:flex;list-style-type:none;flex-direction:column}main section#projets{height:fit-content}main section#projets div#article-projet{display:flex;flex-wrap:wrap;justify-content:center;color:#0D0D0D}main section#projets div#article-projet article{background-color:#fff;height:fit-content;width:270px;display:flex;flex-direction:column;align-items:center;border-radius:8px;border:2px solid #D94423;margin:10px;padding:.5rem}main section#projets div#article-projet article ul{list-style-type:none;display:flex;flex-wrap:wrap;justify-content:space-evenly;padding:1rem}main section#projets div#article-projet article .logo-techno-card{width:5vh;height:5vh}main section#projets div#article-projet article img{width:100%;height:100%;border-radius:20px}main section#projets div#article-projet article h3,main section#projets div#article-projet article p{padding:.5rem}main section#projets div#article-projet article p{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}main section#projets div#article-projet article a{background-color:#0477BF;color:#fff;font-weight:700;border-radius:8px;padding:.5rem;margin:.5rem;text-decoration:none}main section#competences{height:fit-content}main section#technologies{display:flex;flex-direction:column;align-items:center;height:fit-content}main section#technologies .card-tech{background-color:#fff;border:2px solid #D94423;border-radius:8px;color:#0D0D0D;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:2px 7px 6px -6px rgba(0,0,0,.75);margin:10px;width:290px}main section#technologies .card-tech h3{padding:1rem}main section#technologies .card-tech ul{border-radius:8px;list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;background-color:#fff;width:fit-content;margin:10px}main section#technologies .card-tech ul li{display:flex;flex-direction:column;align-items:center;margin:.5rem}main section#technologies .card-tech ul li img{width:50px;height:50px}main section#contact{height:fit-content;display:flex;flex-direction:column}main section#contact p{padding:1rem}main section#contact form{display:flex;flex-direction:column;align-content:center;margin:2rem}main section#contact form label{padding:1rem .5rem}main section#contact form input{padding:.5rem 1rem}main section#contact form textarea{font-size:1rem;padding:.5rem;height:200px}main section#contact form button{border-radius:8px;padding:1rem 0;margin:2rem 0;background-color:#0477BF}@media screen and (min-width:576px){footer,header{background-color:#0477BF}}@media screen and (min-width:768px){header,nav,nav ul{display:flex}header{background-color:#F2C335;flex-direction:row;justify-content:space-between}header div#menu-burger{display:none;position:relative;right:10px}nav{background-color:#fff00;justify-content:space-between;position:fixed;top:0;left:100px;height:fit-content;width:100%;z-index:1000}nav div#menu-close{display:none}nav ul{flex-direction:row}nav ul img{height:25px;width:25px}}@media screen and (min-width:992px){footer,header{background-color:#D94423}} \ No newline at end of file diff --git a/sass/style.css b/sass/style.css index 467576b..3f4adf0 100644 --- a/sass/style.css +++ b/sass/style.css @@ -52,6 +52,11 @@ body #divPopup { width: 200px; height: 200px; } +body h2 { + text-align: center; + padding: 2rem; + font-size: 2rem; +} body header, body footer { background-color: #D94423; } @@ -152,11 +157,9 @@ nav ul li p { } main section { - display: flex; - flex-direction: column; padding-top: 10vh; height: 100vh; - width: 100vw; + width: 100%; /*border-bottom: 2px solid rgba(250, 250 , 250, 1)*/ } main section#accueil { @@ -298,7 +301,6 @@ main section#competences { height: fit-content; } main section#technologies { - width: 100%; display: flex; flex-direction: column; align-items: center; @@ -316,19 +318,22 @@ main section#technologies .card-tech { justify-content: space-between; box-shadow: 2px 7px 6px -6px rgba(0, 0, 0, 0.75); margin: 10px; + width: 290px; +} +main section#technologies .card-tech h3 { + padding: 1rem; } main section#technologies .card-tech ul { border-radius: 8px; list-style-type: none; display: flex; flex-wrap: wrap; - flex-direction: row; - justify-content: space-between; + align-items: center; + justify-content: space-around; background-color: #ffffff; width: -moz-fit-content; width: fit-content; margin: 10px; - padding: 0.5rem; } main section#technologies .card-tech ul li { display: flex; @@ -345,23 +350,15 @@ main section#contact { height: fit-content; display: flex; flex-direction: column; - align-items: center; - justify-content: space-around; - width: 100%; -} -main section#contact h2 { - text-align: center; - padding: 1rem; } main section#contact p { padding: 1rem; } main section#contact form { - height: -moz-fit-content; - height: fit-content; display: flex; flex-direction: column; - width: 100%; + align-content: center; + margin: 2rem; } main section#contact form label { padding: 1rem 0.5rem; @@ -369,12 +366,16 @@ main section#contact form label { main section#contact form input { padding: 0.5rem 1rem; } +main section#contact form textarea { + font-size: 1rem; + padding: 0.5rem 0.5rem; + height: 200px; +} main section#contact form button { border-radius: 8px; padding: 1rem 0; - margin: 1rem 0; + margin: 2rem 0; background-color: #0477BF; - width: 100%; } footer { diff --git a/sass/style.css.map b/sass/style.css.map index 7242a01..6205622 100644 --- a/sass/style.css.map +++ b/sass/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.css","_base.sass","_variables.sass","style.sass"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.css","_base.sass","_variables.sass","style.sass"],"names":[],"mappings":"AAAA,gBAAgB;ACCR,2EAAA;AACR;EACI,YAAA;ADCJ;;ACAA;EACI,UAAA;EACA,SAAA;EACA,iCAAA;EACA,eAAA;EACA,qBAAA;ADGJ;;AEYA,iDAAA;ACtBA,sCAAA;AACA;EACC,cAAA;EACA,yBAAA;AHcD;AGbC;EACC,cDFK;ECGL,yBDJM;AFmBR;AGdC;EACC,yBDRM;ECSN,kBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,uBAAA;EACA,eAAA;AHgBF;AGfE;EACC,aDhBI;ECiBJ,sBAAA;KAAA,mBAAA;EACA,cAAA;AHiBH;AGhBC;EACC,aAAA;EACA,kBAAA;EAEA,SDdc;ECed,UDfc;ECgBd,aAAA;EAEA,yBD5BM;EC6BN,yBAAA;EACA,kBDxBY;EC0BZ,YAAA;EACA,aAAA;AHeF;AGdC;EACC,kBAAA;EACA,aAAA;EACA,eAAA;AHgBF;AGdC;EACC,yBDzCO;AFyDT;;AGdA;EACC,yBD5CQ;EC6CR,YDlCe;ECmCf,WAAA;EACA,eAAA;EACA,aAAA;EACA,8BAAA;EACA,WAAA;AHiBD;AGhBC;EACC,aAAA;EACA,uBAAA;EACA,qBAAA;EACA,mBAAA;AHkBF;AGjBE;EACC,aAAA;AHmBH;AGjBE;EACC,cAAA;EACA,kBAAA;EACA,WAAA;AHmBH;;AGjBA;EACC,yBDlEO;ECmEP,aAAA;EACA,sBAAA;EACA,yCAAA;AHoBD;;AGlBA;EACC;IACC,4BAAA;EHqBA;EGnBD;IACC,yBAAA;EHqBA;AACF;AGpBA;EACC,aAAA;EACA,sBAAA;EACA,mDAAA;AHsBD;;AGpBA;EACC;IACC,yBAAA;EHuBA;EGrBD;IACC,4BAAA;EHuBA;AACF;AGtBA;EAEC,aAAA;EACA,yBD7FO;EC+FP,eAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,WAAA;EACA,YAAA;AHsBD;AGpBC;EACC,aAAA;EACA,yBAAA;AHsBF;AGpBC;EACC,qBAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,qBAAA;EACA,wBAAA;EAAA,mBAAA;AHsBF;AGpBE;EACC,qBAAA;AHsBH;AGpBG;EACC,aAAA;EACA,sBAAA;EACA,mBAAA;EAEA,cDvHG;ECwHH,qBAAA;EACA,aAAA;AHqBJ;AGnBI;EAEC,WAAA;EACA,YAAA;AHoBL;AGlBG;EACC,iBAAA;AHoBJ;;AGhBC;EACC,iBD7Hc;EC8Hd,aAAA;EACA,WAAA;EAEA,mDAAA;AHkBF;AGhBC;EACC,aAAA;EACA,sBAAA;EACA,cDhJM;ECiJN,mBAAA;AHkBF;AGhBE;EACC,eAAA;EACA,kBAAA;AHkBH;AGhBE;EACC,cD1JK;EC2JL,eAAA;EACA,eAAA;EACA,cAAA;AHkBH;AGhBE;EACC,UAAA;EACA,mBAAA;EACA,aAAA;AHkBH;AGhBC;EACC,wBAAA;EAAA,mBAAA;AHkBF;AGjBE;EACC,aAAA;EACA,sBAAA;EACA,mBAAA;AHmBH;AGfE;EACC,aAAA;EACA,mBAAA;EACA,uBAAA;AHiBH;AGfE;EACC,cDlLM;ECmLN,eAAA;EACA,YAAA;AHiBH;AGfE;EACC,yBDvLM;ECwLN,WDnLW;ECoLX,YDpLW;ECqLX,kBAAA;EACA,WAAA;EACA,cAAA;AHiBH;AGfE;EACC,yBD9LK;EC+LL,UAAA;EACA,YAAA;AHiBH;AGfE;EACC,yBDnMK;ECoML,kBD9LW;EC+LX,yBAAA;EACA,cDrMI;ECsMJ,YAAA;EACA,YAAA;EACA,cAAA;EACA,eAAA;AHiBH;AGfG;EACC,eAAA;EACA,cD/MK;ECgNL,qBAAA;AHiBJ;AGhBG;EACC,eAAA;EACA,YAAA;AHkBJ;AGhBG;EACC,aAAA;EACA,qBAAA;EACA,sBAAA;AHkBJ;AGbC;EAEC,wBAAA;EAAA,mBAAA;AHcF;AGZE;EACC,aAAA;EACA,eAAA;EACA,uBAAA;EACA,cDnOI;AFiPP;AGZG;EACC,yBDvOI;ECwOJ,wBAAA;EAAA,mBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,kBDvOU;ECwOV,yBAAA;EACA,YAAA;EACA,eAAA;AHcJ;AGZI;EACC,qBAAA;EACA,aAAA;EACA,eAAA;EACA,6BAAA;EACA,aAAA;AHcL;AGZI;EACC,UD9OgB;EC+OhB,WD/OgB;AF6PrB;AGZI;EACC,WD/OiB;ECgPjB,YD/OiB;ECgPjB,mBAAA;AHcL;AGXI;EACC,eAAA;AHaL;AGXI;EACC,WAAA;EACA,mBAAA;EACA,gBAAA;EACA,uBAAA;AHaL;AGZI;EACC,yBD/QE;ECgRF,cD7QG;EC8QH,iBAAA;EACA,kBDzQS;EC0QT,eAAA;EACA,cAAA;EACA,qBAAA;AHcL;AGZC;EACC,wBAAA;EAAA,mBAAA;AHcF;AGZC;EAEC,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,wBAAA;EAAA,mBAAA;AHaF;AGXE;EACC,yBD/RK;ECgSL,yBAAA;EACA,kBD3RW;EC4RX,cDjSI;ECkSJ,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,8BAAA;EACA,gDAAA;EACA,YAAA;EACA,YAAA;AHaH;AGZG;EACC,aAAA;AHcJ;AGbG;EACC,kBDvSU;ECwSV,qBAAA;EACA,aAAA;EACA,eAAA;EACA,mBAAA;EACA,6BAAA;EACA,yBDnTI;ECoTJ,uBAAA;EAAA,kBAAA;EACA,YAAA;AHeJ;AGbI;EACC,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,cAAA;AHeL;AGbK;EACC,WAAA;EACA,YAAA;AHeN;AGbC;EACC,wBAAA;EAAA,mBAAA;EACA,aAAA;EACA,sBAAA;AHeF;AGdE;EACC,aAAA;AHgBH;AGfE;EAEC,aAAA;EACA,sBAAA;EACA,qBAAA;EACA,YAAA;AHgBH;AGdG;EACC,oBAAA;AHgBJ;AGfG;EACC,oBAAA;AHiBJ;AGhBG;EACC,eAAA;EACA,sBAAA;EACA,aAAA;AHkBJ;AGjBG;EACC,kBAAA;EACA,eAAA;EACA,cAAA;EACA,yBD7VG;AFgXP;;AGjBA;EACC,kBAAA;AHoBD;;AGlBA,sCAAA;AACA;EACC;IACC,yBDrWK;EF0XL;AACF;AGpBA;EACC;IACC,yBDxWM;ICyWN,aAAA;IACA,mBAAA;IACA,8BAAA;EHsBA;EGrBA;IACC,aAAA;IACA,kBAAA;IACA,WAAA;EHuBD;EGrBD;IACC,wCAAA;IACA,aAAA;IACA,8BAAA;IACA,eAAA;IACA,QAAA;IACA,WAAA;IACA,wBAAA;IAAA,mBAAA;IACA,WAAA;IACA,aAAA;EHuBA;EGtBA;IACC,aAAA;EHwBD;EGvBA;IACC,aAAA;IACA,mBAAA;EHyBD;EGxBC;IAEC,YAAA;IACA,WAAA;EHyBF;AACF;AGxBA;EACC;IACC,yBDtYO;EFgaP;AACF","file":"style.css"} \ No newline at end of file diff --git a/sass/style.sass b/sass/style.sass index 744fe62..2d457c1 100644 --- a/sass/style.sass +++ b/sass/style.sass @@ -36,6 +36,10 @@ body width: 200px height: 200px + h2 + text-align: center + padding: 2rem + font-size: 2rem header, footer background-color: $orange @@ -85,6 +89,7 @@ header to transform: translateX(-100%) + nav display: none @@ -132,11 +137,10 @@ nav main section - display: flex - flex-direction: column padding-top: $height-header height: 100vh - width: 100vw + width: 100% + /*border-bottom: 2px solid rgba(250, 250 , 250, 1)*/ section#accueil @@ -278,7 +282,7 @@ main height: fit-content section#technologies - width: 100% + display: flex flex-direction: column align-items: center @@ -295,18 +299,19 @@ main justify-content: space-between box-shadow: 2px 7px 6px -6px rgba(0,0,0,0.75) margin: 10px - + width: 290px + h3 + padding: 1rem ul border-radius: $radius-card list-style-type: none display: flex flex-wrap: wrap - flex-direction: row - justify-content: space-between + align-items: center + justify-content: space-around background-color: $blanc width: fit-content margin: 10px - padding: 0.5rem li display: flex @@ -322,34 +327,32 @@ main height: fit-content display: flex flex-direction: column - align-items: center - justify-content: space-around - - width: 100% - h2 - text-align: center - padding: 1rem p padding: 1rem form - height: fit-content + display: flex flex-direction: column - width: 100% + align-content: center + margin: 2rem label padding: 1rem 0.5rem input padding: 0.5rem 1rem + textarea + font-size: 1rem + padding: 0.5rem 0.5rem + height: 200px button border-radius: 8px padding: 1rem 0 - margin: 1rem 0 + margin: 2rem 0 background-color: $bleu - width: 100% footer text-align: center + /* Pour les écrans supérieur à 375 px*/ @media screen and (min-width: 576px) header, footer