Webleb - UI Elements - Güvenli bir pastel dizin ile yapılmış kart dizini

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>

Güvenli bir pastel dizin ile yapılmış kart dizini

Recommended

product

Animated lamp

Advanced login screen

HTML

CSS

JS

Recommended

product

Animated lamp

Advanced login screen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS