diff --git a/src/Vue/Images/Back(2).jpg b/src/Vue/Images/Back(2).jpg new file mode 100644 index 0000000..dd6fe77 Binary files /dev/null and b/src/Vue/Images/Back(2).jpg differ diff --git a/src/Vue/Images/Back.jpg b/src/Vue/Images/Back.jpg new file mode 100644 index 0000000..b498c55 Binary files /dev/null and b/src/Vue/Images/Back.jpg differ diff --git a/src/Vue/Images/avatar.jpeg b/src/Vue/Images/avatar.jpeg new file mode 100644 index 0000000..deb19e7 Binary files /dev/null and b/src/Vue/Images/avatar.jpeg differ diff --git a/src/Vue/css/inscription.css b/src/Vue/css/inscription.css index 5928aad..a4aa3ab 100644 --- a/src/Vue/css/inscription.css +++ b/src/Vue/css/inscription.css @@ -1,8 +1,17 @@ body { - background: linear-gradient(to right, #ffffff,#38B6FF); + background: linear-gradient(to right, #B7FBFB,#38B6FF); font-family: sans-serif; } +body::before { + content: ''; + position: absolute; + background: rgba(255,255,255, .15); + inset: 0; + transform: rotate(-5deg); + z-index: -1; +} + .main-logo{ display: flex; flex-direction: column; diff --git a/src/Vue/css/profil.css b/src/Vue/css/profil.css new file mode 100644 index 0000000..d30f5c5 --- /dev/null +++ b/src/Vue/css/profil.css @@ -0,0 +1,233 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap'); + +body { + font: 18px "Nunito", sans-serif; + color: black; + min-height: 100vh; + padding: 2rem; + display: flex; + justify-content: center; + align-items: center; +} + +body::before { + content: ''; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: url("../Images/Back(2).jpg") no-repeat center; + background-size: cover; + animation: backgroundZoomAnimate 20s forwards; +} + +@keyframes backgroundZoomAnimate { + from { + transform: scale(1); + } + to { + transform: scale(1.3); + } +} + +.profil-card { + box-shadow: 0 18px 200px -60px black; + border-radius: 50px; + width: 650px; + position: relative; + backdrop-filter: blur(15px); + border: 2px solid #ffffff40; + padding: 3rem 5rem; + display: flex; + flex-direction: column; + gap: 40px; + + @media screen and (max-width: 768px) { + width: auto; + } + +} + +.profil-card__img img { + margin: auto; + width: 200px; + height: 200px; + border-radius: 50%; + object-fit: cover; + display: block; + box-shadow: 0 10px 60px -10px rgba(13,28,39,.5); +} + +.profil-card__desc { + text-align: center; + display: flex; + flex-direction: column; + gap: 25px; + +} + +.localisation { + display: flex; + align-items:center; + gap:10px; + justify-content: center; +} + +.profil-card__desc h1 { + font-size: 2.5rem; + font-weight: bold; +} + +.profil-card__desc h1 + div { + font-size: 20px; +} + +.info{ + display: flex; + justify-content: center; + gap: 50px; + + @media screen and (max-width: 576px) { + gap: 30px; + } +} + +.info > div { + text-transform: uppercase; + font-weight: bold; + letter-spacing: 1px; + text-align: center; +} + +.info > div > *:first-child { + font-weight: bold; + letter-spacing: 3px; + font-size: 2rem; + margin-bottom: 15px; +} + +.info > div > *:last-child { + font-size: 16px; + opacity: .7; +} + +.social { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.social a { + display: inline-block; + width: 55px; + height: 55px; + margin: 15px; + border-radius: 40%; + align-items: center; + justify-content: center; + color: white; + position: relative; + flex-shrink: 0; + transition: all .2s; + + @media screen and (max-width: 768px) { + width: 50px; + height: 50px; + margin: 10px; + } +} + +@media screen and (min-width: 768px) { + .social a:hover { + transform: scale(1.2) translateY(-5px); + } +} + +.social a.facebook { + padding-top: 15px; + padding-left: 15px; + background: linear-gradient(45deg, #3b5998,#0078d7); + box-shadow: 0 4px 30px rgba(45, 98, 169, 1); +} + +.social a.twitter { + padding-top: 15px; + padding-left: 15px; + background: linear-gradient(45deg, #1da1f2,#0e71c8); + box-shadow: 0 4px 30px rgba(19, 127, 212, 1); +} + +.social a.instagram { + padding-top: 15px; + padding-left: 15px; + background: linear-gradient(45deg, #405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d); + box-shadow: 0 4px 30px rgba(120, 64, 190, 0.8); +} + +.social a.gitlab { + padding-top: 15px; + padding-left: 15px; + background: linear-gradient(45deg, #FF9467,#DB4100); + box-shadow: 0 4px 30px rgba(255,148,103, 0.6); +} + +.actions { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + + @media screen and (max-width: 576px) { + flex-direction: column; + gap: 1.5rem; + } +} + +.actions > button { + font-weight: bold; + font-size: 22px; + padding: 15px 0; + min-width: 250px; + border-radius: 50px; + text-align: center; + color: white; + cursor: pointer; + transition: all .2s; + + @media screen and (max-width: 760px) { + min-width: 170px; + } + + @media screen and (max-width: 576px) { + min-width: inherit; + width: 100%; + max-width: 350%; + } +} + +@media screen and (min-width: 576px) { + .actions > button:hover { + transform: translateY(-5px); + } +} + +.bleu{ + background: linear-gradient(45deg, #1da1f2,#0e71c8); + box-shadow: 0 4px 30px rgba(19, 127, 212, 0.4); +} + +.bleu:hover { + box-shadow: 0 7px 30px rgba(19, 127, 212, 0.75); +} + + +.orange { + background: linear-gradient(45deg, #d5135a,#f05924); + box-shadow: 0 4px 30px rgba(223, 45, 70, 0.35); +} + + +.orange:hover { + box-shadow: 0 7px 30px rgba(223,45,70,0.75); +} diff --git a/src/Vue/css/style.css b/src/Vue/css/style.css index 5824257..1a6e79b 100644 --- a/src/Vue/css/style.css +++ b/src/Vue/css/style.css @@ -3,9 +3,9 @@ @import url('https://fonts.googleapis.com/css2?family-Poppins:wght@400;600&display-swap'); body { - font-family: 'Poppinq', sans-serif; + font-family: 'Poppins', sans-serif; min-height: 100vh; - background: linear-gradient(to right, #ffffff,#38B6FF); + background: linear-gradient(to right, #B7FBFB,#38B6FF); display: flex; font-family: sans-serif; background-color: #81d4fa; @@ -14,23 +14,32 @@ body { justify-content: center; } +body::before { + content: ''; + position: absolute; + background: rgba(255,255,255, .15); + inset: 0; + transform: rotate(-5deg); + z-index: -1; +} + + /*Bouton*/ .btn{ display: flex; flex-direction: column; - margin-left: 17rem; - margin-top: -22rem; + margin-left: 19rem; + margin-top: -25rem; } .btn:link, .btn:visited { - text-transform: uppercase; text-decoration: none; - padding: 10px 20px; + padding: 5px 10px; display: inline-block; - border-radius: 100px; - font-size: 60%; + border-radius: 11px; + font-size: 70%; transition: all .2s; position: absolute; } @@ -55,7 +64,7 @@ body { display: inline-block; height: 100%; width: 100%; - border-radius: 100px; + border-radius: 50px; position: absolute; top: 0; left: 0; @@ -84,16 +93,17 @@ body { background: rgba(255,255,255, .5); padding: 4rem; border-radius: 10px; - border-radius: relative; + position: relative; } .model::before { content: ''; position: absolute; - background: rgba(255,255,255, .15); + background: rgba(255,255,255, .20); inset: 0; transform: rotate(-5deg); z-index: -1; + border-radius: 10px; } .main-logo { diff --git a/src/Vue/html/inscription.html b/src/Vue/html/inscription.html index 3869804..fcee4b3 100644 --- a/src/Vue/html/inscription.html +++ b/src/Vue/html/inscription.html @@ -13,7 +13,7 @@
- Revenir + Revenir