UniTusk-AI Prompt Library

<h1 Style="text-align: center;">KgNoble Rotating 3D Slider</h1>

<section id="slideshow">
                        <div class="entire-content">
                                <div class="content-carrousel">
                                <figure class="shadow"><img src="https://unitusk-ai.com/Assets/CodeAbacus.gif"/></figure>
                                <figure class="shadow"><img src="https://i.ndtvimg.com/mt/2014-08/GSBmandal_ganeshaidol_mumbai_mid-day_650_1.jpg"/></figure>
                                <figure class="shadow"><img src="https://kidlingoo.com/wp-content/uploads/flowers_name_in_english-980x510.jpg.webp"/></figure>
                                <figure class="shadow"><img src="https://hexaware.com/wp-content/uploads/2021/08/ES_low_code_no_Code_1920x1080.jpg"/></figure>
                                <figure class="shadow"><img src="https://kidlingoo.com/wp-content/uploads/kanakambaram-in-english-marigold.jpg"/></figure>
                                <figure class="shadow"><img src="https://kidlingoo.com/wp-content/uploads/sampangi-english-name-magnolia.jpg.webp"/></figure>
                                <figure class="shadow"><img src="https://kidlingoo.com/wp-content/uploads/samanthi-poo-in-english-chrysanthemum.jpg"/></figure>
                                <figure class="shadow"><img src="https://kidlingoo.com/wp-content/uploads/mogra-in-english-jasmine.jpg.webp"/></figure>
                                <figure class="shadow"><img src="https://images.pexels.com/photos/933054/pexels-photo-933054.jpeg"/></figure>
                </div>
        </div>
</section>
<style>
/* 3D Slideshow */ 
* {
        margin: 0;
        padding: 0;
}

html, body {
        max-width: 100%;
        1overflow-x: hidden;
        1overflow-y: hidden;
        background-color: #6adecd;
}

#slideshow {
        margin: 0 auto;
        padding-top: 50px;
        height: 600px;
        width: 100%;
        background-color: #6adecd;
        box-sizing: border-box;
}

.slideshow-title {
        font-family: 'Allerta Stencil';
        font-size: 62px;
        color: #fff;
        margin: 0 auto;
        text-align: center;
        margin-top: 25%;
        letter-spacing: 3px;
        font-weight: 300;
}

.sub-heading {
        padding-top: 50px;
        font-size: 18px;
} .sub-heading-two {
        font-size: 15px;
} .sub-heading-three {
        font-size: 13px;
} .sub-heading-four {
        font-size: 11px;
} .sub-heading-five {
        font-size: 9px;
} .sub-heading-six {
        font-size: 7px;
} .sub-heading-seven {
        font-size: 5px;
} .sub-heading-eight {
        font-size: 3px;
} .sub-heading-nine {
        font-size: 1px;
}

.entire-content {
        margin: auto;
        width: 190px;
        perspective: 1000px;
        position: relative;
        padding-top: 80px;
}

.content-carrousel {
        width: 100%;
        position: absolute;
        float: right;
        animation: rotar 15s infinite linear;
        transform-style: preserve-3d;
}

.content-carrousel:hover {
        animation-play-state: paused;
        cursor: pointer;
}

.content-carrousel figure {
        width: 100%;
        height: 120px;
        border: 1px solid #3b444b;
        overflow: hidden;
        position: absolute;
}

.content-carrousel figure:nth-child(1) {
        transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
        transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
        transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
        transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
        transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
        transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
        transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
        transform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
        transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
        transform: rotateY(360deg) translateZ(300px); 
}

.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}

.content-carrousel img {
        image-rendering: auto;
        transition: all 300ms;
        width: 100%;
        height: 100%;
}

.content-carrousel img:hover {
        transform: scale(1.2);
        transition: all 300ms;
}

@keyframes rotar {
        from {
                transform: rotateY(0deg);
        } to {
                transform: rotateY(360deg);
        }
}
</style>

<h1>My Name is Vinayak2228</h1>
<h2>I am studying in 7th Standard</h2>
<p class="intro">Vidyodaya School Davanagere</p>
<div class="frame">
   <p class="custom-eft eft1">Ganesh!</p>
  <p class="custom-eft eft2">Ganesh!</p>
  <p class="custom-eft eft3">Ganesh!</p>
   <p class="custom-eft eft4">Ganesh!</p>
   <p class="custom-eft eft5">Ganesh!</p>
  <p class="custom-eft eft6">Ganesh!</p>
  <p class="custom-eft eft7">Ganesh!</p>
  <p class="custom-eft eft8"Ganesh!</p>
  <p class="custom-eft eft9">Ganesh!</p>
  <p class="custom-eft eft10">Ganesh!</p>
  <p class="custom-eft eft11">Ganesh!</p>
  <p class="custom-eft eft12"><span>Ganesh!</span></p>
  <p class="logo">
    Designed by Ganesh </p>
</div>
  
      <script id="rendered-js" >
$(".eft2").children().addBack().contents().each(function () {
  if (this.nodeType == 3) {
    var $this = $(this);
    $this.replaceWith($this.text().replace(/(\S)/g, "<span>$&</span>"));
  }
});
//# sourceURL=pen.js
    </script>

h2 {
  position: relative;
  text-align: center;
  color: #353535;
  font-family: serif;
  font-size: 30px;
  margin: 0;
}

p {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-align: center;
  color: #676767;
}
.intro{
  margin-bottom: 0;
}

.frame {
  width: 90%;
  margin: auto 40px;
  text-align: center;
}

.custom-eft {
  padding: 0 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-block;
  outline: none;
  font-size: 2em;
}

.eft1{
  color: transparent;
        -webkit-text-stroke: 0.03em rgba(0,0,0,1);
   text-shadow: -5px 0 rgba(0, 255, 255, 0.4), 5px 0 rgba(255, 0, 255, 0.4);
}

.eft2{
  font-family: 'Oswald';
  color: #fff;
        background: #ff1f8f;
  border-radius: 3em .5em 2em .5em/.4em 2em .5em 3em;
}
span:nth-child(1) { color: blue; }
span:nth-child(2) { color: white; background-color: red; font-size: 120%; }
span:nth-child(3) { color: green; }
span:nth-child(4) { color: #fff; text-decoration: underline; }
span:nth-child(5) { color: pink; font-style: italic; }
span:nth-child(6) { color: skyblue; font-style: italic; }
span:nth-child(7) { color: yellowgreen; text-decoration: underline; }
span:nth-child(8) { color: orange; text-decoration: underline; }
span:nth-child(9) { color: white; background-color: purple; font-size: 150%; border-radius: 15px; padding: 3px; }
span:nth-child(10) { color: navy; }

.eft3{
  color: #ff1f8f;
        -webkit-text-stroke: 0.05em rgba(0,0,0,1);
}

.eft4{
  color: transparent;
  background: linear-gradient( 0deg, #000 0% 50% , #ff1f8f 50% 100%);
        -webkit-background-clip: text;
}

.eft5{
        filter: saturate(80%);
        -webkit-background-clip: text;
        -webkit-box-reflect: below -0.25em -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .6)), to(transparent));
  color:#ff1f8f;
font-weight: bold;
text-shadow: -1px -1px #f9abd1,
  1px 1px #bd1468;
}

.eft6{
  color: transparent;
        background: repeating-linear-gradient( -45deg, #ff1f8f 0% 50%, #000 50%
                 100% );
        -webkit-background-clip: text;
}

.eft7{
  color: #ff1f8f;
        background: yellow;
        text-shadow : 
                0 0 0.1em rgba(0,0,0,1),
                0.01em 0.04em 0.03em rgba(0,0,0,1);
        -webkit-background-clip : text;
  text-decoration: line-through;
}

.eft8{
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  text-shadow: 
                                                4px 4px #ff1f8f,
                                                8px 8px #000000;
}

.eft9{
  background: #ff1f8f;
  color: #fff;
  text-shadow: 
                0 0.05em 0.08em rgba(0,0,0,0.7);
}

.eft10{
  color: #ff1f8f;
        text-shadow: 
                0.04em 0.02em 0 #B0BEC5, 
                0.08em 0.05em 0 rgba(0, 0, 0, 0.6);
}

.eft11{
  color: #000;
   text-shadow: -2px 0 0 #ff1f8f,  2px 0 0 #00FFFF;
}

.eft12 {
  position: relative;
}

.eft12:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: #000;
  bottom: 9px;
}
 .eft12 span{
  cursor: pointer;
  position: relative;
  display: inline-block;
  background: linear-gradient(to bottom, #000, #000 50%, #ff1f8f 50%, #ff1f8f 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-repeat: no-repeat;
  white-space: nowrap;
}

.logo{
  font-family: Andale Mono, monospace;
}
</style>

</head>