parent
cca15a1572
commit
90932e4563
|
After Width: | Height: | Size: 1.4 MiB |
@ -0,0 +1,89 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* HEADER */
|
||||
|
||||
.main-head{
|
||||
background: #9AF7FF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a{
|
||||
font-family: JetBrains Mono,Menlo,Droid Sans Mono,monospace;
|
||||
}
|
||||
|
||||
nav{
|
||||
min-height: 10vh;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav ul{
|
||||
display: flex;
|
||||
flex: 1 1 40rem;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.main-logo img{
|
||||
flex: 1 1 40rem;
|
||||
}
|
||||
|
||||
/*Réseau sociaux*/
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.social a {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
height: 30%;
|
||||
padding: 35%;
|
||||
border-radius: 40%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.social a:hover {
|
||||
transform: scale(1.2) translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
.social a.facebook {
|
||||
padding-top: 2%;
|
||||
padding-left: 4%;
|
||||
background: linear-gradient(45deg, #3b5998,#0078d7);
|
||||
box-shadow: 0 4px 30px rgba(45, 98, 169, 1);
|
||||
}
|
||||
|
||||
.social a.twitter {
|
||||
padding-top: 2%;
|
||||
padding-left: 4%;
|
||||
background: linear-gradient(45deg, #1da1f2,#0e71c8);
|
||||
box-shadow: 0 4px 30px rgba(19, 127, 212, 1);
|
||||
}
|
||||
|
||||
.social a.instagram {
|
||||
padding-top: 2%;
|
||||
padding-left: 4%;
|
||||
background: linear-gradient(45deg, #405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
|
||||
box-shadow: 0 4px 30px rgba(120, 64, 190, 0.8);
|
||||
}
|
||||
|
||||
.social a.gitlab {
|
||||
padding-top: 2%;
|
||||
padding-left: 4%;
|
||||
background: linear-gradient(45deg, #FF9467,#DB4100);
|
||||
box-shadow: 0 4px 30px rgba(255,148,103, 0.6);
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Home Page</title>
|
||||
<link rel="stylesheet" href="../css/home.css">
|
||||
<link rel="stylesheet" href="../css/reset.css" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="main-head">
|
||||
<nav>
|
||||
<div class="main-logo">
|
||||
<img src="../Images/Logo.png" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="login.html">Se connecter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Profil</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="social">
|
||||
<a href="#" class="facebook">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-facebook" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="twitter">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-twitter" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="instagram">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-instagram" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<rect x="4" y="4" width="16" height="16" rx="4"></rect>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501"></line>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="gitlab">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-gitlab" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M21 14l-9 7l-9 -7l3 -11l3 7h6l3 -7z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue