0% found this document useful (0 votes)
13 views6 pages

Reinitialisation

Uploaded by

Guelord Muka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views6 pages

Reinitialisation

Uploaded by

Guelord Muka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

/* Reinitialisation */

*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
/*..............*/

/* référence */
:root{
--bg-color: #1f1f21;
--text-color: #fff;
--main-color: #ffae00;
--main-color2:#ab1414;
--main-color3:#13a5b5;

--big-font: 7rem;
--p-font: 1.1rem;
}

/* styliser body */
body{
background: var(--bg-color);
color: var(--text-color);
font-family: "Titillium web", sans-serif;
font-weight: 200;
font-style: normal;

}
/* section header */
nav{

top: 0;
right: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 15%;
background: transparent;
transition: all ease .45s;
}
.logo{
color: var(--text-color);
font-size: 41px;
font-weight: 600;
}
.logo span{
color: var(--main-color);
}
.Name{
color: var(--main-color);
}
.navbar{
display: flex;
}
.navbar a{
font-size: var(--p-font);
font-weight: 500;
color: var(--text-color);
margin: 0 25px;
transition: all ease .50s;
}
.navbar a:hover{
color: var(--main-color);
}

/* section main */

.img-border{
width: 60%;
border-radius: 50%;
margin-left: 30%;

.container-main{
display: flex;
justify-content: space-around;
width: 800px;
}

.main-text h2{
font-size: 3rem;
color: var(--main-color);
}

.main-text p{
font-size: var(--p-font);
font-weight: 400;
color: #c3c3c3;
line-height: 30px;
margin-bottom: 30px;
}
.main-link1{
display: inline-block;
padding: 25px;
padding-block: 20px;
background: var(--main-color);
color: black;
border-radius: 100%;
font-size: small;
font-weight: bold;
transition: all 0.6ms ease-in-out;
border: 2px solid var(--main-color);
}
.main-link1:hover{
transform: translateY(-5px);
background: transparent;
color: var(--main-color);
}
.main-link2{
display: inline-block;
padding: 15px;
padding-block: 20px;
background: var(--main-color2);
color: black;
border-radius: 100%;
font-size: small;
font-weight: bold;
transition: all 0.6ms ease-in-out;
border: 2px solid var(--main-color2);
margin-left: 25px;
}
.main-link2:hover{
transform: translateY(-5px);
color: #141414;
background: transparent;
color: var(--main-color2);
}
.main-link3{
display: inline-block;
padding: 15px;
padding-block: 20px;
background: var(--main-color3);
color: black;
border-radius: 100%;
font-size: small;
font-weight: bold;
transition: all 0.6ms ease-in-out;
border: 2px solid var(--main-color3);
margin-left: 25px;
}
.main-link3:hover{
transform: translateY(-5px);
color: #141414;
background: transparent;
color: var(--main-color3);
}
.main{
display: flex;
justify-content: space-around;
width: 300px;
margin-left: 2px;
}

/* section footer */
footer{
position: absolute;
bottom: 3rem;
display: flex;
justify-content: space-between;
width: 70%;
border-top: 1px solid white;
left: 15%;
font-size: 0.8rem;
color: var(--text-color);
}

.tel{
margin: 14px;
padding: 14px;
}
.tel p{
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
width: 25px;
color: var(--text-color);
font-size: 15px;
margin: 0 7px;
transition: all 0.6s ease-in-out;
background: transparent;
padding-left: 30px;
}
.tel p:hover{
transform: translateY(-10px);
}
.tel span{
color: var(--text-color);
font-size: 0.9em;
}
.tel span:hover{
color: var(--main-color);
}
.Email{
margin: 14px;
padding: 14px;
}
.Email p{
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
width: 25px;
color: var(--text-color);
font-size: 15px;
margin: 0 7px;
transition: all 0.6s ease-in-out;
}
.Email p:hover{
transform: translateY(-10px);
}
.Email span{
color: var(--text-color);
font-size: 0.9em;
}
.Email span:hover{
color: var(--main-color);
}
.Suivez-moi{
margin: 14px;
padding: 14px;
}
.copyright{
margin: 14px;
padding: 14px;
}
.copyright span{
font-size: x-small;
color: cyan;
font-weight: bold;
}
.Suivez-moi i{
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
width: 25px;
color: var(--text-color);
font-size: 15px;
transition: all 0.6s ease-in-out;
}
.Suivez-moi i:hover{
transform: translateY(-10px);
}

.wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
}

.conteneur-1{
display: flex;
margin-left: 15%;
}
.conteneur-2{
margin-left: 20%;
}
.border-envoyer{
border-radius: 100%;
width: 50%;
background: var(--main-color);
margin-top: 20px;
}
#border-cv{
border-right: 2px solid white;
padding-right: 32%;
}
.border-contact{
border-right: 2px solid white;
padding-right: 30%;
}

You might also like