पृष्ठभूमि वीडियो

1423 ASKMUHAMMAD_2K

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 August 2025

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

12 August 2025

मैट्रिक्स पृष्ठभूमि के साथ HTML लॉगिन फ़ॉर्म

16 August 2024

एनिमेटेड डॉट्स पृष्ठभूमि

HTML

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  
  .hero {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
    position: relative;
    padding: 0 5%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .content {
    text-align: center;
  }
  
  .content h1 {
    font-size: 160px;
    color: #fff;
    font-weight: 600;
    transition: 0.5s;
  }
  
  .content h1:hover {
    -webkit-text-stroke: 2px white;
    color: transparent;
  }
  
  .content a {
    text-decoration: none;
    display: inline-block;
    color: #fff;
    font-size: 24px;
    border: 2px solid white;
    padding: 14px 50px;
    margin-top: 20px;
    transition: 0.5s;
  }
  
  .content a:hover {
    background: #fff;
    color: #000;
  }
  
  .back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
  }
  
  @media (min-aspect-ratio: 16/9) {
    .back-video {
      width: 100%;
      height: auto;
    }
  }
  
  @media (max-aspect-ratio: 16/9) {
    .back-video {
      width: auto;
      height: 100%;
    }
  }

अनुशंसित

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

मैट्रिक्स पृष्ठभूमि के साथ HTML लॉगिन फ़ॉर्म

एनिमेटेड डॉट्स पृष्ठभूमि

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS