Webleb - Snippet di Codice - Schedario realizzato con un indice pastello sicuro

HTML

<!DOCTYPE html>

<head>

<title>Basit Glassmorphism Kartlar</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Arial', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #0c0513;

overflow-x: hidden;

}

.container {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 30px;

padding: 40px 20px;

}

.box {

position: relative;

width: 300px;

height: 400px;

background: rgba(255, 255, 255, 0.1);

border-radius: 20px;

display: flex;

justify-content: center;

align-items: center;

backdrop-filter: blur(5px);

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);

border: 1px solid rgba(255, 255, 255, 0.1);

transition: transform 0.5s;

}

.box:hover {

transform: translateY(-20px);

}

.box::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1));

transform: skewX(45deg) translateX(0);

transition: 0.5s;

border-radius: 20px;

}

.box:hover::before {

transform: skewX(45deg) translateX(200%);

}

.box:nth-child(1) {

background: linear-gradient(45deg, rgba(255, 0, 90, 0.1), rgba(255, 140, 0, 0.1));

border: 1px solid rgba(255, 140, 0, 0.3);

}

.box:nth-child(2) {

background: linear-gradient(45deg, rgba(0, 180, 255, 0.1), rgba(140, 0, 255, 0.1));

border: 1px solid rgba(140, 0, 255, 0.3);

}

.box:nth-child(3) {

background: linear-gradient(45deg, rgba(0, 255, 100, 0.1), rgba(0, 180, 255, 0.1));

border: 1px solid rgba(0, 180, 255, 0.3);

}

.content {

padding: 30px;

color: #fff;

text-align: center;

}

.content h2 {

font-size: 1.8em;

margin-bottom: 15px;

}

.content p {

font-size: 1em;

margin-bottom: 20px;

line-height: 1.4em;

}

.content a {

display: inline-block;

padding: 10px 20px;

background: rgba(255, 255, 255, 0.2);

color: #fff;

text-decoration: none;

border-radius: 20px;

font-weight: 500;

margin-top: 10px;

border: 1px solid rgba(255, 255, 255, 0.3);

transition: 0.5s;

}

.content a:hover {

background: #fff;

color: #000;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#">Daha Fazla</a>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#">Daha Fazla</a>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<a href="#">Daha Fazla</a>

</div>

</body>

</html>

Schedario realizzato con un indice pastello sicuro

Consigliato

Un codice di mironovbogdan341

Caricamento file in ingresso con icona SVG

HTML

CSS

JS

Consigliato

Un codice di mironovbogdan341

Caricamento file in ingresso con icona SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS