Un code par efficientcloud646

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 June 2025

Cartes mobiles CodePen Home Outlined

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<body>
  
 		<div class="section">
			<ul class="case-study-wrapper">
				<li class="case-study-name">                            	
					<a href="#" class="hover-target">King</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">Rapper</a>
				</li>
				<li class="case-study-name">                                        	
					<a href="#" class="hover-target">Roman warrior</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">Samurai</a>
				</li>
			</ul>
			<ul class="case-study-images">
				<li>
					<div class="img-hero-background"></div> 
					<div class="dark-over-hero"></div>  
					<div class="hero-number-back">01</div> 
					<div class="hero-number">01</div> 
					<div class="hero-number-fixed">04</div> 
				</li>
				<li>
					<div class="img-hero-background"></div> 
					<div class="hero-number-back">02</div> 
					<div class="hero-number">02</div>  
				</li>
				<li>
					<div class="img-hero-background"></div>
					<div class="hero-number-back">03</div>  
					<div class="hero-number">03</div> 
				</li>
				<li>
					<div class="img-hero-background"></div> 
					<div class="hero-number-back">04</div> 
					<div class="hero-number">04</div> 
				</li>
			</ul>	
		</div>

</body>
  <script src='https://code.jquery.com/jquery-2.2.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');

body{
	width: 100%;
  height: 100vh;
  background: #000;
	overflow: hidden;
}

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: #585858;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
	background-color: #212121;
}

.case-study-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: auto;
	margin: 0;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	list-style: none;
}
.case-study-wrapper .case-study-name a {
	position: relative;
	list-style: none;
	margin: 0;
	display: block;
	text-align: center;
	padding: 0;
	font-size: 28px;
	margin-top: 25px;
	margin-bottom: 25px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 2px;
	color: #ffffff;
	opacity: 0.5;
	text-decoration: none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-wrapper .case-study-name a:hover {
	text-decoration: none;
}	
.case-study-wrapper .case-study-name.active a {
	opacity: 1;
	color: #ffffff;
}	
.case-study-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0;
	z-index:2;
}	
.case-study-images li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-images li .img-hero-background{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:center center;
	background-repeat:no-repeat;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	opacity: 0;
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .img-hero-background {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li .case-study-title{
	position: absolute;
	bottom: 30px;
	left: 30px;
	display: block;
	opacity: 0;
	color: #fff;
	z-index: 19;
	letter-spacing: 1px;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	font-weight: 400;
	line-height: 16px;
	color: #fff; 
	font-style: italic;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .case-study-title {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
} 
.case-study-images li .hero-number-back{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	list-style:none;
	opacity: 0;
	font-size: 18vw;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	line-height: 1;
	color: rgba(0, 0, 0, 0.366);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number{
	position: absolute;
	bottom: 40px;
	left: 50%;
	width: 40px;
	margin-left: -70px;
	display: block;
	letter-spacing: 2px;
	text-align: center;
	list-style:none;
	opacity: 0;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number-fixed{
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: 30px;
	width: 40px;
	text-align: center;
	display: block;
	letter-spacing: 2px;
	list-style:none;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
}
.case-study-images li .hero-number-fixed:before{
	position: absolute;
	content: '';
	top: 50%;
	left: -60px;
	width: 60px;
	height: 1px;
	z-index: 1;
	background-color: rgba(255,255,255,.4);
}
.case-study-images li.show .hero-number {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li.show .hero-number-back {
	opacity: 1;
} 
.dark-over-hero{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:5;
	background-color: #050505;
	opacity: 0.2;
}
.case-study-images li:nth-child(1) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273889733512138794.jpeg");
}
.case-study-images li:nth-child(2) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.43,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886577881518090.jpeg");
}
.case-study-images li:nth-child(3) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273890280768274555.jpeg");
}
.case-study-images li:nth-child(4) .img-hero-background{
	background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.5,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886781967958066.jpeg");
}

@media (max-width: 991px) { 
	.case-study-images li .hero-number-back{
		font-size: 26vw;
	} 
}

@media (max-width: 767px) {	
	.case-study-wrapper .case-study-name a {
		font-size: 20px;
		letter-spacing: 1px;
	}
	.case-study-images li .hero-number-back{
		font-size: 32vw;
	} 
}

JS

(function($) { "use strict";

})(jQuery);

Un code par efficientcloud646

Recommandé

Un code par alejandrokundrah

Un code par sofiane.blida09

Cartes mobiles CodePen Home Outlined

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Un code par sofiane.blida09

Cartes mobiles CodePen Home Outlined

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS