sasha.lorenc
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout des fichiers CSS

Browse Source
master
Sasha LORENC 3 months ago
parent 267fbd50a3
commit 0647428549
6 changed files with 1014 additions and 0 deletions
Show Stats Download Patch File Download Diff File

111
css/about_css.css
Unescape View File

@ -0,0 +1,111 @@
/* Section À propos */
.about {
width: 90%;
max-width: 800px;
margin: 100px auto;
text-align: center;
}
.about h2 {
font-size: 36px;
color: var(--accent-color); /* Utilisation de la variable pour la couleur d'accentuation */
margin-bottom: 20px;
}
.about p {
font-size: 18px;
margin-top: 10px;
color: #e0e0e0;
line-height: 1.6;
}
.about-details {
margin-top: 30px;
text-align: left;
}
.about-details h3 {
font-size: 24px;
color: var(--accent-color); /* Utilisation de la variable pour la couleur d'accentuation */
margin-top: 20px;
text-align: center;
}
.about-details p {
font-size: 16px;
color: #cccccc;
margin-top: 5px;
}
/* Bouton pour contacter */
.about .btn {
display: inline-block;
margin-top: 30px;
padding: 10px 20px;
background-color: var(--accent-color); /* Utilisation de la variable pour la couleur d'accentuation */
color: #121212;
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.about .btn:hover {
background-color: var(--accent-color); /* Nouvelle variable pour la couleur au survol */
}
/* Responsive pour les tablettes */
@media (max-width: 768px) {
.about {
margin: 80px auto;
}
.about h2 {
font-size: 30px;
}
.about p {
font-size: 16px;
}
.about-details h3 {
font-size: 20px;
}
.about-details p {
font-size: 14px;
}
.about .btn {
padding: 8px 16px;
font-size: 14px;
}
}
/* Responsive pour les smartphones */
@media (max-width: 480px) {
.about {
margin: 60px auto;
}
.about h2 {
font-size: 24px;
}
.about p {
font-size: 14px;
}
.about-details h3 {
font-size: 18px;
}
.about-details p {
font-size: 12px;
}
.about .btn {
padding: 6px 12px;
font-size: 12px;
}
}

75
css/accueil_css.css
Unescape View File

@ -0,0 +1,75 @@
/* Section Introduction spécifique à l'accueil */
.intro {
padding: 50px 20px;
background-color: #121212;
color: #e9ecef;
}
.intro h2 {
margin-bottom: 15px;
margin-top: -100px;
color: var(--accent-color);
}
.intro p {
font-size: 18px;
margin-top: 0;
margin-bottom: 15px;
color: #e9ecef;
}
p {
color: #e9ecef;
}
.btn {
margin-top: 20px;
margin-bottom: 20px;
background-color: var(--accent-color);
color: #f8f9fa;
}
.btn:hover {
background-color: var(--accent-color);
}
/* Responsive pour les tablettes */
@media (max-width: 768px) {
.intro {
padding: 40px 15px;
}
.intro h2 {
margin-bottom: 10px;
}
.intro p {
font-size: 16px;
margin-bottom: 10px;
}
.btn {
margin-top: 15px;
}
}
/* Responsive pour les smartphones */
@media (max-width: 480px) {
.intro {
padding: 30px 10px;
}
.intro h2 {
margin-bottom: 8px;
}
.intro p {
font-size: 14px;
margin-bottom: 8px;
}
.btn {
margin-top: 10px;
font-size: 14px;
}
}

193
css/contacts_css.css
Unescape View File

@ -0,0 +1,193 @@
/* Section Contact */
.contact {
text-align: center;
padding: 100px 20px;
max-width: 600px;
margin: 0 auto;
}
.contact h2 {
margin-bottom: 20px;
color: var(--accent-color);
}
.contact p {
font-size: 18px;
margin-bottom: 30px;
color: #e0e0e0;
}
/* Formulaire de contact */
form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
text-align: left;
position: relative;
}
.form-label {
font-size: 16px;
color: #e0e0e0;
display: inline-flex;
align-items: center;
margin-bottom: 5px;
}
.required {
color: #e74c3c;
margin-left: 4px;
}
input[type="radio"] {
margin-right: 5px;
}
input, textarea, select {
width: 100%;
padding: 12px;
border: 2px solid #444;
border-radius: 5px;
background-color: #333;
color: #e0e0e0;
font-size: 16px;
transition: all 0.3s ease;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 5px rgba(26, 188, 156, 0.3);
}
textarea {
resize: vertical;
min-height: 120px;
}
.character-count {
position: absolute;
bottom: 5px;
right: 10px;
font-size: 12px;
color: #888;
}
/* Style pour la checkbox */
.checkbox-container {
display: flex;
align-items: center;
cursor: pointer;
font-size: 14px;
color: #e0e0e0;
gap: 10px;
}
.checkbox-container input {
width: auto;
}
/* Bouton d'envoi amélioré */
button[type="submit"] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
padding: 12px 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
background-color: var(--accent-color);
color: #121212;
border: none;
border-radius: 5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
button[type="submit"]:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
button[type="submit"] .btn-icon {
font-size: 20px;
}
/* Informations de contact */
.contact-info {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #444;
font-size: 16px;
color: #e0e0e0;
}
.contact-info a {
color: var(--accent-color);
font-weight: 600;
transition: all 0.3s ease;
margin: 0 5px;
}
.contact-info a:hover {
color: var(--accent-color);
transform: translateY(-2px);
}
/* Responsive pour les tablettes */
@media (max-width: 768px) {
.contact {
padding: 80px 15px;
}
.contact p {
font-size: 16px;
}
input, textarea, select {
font-size: 14px;
padding: 10px;
}
button[type="submit"] {
font-size: 14px;
padding: 10px 20px;
}
.contact-info {
font-size: 14px;
}
}
/* Responsive pour les smartphones */
@media (max-width: 480px) {
.contact {
padding: 60px 10px;
}
.contact h2 {
font-size: 24px;
}
.contact p {
font-size: 14px;
}
input, textarea, select {
font-size: 12px;
padding: 8px;
}
button[type="submit"] {
font-size: 12px;
padding: 8px 16px;
}
.contact-info {
font-size: 12px;
}
}

352
css/global.css
Unescape View File

@ -0,0 +1,352 @@
/* Réinitialisation et styles de base */
:root {
--accent-color: #1abc9c;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
background-color: #121212;
color: #e9ecef;
margin: 0;
padding: 0;
}
/* Liens globaux */
a {
text-decoration: none;
color: var(--accent-color);
position: relative;
transition: color 0.3s ease;
}
a:hover {
color: #16a085;
}
a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: var(--accent-color);
transform: scaleX(0);
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
/* Header et Navigation */
header {
background-color: #1e1e1e;
padding: 20px 0;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
header.scroll-up {
transform: translateY(0);
}
header.scroll-down {
transform: translateY(-100%);
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
nav h1 {
font-size: 24px;
color: #e9ecef;
margin-right: auto;
transition: transform 0.3s ease;
}
nav h1:hover {
transform: scale(1.05);
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 15px;
position: relative;
}
nav ul li a {
color: #e9ecef;
font-weight: 500;
padding: 5px 0;
}
nav ul li a:hover {
transition: all 0.3s ease;
color: var(--accent-color);
border-bottom: solid 3px var(--accent-color);
}
#settings-icon {
margin-left: 15px;
transition: transform 0.3s ease;
}
/* Titres globaux */
h2 {
font-size: 36px;
color: var(--accent-color);
text-align: center;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
h2:hover {
transform: scale(1.02);
}
h3 {
font-size: 24px;
color: var(--accent-color);
margin-top: 20px;
transition: transform 0.3s ease;
}
h3:hover {
transform: translateX(5px);
}
/* Boutons avec animation améliorée */
.btn {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: var(--accent-color);
color: #121212 !important;
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.8s ease, height 0.6s ease;
}
.btn:hover::before {
width: 600px;
height: 300px;
}
.btn:hover {
color: #121212 !important;
transform: scale(1.1) translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.btn:active {
transform: scale(0.95);
}
/* Sections de contenu */
section {
width: 90%;
max-width: 800px;
margin: 100px auto;
text-align: center;
}
.skill p {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease forwards;
}
.skill:hover p {
opacity: 1;
transform: translateX(20px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
section p {
font-size: 18px;
color: #e9ecef;
line-height: 1.6;
margin-top: 10px;
}
/* Pied de page */
footer {
background-color: #1e1e1e;
text-align: center;
padding: 20px;
margin-top: 100px;
color: #e9ecef;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
footer:hover {
transform: translateY(-5px);
}
footer p {
color: #e9ecef;
font-size: 14px;
transition: opacity 0.3s ease;
}
footer:hover p {
opacity: 0.8;
}
#scroll-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #2d2d2d;
color: #e9ecef;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
cursor: pointer;
display: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#scroll-to-top:hover {
background-color: #3d3d3d;
transform: scale(1.1) translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* Sélecteur de couleur avec animations */
.color-picker {
position: absolute;
top: 60px;
right: 20px;
background-color: #2d2d2d;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
z-index: 1000;
color: #e9ecef;
transform-origin: top right;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.color-picker.hidden {
transform: scale(0.95);
opacity: 0;
}
.color-picker span {
display: block;
color: #e9ecef;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.color-picker label {
display: block;
margin: 5px 0;
color: #e9ecef;
cursor: pointer;
transition: transform 0.3s ease;
}
.color-picker label:hover {
transform: translateX(5px);
}
.color-picker input[type="radio"] {
margin-right: 5px;
transition: transform 0.3s ease;
}
.color-picker input[type="radio"]:checked {
transform: scale(1.2);
}
/* Icône des paramètres améliorée */
#settings-icon {
background: none;
border: none;
color: #e9ecef;
font-size: 24px;
cursor: pointer;
padding: 5px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#settings-icon:hover {
transform: rotate(90deg) scale(1.1);
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
/* Style pour les éléments utilisant la couleur d'accentuation */
a:hover,
.project-card:hover,
h2,
h3 {
color: var(--accent-color);
transition: all 0.3s ease;
}
.btn, .btn:hover {
color: #121212 !important;
}
.strong_word {
color: var(--accent-color);
transition: transform 0.3s ease;
}
.strong_word:hover {
transform: scale(1.1);
}
.project-card, .skill-item {
border-color: #2d2d2d;
transition: all 0.3s ease;
}

116
css/projet_css.css
Unescape View File

@ -0,0 +1,116 @@
.projects {
text-align: center;
padding: 50px 20px; /* Réduction du padding supérieur de 100px à 50px */
}
.project-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-top: 20px; /* Réduction de la marge supérieure de 40px à 20px */
}
.project-card {
background-color: #1f1f1f;
padding: 20px;
border-radius: 10px;
width: 300px;
color: #e0e0e0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
text-align: left;
margin: 15px;
transition: all 0.3s ease;
position: relative;
}
.project-card h3 {
font-size: 22px;
color: var(--accent-color);
margin-bottom: 10px;
}
.project-card p {
margin: 10px 0;
}
.project-card .btn,
.btn {
display: inline-block;
margin-top: 15px;
padding: 10px 15px;
background-color: var(--accent-color);
color: #121212;
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: all 0.3s ease;
}
.project-card:hover{
transition: all 0.3s ease;
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
background-color: var(--accent-color);
}
.btn:hover {
background-color: var(--accent-color);
color: #121212;
scale: 1.05;
}
.project-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
}
.project-card:hover .strong_word {
color: #121212;
}
.project-card:hover h3 {
color: #121212;
}
@media (max-width: 768px) {
.projects {
padding: 40px 15px; /* Réduction du padding supérieur de 80px à 40px */
}
.project-card {
width: 250px;
}
.project-card h3 {
font-size: 20px;
}
.project-card p,
.project-card .btn {
font-size: 14px;
}
}
@media (max-width: 480px) {
.projects {
padding: 30px 10px; /* Réduction du padding supérieur de 60px à 30px */
}
.project-card {
width: 100%;
}
.project-card h3 {
font-size: 18px;
}
.project-card p {
font-size: 12px;
}
.project-card .btn {
padding: 6px 10px;
font-size: 12px;
}
}

167
css/skills_css.css
Unescape View File

@ -0,0 +1,167 @@
/* Section Compétences */
.skills {
text-align: center;
padding: 100px 20px;
}
.skills-section {
margin-top: 40px;
}
.skills-section h3 {
font-size: 24px;
color: var(--accent-color);
margin-bottom: 20px;
}
/* Style des compétences techniques avec barre de progression */
.skill {
margin-bottom: 20px;
text-align: left;
max-width: 600px;
margin: 0 auto 20px auto;
}
.skill p {
font-size: 18px;
margin-bottom: 5px;
color: #e0e0e0;
}
.progress-bar {
background-color: #333;
border-radius: 5px;
overflow: hidden;
height: 10px;
}
.progress {
background-color: var(--accent-color);
height: 100%;
transition: width 0.4s ease, background-color 0.3s ease;
}
/* Compétences générales */
.skills-section ul {
list-style-type: none;
padding: 0;
max-width: 600px;
margin: 0 auto;
text-align: left;
}
.skills-section ul li {
font-size: 18px;
margin-bottom: 10px;
color: #e0e0e0;
}
/* Responsive pour les tablettes */
@media (max-width: 768px) {
.skills {
padding: 80px 15px;
}
.skills-section h3 {
font-size: 22px;
}
.skill p {
font-size: 16px;
}
.skills-section ul li {
font-size: 16px;
}
}
/* Responsive pour les smartphones */
@media (max-width: 480px) {
.skills {
padding: 60px 10px;
}
.skills-section h3 {
font-size: 20px;
}
.skill p {
font-size: 14px;
}
.skills-section ul li {
font-size: 14px;
}
.progress-bar {
height: 8px;
}
}
/* Style des cartes de compétences générales */
.project-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-top: 20px;
}
.project-card {
background-color: #1f1f1f;
padding: 20px;
border-radius: 10px;
width: 300px;
color: #e0e0e0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
text-align: left;
margin: 15px;
transition: all 0.3s ease;
position: relative;
}
.project-card h3 {
font-size: 22px;
color: var(--accent-color);
margin-bottom: 10px;
}
.project-card p {
margin: 10px 0;
line-height: 1.5;
}
.project-card:hover {
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
z-index: 10;
background-color: var(--accent-color);
}
.project-card:hover h3,
.project-card:hover p {
color: #121212;
}
/* Responsive pour les tablettes */
@media (max-width: 768px) {
.project-card {
width: calc(50% - 30px);
}
.project-card h3 {
font-size: 20px;
}
}
/* Responsive pour les smartphones */
@media (max-width: 480px) {
.project-card {
width: 100%;
margin: 10px 0;
}
.project-card h3 {
font-size: 18px;
}
}
Write Preview
Loading…
Cancel
Save