Ficha elaborada con un índice pastel seguro

1396 Metehan

Abrir en el editor Video Publica tu código

Ficha elaborada con un índice pastel seguro

Recomendado

12 January 2026

Juego Friday Night Funkin' Impostor Mod HTML5

2 January 2026

tormenta galáctica

14 January 2025

Ejemplo de página web de portafolio

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>

Ficha elaborada con un índice pastel seguro

Recomendado

Juego Friday Night Funkin' Impostor Mod HTML5

tormenta galáctica

Ejemplo de página web de portafolio

HTML

CSS

JS

Recomendado

Juego Friday Night Funkin' Impostor Mod HTML5

tormenta galáctica

Ejemplo de página web de portafolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS