From 1f7d781ab5e9868092469233875dfd70c14ad9ec Mon Sep 17 00:00:00 2001 From: abdul Date: Mon, 8 Dec 2025 13:59:42 +0000 Subject: [PATCH] Ajouter style.css --- style.css | 343 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 343 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..d1ee764 --- /dev/null +++ b/style.css @@ -0,0 +1,343 @@ +* { + + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + line-height: 1.6; + color: #333; + background-color: #f4f7f6; +} + +h1, h2, h3 { + color: #1a5c88; + margin-top: 0; +} + +a { + text-decoration: none; + color: red; + transition: color 0.3s ease; +} + +a:hover { + color: #0056b3; + text-decoration: underline; +} + +.container { + + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + + + +.header-portfolio { + background-color: darkblue; + color: white; + padding: 10px 0; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +.nav-principal { + display: flex; + justify-content: space-between; + align-items: center; +} + + +.nav-principal .logo { + font-size: 1.8em; + font-weight: bold; + color: #a7d9f7; +} + +.nav-principal ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +.nav-principal ul li { + margin-left: 25px; +} + + +.nav-principal ul li a { + color: #a7d9f7; + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-principal ul li a:hover { + color: white; + text-decoration: none; +} + + + +.bouton-cta { + display: inline-block; + background-color: #007bff; + color: white; + padding: 10px 20px; + border-radius: 5px; + margin-top: 10px; + font-weight: bold; + transition: background-color 0.3s ease; +}   + +.bouton-cta:hover { + background-color: #0056b3; + text-decoration: none; +} + + + +.section-accueil { + background: linear-gradient(rgba(26, 92, 136, 0.8), rgba(26, 92, 136, 0.8)), url('images/background-reseau.jpg') no-repeat center center fixed; + background-size: cover; + color: white; + text-align: center; + padding: 100px 20px; + min-height: 500px; + display: flex; + align-items: center; + justify-content: center; +} + +.contenu-accueil { + max-width: 800px; +} + +.section-accueil .titre-principal { + font-size: 3.2em; + margin-bottom: 20px; + color: white; +} + +.section-accueil .accroche { + font-size: 1.3em; + max-width: 700px; + margin: 0 auto 30px auto; + color: #e0e0e0; +} + + + +section { + padding: 80px 20px; + text-align: center; +} + +.titre-section { + font-size: 2.5em; + margin-bottom: 50px; + position: relative; + padding-bottom: 10px; +} + +.titre-section::after { + content: ''; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + width: 60px; + height: 4px; + background-color: #007bff; + border-radius: 2px; +} + + + +.grille-competences { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 30px; + max-width: 1000px; + margin: 0 auto; +} + +.carte-competence { + background-color: white; + padding: 30px; + border-radius: 8px; + box-shadow: 0 4px 15px rgba(0,0,0,0.08); + transition: transform 0.3s ease, box-shadow 0.3s ease; + text-align: left; + border: 1px solid #ddd; +} + +.carte-competence:hover { + transform: translateY(-10px); + box-shadow: 0 8px 25px rgba(0,0,0,0.15); +} + +.carte-competence h3 { + font-size: 1.5em; + color: #1a5c88; + margin-bottom: 15px; +} + +.carte-competence p { + font-size: 1em; + color: #555; +} + +.carte-competence img { + width: 30px; + margin-bottom: 10px; +} + + +.icon-reseau::before, +.icon-pc::before, +.icon-electricite::before, +.icon-photo::before { + content: '⚙️'; + display: inline-block; + margin-right: 10px; + font-size: 1.2em; + color: #007bff; +} + + +.section-projets { + background-color: #eef3f6; +} + +.grille-projets { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + max-width: 1200px; + margin: 0 auto; +} + +.carte-projet { + background-color: white; + padding: 25px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + text-align: left; + transition: transform 0.3s ease; + border: 1px solid #ddd; +} + + +.carte-projet:hover { + transform: translateY(-5px); +} + +.carte-projet h3 { + font-size: 1.4em; + margin-bottom: 10px; +} + +.carte-projet p { + font-size: 0.95em; + color: #666; + margin-bottom: 20px; +} + +.lien-projet { + display: inline-block; + color: #1a5c88; + font-weight: bold; +} + +.lien-projet:hover { + color: #007bff; +} + + +.experienc-pro{ + display: block; + margin-bottom: 10px; + font-size: 1.4em; +} + + + +.section-contact p { + font-size: 1.1em; + margin-bottom: 40px; +} + + + + +@media (max-width: 992px) { + .container { + max-width: 90%; + } +} + + +@media (max-width: 768px) { + .nav-principal { + flex-direction: column; + align-items: flex-start; + padding-bottom: 10px; + } + + .nav-principal ul { + margin-top: 15px; + width: 100%; + justify-content: space-around; + } + .nav-principal ul li { + margin: 0 10px; + } + + + + .section-accueil { + min-height: 400px; + padding: 50px 20px; + } + + .section-accueil .titre-principal { + font-size: 2.5em; + } + .section-accueil .accroche { + font-size: 1.1em; + } + .grille-competences, + .grille-projets { + grid-template-columns: 1fr; + } + .carte-competence, .carte-projet { + text-align: center; + } + .carte-competence h3 i { + display: block; + margin-bottom: 10px; + } +} + + +@media (max-width: 600px) { + .container { + width: 100%; + padding: 10px; + } + + .nav-principal ul { + flex-direction: column; + align-items: center; + } + .nav-principal ul li { + margin: 5px 0; + } +} \ No newline at end of file