From 53649e3b1a710670d7837244383ae6235ae251bd Mon Sep 17 00:00:00 2001 From: Louis Vallat Date: Wed, 22 Sep 2021 17:23:46 +0200 Subject: [PATCH] Optimized and cleaned CSS Signed-off-by: Louis Vallat --- assets/css/main.css | 323 +++++++++++++++---------------------- assets/images/location.svg | 2 +- assets/images/work.svg | 2 +- index.html | 54 +++---- 4 files changed, 160 insertions(+), 221 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 479ccef..d5e2979 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,30 +1,144 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); +@charset "utf-8"; +/* Coded by Louis Vallat */ -:root { - --eerie-black: #141414ff; - --royal-purple: #724e91ff; - --saffron: #f8c630ff; - --tea-green: #c5ebc3ff; - --international-orange-engineering: #b80c09ff; -} +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); html { scroll-behavior: smooth; } body { - height: 100vh; + font-family: 'Roboto', sans-serif; + font-weight: 400; background-color: #1f1f1f; } +h1 { + font-size: 4.5rem; +} + +h3 { + font-size: 2.25rem; +} + +h4 { + font-size: 1.8rem; +} + +h5 { + font-size: 1.5rem; +} + +h6 { + font-size: 1.3rem; +} + +.bold { + font-weight: 500; +} + +.button-style { + text-decoration: none; + padding: 13px 32px; + color: black; + font-size: 1em; + border-radius: 8px; + margin-bottom: 10px; + margin-right: 13px; + background-color: white; + transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms; +} + +.button-style:hover { + background-color: lightgrey; + box-shadow: 0px 0px 6px 0px lightblue; +} + +.button-style > img { + height: 0.9em; + margin-right: 5px; +} + +.grey { + color: grey; +} + +.white { + color: white; +} + +.lightgrey { + color: lightgrey; +} + +.black { + color: black; +} + +.section { + margin-top: 35px; + margin-bottom: 55px; +} + +.section > h3, footer > h3 { + margin-bottom: 7px; + letter-spacing: 1px; +} + +.center-align-inline { + display: flex; + align-items: center; +} + +.icon { + height: 1.8rem; + transition: cubic-bezier(.65,.05,.36,1) 100ms; + margin-left: 10px; +} + +.icon:hover { + transform: translateY(-3px); +} + +footer { + padding: 65px 10% 145px 10%; + background-color: #0A0A0A; +} + +footer > div > p { + line-height: 1.3em; + flex-basis: 40%; + text-align: justify; +} + +.flex-sb { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; +} + +#additional-information > img { + margin-right: 8px; +} + +#additional-information > h6 { + margin-right: 50px; +} + +#inspiration { + line-height: 1.3em; + margin-top: 15px; +} + +#copyright { + margin-top: 35px; +} + #skills-logos { margin-top: 55px; - display: flex; margin-left: 5%; margin-right: 5%; - justify-content: space-between; - align-content: flex-start; - flex-wrap: wrap; } #skills-logos > img { @@ -32,95 +146,23 @@ body { margin: 5px 20px; } -.white-outline-png { - filter: drop-shadow(0px 0px 3px white); -} - -#schools { - margin: 0px 50px; - margin-top: 55px; - display: flex; -} - -#about > div { - margin-bottom: 75px; -} - #call-to-action { margin-top: 8vh; } -#call-to-action > a { - text-decoration: none; - color: black; - font-family: 'Roboto', sans-serif; - padding: 13px 32px; - font-size: 1em; - border-radius: 8px; - background-color: white; - transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms; -} - #about { - padding: 50px 10% 0px 10%; -} - -h3 { - color: white; - font-size: 2.25rem; - font-family: 'Roboto', sans-serif; - font-weight: 500; - margin-bottom: 7px; - letter-spacing: 1px; -} - -h5 { - color: grey; - font-size: 1.5rem; - font-family: 'Roboto', sans-serif; - font-weight: 400; -} - -#call-to-action > a:hover { - background-color: lightgrey; - box-shadow: 0px 0px 6px 0px lightblue; -} - -#call-to-action > a:first-child { - margin-right: 10px; + padding: 20px 10% 35px 10%; } #landing-zone { - background-color: var(--eerie-black); - padding: 0px 10% 0px 10%; + background-color: #141414ff; + padding: 0px 10%; height: 100vh; display: flex; -} - -#presentation { - align-self: center; -} - -.white { - color: white; -} - -h1 { - font-family: 'Roboto', sans-serif; - font-weight: 500; - font-size: 6rem; -} - -#name { - font-family: 'Roboto', sans-serif; - font-weight: 500; - font-size: 1.8rem; + align-items: center; } #subtitle { - font-family: 'Roboto', sans-serif; - font-weight: 500; - font-size: 4.5rem; letter-spacing: 3px; word-spacing: 4px; line-height: 1.35em; @@ -134,106 +176,3 @@ h1 { width: 70px; margin: 10px; } - -.center-align-inline { - display: flex; - align-items: center; -} - -#additional-information > img { - fill: lightgrey; - margin-right: 8px; -} - -#additional-information { - font-family: 'Roboto', sans-serif; - font-weight: 400; - font-size: 1.3em; - color: lightgrey; -} - -#additional-information > p { - margin-right: 50px; -} - -.icons { - height: 1.8rem; - transition: cubic-bezier(.65,.05,.36,1) 100ms; - margin-left: 10px; -} - -.icons:hover { - transform: translateY(-3px); -} - -footer { - padding: 65px 10% 145px 10%; - background-color: #0A0A0A; -} - -footer > div > p { - line-height: 1.3em; - color: grey; - font-size: 1rem; - font-family: 'Roboto', sans-serif; - font-weight: 400; - flex-basis: 40%; - text-align: justify; -} - -footer > div { - display: flex; - justify-content: space-between; -} - -footer > div > div { - display: flex; - justify-content: space-between; - align-items: flex-start; - flex-wrap: wrap; -} - -footer > div > div > a { - text-decoration: none; - color: black; - font-family: 'Roboto', sans-serif; - padding: 13px 32px; - font-size: 1em; - border-radius: 8px; - margin-bottom: 10px; - margin-left: 8px; - background-color: white; - transition: cubic-bezier(0.215, 0.610, 0.355, 1) 200ms; -} - -footer > div > div > a > img { - height: 0.9em; - margin-right: 5px; -} - -#inspiration { - line-height: 1.3em; - color: grey; - font-size: 1rem; - font-family: 'Roboto', sans-serif; - font-weight: 400; - margin-top: 15px; -} - -#inspiration > a { - text-decoration: underline; - color: grey; -} - -#copyright > a { - text-decoration: underline; - color: lightgrey; -} - -#copyright { - margin-top: 35px; - color: lightgrey; - font-size: 1rem; - font-family: 'Roboto', sans-serif; - font-weight: 400; -} diff --git a/assets/images/location.svg b/assets/images/location.svg index 6a089b7..d5d7396 100644 --- a/assets/images/location.svg +++ b/assets/images/location.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/assets/images/work.svg b/assets/images/work.svg index 02e68f1..baa9f46 100644 --- a/assets/images/work.svg +++ b/assets/images/work.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/index.html b/index.html index 709c4c5..f884dff 100644 --- a/index.html +++ b/index.html @@ -20,32 +20,32 @@ PAGE CODED BY :
-
+
-

Louis Vallat

+

Louis Vallat

- Gitlab RGB logo - Twitter blue logo - LinkedIN small blue logo + Gitlab RGB logo + Twitter blue logo + LinkedIN small blue logo
-

Un étudiant développeur, passionné de technologies, quelles qu'elles soient.

-
- Logo travail valise

Étudiant ingénieur en informatique

- Logo localisation

Bordeaux — France

+

Un étudiant développeur, passionné de technologies, quelles qu'elles soient.

+
+ Logo travail valise
Étudiant ingénieur en informatique
+ Logo localisation
Bordeaux — France
-
-

Compétences

-
Des technologies que j'utilise souvent
-
+
+

Compétences

+
Des technologies que j'utilise souvent
+
Logo Docker Logo Git Logo Tux @@ -60,23 +60,23 @@ PAGE CODED BY :