student notes / est. for the classroom

HTML, CSS, JavaScript, Python, data science, computer networks — written the way you'd explain it to a classmate, not a compiler.

Top Job & Internship Portals

Handpicked portals for fresher jobs, tech roles, and listings in Hyderabad

GFG

GeeksforGeeks

Tech & Software Roles

Visit →
INT

Internshala

Fresher Jobs & Internships

Visit →
GOOG

Google Careers

Global Google Openings

Visit →
APN

Apna Jobs

Local Jobs in Hyderabad

Visit →
INS

Instahyre

Tech Roles in Hyderabad

Visit →
NAUK

Naukri.com

Fresher Jobs in Hyderabad

Visit →
📢 Updated daily

Internship & Job Alerts

01

Latest notes

March 05, 2025

CSS effects

Program 1 

Hover effect


<!DOCTYPE html>
<html lang="en" >
<head>
  <style>
    .gallery {
  --g: 8px; /* the gap */
 
  display: grid;
  clip-path: inset(1px); /* to avoid visual glitchs */
}
.gallery > img {
  --_p: calc(-1*var(--g));
  grid-area: 1/1;
  width: 350px; /* control the size */
  aspect-ratio: 1;
  cursor: pointer;
  transition: .4s .1s;
}
.gallery > img:first-child {
  clip-path: polygon(0 0, calc(100% + var(--_p)) 0 , 0 calc(100% + var(--_p)))
}
.gallery > img:last-child {
  clip-path: polygon(100% 100%, 100% calc(0% - var(--_p)), calc(0% - var(--_p)) 100%)
}
.gallery:hover > img:last-child,
.gallery:hover > img:first-child:hover{
  --_p: calc(50% - var(--g));
}
.gallery:hover > img:first-child,
.gallery:hover > img:first-child:hover + img{
  --_p: calc(-50% - var(--g));
}




body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #3FB8AF;
}
    </style>
  <meta charset="UTF-8">
  <title>CodePen - Dual image with hover effect</title>
 
</head>
<body>
<!-- partial:index.partial.html -->
<div class="gallery">
  <img src="w1.jpg" alt="a wolf">
  <img src="l1.jpg" alt="a lioness">
</div>
<!-- partial -->
 
</body>
</html>




 

SCAN this QR code to connect with git hub projects


Program 2

Team profile hover effect


<html>
  <head>
    <style>
      body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
  }
 
  .section-heading {
    font-family: "Dancing Script", cursive;
    text-align: center;
    font-size: 64px;
    color: #10996d;
    margin: 0 0 70px;
  }
 
  .container {
    display: flex;
    justify-content: center;
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
  }
 
  .profile {
    position: relative;
    transition: all 0.3s;
  }
 
  .profile:hover {
    transform: translateY(25px);
  }
 
  .profile img {
    max-width: 100%;
    border-radius: 50%;
    border: 5px solid #f7f7f7;
    filter: drop-shadow(-20px 0 10px rgba(0, 0, 0, 0.1));
    cursor: pointer;
  }

  .profile:not(:first-child) img {
    margin-left: -20px;
  }
 
  .profile .name {
    position: absolute;
    background-color: #10996d;
    color: #fff;
    font-family: "Bebas Neue", cursive;
    padding: 15px 30px;
    border-radius: 100px;
    bottom: -80px; left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50px);
    letter-spacing: 1px;
    font-size: 20px;
    opacity: 0;
    transition: all 0.3s;
  }
 
  .profile .name::before {
    content: "";
    position: absolute;
    width: 15px; height: 15px;
    background-color: #10996d;
    top: 0; left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
 
  .profile img:hover + .name {
    opacity: 1;
    transform: translateX(-50%);
    box-shadow: 0 10px 20px rgba(86, 86, 198, 0.3);
  }
      </style>
      </head>
   <body>
   <!-- Embedding Fonts from google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Dancing+Script:wght@700&display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="style.css" />
    <section class="team">
      <h2 class="section-heading">Our Team</h2>
      <div class="container">
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt=""/><span class="name">Kalyan</span>
        </div>
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1530577197743-7adf14294584?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80" alt=""/><span class="name">Suchitra Tiwari</span>
        </div>
   
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1598641795816-a84ac9eac40c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=801&q=80" alt=""/><span class="name">Sajid Ghani</span>
        </div>
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1484186139897-d5fc6b908812?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt=""/><span class="name">Dhriti</span>
        </div>
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1618018352910-72bdafdc82a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt=""/><span class="name">Milind</span>
        </div>
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=801&q=80" alt=""/><span class="name">Srikant Tiwari</span>
        </div>
        <div class="profile">
          <img src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=812&q=80" alt=""/><span class="name">Major Sameer</span>
        </div>
      </div>
    </section>
</body>
</html>



Program 3

Cool frame hover effect

<html>
  <head>
    <style>
     /* number of rows/columns */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, auto);
  position: relative;
  cursor: pointer;
}

.gallery > img,
.gallery::after {
  width: 180px;
  /* control the size */
  aspect-ratio: 1;
  object-fit: cover;
}

.gallery::after {
  content: "";
  position: absolute;
  outline: 10px solid #FF6B6B;
  box-shadow: 0 0 0 200vmax #000a;
  transform: translate(-50vw, 100%);
  transition: 0.4s cubic-bezier(0.5, -0.45, 0.5, 1.45);
  pointer-events: none;
}

.gallery:has(img:nth-of-type(1):hover)::after {
  transform: translate(0%, 0%);
}

.gallery:has(img:nth-of-type(2):hover)::after {
  transform: translate(100%, 0%);
}

.gallery:has(img:nth-of-type(3):hover)::after {
  transform: translate(200%, 0%);
}

.gallery:has(img:nth-of-type(4):hover)::after {
  transform: translate(0%, 100%);
}

.gallery:has(img:nth-of-type(5):hover)::after {
  transform: translate(100%, 100%);
}

.gallery:has(img:nth-of-type(6):hover)::after {
  transform: translate(200%, 100%);
}

.gallery:has(img:nth-of-type(7):hover)::after {
  transform: translate(0%, 200%);
}

.gallery:has(img:nth-of-type(8):hover)::after {
  transform: translate(100%, 200%);
}

.gallery:has(img:nth-of-type(9):hover)::after {
  transform: translate(200%, 200%);
}

.gallery:has(img:nth-of-type(odd):hover)::after {
  outline-color: #C7F464;
}

/* for people that will scream  ":has() is not supported everywhere !!" */
@supports not (selector(:has(*))) {
  .gallery::after {
    display: none;
  }

  .gallery > img {
    filter: grayscale(80%);
    transition: 0.3s;
    outline: 10px solid #0000;
  }

  .gallery > img:hover {
    filter: grayscale(0%);
    outline-color: #FF6B6B;
    z-index: 1;
  }

  .gallery > img:nth-child(odd):hover {
    outline-color: #C7F464;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #556270;
}
      </style>
</head>
<body>
<div class="gallery">
  <img src="https://picsum.photos/id/1028/300/300" alt="a forest after an apocalypse">
  <img src="https://picsum.photos/id/15/300/300" alt="a waterfall and many rocks">
  <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain">
  <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers">
  <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees">
  <img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky">
  <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape">
  <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings">
  <img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain">
</div>
</body>
</html>












CSS scrolling effect


<html>
    <head>
        <style>
@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
    box-sizing: border-box;
}

html {
    scroll-snap-type: y mandatory;
}

body {
    min-height: 100vh;
    font-family:  "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
    font-weight: 80;
    background: black;
    color: hsl(0 0% 90%);
    overflow-x: hidden;
}

p {
    max-width: 40ch;
}

section:nth-of-type(1) {
    scroll-snap-align: center;
    height: 100vh;
}

section:nth-of-type(2) {
    scroll-snap-align: start;
}

article {
    min-height: 100vh;
}
:is(h1, h2) {
    font-weight: 70;
    font-size: clamp(2.5rem, 3.35vw + 1rem, 8rem);
    letter-spacing: -0.075ch;
    margin: 0;
}

h1 {
    color: hsl(0 0% 90%);
}

:is(section, article) {
    position: relative;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem;
    z-index: 999;
    display: flex;
    justify-content: space-between;
}
a:first-of-type {
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: white;
}
a:last-of-type {
    background: hsl(173 100% 51%);
    color: black;
    padding: 1rem 2rem;
    border-radius: 22px;
    text-decoration: none;
    font-weight: 120;
    transition: background 0.2s;
}
a:last-of-type:is(:hover, :focus-visible) {
    background: hsl(173 100% 40%);
}

.content {
    margin: 0 auto;
    width: 900px;
    max-width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    inset: 0;
  padding: 1rem;
}

.fixed img {
    height: 100%;
    width: 150%;
    object-fit: cover;
    z-index: -1;
    position: absolute;
    inset: 0;
    left: 50%;
    translate: -50% 0;
    filter: brightness(0.5);
}

section:first-of-type img {
    left: 50%;
    translate: -50% 0;
}

section:first-of-type {
    padding: 2rem 1rem;
    display: grid;
    align-content: end;
    justify-content: start;
}

section:first-of-type .fixed {
    z-index: 5;
}

section:first-of-type .fixed .content {
    margin: 0 auto;
    width: 900px;
    max-width: 100%;
    display: grid;
    align-content: center;
    justify-content: start;
    padding: 6rem 2rem;
    height: 100%;
}

section:first-of-type {
    background: black;
}

section:first-of-type p {
    font-size: clamp(1rem, 0.2vw + 1rem, 2rem);
}

section:nth-of-type(2) article:first-of-type .fixed {
    z-index: 2;
}

section:nth-of-type(2) .content {
    display: grid;
    padding: 4rem 1rem;
    align-content: center;
}

section:nth-of-type(2) article:first-of-type .content {
    align-content: end;
}

section:nth-of-type(2) article:first-of-type .fixed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: hsl(0 0% 0% / 0.25);
}

section:nth-of-type(2) article:first-of-type h2 {
    padding: 1rem 0;
}

section:nth-of-type(2) article:nth-of-type(2) .fixed {
    background: black;
    z-index: 2;
}

section:nth-of-type(2) article:nth-of-type(3) .content {
    align-content: start;
}

section:nth-of-type(2) article:nth-of-type(3) .fixed {
    z-index: 2;
}

section:nth-of-type(2) article:nth-of-type(3) img {
    filter: saturate(0.5) brightness(0.5);
}

.text-blocks {
    max-width: 100%;
    width: 40ch;
    justify-self: end;
    display: grid;
    place-items: center;
    gap: 2rem 0;
}

/* Text block styling */
.chat-container {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
}
.text-blocks p {
    display: inline-block;
    border-radius: 6px;
    margin: 0;
    font-size: clamp(1.5rem, 0.5vw + 1rem, 4rem);
    font-weight: 120;
}
.text-blocks p:nth-of-type(even) {
    justify-self: end;
    text-align: right;
    color: hsl(173 100% 51%);
}
.text-blocks p:nth-of-type(odd) {
    justify-self: start;
}

.filler {
    display: none;
}


@supports (animation-timeline: scroll()) {
  @media(prefers-reduced-motion: no-preference) {
    article {
      view-timeline: --article;
    }

    .fixed {
      position: fixed;
      inset: 0;
    }
    .static {
      position: absolute;
      inset: 0;
      z-index: 6;
    }
    .filler {
      display: block;
      width: 100%;
      position: absolute;
      bottom: 30vh;
      padding: 1rem;
    }

    .text-blocks p {
      animation: slide-in, fade-in;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --article;
    }

    .text-blocks p:nth-of-type(1) { animation-range: entry-crossing 50% entry-crossing 55%; }
    .text-blocks p:nth-of-type(2) { animation-range: entry-crossing 55% entry-crossing 60%; }
    .text-blocks p:nth-of-type(3) { animation-range: entry-crossing 60% entry-crossing 65%; }
    .text-blocks p:nth-of-type(4) { animation-range: entry-crossing 65% entry-crossing 70%; }
    .text-blocks p:nth-of-type(5) { animation-range: entry-crossing 70% entry-crossing 75%; }

    section:nth-of-type(2) article:last-of-type {
      z-index: 5;
    }
    section:nth-of-type(2) article:nth-of-type(3) {
      height: 400vh;
    }
    section:nth-of-type(2) article:nth-of-type(3) h2 {
      margin-top: 80vh;
    }
    section:nth-of-type(2) article:last-of-type .fixed {
      clip-path: ellipse(220% 200% at 50% 300%);
      animation: unclip both linear;
      animation-timeline: --article;
      animation-range: entry 20% entry 80%;
    }
    .filler h2 {
      animation: fade-away, fade-out;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --article;
      animation-range: exit 40% exit 75%, exit 70% exit 90%;
    }
    .loud-wrap {
      clip-path: inset(0 0 0 0);
      animation: unmask both linear;
      animation-timeline: --article;
      animation-range: entry 20% entry 80%;
      mask: linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat;
    }
    .text-wrap {
      position: sticky;
      bottom: 4rem;
      transform-origin: 50% 0;
      animation: fade-away both linear, fade-out both linear;
      animation-timeline: --article;
      animation-range: exit 40% exit 75%, exit 70% exit 100%;
    }
    .text-blocks {
      animation: fade-out both linear;
      animation-timeline: --article;
      animation-range: entry-crossing 75% entry-crossing 100%;
    }
    section:nth-of-type(2) article:nth-of-type(3) .fixed {
      animation: fade-in both linear, fade-out both linear;
      animation-timeline: --article, --article;
      animation-range: entry 45% exit-crossing 0%, exit 0% exit 15%;
    }

    section:nth-of-type(2) article:nth-of-type(2) .fixed {
      animation: fade-in;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: --article;
      animation-range: entry 60% exit 30%;
    }
    section:nth-of-type(2) article:nth-of-type(2) h2 {
      animation: slide-in, fade-in, fade-away, fade-out;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view(), view(), --article, --article;
      animation-range: entry 100% cover 25%, entry 100% cover 35%, exit 20% exit 40%, exit 40% exit 50%;
    }
    section:nth-of-type(2) article:first-of-type h2 {
      animation: slide-up both linear;
      animation-timeline: --article;
      animation-range: entry 20% entry 80%;
    }
    section:nth-of-type(2) article:first-of-type img {
      animation: scale-down both linear;
      animation-timeline: --article;
      animation-range: entry;
    }
    section:nth-of-type(2) article:first-of-type .fixed {
      clip-path: ellipse(220% 200% at 50% 300%);
      animation: unclip both linear;
      animation-timeline: --article;
      animation-range: entry 0 entry 100%;
    }
    section:first-of-type {
      view-timeline: --section;
    }
    section:first-of-type .fixed {
      animation: scale-and-move both linear, fade-out both linear;
      animation-timeline: --section;
      animation-range: exit 0% exit 50%, exit 0% exit 25%;
      transform-origin: 50% 0;
    }
    /* Keyframes collection */
    @keyframes slide-in {
      0% {
        translate: 0 100%;
      }
    }

    @keyframes fade-in {
      0% {
        opacity: 0;
      }
    }
    @keyframes slide-up {
      0% {
        translate: 0 100%;
      }
    }
    @keyframes fade-away {
      to {
        filter: blur(4rem);
      }
    }
    @keyframes unmask {
      to {
        mask-position: 0 0;
      }
    }
    @keyframes scale-down {
      0% {
        scale: 5;
      }
    }
    @keyframes unclip {
      to { clip-path: ellipse(220% 200% at 50% 175%); }
    }
    @keyframes fade-out {
      to { opacity: 0; }
    }
    @keyframes scale-and-move {
      to {
        translate: 0 -10%;
        scale: 0.35 0.5;
      }
    }
  }
}
            </style>
</head>
<body>

<nav>
    <a href="https://jhey.dev/links" target="_blank">
      <svg class="w-9" viewBox="0 0 969 955" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="161.191" cy="320.191" r="133.191" stroke="currentColor" stroke-width="20"></circle>
        <circle cx="806.809" cy="320.191" r="133.191" stroke="currentColor" stroke-width="20"></circle>
        <circle cx="695.019" cy="587.733" r="31.4016" fill="currentColor"></circle>
        <circle cx="272.981" cy="587.733" r="31.4016" fill="currentColor"></circle>
        <path d="M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z" fill="currentColor"></path>
        <rect x="310.42" y="448.31" width="343.468" height="51.4986" fill="#FF1E1E"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z" fill="currentColor"></path>
      </svg>
    </a>
    <a href="https://twitter.com/intent/follow?screen_name=jh3yy">Follow 𝕏</a>
  </nav>
  <main>
    <section>
      <div class="fixed">
        <img src="https://fastly.picsum.photos/id/310/1920/1080.jpg?hmac=HDJM8ptvuyfahXPE6mcsYhG1XGE1mUb2oaa4hlFZ0yg" alt="">
        <div class="content">
          <h1>Scroll and see.</h1>
          <p>The magic of CSS scroll-driven animation to power a landing page. No JavaScript harmed. Animation runs off the main thread. Chain them and make use of fixed elements.</p>
        </div>
      </div>
    </section>
    <section>
      <article>
        <div class="fixed">
          <img src="https://fastly.picsum.photos/id/846/1920/1080.jpg?hmac=rx55XDjKPLjmW5WdHBRqOphU4wZkLT5W3TC_WBdvyVY" alt="">
        </div>
        <div class="static">
          <div class="content">
            <div class="text-wrap">
              <div class="loud-wrap">
                <h2>Think out loud.</h2>
              </div>
            </div>
          </div>
        </div>
      </article>
      <article>
        <div class="fixed"></div>
        <div class="static">
          <div class="content">
            <h2>Do stuff with code.<br />Mess about and find out.</h2>
          </div>
        </div>
      </article>
      <article>
        <div class="fixed">
          <img src="https://fastly.picsum.photos/id/985/1920/1080.jpg?hmac=dLb_5lBJW4AZhZDUXweY5WlrnscpKLtCKffaqSrF9Vw" alt="">
        </div>
        <div class="static">
          <div class="content">
            <h2>Make cool stuff.</h2>
            <div class="chat-container">
              <div class="text-blocks">
                <p>How can I do this?</p>
                <p>With CSS scroll-driven animations. You don't need any JavaScript.</p>
                <p>Any advice?</p>
                <p>Just one thing... Make it pop!</p>
                <p>Thanks Jhey.</p>
              </div>
            </div>
            <div class="filler">
              <h2>Pretty cool.</h2>
            </div>
          </div>
        </div>
      </article>
      <article>
        <!-- <div class="fixed">
              <img src="https://fastly.picsum.photos/id/985/1920/1080.jpg?hmac=dLb_5lBJW4AZhZDUXweY5WlrnscpKLtCKffaqSrF9Vw" alt="">
            </div> -->
        <div class="fixed">
          <img src="https://fastly.picsum.photos/id/681/1920/1080.jpg?hmac=qyb0NfTEkQw9QdsIYQbV0GhAEyKiPcAfetmIF_e8Kik" alt="" />
          <div class="content">
            <h2>Fin.<br>Follow for more.</h2>
          </div>
        </div>
        <!-- <div class="static">
              <div class="content">
                <h2>Fin.</h2>
              </div>
            </div> -->
      </article>
    </section>
  </main>

  <script>
import gsap from 'https://cdn.skypack.dev/gsap@3.12.2'
import { ScrollTrigger } from 'https://cdn.skypack.dev/gsap@3.12.2/ScrollTrigger';

if (!CSS.supports('animation-timeline: view()') && window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
  gsap.registerPlugin(ScrollTrigger)
  // Set up all the scroll animations with ScrollTrigger instead.
  // Blanket styles
  gsap.set('.fixed', {
    position: 'fixed',
    inset: 0,
  })
  gsap.set('.static', {
    position: 'absolute',
    inset: 0,
    zIndex: 6,
  })
  // First section
  gsap.set('section:first-of-type .fixed', {
    transformOrigin: '50% 0%',
  })
  gsap.to('section:first-of-type .fixed', {
    scale: '0.35 0.5',
    yPercent: -10,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:first-of-type',
      start: 'top top',
      end: 'bottom 50%'
    }
  })
  gsap.to('section:first-of-type .fixed', {
    opacity: 0,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:first-of-type',
      start: 'top top',
      end: 'bottom 75%'
    }
  })
  // The second section with image scaling down, etc.
  gsap.set('section:nth-of-type(2) article:first-of-type .fixed', {
    clipPath: 'ellipse(220% 200% at 50% 300%)',
    zIndex: 3,
  })
  gsap.to('section:nth-of-type(2) article:first-of-type .fixed', {
    clipPath: 'ellipse(220% 200% at 50% 175%)',
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:first-of-type',
      start: 'top bottom',
      end: 'top top',
    }
  })
  gsap.from('section:nth-of-type(2) article:first-of-type img', {
    scale: 5,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:first-of-type',
      start: 'top bottom',
      end: 'top top',
    }
  })
 
  gsap.set('.loud-wrap', {
    clipPath: 'inset(0 0 0 0)',
    mask: 'linear-gradient(white 50%, transparent) 0 100% / 100% 200% no-repeat',
  })
  gsap.set('.text-wrap', {
    position: 'sticky',
    bottom: '4rem',
    transformOrigin: '50% 0',
  })
  gsap.from('section:nth-of-type(2) article:first-of-type h2', {
    yPercent: 100,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:first-of-type',
      start: 'top 50%',
      end: 'top 0%',
    }
  })
  gsap.to('section:nth-of-type(2) article:first-of-type .loud-wrap', {
    maskPosition: '0 0',
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:first-of-type',
      start: 'top 50%',
      end: 'top 0%',
    }
  })
  // Blur the text on exit
  gsap.to('section:nth-of-type(2) article:first-of-type .text-wrap', {
    filter: 'blur(4rem)',
    opacity: 0,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:first-of-type',
      start: 'bottom 60%',
      end: 'bottom 25%',
    }
  })

  // Third section
  gsap.set('section:nth-of-type(2) article:nth-of-type(2) .fixed', { zIndex: 3 })
  gsap.from('section:nth-of-type(2) article:nth-of-type(2) .fixed', {
    opacity: 0,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:nth-of-type(2)',
      start: 'top 50%',
      end: 'top -30%',
    }
  })
  gsap.from('section:nth-of-type(2) article:nth-of-type(2) h2', {
    yPercent: 100,
    opacity: 0,
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:nth-of-type(2)',
      start: 'top 50%',
      end: 'top 25%',
    }
  })
  gsap.to('section:nth-of-type(2) article:nth-of-type(2) h2', {
    filter: 'blur(4rem)',
    color: 'transparent',
    scrollTrigger: {
      scrub: 0.5,
      trigger: 'section:nth-of-type(2) article:nth-of-type(2)',
      start: 'bottom bottom',
      end: 'bottom 50%',
    }
  })
  // Fourth
  gsap.set('.filler', {
    display: 'block',
    position: 'absolute',
    bottom: '30vh',
    padding: '1rem',
  })
  gsap.set('section:nth-of-type(2) article:nth-of-type(3)', {
    height: '400vh'
  })
  gsap.set('section:nth-of-type(2) article:nth-of-type(3) .fixed', {
    zIndex: 3
  })
  gsap.set('section:nth-of-type(2) article:nth-of-type(3) h2', {
    marginTop: '80vh'
  })
  gsap.from('section:nth-of-type(2) article:nth-of-type(3) .fixed', {
    opacity: 0,
    scrollTrigger: {
      trigger: 'section:nth-of-type(2) article:nth-of-type(3)',
      scrub: 0.5,
      start: 'top 80%',
      end: 'top top'
    }
  })
  gsap.to('section:nth-of-type(2) article:nth-of-type(3) img', {
    opacity: 0,
    scrollTrigger: {
      trigger: 'section:nth-of-type(2) article:nth-of-type(3)',
      scrub: 0.5,
      start: 'bottom bottom',
      end: 'bottom 85%'
    }
  })
  // Animate the text blocks
  const LINES = document.querySelectorAll('.text-blocks p')
  LINES.forEach((LINE, index) => {
    gsap.from(LINE, {
      yPercent: 100,
      opacity: 0,
      scrollTrigger: {
        trigger: 'section:nth-of-type(2) article:nth-of-type(3)',
        scrub: 0.5,
        start: `top -=${90 + (index * 10)}%`,
        end: `top -=${(100 + (index * 10))}%`,
      }
    })
  })
  gsap.to('.text-blocks', {
    opacity: 0,
    scrollTrigger: {
      trigger: 'section:nth-of-type(2) article:nth-of-type(3)',
      scrub: 0.5,
      start: 'bottom 130%',
      end: 'bottom 110%'
    }
  })
  gsap.to('.filler h2', {
    opacity: 0,
    filter: 'blur(4rem)',
    scrollTrigger: {
      trigger: 'section:nth-of-type(2) article:nth-of-type(3)',
      scrub: 0.5,
      start: 'bottom 55%',
      end: 'bottom 30%'
    }
  })
  // The last piece is unclipping the end piece
  gsap.set('section:nth-of-type(2) article:last-of-type .fixed', {
    clipPath: 'ellipse(220% 200% at 50% 300%)',
    zIndex: 5,
  })
  gsap.to('section:nth-of-type(2) article:last-of-type .fixed', {
    clipPath: 'ellipse(220% 200% at 50% 175%)',
    scrollTrigger: {
      trigger: 'section:nth-of-type(2) article:last-of-type',
      scrub: 0.5,
      start: 'top 80%',
      end: 'top 20%',
    }
  })
}
    </script>
    </body>
    </html>


TAILWIND CSS


for H1

<h1 class="text-4xl font-bold text-gray-800">This is a Heading</h1>

FeatureClass ExampleDescription
Text Sizetext-4xlMakes text large (text-5xl, 6xl, etc.)
Font Weightfont-boldMakes text bold (font-semibold, font-light)
Text Colortext-gray-800Sets text color (text-red-500, etc.)
Text Aligntext-centerCenters text (text-left, text-right)
Marginmb-4Margin bottom (or mt-4, mx-auto, etc.)
Responsivemd:text-5xlText size on medium and larger screens
Shadowdrop-shadow-lgAdds text shadow
Font StyleitalicMakes text italic

<h1 class="text-5xl md:text-6xl font-extrabold text-brown-600 text-center mb-6 drop-shadow-lg">
  Welcome to VANTARA
</h1>


✅ Tailwind CSS Navbar Example


<nav class="bg-white shadow-md"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16 items-center"> <!-- Logo --> <div class="text-2xl font-bold text-brown-600">VANTARA</div> <!-- Mobile Menu Button --> <div class="md:hidden"> <button id="menu-toggle" class="text-gray-700 focus:outline-none"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> <!-- Desktop Menu --> <div class="hidden md:flex space-x-6" id="nav-links"> <a href="#" class="text-gray-700 hover:text-brown-600 font-medium">Home</a> <a href="#" class="text-gray-700 hover:text-brown-600 font-medium">About</a> <a href="#" class="text-gray-700 hover:text-brown-600 font-medium">Services</a> <a href="#" class="text-gray-700 hover:text-brown-600 font-medium">Contact</a> </div> </div> </div> <!-- Mobile Menu (Hidden by default) --> <div class="md:hidden hidden px-4 pb-4 space-y-2" id="mobile-menu"> <a href="#" class="block text-gray-700 hover:text-brown-600">Home</a> <a href="#" class="block text-gray-700 hover:text-brown-600">About</a> <a href="#" class="block text-gray-700 hover:text-brown-600">Services</a> <a href="#" class="block text-gray-700 hover:text-brown-600">Contact</a> </div> </nav>

🧠 JavaScript to Toggle Mobile Menu

Add this right before the closing </body> tag:


<script> const menuToggle = document.getElementById('menu-toggle'); const mobileMenu = document.getElementById('mobile-menu'); menuToggle.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); </script>



Tailwind Hero Section Example



<section class="relative bg-cover bg-center h-[80vh]" style="background-image: url('img/elep.jpg');"> <!-- Dark Overlay --> <div class="absolute inset-0 bg-black bg-opacity-50"></div> <!-- Hero Content --> <div class="absolute inset-0 flex flex-col items-center justify-center text-center text-white px-4"> <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4 drop-shadow-lg"> Welcome to Our World </h1> <p class="text-lg md:text-xl font-light max-w-xl mb-6"> Discover breathtaking beauty </p> <a href="#about" class="bg-brown-600 hover:bg-brown-700 text-white font-semibold px-6 py-3 rounded-lg transition"> Learn More </a> </div> </section>

🔍 Key Tailwind Classes Used:

PurposeTailwind Classes Used
Background imagebg-cover bg-center
Heighth-[80vh] (80% of viewport height)
Overlaybg-black bg-opacity-50
Centeringflex items-center justify-center text-center
Text stylestext-4xl, font-extrabold, drop-shadow-lg
Button stylesbg-brown-600, hover:bg-brown-700, rounded-lg


✅ Step 1: Include SwiperJS

In your <head>:


<!-- SwiperJS CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

Before </body>:


<!-- SwiperJS JS --> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

✅ Step 2: Hero Carousel HTML


<section class="relative"> <div class="swiper mySwiper h-[80vh]"> <div class="swiper-wrapper"> <!-- Slide 1 --> <div class="swiper-slide relative bg-cover bg-center" style="background-image: url('img/elep.jpg')"> <div class="absolute inset-0 bg-black bg-opacity-50"></div> <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4"> <h1 class="text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Welcome to Vantara</h1> <p class="text-lg md:text-xl">Discover breathtaking beauty</p> </div> </div> <!-- Slide 2 --> <div class="swiper-slide relative bg-cover bg-center" style="background-image: url('img/ele.jpeg')"> <div class="absolute inset-0 bg-black bg-opacity-50"></div> <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4"> <h1 class="text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Animal Conservation</h1> <p class="text-lg md:text-xl">Protecting species for generations</p> </div> </div> <!-- Slide 3 --> <div class="swiper-slide relative bg-cover bg-center" style="background-image: url('img/vantara.png')"> <div class="absolute inset-0 bg-black bg-opacity-50"></div> <div class="absolute inset-0 flex flex-col items-center justify-center text-white text-center px-4"> <h1 class="text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Future of Wildlife</h1> <p class="text-lg md:text-xl">Creating a safe space for all species</p> </div> </div> </div> <!-- Pagination --> <div class="swiper-pagination"></div> <!-- Navigation Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </section>

✅ Step 3: Initialize Swiper

Right before the </body> tag:


<script> const swiper = new Swiper(".mySwiper", { loop: true, autoplay: { delay: 5000, }, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, effect: "fade", // optional }); </script>



✅ Tailwind Footer Code


<footer class="bg-gray-900 text-white py-10"> <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10"> <!-- Logo & Tagline --> <div> <h2 class="text-2xl font-bold text-brown-500 mb-2">VANTARA</h2> <p class="text-sm text-gray-300"> Innovating the animal future, one solution at a time. </p> </div> <!-- Quick Links --> <div> <h3 class="text-lg font-semibold mb-2 text-white">Quick Links</h3> <ul class="space-y-1 text-gray-400"> <li><a href="#" class="hover:text-white transition">Home</a></li> <li><a href="#" class="hover:text-white transition">About Us</a></li> <li><a href="#" class="hover:text-white transition">Services</a></li> <li><a href="#" class="hover:text-white transition">Contact</a></li> </ul> </div> <!-- Contact Info --> <div> <h3 class="text-lg font-semibold mb-2 text-white">Contact</h3> <p class="text-gray-400 text-sm">Email: vantara@animal.com</p> <p class="text-gray-400 text-sm">Phone: +1 234 567 890</p> <p class="text-gray-400 text-sm">Location: Jamnagar, INDIA</p> </div> <!-- Social Links --> <div> <h3 class="text-lg font-semibold mb-2 text-white">Follow Us</h3> <div class="flex space-x-4 text-xl text-gray-400"> <a href="#" class="hover:text-white transition"><i class="fab fa-facebook-f"></i></a> <a href="#" class="hover:text-white transition"><i class="fab fa-twitter"></i></a> <a href="#" class="hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="hover:text-white transition"><i class="fab fa-instagram"></i></a> </div> </div> </div> <!-- Bottom Bar --> <div class="mt-10 border-t border-gray-700 pt-4 text-center text-sm text-gray-500"> © 2025 codingacharya. All rights reserved. </div> </footer>



✅ Tailwind Testimonial Section

html
<section class="bg-gray-100 py-16"> <div class="max-w-6xl mx-auto px-4 text-center"> <h2 class="text-3xl md:text-4xl font-bold text-brown-600 mb-10">What People Say About Us</h2> <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3"> <!-- Testimonial Card --> <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"> <p class="text-gray-600 mb-4 italic"> “VANTARA is doing amazing work for wildlife conservation. Their care for animals is unmatched.” </p> <div class="flex items-center gap-4"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User" class="w-12 h-12 rounded-full" /> <div class="text-left"> <h4 class="font-semibold">Aarushi Mehta</h4> <span class="text-sm text-gray-500">Wildlife Enthusiast</span> </div> </div> </div> <!-- Testimonial Card --> <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"> <p class="text-gray-600 mb-4 italic"> “The team is passionate and professional. I trust VANTARA with wildlife care anytime.” </p> <div class="flex items-center gap-4"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User" class="w-12 h-12 rounded-full" /> <div class="text-left"> <h4 class="font-semibold">Ravi Patel</h4> <span class="text-sm text-gray-500">Environmentalist</span> </div> </div> </div> <!-- Testimonial Card --> <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"> <p class="text-gray-600 mb-4 italic"> “Beautiful sanctuary, world-class care. I'm inspired by their mission and dedication.” </p> <div class="flex items-center gap-4"> <img src="https://randomuser.me/api/portraits/men/60.jpg" alt="User" class="w-12 h-12 rounded-full" /> <div class="text-left"> <h4 class="font-semibold">Sameer Khan</h4> <span class="text-sm text-gray-500">Nature Photographer</span> </div> </div> </div> </div> </div> </section>



✅ Tailwind Services Section

html
<section class="py-16 bg-white"> <div class="max-w-7xl mx-auto px-4 text-center"> <h2 class="text-3xl md:text-4xl font-bold text-brown-600 mb-4">Our Services</h2> <p class="text-gray-600 max-w-2xl mx-auto mb-12"> We offer a wide range of services to support animal welfare and conservation. </p> <div class="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"> <!-- Service Box --> <div class="bg-gray-50 p-6 rounded-xl shadow hover:shadow-md transition"> <div class="text-4xl text-brown-600 mb-4"> <i class="fas fa-paw"></i> </div> <h3 class="text-xl font-semibold mb-2">Elephant Care</h3> <p class="text-gray-600 text-sm"> Providing the world's largest hospital facility and rehabilitation environment for elephants. </p> </div> <!-- Service Box --> <div class="bg-gray-50 p-6 rounded-xl shadow hover:shadow-md transition"> <div class="text-4xl text-brown-600 mb-4"> <i class="fas fa-hippo"></i> </div> <h3 class="text-xl font-semibold mb-2">Cheetah Rescue</h3> <p class="text-gray-600 text-sm"> Special care for African cheetahs, focusing on safety, nutrition, and medical support. </p> </div> <!-- Service Box --> <div class="bg-gray-50 p-6 rounded-xl shadow hover:shadow-md transition"> <div class="text-4xl text-brown-600 mb-4"> <i class="fas fa-dog"></i> </div> <h3 class="text-xl font-semibold mb-2">Lion Habitat</h3> <p class="text-gray-600 text-sm"> Creating safe spaces and breeding programs for the endangered Gujarat lion population. </p> </div> <!-- Service Box --> <div class="bg-gray-50 p-6 rounded-xl shadow hover:shadow-md transition"> <div class="text-4xl text-brown-600 mb-4"> <i class="fas fa-dove"></i> </div> <h3 class="text-xl font-semibold mb-2">Bird Conservation</h3> <p class="text-gray-600 text-sm"> Protecting native bird species like sparrows from habitat loss and radiation exposure. </p> </div> </div> </div> </section>

🎯 What’s Inside?

FeatureTailwind Class Example
Section Layoutpy-16, max-w-7xl, mx-auto
Titlestext-brown-600, text-4xl
Gridgrid-cols-1 sm:grid-cols-2 lg:grid-cols-4
Card Stylebg-gray-50, rounded-xl, shadow, hover:shadow-md
IconsFontAwesome (you can replace with heroicons or SVGs)






CSS effect

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>What's Your Interest?</title>
  <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      background: #fff;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 60px auto;
      padding: 0 20px;
      position: relative;
    }

    .heading {
      font-size: 3rem;
      font-weight: bold;
      color: #b10046;
      line-height: 1.2;
    }

    .heading::before {
      content: "";
      display: inline-block;
      width: 30px;
      height: 4px;
      background: #f9c73d;
      vertical-align: middle;
      margin-right: 10px;
    }

    .interests {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
      gap: 30px;
      max-width: 800px;
    }

    .interests div {
      flex: 1 1 250px;
      font-size: 1.1rem;
    }

    /* Decorative Shapes */
    .shapes {
      position: absolute;
      top: -20px;
      right: 0;
    }

    .shape-red {
      width: 100px;
      height: 100px;
      background: #b10046;
      clip-path: polygon(50 0, 100% 0, 100% 100%);
      position: absolute;
      top: 0;
      right: 100px;
    }

    .shape-yellow {
      width: 100px;
      height: 50px;
      border-radius: 0 100px 0 0;
      background: #f9c73d;
      clip-path: circle(50% 0%, 0% 100%, 100% 100%);
      position: absolute;
      top: 70px;
      right: 70px;
    }

    .shape-pink {
      width: 100px;
      height: 30px;
      background: #fdd;
      clip-path: circle(50% 0%, 0% 100%, 100% 100%);
      position: absolute;
      top: 130px;
      right: 50px;
    }

    .shape-outline {
      width: 240px;
      height: 200px;
      border: 1px solid #e8d7de;
      border-radius: 50px 100px 120px 0;
      position: absolute;
      top: 0;
      right: 0;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="heading" data-aos="fade-right">WHAT'S YOUR<br>INTEREST?</div>

    <div class="interests" data-aos="fade-up" data-aos-delay="100">
      <div data-aos="fade-up" data-aos-delay="200">· Artificial Intelligence</div>
      <div data-aos="fade-up" data-aos-delay="300">· Media & Communications</div>
      <div data-aos="fade-up" data-aos-delay="400">· Sculpting</div>
      <div data-aos="fade-up" data-aos-delay="500">· Arts, Humanities & Commerce</div>
      <div data-aos="fade-up" data-aos-delay="600">· Computing</div>
      <div data-aos="fade-up" data-aos-delay="700">· Spiritual & Cultural Studies</div>
      <div data-aos="fade-up" data-aos-delay="800">· Agriculture</div>
      <div data-aos="fade-up" data-aos-delay="900">· Dentistry</div>
      <div data-aos="fade-up" data-aos-delay="1000">· Social and Behavioural Sciences</div>
    </div>

    <div class="shapes">
      <div class="shape-red" data-aos="zoom-in" data-aos-delay="200"></div>
      <div class="shape-yellow" data-aos="zoom-in" data-aos-delay="300"></div>
      <div class="shape-pink" data-aos="zoom-in" data-aos-delay="400"></div>
      <div class="shape-outline" data-aos="fade-in" data-aos-delay="600"></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
  <script>
    AOS.init({
      duration: 1000,
      once: true
    });
  </script>
</body>
</html>




BOOTSTRAP CSS properties


📐 Layout

  • Containers

    • .container – fixed-width responsive container

    • .container-fluid – full-width container

    • .container-{breakpoint} – responsive fixed width at specific breakpoints

  • Grid System

    • .row, .col, .col-{breakpoint}-{size}

    • Responsive sizing: col-sm-6, col-md-4, col-lg-3

  • Display

    • .d-none, .d-block, .d-inline, .d-flex, .d-grid

    • Responsive: .d-md-none, .d-lg-flex

  • Flexbox Utilities

    • .d-flex, .justify-content-center, .align-items-center

    • .flex-column, .flex-wrap, .gap-2

  • Spacing (Margin & Padding)

    • .m-3, .p-3 – margin and padding

    • Directional: .mt-2, .mb-4, .ms-1, .pe-2

    • Responsive: .p-md-3, .mb-lg-5


🎨 Colors & Backgrounds

  • Text Colors

    • .text-primary, .text-danger, .text-muted, .text-white

  • Background Colors

    • .bg-primary, .bg-success, .bg-light, .bg-dark


🔤 Typography

  • .text-center, .text-start, .text-end

  • .fw-bold, .fw-light, .fst-italic

  • .text-uppercase, .text-lowercase, .text-capitalize


🔳 Borders & Radius

  • .border, .border-top, .border-danger

  • .rounded, .rounded-circle, .rounded-0


🔲 Sizing

  • Width and height:

    • .w-25, .w-50, .w-100

    • .h-25, .h-50, .h-auto


⌨️ Forms

  • .form-control, .form-select, .form-check-input

  • .form-label, .form-text


📦 Components (CSS-based)

  • Buttons: .btn, .btn-primary, .btn-outline-danger

  • Cards: .card, .card-body, .card-title

  • Alerts: .alert, .alert-warning

  • Badges: .badge, .bg-info

  • Navs: .nav, .nav-item, .nav-link


📱 Responsive Helpers

  • .visible, .invisible, .position-relative, .position-absolute

  • Responsive breakpoints: -sm, -md, -lg, -xl, -xxl





















































2 comments:

02

Capstone resource hub

Codingacharya

Capstone Learning Resources, Notes & Project Hub

TCS NQT Questions
Read Notes
Machine Learning – ACE Theory
Read Notes
Machine Learning PPT
Read Notes
MachienLearning LAB
Read Notes
CSPT LAB programs
Read Notes
Time table and CSPT syllabus
Read Notes
Appreciations
Read Notes
ISTE life memberships
Read Notes
Artificial Intelligence & Analytics
Read Notes
Fullstack Web Dev
Read Notes
MERN Web Dev
Read Notes
Course Structure
Read Notes
Cloud Computing
Read Notes
90 Days ML Challenge
Read Notes
Advanced Analytics & Viz
Read Notes
Advanced Machine Learning
Read Notes
React JS
Read Notes
ML Chaitanya
Read Notes
Important Links
Read Notes
CSS Effects
Read Notes
RESUME
Read Notes
Bootstrap CSS
Read Notes
MongoDB
Read Notes
OWN Python Package
Read Notes
HTML Course
Read Notes
HTML Projects
Read Notes
GitHub Projects
Read Notes
Angular JS
Read Notes
Journals
Read Notes
NLP Notes
Read Notes
Videos
Read Notes
Data Analytics & Viz
Read Notes
Cloud Computing (Archive)
Read Notes
Open CV
Read Notes
jQuery
Read Notes
React JS (Archive)
Read Notes
Node JS
Read Notes
DAV Theory
Read Notes
DAV Lab
Read Notes
Big Data Notes
Read Notes
R-Programming
Read Notes
HADOOP Lab
Read Notes
GATE DA
Read Notes
JAVA Lab
Read Notes
Computer Networks
Read Notes
03

Live projects & profiles