Un codice di efficientcloud646

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

4 January 2025

Esempio di codice HTML della pagina di accesso turca

29 May 2025

<!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 codice di efficientcloud646

Consigliato

Un ciclo quadratico con CSS

Esempio di codice HTML della pagina di accesso turca

Un codice di Mete

HTML

CSS

JS

Consigliato

Un ciclo quadratico con CSS

Esempio di codice HTML della pagina di accesso turca

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS