#javascript #html #css
#javascript #HTML #css
Вопрос:
Не могли бы вы помочь мне решить эту проблему. Я новичок в CSS, и я не знаю, как я могу заменить @keyframes, чтобы увидеть раздел на моем веб-сайте.
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("bloc-caroussel");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i ) {
slides[i].style.display = "none";
}
slideIndex ;
if (slideIndex > slides.length) {
slideIndex = 1
}
for (i = 0; i < dots.length; i ) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className = " active";
setTimeout(showSlides, 8000); // Change image every 6 seconds
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex = n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("bloc-caroussel");
var dots = document.getElementsByClassName("dot");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i ) {
dots[i].className = dots[i].className.replace(" active", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className = " active";
} #temoignage {
height: 550px;
background-image: url(../images/slider-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#testim-title {
text-transform: uppercase;
font-size: 26pt;
font-weight: bolder;
color: white
}
.pic-caroussel {
border-radius: 50%;
margin: -30px 285px;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
.pic-caroussel:hover {
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.caroussel {
border-color: transparent;
border-radius: 10px;
width: 690px;
height: 370px;
background-color: rgb(0, 0, 0, 0.54);
position: relative;
}
blockquote {
color: white;
text-align: center;
font-size: 14pt;
font-weight: 600;
padding-top: 60px;
font-style: italic;
}
.name-testim {
color: #fff;
text-align: center;
}
.bloc-caroussel {
margin: 0 38em;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 0s;
animation-name: fade;
animation-duration: 0s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 8px;
background-color: #fff;
border-radius: 50%;
margin-top: 1em;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
.prev {
border-bottom: 6px solid;
border-left: 6px solid;
transform: rotate(45deg);
left: 38.9em;
}
.next {
border-bottom: 6px solid;
border-left: 6px solid;
transform: rotate(-135deg);
right: 38.5em;
}
.active {
background-color: #2f4791;
}
.prev,
.next {
width: 20px;
height: 20px;
color: #2f4791;
position: absolute;
top: 254em;
margin-top: -31px;
cursor: pointer;
}
.prev:hover,
.next:hover {
color: rgba(255, 255, 255, 0.8);
} <section id=temoignage>
<h2 id="testim-title">Ils nous ont fait confiance</h2>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel fade" src="./images/img100px100px/formaunivstrasdevfullseo-eleve1.jpg" alt="formaunivstrasdevfullseo élève 1">
<blockquote>
<i class="fas fa-quote-left"></i> Grâce à la <strong>formaunivstrasdevfullseo</strong> , j'ai pu développer mon activité de webdesigner freelance, en fournissant à mes clients des services de qualité. Je la recommande ! <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Leïla Bektis</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve2.jpg" alt="Elève 2 formaunivstrasdevfullseo">
<blockquote>
<i class="fas fa-quote-left"></i> Formateurs au top ! La <strong>formaunivstrasdevfullseo</strong> m'a permis de réussir ma reconversion professionnelle, et de retrouver un travail dans un domaine qui me plait et me correspond. <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Jessie Okari</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve3.jpg" alt="Elève 3 formaunivstrasdevfullseo">
<blockquote>
<i class="fas fa-quote-left"></i> Sans aucun doute le meilleur <strong>centre de formation à Strasbourg</strong>. Je recommande vivement cette formation à quiconque souhaite réussir dans le domaine du développement web! <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Carine Lemarchand</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve4.jpg" alt="Elève 4 formaunivstrasdevfullseo">
<blockquote>
<i class="fas fa-quote-left"></i> Je recommande vivement la formaunivstrasdevfullseo, avec des formateurs qui maîtrisent parfaitement les domaines du <strong>référencement seo</strong> et du <strong>développement web</strong>. <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Lee Won</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve5.jpg" alt="Elève 5 formaunivstrasdevfullseo">
<blockquote><i class="fas fa-quote-left"></i> J'avais déjà effectué il y a quelques années une formation pour être graphiste, la formaunivstrasdevfullseo m'a permis de développer de nouvelles compétences. <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Kevin Cosn</h4>
</div>
</div>
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<div style="text-align:center">
<span class="dot" onclick="currentDiv(1)"></span>
<span class="dot" onclick="currentDiv(2)"></span>
<span class="dot" onclick="currentDiv(3)"></span>
<span class="dot" onclick="currentDiv(4)"></span>
<span class="dot" onclick="currentDiv(5)"></span>
</div>
</section> Вот скриншот моего раздела отзывов (локальный) введите описание изображения здесь
Комментарии:
1. Что вы подразумеваете под «eplace @keyframes». Также откуда
margin: 0 38em;взялись? Мне кажется, что вы используете margin для позиционирования своих элементов
Ответ №1:
Я хотел использовать анимационный css вместо @keyframes. Поле использовалось для размещения раздела отзывов. Я добавил исправление своих кодов, но проблема не решена.
Вот фактический веб-сайт введите описание ссылки здесь
Моя индексная страница
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<script type = "application/ld json">
{
"@context" : "https://schema.org",
"@type" : "BreadcrumbList",
"itemListElement" :
[{
"@type" : "ListItem",
"position" : "1",
"name" : "Formaunivstrasdevfullseo",
"item" : "https://formationwebdeveloppeur.fr/index.html"
},{
"@type" : "ListItem",
"position" : "2",
"name" : "La formation",
"item" : "https://formationwebdeveloppeur.fr/la-formation.html"
},{
"@type" : "ListItem",
"position" : "3",
"name" : "Tarifs",
"item" : "https://formationwebdeveloppeur.fr/tarifs.html"
},{
"@type" : "ListItem",
"position" : "4",
"name" : "Contact",
"item" : "https://formationwebdeveloppeur.fr/contact.html"
}]
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="formaunivstrasdevfullseo, formation-référencement-seo, formation-développement-web, développeur-full-seo, développeur-web, formation-développeur-web, référencement-seo">
<meta name="description" content="Formaunivstrasdevfullseo est dispensée les professeurs et les experts, dans les domaines du référencement seo et du développement web pour acquérir...">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;0,900;1,400;1,500;1,700amp;display=swap" type="text/css" rel="stylesheet">
<link rel="icon" type="image/png" sizes="32x32" href="././favicon/formawebdevseo-favicon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<script src="https://kit.fontawesome.com/0974ec6dd5.js" crossorigin="anonymous"></script>
<title>Formaunivstrasdevfullseo - Accueil</title>
</head>
<body>
<div class="site-container">
<header>
<a href="#" class="header-icon" id="header-icon"></a>
<img id="mainpic" src="././images/formaunivstrasdevfullseo-centre.jpg" alt="formaunivstrasdevfullseo">
<a href="index.html" id="logo"><img src="././images/formawebdevseo-logo.jpg" alt="Formawebdevseo logo"></a>
<div id="alignementtitreprincipal"><h1 id="titreprincipal">Forma<br>Univstrasdevfullseo</h1></div>
<nav class="breadcrumb flat">
<a href="index.html" class="active">Formaunivstrasdevfullseo</a>
<a href="la-formation.html">La formation</a>
<a href="tarifs.html">Tarifs</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main id="emplacement-articles-pic">
<div id="site-cache">
<h2 id="welcome">Bienvenue sur le site dédié à la formation du web développement et du référencement seo !</h2>
<div id="section1-artpic">
<div class="art; animated fadeInLeft delay-1s">
<article class="positionarticle" id="positionarticle4">
<h3>Notre centre de formation</h3>
<p>
Notre centre de formation en <strong>développement web</strong> et <strong>référencement seo</strong> situé à Strasbourg propose à ses étudiants de nombreuses formations liées notamment aux <strong>métiers du web</strong> avec l’avancée du numérique. Ces formations sont accessibles à tous, sans connaissances préalables requises.
Les enseignements dispensés par les professeurs et les experts, permettront aux étudiants d’acquérir de solides connaissances pour travailler au sein d’une entreprise, d'une association, ou bien en tant qu’indépendant. Contactez notre <a href="contact.html">service d’inscription</a>.
</p>
</article>
</div>
<div class="picnvid; animated fadeInRight delay-1s"><img class="pic" src="././images/centre-de-formation-developpement-web-strasbourg.jpg" alt="Centre de formation Strasbourg"></div>
<div class="art; animated fadeInLeft delay-2s">
<article class="positionarticle" id="positionarticle3">
<h3><strong>Formaunivstrasdevfullseo</strong> : une formation complète accessible à tous !</h3>
<p>
<strong>Formaunivstrasdevfullseo</strong> est une formation dont les cours peuvent être suivis en présentiel ou, à distance pour ainsi permettre à chaque étudiant de suivre les cours à son rythme.
Elle s’adresse à toute personne, débutante ou non, souhaitant acquérir de nouvelles compétences, en vue d’une reconversion professionnelle, ou encore pour parfaire ses connaissances en matière de <strong>développement web</strong> et de <strong>référencement seo</strong>.<br>
</p>
</article>
</div>
<div class="picnvid; animated fadeInRight delay-2s"><img class="pic" src="././images/forma-developpeur-web-full-stack-seo.jpg" alt="Formation web développement et référencement seo" ></div>
<div class="art; animated fadeInLeft delay-3s">
<article class="positionarticle" id="positionarticle5">
<h3>Les <strong>métiers du web</strong> qui recrutent</h3>
<ul>
<li>Web designer full seo</li>
<li>Web développeur full stack</li>
<li>Responsable de projets web</li>
<li>Maquettiste pao</li>
<li>Consultant en référencement seo</li>
<li>Intégrateur web</li>
<li>Graphiste,…</li>
</ul>
</article>
</div>
<div class="picnvid; animated fadeInRight delay-3s"><img class="pic" src="././images/metiers-du-web.jpg" alt=" les métiers du web"></div>
<div class="art; animated fadeInLeft delay-4s">
<article class="positionarticle">
<h3>Comment la formation est-elle organisée ?</h3>
<p>
La formation proposée dure 11 mois et s’articule autour de 4 modules principaux repartis en 9 cours.
Vous avez la possibilité de vous inscrire à un ou plusieurs modules. À la fin de chaque module suivi, des contrôles de connaissances sont organisés, avec un suivi permanent afin de s’assurer de la bonne compréhension des cours.
Pour connaître le planning des cours, consultez notre page <a href="la-formation.html">formation</a>.
</p>
</article>
</div>
<div class="picnvid; animated fadeInRight delay-4s"><img class="pic" src="././images/formaunivstrasdevfullseo-la-formation.jpg" alt="Formaunivstrasdevfullseo organisation de la formation universitaire"></div>
<div class="art; animated fadeInLeft delay-5s">
<article class="positionarticle" id="positionarticle2">
<h3>Comment financer la <strong>formaunivstrasdevfullseo</strong> ?</h3>
<p>
Si vous disposez d’un compte <abbr title="Compte Personnel Formation">CPF</abbr> actif, sachez que la <strong>formaunivstrasdevfullseo</strong> peut être financée intégralement.
Si vous êtes demandeur d’emploi, vous pourrez demander une prise en charge auprès de votre conseiller pôle emploi. Vous aurez alors le statut d’apprenti avec la mise en place d’un contrat d’apprentissage, suivi d'un stage d’une durée de 3 mois obligatoire en entreprise.<br>
De plus, une facilité de paiement jusqu’à 5 fois est proposée. Vous pourrez indiquer votre choix lors de votre inscription.
Pour en savoir plus sur les tarifs de la <strong>formaunivstrasdevfullseo</strong>, consultez notre page <a href="tarifs.html">tarifs</a>.
</p>
</article>
</div>
<div class="picnvid; animated fadeInRight delay-5s"><img class="pic" src="././images/financement-formaunivstrasdevfullseo.jpg" alt="Financer une formation formaunivstrasdevfullseo"></div>
</div>
</div>
</main>
<section id="sectioncontactacceuil">
<div id="introcontact">
<h4>Vous vous sentez prêt(e) à relever les défis du monde digital, et devenir un <strong>web développeur full seo</strong> ?</h4>
<p id="paraintro">Contactez-nous, nous nous occupons de votre avenir !</p>
</div><br>
<div id="homepositionform">
<form method="post">
<div id="student">
<div><input type="text" name="lastname" placeholder="Votre nom" required></div><br>
<div><input type="text" name="prenom" placeholder="Votre prénom" required></div><br>
<div><input type="email" name="email" placeholder="Votre email" required></div><br>
</div>
<div id="message">
<textarea name="message" placeholder="Votre message" required></textarea><br>
<button id="homebutton">Envoyer</button>
</div>
</form>
</div>
</section>
<section id=temoignage>
<h2 id="testim-title">Ils nous ont fait confiance</h2>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel fade" src="./images/img100px100px/formaunivstrasdevfullseo-eleve1.jpg" alt="formaunivstrasdevfullseo élève 1">
<blockquote>
<i class="fas fa-quote-left"></i> Grâce à la <strong>formaunivstrasdevfullseo</strong> , j'ai pu développer mon activité de webdesigner freelance, en fournissant à mes clients des services de qualité. Je la recommande ! <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Leïla Bektis</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve2.jpg" alt="Elève 2 formaunivstrasdevfullseo">
<blockquote>
<i class="fas fa-quote-left"></i> Formateurs au top ! La <strong>formaunivstrasdevfullseo</strong> m'a permis de réussir ma reconversion professionnelle, et de retrouver un travail dans un domaine qui me plait et me correspond. <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Jessie Okari</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve3.jpg" alt="Elève 3 formaunivstrasdevfullseo">
<blockquote>
<i class="fas fa-quote-left"></i> Sans aucun doute le meilleur <strong>centre de formation à Strasbourg</strong>. Je recommande vivement cette formation à quiconque souhaite réussir dans le domaine du développement web! <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Carine Lemarchand</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve4.jpg" alt="Elève 4 formaunivstrasdevfullseo">
<blockquote>
<i class="fas fa-quote-left"></i> Je recommande vivement la formaunivstrasdevfullseo, avec des formateurs qui maîtrisent parfaitement les domaines du <strong>référencement seo</strong> et du <strong>développement web</strong>. <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Lee Won</h4>
</div>
</div>
<div class="bloc-caroussel fade">
<div class="caroussel">
<img class="pic-caroussel" src="./images/img100px100px/formaunivstrasdevfullseo-eleve5.jpg" alt="Elève 5 formaunivstrasdevfullseo">
<blockquote><i class="fas fa-quote-left"></i> J'avais déjà effectué il y a quelques années une formation pour être graphiste, la formaunivstrasdevfullseo m'a permis de développer de nouvelles compétences. <i class="fas fa-quote-right"></i>
</blockquote>
<h4 class="name-testim">Kevin Cosn</h4>
</div>
</div>
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<div style="text-align:center">
<span class="dot" onclick="currentDiv(1)"></span>
<span class="dot" onclick="currentDiv(2)"></span>
<span class="dot" onclick="currentDiv(3)"></span>
<span class="dot" onclick="currentDiv(4)"></span>
<span class="dot" onclick="currentDiv(5)"></span>
</div>
</section>
<footer>
<p>©<small> Copyright 2020 | Tous droits réservés - Site web créé avec amour par Aminata amp;#128536;</small></p><p id="infoconcours">amp;#128123;<small>Booooh !! Ce site a été créé dans le cadre du concours seo organisé par l'Université de Strasbourg.</small></p>
<div id="myCookieConsent">
<div class="text"><div>Ce site utilise des cookies. En poursuivant votre navigation, vous acceptez l'utilisation de ces cookies. <a href="cookies.html">En savoir plus</a></div></div>
<a id="cookieButton">Ok j'ai compris</a>
</div>
<a id="back2Top" title="Vers le haut" href="#">amp;#10148;</a>
</footer>
</div>
<!-- Pour le back2top button-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/application.js"></script>
</body>
</html>
Мой js-код
(function($){
$('#header-icon').click(function(e){
e.preventDefault();
$('body').toggleClass('with--sidebar');
});
$('#site-cache').click(function(e){
$('body').removeClass('with--sidebar');
})
}) (jQuery);
/*Scroll to top when arrow up clicked BEGIN*/
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 150) {
$('#back2Top').fadeIn();
} else {
$('#back2Top').fadeOut();
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
/*Scroll to top when arrow up clicked END*/
/* Cookie Compliancy BEGIN*/
function GetCookie(name) {
var arg=name "=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i) 1;
if (i==0) break;
}
return null;
}
function testFirstCookie(){
var offset = new Date().getTimezoneOffset();
if ((offset >= -180) amp;amp; (offset <= 0)) { // European time zones
var visit=GetCookie("cookieCompliancyAccepted");
if (visit==null){
$("#myCookieConsent").fadeIn(400); // Show warning
} else {
// Already accepted
}
}
}
$(document).ready(function(){
$("#cookieButton").click(function(){
console.log('Ok j"ai compris');
var expire=new Date();
expire=new Date(expire.getTime() 7776000000);
document.cookie="cookieCompliancyAccepted=here; expires=" expire ";path=/";
$("#myCookieConsent").hide(400);
});
testFirstCookie();
});
/* Cookie Compliancy END*/
/* Testimonials*/
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("bloc-caroussel");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i ) {
slides[i].style.display = "none";
}
slideIndex ;
if (slideIndex > slides.length) {
slideIndex = 1
}
for (i = 0; i < dots.length; i ) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className = " active";
setTimeout(showSlides, 8000); // Change image every 6 seconds
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex = n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("bloc-caroussel");
var dots = document.getElementsByClassName("dot");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i ) {
dots[i].className = dots[i].className.replace(" active", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className = " active";
}
И мой код css
/* Témoignages*/
#temoignage {
height: 550px;
background-image: url("../images/slider-bg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
#testim-title {
text-transform: uppercase;
font-size: 26pt;
font-weight: bolder;
color: white
}
.pic-caroussel {
border-radius: 50%;
margin: -30px 285px;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
.pic-caroussel:hover {
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.caroussel {
border-color: transparent;
border-radius: 10px;
width: 690px;
height: 370px;
background-color: rgb(0, 0, 0, 0.54);
position: relative;
}
blockquote {
color: white;
text-align: center;
font-size: 14pt;
font-weight: 600;
padding-top: 60px;
font-style: italic;
}
.name-testim {
color: #fff;
text-align: center;
}
.bloc-caroussel {
margin: 0 38em;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 0s;
animation-name: fade;
animation-duration: 0s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 8px;
background-color: #fff;
border-radius: 50%;
margin-top: 1em;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
.prev {
border-bottom: 6px solid;
border-left: 6px solid;
transform: rotate(45deg);
left: 38.9em;
}
.next {
border-bottom: 6px solid;
border-left: 6px solid;
transform: rotate(-135deg);
right: 38.5em;
}
.active {
background-color: #2f4791;
}
.prev,
.next {
width: 20px;
height: 20px;
color: #2f4791;
position: absolute;
top: 254em;
margin-top: -31px;
cursor: pointer;
}
.prev:hover,
.next:hover {
color: rgba(255, 255, 255, 0.8);
}
Комментарии:
1. Я исправил ошибки правописания и форматы, и это работает отлично! Большое вам спасибо!