Partage
  • Partager sur Facebook
  • Partager sur Twitter

affichage page d'accueil (zoom)

saik0
    28 mars 2020 à 13:35:18

    Bonjour,

    J'ai un soucis avec la création de mon site web, et j'espère que vous pourrez m'aider avec cette situation. J'ai utilisé un template HTML que je modifie petit à petit, et j'ai un problème que je n'arrive pas à résoudre. Voici une capture d'écran pour avoir une idée :

    Seulement, ce qui m'intrigue, c'est que cela n'arrive que sur la page d'accueil (index.html). Sur les autres pages, l'ensemble du site est dézoomé pour que le titre et le menu ne se chevauchent pas :

    Mais encore plus étrange : il suffit que je modifie le nom de la page d'accueil, par exemple en transformant index.html en indexx.html, et voilà que tout redevient normal ! Il faut noter que c'est rééellement l'ensemble du site qui s'adapte, et tout est réduit en taille pour que l'affichage soit correct, exactement comme si on dézoomait sur la page :

    Je n'ai aucune idée de pourquoi l'affichage s'adapte sur les autres pages, ni de pourquoi lorsque je modifie le nom de la page d'accueil cela fonctionne comme je le voudrais. Aussi, je n'ai trouvé aucune mention de la page "index.html" spécifiquement dans les feuilles de style...

    Voici les codes source des pages "index.html" ainsi que de la feuille CSS principale.

    <!DOCTYPE html>
<html lang="en">
<head>
<title>COMPLETEMENTDUPER</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="My Podcast template project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-4.1.2/bootstrap.min.css">
<link href="plugins/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
<link rel="stylesheet" type="text/css" href="styles/responsive.css">
</head>
<body>

<div class="super_container">

	<!-- Header -->

	<header class="header trans_400">

		<!-- Logo -->
		<div class="logo">
			<a href="#"><span>completement</span>duper</a>
		</div>

		<div class="container">
			<div class="row">
				<div class="col">
					<div class="header_content d-flex flex-row align-items-center justify-content-start trans_400">
						<nav class="main_nav">
							<ul class="d-flex flex-row align-items-start justify-content-start">
								<li><a href="index.html">Accueil</a></li>
								<li><a href="artistes.html">Artistes</a></li>
								<li><a href="sons.html">Sons</a></li>
								<li><a href="clips.html">Clips</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>

		<!-- Submit & Social -->
		<div class="header_right d-flex flex-row align-items-start justify-content-start">

			<!-- Submit 
			<div class="submit"><a href="#">Submit a Podcast</a></div>
						-->
			
			<!-- Social -->
			<div class="social">
				<ul class="d-flex flex-row align-items-start justify-content-start">
					<li><a href="https://www.facebook.com/completementduper/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="https://www.instagram.com/completementduper/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
					<li><a href="https://soundcloud.com/completementduper" target="_blank"><i class="fa fa-soundcloud" aria-hidden="true"></i></a></li>
					<li><a href="https://www.youtube.com/channel/UCuy8eWLlwAwey52zqkQGipg" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
				</ul>
			</div>

			<!-- Hamburger -->
			<div class="hamburger"><i class="fa fa-bars" aria-hidden="true"></i></div>
			
		</div>
	</header>

	<!-- Home -->

	<div class="home">
		<div class="background_image" style="background-image:url(images/index.jpg)"></div>
		<div class="home_container">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="home_content">
						<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/785027485%3Fsecret_token%3Ds-w661ovvvMLn&color=%23694a45&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
							<!-- INFOS SON <div class="home_title"><h1>saïko - ALLIAGES</h1></div>
							<div class="track_info">
								<ul class="d-flex flex-row align-items-start justify-content-start">
									<li><a href="#">29 novembre 2019</a></li>
									<li>3:43</li>
								</ul>
							</div> -->
							<div class="track track_home">
						<!-- ALLIAGES <br /><br />	
                <iframe width="1000" height="600" src="https://www.youtube.com/embed/fjxtxOFU0hw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						<br /><br /><br /><br />
						-->						
				<!-- Sons soundcloud -->
				
				<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/756061609&color=%237c7c7c&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
				<br /><br /><br />
				<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/721293118&color=%239494ac&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
				<!-- Pas postés
				<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/693288634&color=%235c8c20&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
				<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/553556880&color=%23cc8c84&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
				<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/553554600&color=%23945ca4&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
				-->	
					
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

<!-- Footer -->

	<footer class="footer">
		<div class="container">
			<div class="row footer_logo_row">
				<div class="col d-flex flex-row align-items-center justify-content-center">
					<div class="logo">
						<a href="#"><span>completement</span>duper</a>
					</div>
				</div>
			</div>
			<div class="row footer_content_row justify-content-center">

</br></br><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->

		</div>
	</footer>
</div>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="styles/bootstrap-4.1.2/popper.js"></script>
<script src="styles/bootstrap-4.1.2/bootstrap.min.js"></script>
<script src="plugins/greensock/TweenMax.min.js"></script>
<script src="plugins/greensock/TimelineMax.min.js"></script>
<script src="plugins/scrollmagic/ScrollMagic.min.js"></script>
<script src="plugins/greensock/animation.gsap.min.js"></script>
<script src="plugins/greensock/ScrollToPlugin.min.js"></script>
<script src="plugins/easing/easing.js"></script>
<script src="plugins/colorbox/jquery.colorbox-min.js"></script>
<script src="plugins/progressbar/progressbar.min.js"></script>
<script src="plugins/parallax-js-master/parallax.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
    @charset "utf-8";
/* CSS Document */

/******************************

[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
4. Menu
5. Home
6. Shows
7. Weekly
8. Shows 2
9. Footer


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Poppins:100,300,400,500,600,700,800,900');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	background: #FFFFFF;
	color: #a5a5a5;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.875;
	font-weight: 300;
	color: #929191;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 1px #ffa07f;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
p:last-of-type
{
	margin-bottom: 0;
}
a
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover
{
	color: #FFFFFF;
	background: #ffa07f;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #ff3500;
	color: #FFFFFF;
}
p::selection
{
	
}
h1{font-size: 48px;}
h2{font-size: 36px;}
h3{font-size: 24px;}
h4{font-size: 18px;}
h5{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Poppins', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
	line-height: 1.2;
}
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection
{
	
}
img
{
	max-width: 100%;
}
button:active
{
	outline: none;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.parallax-window
{
    min-height: 400px;
    background: transparent;
}
.parallax_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.background_image
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.nopadding
{
	padding: 0px !important;
}
.owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item
{
	height: 100%;
}
.slide
{
	height: 100%;
}
.button_border
{
	display: inline-block;
	height: 42px;
	border: solid 1px #FFFFFF;
	border-radius: 21px;
	background: transparent;
}
.button_border a
{
	display: block;
	position: relative;
	height: 100%;
	padding-left: 28px;
	padding-right: 31px;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 40px;
	border-radius: 21px;
}
.button_border:hover
{
	background: #FFFFFF;
}
.button_border:hover a
{
	color: #ff3500;
}
.button_fill
{
	display: inline-block;
	height: 42px;
	background: #ff3500;
	border-radius: 21px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.button_fill:hover
{
	background: #2e3038;
	box-shadow: 0px 10px 55px rgba(0,0,0,0.55);
}
.button_fill a
{
	display: block;
	width: 100%;
	height: 100%;
	padding-left: 25px;
	padding-right: 25px;
	line-height: 42px;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	text-transform: uppercase;
}

/*********************************
3. Header
*********************************/

.header
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: transparent;
	z-index: 100;
}
.header.scrolled
{
	background: rgba(0,0,0,0.63);
}
.header_content
{
	width: 100%;
	height: 86px;
}
.header.scrolled .header_content
{
	height: 70px;
}
.logo
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 33px;
	height: 51px;
	z-index: 1;
}
.logo a
{
	display: block;
	width: 100%;
	height: 100%;
	font-size: 30px;
	font-weight: 500;
	color: #FFFFFF;
}
.logo a span
{
	font-weight: 100;
	margin-right: 5px;
}
.logo a img
{
	vertical-align: top;
	margin-left: 5px;
}
.main_nav ul li:not(:last-of-type)
{
	margin-right: 40px;
}
.main_nav ul li a
{
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
}
.main_nav ul li a:hover
{
	color: #ff3000;
}
.header_right
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 27px;
}
.social ul li:not(:first-child)
{
	margin-left: 4px;
}
.social ul li
{
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: solid 1px #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.social ul li:hover
{
	border-color: #ff3000;
}
.social ul li a
{
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}
.social ul li a i
{
	font-size: 14px;
	color: #FFFFFF;
	line-height: 30px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.social ul li:hover a i
{
	color: #ff3000;
}
.submit
{
	height: 32px;
	border: solid 1px #FFFFFF;
	border-radius: 16px;
	margin-right: 19px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.submit a
{
	display: block;
	height: 100%;
	line-height: 30px;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
}
.submit:hover
{
	border-color: #ff3000;
}
.submit:hover a
{
	color: #ff3000;
}
.hamburger
{
	display: none;
	margin-left: 20px;
	cursor: pointer;
}
.hamburger i
{
	font-size: 28px;
	color: #FFFFFF;
}

/*********************************
4. Menu
*********************************/

.menu
{
	position: fixed;
	left: 0;
	top: -100vh;
	width: 100vw;
	height: 100vh;
	padding-right: 70px;
	padding-top: 200px;
	background: #1f2128;
	z-index: 99;
	-webkit-transition: all 800ms cubic-bezier(.88,.31,.65,.91);
	-moz-transition: all 800ms cubic-bezier(.88,.31,.65,.91);
	-ms-transition: all 800ms cubic-bezier(.88,.31,.65,.91);
	-o-transition: all 800ms cubic-bezier(.88,.31,.65,.91);
	transition: all 800ms cubic-bezier(.88,.31,.65,.91);
}
.menu.active
{
	top: 0;
}
.menu_content
{
	width: 100%;
	height: 100%;
}
.menu_nav_list li
{
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 800ms ease;
	-moz-transition: all 800ms ease;
	-ms-transition: all 800ms ease;
	-o-transition: all 800ms ease;
	transition: all 800ms ease;
}
.menu_nav_list li:first-child
{
	transition-delay: 400ms;
}
.menu_nav_list li:nth-child(2)
{
	transition-delay: 500ms;
}
.menu_nav_list li:nth-child(3)
{
	transition-delay: 600ms;
}
.menu_nav_list li:nth-child(4)
{
	transition-delay: 700ms;
}
.menu_nav_list li:nth-child(5)
{
	transition-delay: 800ms;
}
.menu_nav_list li:nth-child(6)
{
	transition-delay: 900ms;
}
.menu_nav_list li:nth-child(7)
{
	transition-delay: 1000ms;
}
.menu_nav_list li:nth-child(8)
{
	transition-delay: 1100ms;
}
.menu_nav_list li:nth-child(9)
{
	transition-delay: 1200ms;
}
.menu.active .menu_nav_list li
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	visibility: visible;
	opacity: 1;
}
.menu_nav_list li a
{
	position: relative;
	font-size: 40px;
	color: #FFFFFF;
	font-weight: 400;
	line-height: 1.3;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.menu_nav_list li a:hover
{
	color: #ff3500;
}
.menu_extra
{
	position: absolute;
	left: 0;
	bottom: 15px;
	width: 100%;
}
.menu_submit
{
	display: none;
	margin-bottom: 20px;
}
.menu_submit a
{
	white-space: nowrap;
	line-height: 1.1;
	font-size: 12px;
	font-weight: 400;
	color: #FFFFFF;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_submit a:hover
{
	color: #ff3500;
}
.menu .social
{
	display: none;
}
.menu .social ul li:not(:first-child)
{
	margin-left: 8px;
}

/*********************************
5. Home
*********************************/

.home
{
	height: 1969px;
}
.home_container
{
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
}
.tags ul li
{
	display: inline-block;
	height: 20px;
	background: #ff3500;
	border-radius: 3px;
	margin-bottom: 5px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.tags ul li:hover
{
	background: #2e3038;
}
.tags ul li:not(:last-of-type)
{
	margin-right: 10px;
}
.tags ul li a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 12.73px;
	line-height: 20px;
	color: #FFFFFF;
	font-weight: 500;
	padding-left: 6px;
	padding-right: 7px;
}
.home_title
{
	margin-top: 12px;
}
.home_title h1
{
	font-size: 36px;
	color: #FFFFFF;
	font-weight: 500;
}
.home_subtitle
{
	font-size: 18px;
	font-weight: 300;
	color: #FFFFFF;
	line-height: 1.5;
	margin-top: 14px;
}
.track
{
	max-height: 166px;
}
.track_home
{
	margin-top: 28px;
}
.home_button
{
	margin-top: 30px;
}
.track_info
{
	margin-top: 19px;
}
.track_info ul li a,
.track_info ul li
{
	font-size: 12px;
	color: #FFFFFF;
	font-weight: 300;
	line-height: 1.1;
}
.track_info ul li a:hover
{
	color: #ff3500;
}
.track_info ul li:not(:last-of-type)::after
{
	display: inline-block;
	content: '|';
	margin-left: 12px;
	margin-right: 12px;
}

/*********************************
6. Shows
*********************************/

.shows
{
	background: #FFFFFF;
	padding-top: 93px;
	padding-bottom: 99px;
}
.shows_row > div[class^='col']
{
	margin-bottom: 50px;
}
.show
{
	border-radius: 3px;
	overflow: hidden;
	background: #f6f6f6;
}
.show_image a
{
	display: block;
	width: 100%;
	height: 100%;
}
.show_content
{
	padding-top: 20px;
	padding-left: 31px;
	padding-bottom: 22px;
	padding-right: 30px;
}
.show_tags
{
	position: absolute;
	top: 24px;
	left: 24px;
}
.show_date a
{
	font-size: 14px;
	font-weight: 300;
	color: #2e3038;
}
.show_title
{
	margin-top: 11px;
}
.show_title a
{
	font-size: 18px;
	font-weight: 500;
	color: #2e3038;
	line-height: 1.5;
}
.show_title a:hover,
.show_date a:hover
{
	color: #ff3500;
}
.show_info
{
	margin-top: 23px;
}
.show_fav
{
	margin-left: -3px;
}
.show_fav_icon
{
	width: 26px;
	height: 26px;
	cursor: pointer;
}
.show_comments
{
	margin-left: 17px;
}
.show_comments a
{
	display: block;
}
.show_comments_icon
{
	width: 26px;
	height: 26px;
	cursor: pointer;
}
.show_info_icon svg
{
	max-width: 100%;
	max-height: 100%;
}
.svg path, .svg rect, .svg polygon
{
    fill: #7b7b7b;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}
.show_fav_icon.active .svg path,
.show_fav_icon:hover .svg path,
.show_comments:hover .svg path
{
	fill: #ff3500;
}
.show_fav_count,
.show_comments_count
{
	font-size: 14px;
	font-weight: 500;
	color: #2e3038;
	margin-left: 7px;
	margin-bottom: 2px;
}
.show_comments:hover .show_comments_count
{
	color: #ff3500;
}
.show_play_icon
{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) scale(0.85);
	-moz-transform: translate(-50%, -50%) scale(0.85);
	-ms-transform: translate(-50%, -50%) scale(0.85);
	-o-transform: translate(-50%, -50%) scale(0.85);
	transform: translate(-50%, -50%) scale(0.85);
	width: 50px;
	height: 50px;
	pointer-events: none;
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.show_image:hover .show_play_icon
{
	-webkit-transform: translate(-50%, -50%) scale(1);
	-moz-transform: translate(-50%, -50%) scale(1);
	-ms-transform: translate(-50%, -50%) scale(1);
	-o-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}

/*********************************
7. Weekly
*********************************/

.weekly
{
	padding-top: 106px;
	padding-bottom: 107px;
}
.weekly_content
{
	width: 100%;
	height: 100%;
}
.weekly_image
{
	border-radius: 3px;
	overflow: hidden;
}
.weekly_title
{
	max-width: 290px;
}
.weekly_title h1
{
	font-size: 48px;
	font-weight: 500;
	color: #FFFFFF;
}
.weekly_text
{
	margin-top: 20px;
}
.weekly_text p
{
	font-size: 16px;
	font-weight: 300;
	color: #FFFFFF;
	line-height: 1.875;
}
.shops
{
	margin-top: 40px;
}
.shops > div:not(:last-child)
{
	margin-right: 10px;
	margin-bottom: 8px;
}
.weekly_image .logo
{
	height: 75px;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.weekly_image .logo a
{
	font-size: 44.6px;
	line-height: 75px;
}
.weekly_image .logo a > div
{
	width: 24px;
	height: 24px;
}

/*********************************
8. Shows 2
*********************************/

.shows_2
{
	background: #2e3038;
	padding-top: 101px;
	padding-bottom: 89px;
}
.shows_2_title
{
	font-size: 24px;
	color: #FFFFFF;
	font-weight: 500;
}
.shows_2_row
{
	margin-top: 38px;
}
.shows_2_row > div[class^='col']
{
	margin-bottom: 30px;
}
.show_title_2
{
	position: absolute;
	left: 0;
	bottom: 0;
	padding-left: 26px;
	padding-bottom: 20px;
	padding-right: 20px;
	font-size: 18px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 1.333333;
}
.shows_2_button
{
	margin-top: 20px;
}
.shows_2_button:hover
{
	background: #FFFFFF;
}
.shows_2_button:hover a
{
	color: #ff3500;
}

/*********************************
9. Footer
*********************************/

.footer
{
	display: block;
	background: #1f2128;
	padding-top: 48px;
	padding-bottom: 48px;
}
.footer .logo
{
	position: relative;
	top: auto;
	left: auto;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
}
.footer .logo a
{
	color: rgba(255,255,255,0.3);
}
.footer_content_row
{
	margin-top: 34px;
	position:center;
}
.footer_title
{
	font-size: 24px;
	color: rgba(255,255,255,0.3);
	font-weight: 500;
	line-height: 1.2;
}
.footer_list
{
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	margin-top: 63px;
}
.footer_list > div > div
{
	display: inline-block;
	height: 20px;
	background: #ff3500;
	border-radius: 3px;
	margin-bottom: 5px;
	margin-bottom: 10px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_list  > div > div:hover
{
	background: #2e3038;
}
.footer_list  > div > div a
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 12.73px;
	line-height: 20px;
	color: #FFFFFF;
	font-weight: 500;
	padding-left: 6px;
	padding-right: 7px;
}
.latest_container
{
	margin-top: 63px;
}
.latest:not(:last-child)
{
	margin-bottom: 36px;
}
.latest_play
{
	width: 16px;
	height: 16px;
	opacity: 0.5;
	margin-top: 2px;
}
.latest_play svg
{
	max-width: 100%;
	max-height: 100%;
	vertical-align: top;
}
.latest_play svg path
{
	fill: rgba(255,255,255,0.5);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.latest_title_container:hover .latest_play svg path
{
	fill: #ff3500;
}
.latest_title_content
{
	padding-left: 11px;
}
.latest_title
{
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 1.2;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.latest_title_container:hover .latest_title
{
	color: #ff3500;
}
.latest_episode_info
{
	margin-top: 6px;
	padding-left: 27px;
}
.latest_episode_info ul li:not(:last-of-type)::after
{
	display: inline-block;
	content: '|';
	font-size: 12px;
	color: #FFFFFF;
	margin-left: 10px;
	margin-right: 10px;
}
.latest_episode_info ul li a
{
	font-size: 12px;
	font-weight: 300;
	color: #FFFFFF;
}
.latest_episode_info ul li a:hover
{
	color: #ff3500;
}
.gallery
{
	width: calc(100% + 30px);
	margin-top: 62px;
}
.gallery_item
{
	width: calc((100% - 90px) / 3);
	max-width: 98px;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 30px;
	margin-right: 30px;
}
.gallery_item::after
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	visibility: hidden;
	opacity: 0;
	content: '';
	pointer-events: none;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.gallery_item:hover::after
{
	visibility: visible;
	opacity: 1;
}
.gallery_item a
{
	display: block;
	width: 100%;
	height: 100%;
}
.footer_social_row
{
	margin-top: 50px;
}
.footer_social ul li
{
	width: 45px;
	height: 45px;
	border: solid 1px #FFFFFF;
	box-shadow: 0 0 1px 0px #FFFFFF inset, 0 0 1px 0px #FFFFFF;
	border-radius: 50%;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_social ul li:not(:last-of-type)
{
	margin-right: 7px;
}
.footer_social ul li a
{
	display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}
.footer_social ul li a i
{
	font-size: 18px;
	color: #FFFFFF;
	line-height: 43px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_social ul li:hover
{
	border-color: #ff3500;
	box-shadow: 0 0 1px 0px #ff3500 inset, 0 0 1px 0px #ff3500;
}
.footer_social ul li:hover a i
{
	color: #ff3500;
}

    Il s'agit de ce template : https://colorlib.com/wp/template/mypodcast/

    Dans tous les cas merci pour votre bienveillance, et d'avoir pris le temps de me lire, j'espère que nous trouverons une solution !

    N'hésitez pas à me demander si vous avez besoin de plus d'informations.

    Merci encore.

    -
    Edité par AbcAbc6 28 mars 2020 à 17:09:48

    • Partager sur Facebook
    • Partager sur Twitter
    AliasDmc
    • HTML / CSS
      28 mars 2020 à 17:01:31

      Bonjour saik0,

      Essayer de vider ton cache navigateur

      • Partager sur Facebook
      • Partager sur Twitter
      Découvrez les Css avec la zonecss.fr
      AbcAbc6
        28 mars 2020 à 17:11:15

        Bonjour, j'ai modifié le titre de votre sujet, en effet les titre avec "problème" ne sont pas toléré.

        Liens conseillés

        • Partager sur Facebook
        • Partager sur Twitter
        saik0
          28 mars 2020 à 17:17:25

          Bonjour, merci pour votre réponse, et désolé pour le titre !

          J'ai vidé le cache, toujours le même problème...

          • Partager sur Facebook
          • Partager sur Twitter

          affichage page d'accueil (zoom)

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown