Home

SHIV GORAKH WELFARE FOUNDATION

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Shiv Gorakh Welfare Foundation</title>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family: Arial, sans-serif;
    }

    body{
      background:#f5f1e8;
      color:#222;
    }

    /* HEADER */

    header{
      background:#111;
      color:white;
      padding:15px 8%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:sticky;
      top:0;
      z-index:1000;
    }

    .logo{
      font-size:28px;
      font-weight:bold;
      color:#ff9800;
    }

    nav a{
      color:white;
      text-decoration:none;
      margin-left:20px;
      transition:0.3s;
    }

    nav a:hover{
      color:#ff9800;
    }

    /* HERO */

    .hero{
      height:90vh;
      background:
      linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
      url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1400&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:white;
      padding:20px;
    }

    .hero-content h1{
      font-size:55px;
      margin-bottom:20px;
    }

    .hero-content p{
      font-size:20px;
      max-width:700px;
      margin:auto;
      line-height:1.7;
    }

    .hero-btn{
      display:inline-block;
      margin-top:30px;
      padding:14px 35px;
      background:#ff9800;
      color:white;
      text-decoration:none;
      border-radius:40px;
      transition:0.3s;
      font-weight:bold;
    }

    .hero-btn:hover{
      background:#e68900;
    }

    /* SECTION */

    section{
      padding:70px 8%;
    }

    .section-title{
      text-align:center;
      font-size:38px;
      margin-bottom:50px;
      color:#111;
    }

    /* BLOG CARDS */

    .blog-container{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
      gap:30px;
    }

    .blog-card{
      background:white;
      border-radius:15px;
      overflow:hidden;
      box-shadow:0 5px 15px rgba(0,0,0,0.1);
      transition:0.4s;
    }

    .blog-card:hover{
      transform:translateY(-10px);
    }

    .blog-card img{
      width:100%;
      height:220px;
      object-fit:cover;
    }

    .blog-content{
      padding:20px;
    }

    .blog-content h3{
      margin-bottom:15px;
      color:#111;
    }

    .blog-content p{
      line-height:1.6;
      margin-bottom:20px;
      color:#555;
    }

    .read-btn{
      text-decoration:none;
      color:#ff9800;
      font-weight:bold;
    }

    /* ABOUT */

    .about{
      background:#111;
      color:white;
      text-align:center;
      border-radius:20px;
    }

    .about p{
      max-width:900px;
      margin:auto;
      line-height:1.9;
      font-size:18px;
    }

    /* DONATION */

    .donation{
      text-align:center;
      background:#fff3e0;
      border-radius:20px;
    }

    .donation h2{
      margin-bottom:20px;
    }

    .donation-btn{
      display:inline-block;
      margin-top:25px;
      padding:15px 35px;
      background:#ff9800;
      color:white;
      text-decoration:none;
      border-radius:40px;
      font-weight:bold;
    }

    /* FOOTER */

    footer{
      background:#111;
      color:white;
      text-align:center;
      padding:25px;
      margin-top:40px;
    }

    /* MOBILE */

    @media(max-width:768px){

      .hero-content h1{
        font-size:38px;
      }

      nav{
        display:none;
      }
    }

  </style>
</head>
<body>

  <!-- HEADER -->

  <header>
    <div class="logo">SGWF</div>

    <nav>
      <a href="#">Home</a>
      <a href="#">Blog</a>
      <a href="#">Gaushala</a>
      <a href="#">Donate</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <!-- HERO -->

  <div class="hero">
    <div class="hero-content">
      <h1>Shiv Gorakh Welfare Foundation</h1>

      <p>
        गौ सेवा, गरीबों की सहायता, रक्तदान, सनातन धर्म प्रचार
        और मानव सेवा के लिए समर्पित एक आध्यात्मिक संस्था।
      </p>

      <a href="#" class="hero-btn">Donate Now</a>
    </div>
  </div>

  <!-- BLOG SECTION -->

  <section>
    <h2 class="section-title">Latest Blog Posts</h2>

    <div class="blog-container">

      <div class="blog-card">
        <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=1200&auto=format&fit=crop">

        <div class="blog-content">
          <h3>सनातन धर्म का वास्तविक अर्थ</h3>

          <p>
            सनातन केवल धर्म नहीं बल्कि जीवन जीने की शाश्वत कला है...
          </p>

          <a href="#" class="read-btn">Read More →</a>
        </div>
      </div>

      <div class="blog-card">
        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop">

        <div class="blog-content">
          <h3>गौ सेवा का महत्व</h3>

          <p>
            भारतीय संस्कृति में गौ माता को करुणा और समृद्धि का प्रतीक माना गया है...
          </p>

          <a href="#" class="read-btn">Read More →</a>
        </div>
      </div>

      <div class="blog-card">
        <img src="https://images.unsplash.com/photo-1499209974431-9dddcece7f88?q=80&w=1200&auto=format&fit=crop">

        <div class="blog-content">
          <h3>ध्यान और मानसिक शांति</h3>

          <p>
            Meditation मन और आत्मा को शांत करने का एक दिव्य माध्यम है...
          </p>

          <a href="#" class="read-btn">Read More →</a>
        </div>
      </div>

    </div>
  </section>

  <!-- ABOUT -->

  <section class="about">
    <h2 class="section-title">About Foundation</h2>

    <p>
      Shiv Gorakh Welfare Foundation समाज सेवा, गौ रक्षा,
      गरीब कन्याओं के विवाह, भोजन सेवा, रक्तदान और
      सनातन धर्म प्रचार के लिए कार्यरत है।
    </p>
  </section>

  <!-- DONATION -->

  <section class="donation">
    <h2 class="section-title">Support Our Mission</h2>

    <p>
      आपके सहयोग से गौशाला निर्माण और मानव सेवा का कार्य आगे बढ़ेगा।
    </p>

    <a href="#" class="donation-btn">Donate Now</a>
  </section>

  <!-- FOOTER -->

  <footer>
    © 2026 Shiv Gorakh Welfare Foundation | All Rights Reserved
  </footer>

</body>
</html>
Scroll to Top