initial commit
This commit is contained in:
93
css/discord.css
Normal file
93
css/discord.css
Normal file
@ -0,0 +1,93 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
|
||||
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
background: url(../img/bg.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
background-position: center;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profil{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 2px solid rgba(255, 255, 255, .2);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 25px;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.profil h1{
|
||||
font-family: 'Karla', sans-serif;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profil p{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-width: 400px) {
|
||||
.container{
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
.profil{
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 850px) {
|
||||
.profil{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.profil{
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1300px) {
|
||||
.profil{
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
240
css/style.css
Normal file
240
css/style.css
Normal file
@ -0,0 +1,240 @@
|
||||
/* FONT */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body{
|
||||
background: url(../img/bg.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px 0;
|
||||
|
||||
}
|
||||
|
||||
.card{
|
||||
border: 2px solid rgba(255, 255, 255, .2);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 25px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card img{
|
||||
border-radius: 60px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card h1{
|
||||
color: #fff;
|
||||
font-family: 'Karla', sans-serif;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.card p{
|
||||
/* border: red solid 2px; */
|
||||
font-family: 'Inter', sans-serif;
|
||||
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card .link{
|
||||
/* border: solid 1px purple; */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card .link a{
|
||||
background-color: #fff;
|
||||
width: 70%;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
margin-top: 40px;
|
||||
border-radius: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1),
|
||||
6px 0px 6px rgba(0, 0, 0, 0.1),
|
||||
0px 6px 6px rgba(0, 0, 0, 0.1),
|
||||
-6px 0px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card .icons{
|
||||
/* border: solid 1px orange; */
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.icons i{
|
||||
padding-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
.card .link .github{
|
||||
background-color: #181717;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card .github:hover{
|
||||
background-color: #383636;
|
||||
}
|
||||
|
||||
.card .link .gitea{
|
||||
margin-top: 30px;
|
||||
background-color: #528520;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card .gitea:hover{
|
||||
background-color: #3d6318;
|
||||
}
|
||||
|
||||
.card .link .linkedin{
|
||||
margin-top: 30px;
|
||||
background-color: #0A66C2;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card .linkedin:hover{
|
||||
background-color: #0c5196;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.card .link .spotify{
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
background-color: #1DB954;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card .link .spotify:hover{
|
||||
background-color: #179141;
|
||||
}
|
||||
|
||||
.card .link .discord{
|
||||
margin-top: 30px;
|
||||
background-color: #5865F2;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.card .link .discord:hover{
|
||||
background-color: #4a54c4;
|
||||
}
|
||||
|
||||
.card .link .email{
|
||||
margin-top: 30px;
|
||||
background-color: #FF0000;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.card .link .email:hover{
|
||||
background-color: #c50606;
|
||||
}
|
||||
|
||||
footer p{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-height: 770px) {
|
||||
.container {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 400px) {
|
||||
.container {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.card p{
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
.card {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card .icons{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 850px) {
|
||||
.card {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.card {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1300px) {
|
||||
.card {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 599px) {
|
||||
.card.animate__animated.animate__backInUp {
|
||||
animation: none !important; /* Désactive l'animation pour les écrans mobiles */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user