search

khurt212 / MoneyGrinder69

0 stars 0 forks source link

Practice for CSS and HTML #5

Open khurt212 opened 1 month ago

khurt212 commented 1 month ago

3d preview work

khurt212 commented 1 month ago

<!DOCTYPE html>

3D Project
khurt212 commented 1 month ago

@import url('https://fonts.cdnfonts.com/css/ica-rubrik-black'); @import url('https://fonts.cdnfonts.com/css/poppins');

.banner{ width: 100%; height: 100vh; text-align: center; overflow: scroll; position: relative; } .banner .slider { position: absolute; width: 150px; height: 250px; top: 10%; left: calc(50% - 100px); transform-style: preserve-3d; transform:perspective(1000px); animation: autoRun 60s linear infinite; z-index: 2;

} @keyframes autoRun { from{ transform: perspective(1000px) rotateX(-16deg) rotateY(0deg); } to { transform: perspective(1000px) rotateX(-16deg) rotateY(360deg); }

} .banner .slider .item{ position: absolute; inset: 0 0 0 0; transform: rotateY(calc( (var(--position) - 1) (360 / var(--quantity)) 1deg)) translateZ(550px);

} .banner .slider .item img{ width: 100%; height: 100%; object-fit: cover; } .banner .content{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(1400px, 100vw); height: max-content; padding-bottom: 100px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 1; }

.banner .content h1{ font-family: 'ICA Rubrik'; font-size: 10em; line-height: 1em; color: #25283B; position: relative; }

.banner .content .author .h1::after{ position: absolute; inset: 0 0 0 0; content: attr(data-content); z-index: 2;

}

.banner .content .model{ background-image: url(images/model.png); width: 100%; height: 75vh; position: absolute; bottom: 0; left: 0; background-size: auto 130%; background-repeat: no-repeat; background-position:top center; z-index: 1;

}

khurt212 commented 1 month ago

![Uploading bg.png…]()