arrow sur présentation

ServeurDeTest
nathan boileau 2 years ago
parent 47890dd216
commit 5760fe35ba

@ -9,12 +9,14 @@
src: url("../../assets/fonts/Equinox.otf");
}
/* End Fonts CSS */
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-family: "Equinox", sans-serif;
color: white;
scroll-behavior: smooth;
height: 100vh;
background-position: center center;
background-attachment: fixed;
@ -33,16 +35,15 @@ nav {
.moving-fox {
position: relative;
top : 0;
top: 0;
z-index: -1;
opacity: 0;
}
/* Section Histoire */
section{
min-height: 70vh;
section {
min-height: 60vh;
margin-bottom: 10px;
}
@ -69,3 +70,64 @@ p {
font-family: "Fauna", sans-serif;
font-size: 20px;
}
/* Scroll down arrow */
.scroll-down {
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -16px;
display: block;
width: 40px;
height: 40px;
border: 2px solid #fff;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
@keyframes bounce {
0%,
100%,
20%,
50%,
80% {
transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz-transform: translateY(0);
-o-transform: translateY(0);
}
40% {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-o-transform: translateY(-5px);
}
}

@ -10,7 +10,7 @@
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="View/src/CSS/Presentation.css" />
<link rel="stylesheet" href="../CSS/Presentation.css" />
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
@ -21,7 +21,7 @@
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"
></script>
<script defer src="View/src/JS/Presentation.js"></script>
<script defer src="../JS/Presentation.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
@ -46,9 +46,11 @@
</div>
</nav>
<img src="View/assets/img/BGPres.png" class="img-fluid" />
<div class="container pt-5">
<img src="../../assets/img/BGPres.png" class="img-fluid" />
<a href="#first" class="scroll-down"></a>
<div class="container pt-5" id="first">
<div class="col-12">
<div class="row py-5">
<div class="col-8">
@ -89,7 +91,7 @@
<div class="col-3" id="fox">
<img
src="View/assets/img/Foxy.png"
src="../../assets/img/Foxy.png"
alt="Logo"
class="img-fluid rounded-circle moving-fox"
style="

Loading…
Cancel
Save