Noan07
3 years ago
parent
6bbf9085fa
commit
c4a60cd1e2
|
After Width: | Height: | Size: 384 B |
@ -1,30 +1,47 @@
|
||||
import React from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import "../styles/components/_navbar.scss"
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<img src=''alt='Logo'/>
|
||||
</li>
|
||||
<NavLink to="/Decouvrir">
|
||||
<li>
|
||||
<span>Découvrir</span>
|
||||
<nav>
|
||||
<ul>
|
||||
<li className="logo">
|
||||
<img src=''alt='Logo'/>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="Home">
|
||||
<li>
|
||||
<span></span>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="/Tendances">
|
||||
<li>
|
||||
<span>Tendances</span>
|
||||
</li>
|
||||
</NavLink>
|
||||
</ul>
|
||||
</nav>
|
||||
<NavLink to="/Decouvrir" className='b'>
|
||||
<li>
|
||||
<span>Découvrir</span>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="/Home" className='b'>
|
||||
<li>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="home">
|
||||
<path stroke="black" fill='black' d="M256 73.825a182.18 182.18 0 0 0-182.18 182.18c0 100.617 81.567 182.17 182.18 182.17a182.175 182.175 0 1 0 0-364.35zm76.636 161.579h-12.037v91.503a18.908 18.908 0 0 1-18.896 18.904h-26.78v-53.56a6.299 6.299 0 0 0-6.297-6.294H232.4a6.3 6.3 0 0 0-6.302 6.294v53.56h-26.771a18.91 18.91 0 0 1-18.906-18.904v-91.503h-11.97a7.879 7.879 0 0 1-5.071-13.905l82.055-69.039a7.89 7.89 0 0 1 10.142 0l81.479 68.547a7.88 7.88 0 0 1-4.421 14.396z" data-name="Home"/>
|
||||
</svg>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="/Tendances" className='b'>
|
||||
<li>
|
||||
<span>Tendances</span>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="/Tendances" className='b'>
|
||||
<li>
|
||||
<span>pseudo</span>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="/Tendances" className='b'>
|
||||
<li>
|
||||
<span>test</span>
|
||||
</li>
|
||||
</NavLink>
|
||||
<NavLink to="/Tendances" className='b'>
|
||||
<li>
|
||||
</li>
|
||||
</NavLink>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
*{
|
||||
top: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
.formulaire {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.cadre {
|
||||
position: relative;
|
||||
padding: 50px 50px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
background:purple;
|
||||
}
|
||||
|
||||
.cadre h1 {
|
||||
letter-spacing: 5px;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.cadre .inputbox {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.cadre .inputbox input {
|
||||
width: 100%;
|
||||
border: 2px solid #000;
|
||||
outline: none;
|
||||
background: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.cadre .inputbox span {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 20px;
|
||||
font-size: 1em;
|
||||
transition: 0.3s;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.span_date{
|
||||
margin-left: 7px;
|
||||
font-size: 1em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.cadre .inputbox input:focus ~ span,
|
||||
.cadre .inputbox input:valid ~ span {
|
||||
transform: translateX(-13px) translateY(-35px);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type="submit"], #buttonTEL{
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000;
|
||||
margin: 10px 0px 0px 25%;
|
||||
padding: 20px 10% 20px 10%;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
$color-1: #61dafb;
|
||||
$color-2: salmon;
|
||||
$color-3: #282c34;
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
.formulaire {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.cadre {
|
||||
position: relative;
|
||||
padding: 50px 50px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
background:purple;
|
||||
h1 {
|
||||
letter-spacing: 5px;
|
||||
margin-bottom: 60px;
|
||||
font-weight: bold;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.inputbox {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
margin-bottom: 25px;
|
||||
input {
|
||||
width: 100%;
|
||||
border: 2px solid #000;
|
||||
outline: none;
|
||||
background: none;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
span {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 20px;
|
||||
font-size: 1em;
|
||||
transition: 0.3s;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.span_date{
|
||||
margin-left: 7px;
|
||||
font-size: 1em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.cadre .inputbox input:focus ~ span,
|
||||
.cadre .inputbox input:valid ~ span {
|
||||
transform: translateX(-13px) translateY(-35px);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type="submit"], #buttonTEL{
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000;
|
||||
margin: 10px 0px 0px 25%;
|
||||
padding: 20px 10% 20px 10%;
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
.b:visited {
|
||||
color: #b9b9b9;
|
||||
}
|
||||
|
||||
|
||||
.b:hover,
|
||||
.b:focus {
|
||||
color: lightgrey;
|
||||
}
|
||||
|
||||
nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50px;
|
||||
background-color: #AAAAAA;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-transform: uppercase;
|
||||
color: #b9b9b9;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.logo{
|
||||
margin-right: 250px;
|
||||
}
|
||||
|
||||
.b:active {
|
||||
color: #b9b9b9;
|
||||
}
|
||||
|
||||
|
||||
.home{
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
list-style-type: none;
|
||||
li{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.b{
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-neko-bleue{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.n{
|
||||
height: 0.95rem;
|
||||
width: 0.95rem;
|
||||
padding-top: 0.15rem;
|
||||
overflow: hidden;
|
||||
fill: #b9b9b9;
|
||||
}
|
||||
@ -1,13 +1,2 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@import "./settings";
|
||||
@import "./components/navbar";
|
||||
Loading…
Reference in new issue