Scribd
Upload
52 views10 pages

CA Rossel

The document provides code for building a navigation bar and carousel component with HTML, CSS, and JavaScript. It also includes code for animating text using SVG paths and CSS animations. Key elements include a navbar with dropdown menu and brand image, a multi-item carousel slider, and JavaScript used to toggle navbar menu and handle carousel navigation and scrolling effects. The document also shares code for letter-by-letter reveal animation on text content.

Uploaded by

cyrille tigoun
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
52 views10 pages

CA Rossel

The document provides code for building a navigation bar and carousel component with HTML, CSS, and JavaScript. It also includes code for animating text using SVG paths and CSS animations. Key elements include a navbar with dropdown menu and brand image, a multi-item carousel slider, and JavaScript used to toggle navbar menu and handle carousel navigation and scrolling effects. The document also shares code for letter-by-letter reveal animation on text content.

Uploaded by

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

carossel

https://codepen.io/claudiulazar/pen/OdvVOo

https://codepen.io/nathan-sr/pen/qBQqVwr

https://codepen.io/nathan-sr/pen/GRwZmKW

https://codepen.io/divinector/pen/wZQVEP important
https://codepen.io/Goddy_game/pen/NWbeqYz
https://codepen.io/syrizaldev/pen/QWmdGwe important

https://codepen.io/bradtraversy/pen/xBdyzr

aficher lettre par lettre

navbar
https://codepen.io/albizan/pen/mMWdWZ

https://codepen.io/eddyerburgh/pen/oxwXjx

https://codepen.io/divinector/pen/wZQVEP important
https://codepen.io/Goddy_game/pen/NWbeqYz

https://codepen.io/syrizaldev/pen/QWmdGwe important

html

<nav class="navbar navbar-expand-lg navbar-light fixed-top">


<div class="container">
<a class="navbar-brand" href="#"><img
src="https://o.remove.bg/downloads/b0617748-cc78-4094-98a2-60f6f2fb2c1c/t%C3%A9l
%C3%A9chargement-removebg-preview.png" width="80"/></a></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">


<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>

<div><img class="menu-block" src="https://o.remove.bg/downloads/3c79d5b5-ee18-


4d5c-9bf9-2b0ccf2dfdb9/t%C3%A9l%C3%A9chargement__1_-removebg-preview.png"
width="80"></div>
</div>
</nav>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">


<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.postimg.cc/bNQp0RDW/1.jpg"
alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Slider One Item</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla,
tempore. Deserunt excepturi quas vero.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.postimg.cc/pVzg3LWn/2.jpg"
alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Slider One Item</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla,
tempore. Deserunt excepturi quas vero.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.postimg.cc/0y2F6Gpp/3.jpg"
alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Slider One Item</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla,
tempore. Deserunt excepturi quas vero.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>
<h1>
Salut tout le monde
</h1>

CSS
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.carousel-caption {
bottom: 270px;
}

.carousel-caption h5 {
font-size: 45px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
}

.carousel-caption p {
width: 75%;
margin: auto;
font-size: 18px;
line-height: 1.9;
}

.navbar-light .navbar-brand {
color: #fff;
font-size: 25px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
}

.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-


link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-
nav .show > .nav-link {
color: #fff;
}

.navbar-light .navbar-nav .nav-link {


color: #fff;
}

.navbar-toggler {
background: #fff;
}

.navbar-nav {
text-align: center;
justify-content:center;
margin-right:18rem;
}

.nav-link {
padding: .2rem 1rem;
}

.nav-link.active,.nav-link:focus{
color: #fff;
}

.navbar-toggler {
padding: 1px 5px;
font-size: 18px;
line-height: 0.3;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-


link:hover {
color: #fff;
}

/* ignore the code below */

.link-area
{
position:fixed;
bottom:20px;
left:20px;
padding:15px;
border-radius:40px;
background:tomato;
}
.link-area a
{
text-decoration:none;
color:#fff;
font-size:25px;
}

JS

const navbarMenu = document.getElementById("menu");


const burgerMenu = document.getElementById("burger");
const headerMenu = document.getElementById("header");

// Open Close Navbar Menu on Click Burger


if (burgerMenu && navbarMenu) {
burgerMenu.addEventListener("click", () => {
burgerMenu.classList.toggle("is-active");
navbarMenu.classList.toggle("is-active");
});
}

// Close Navbar Menu on Click Menu Links


document.querySelectorAll(".menu-link").forEach((link) => {
link.addEventListener("click", () => {
burgerMenu.classList.remove("is-active");
navbarMenu.classList.remove("is-active");
});
});

// Change Header Background on Scrolling


window.addEventListener("scroll", () => {
if (this.scrollY >= 85) {
headerMenu.classList.add("on-scroll");
} else {
headerMenu.classList.remove("on-scroll");
}
});

// Fixed Navbar Menu on Window Resize


window.addEventListener("resize", () => {
if (window.innerWidth > 768) {
if (navbarMenu.classList.contains("is-active")) {
navbarMenu.classList.remove("is-active");
}
}
});
Animation ecriture

html

<body>
<div id=container>
<div class="content-container">
<svg id="animated-logo" xmlns="http://www.w3.org/2000/svg" width="413.828"
height="100.3803" viewBox="0 0 413.828 100.3803"><title>logo-nerco_1</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" id="n" points="67.611 0 67.611 64.972 67.611
68.856 17.836 0 0 0 0 100.38 17.836 100.38 17.836 30.913 67.611 100.38 85.448
100.38 85.448 87.463 85.448 0 67.611 0"/>
<path class="cls-1" id="c"
d="M280.1881,82.5632a32.3731,32.3731,0,1,1,20.4476-
57.4439,70.4417,70.4417,0,0,1,8.5264-15.8655,50.1745,50.1745,0,1,0-
28.974,91.1265,49.9091,49.9091,0,0,0,28.974-9.2537,70.4445,70.4445,0,0,1-8.5264-
15.8656A32.2149,32.2149,0,0,1,280.1881,82.5632Z"/>
<path class="cls-1" id="o"
d="M363.6379,0a50.19,50.19,0,1,0,50.19,50.19A50.1184,50.1184,0,0,0,363.6379,0Zm0,82
.5632a32.3731,32.3731,0,1,1,32.373-32.373A32.41,32.41,0,0,1,363.6379,82.5632Z"/>
<path class="cls-1" id="er"
d="M190.9662,56.7609c13.6554-.6577,24.551-12.9982,24.551-28.169,0-15.3563-11.1615-
27.8223-25.051-
28.1967L101.142,0V100.38h79.7089L168.0693,82.69H118.832V59.0351h31.9492l-.78-
1.3514L138.2278,41.39l.0613-.0443H118.832V17.69h70.6211c.1276-.008.2488-.0514.3776-
.0514s.25.0434.3775.0514c4.3875.2722,8.03,5.1324,8.03,10.902a13.3987,13.3987,0,0,1-
.711,4.3064l.0065.0017c-.0881.2317-.1895.4349-.2837.6541a15.7049,15.7049,0,0,1-.861
4,1.7272c-.171.2922-.3479.5661-.5289.8308-.05.0737-.1.1487-.1509.22a11.6769,11.6769
,0,0,1-
8.1742,5.0128H159.1472L189.0206,82.69l1.4456,2.0006,8.62,11.93,2.863,3.7593h22.3935
Z"/>
</g>
</g>
</svg>
<div id=flip>
<div><div>Accompagne</div></div>
<div><div>Réalise</div></div>
<div><div>Imagine</div></div>
</div>
<div id="last-anim">
<div class="element">Accompagne</div>
<div class="element">Réalise</div>
<div class="element">Imagine</div>
</div>
Vos projets
</div>
</div>
<script src="js/index.js"></script>
</body>
code CSS

@import url("https://fonts.googleapis.com/css2?
family=Barlow+Condensed:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?
family=Barlow+Condensed&display=swap");

body {
margin: 0px;
font-family: "Barlow Condensed";
text-align: center;
}

svg {
height: 30px;
fill: #252525;
}

#container {
color: #252525;
text-transform: uppercase;
font-size: 36px;
font-weight: bold;
padding-top: 200px;
position: fixed;
width: 100%;
bottom: 45%;
display: block;
}

#flip {
height: 55px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
animation: hidde 0.3s forwards;
animation-delay: 5s;
}

#flip > div > div {


color: #fff;
font-weight: 400;
padding: 4px 12px;
height: 45px;
margin-bottom: 45px;
display: inline-block;
background: #7f1719;
}

#flip div:first-child {
animation: show 5s ease-out ;
}

#last-anim {
display: flex;
height: 55px;
position: absolute;
flex-direction: row-reverse;
top: 78%;
left: 50%;
transform: translate(-50%, -50%);
.element {
color: #fff;
font-weight: 400;
padding: 4px 12px;
height: 45px;
margin-bottom: 45px;
display: inline-block;
background: #7f1719;
margin-right: 10px;
margin-left: 10px;
opacity: 0;
animation: appear 2s ease-in-out forwards;
animation-delay: 5.1s;
transition: 0.2s;
}
}
@keyframes appear{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes hidde {
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes show {
0% {
margin-top: -270px;
}
5% {
margin-top: -180px;
}
33% {
margin-top: -180px;
}
38% {
margin-top: -90px;
}
66% {
margin-top: -90px;
}
71% {
margin-top: 0px;
}
99.99% {
margin-top: 0px;
}
100% {
margin-top: -270px;
}
}

p {
position: fixed;
width: 100%;
bottom: 30px;
font-size: 12px;
color: #999;
margin-top: 200px;
}

You might also like