Added templates

Divyanshi1002 · Aug 1, 2024 · b6d1204 · b6d1204
1 parent 71120e1
commit b6d1204
Show file tree

Hide file tree

Showing 24 changed files with 361 additions and 0 deletions.
diff --git a/fonts/MemphisRiver.ttf b/fonts/MemphisRiver.ttf
diff --git a/fonts/Roblox-Font-Bold.ttf b/fonts/Roblox-Font-Bold.ttf
diff --git a/fonts/Roblox-Font-Regular.ttf b/fonts/Roblox-Font-Regular.ttf
diff --git a/static/2image.jpg b/static/2image.jpg
diff --git a/static/BG.png b/static/BG.png
diff --git a/static/Image1.jpg b/static/Image1.jpg
diff --git a/static/Insta.png b/static/Insta.png
diff --git a/static/career.jpeg b/static/career.jpeg
diff --git a/static/career1.jpeg b/static/career1.jpeg
diff --git a/static/contacts.jpg b/static/contacts.jpg
diff --git a/static/email.png b/static/email.png
diff --git a/static/first_image.jpg b/static/first_image.jpg
diff --git a/static/image2.jpg b/static/image2.jpg
diff --git a/static/linkedin.png b/static/linkedin.png
diff --git a/static/logo.jpg b/static/logo.jpg
diff --git a/static/people.jpg b/static/people.jpg
diff --git a/static/twitter.png b/static/twitter.png
diff --git a/templates/contact.html b/templates/contact.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Contact</title>
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+        <style>
+            body {
+                background-color: #f8f9fa;
+                font-family: Arial, sans-serif;
+                padding-top: 30px; /* Adjust this value if your navbar height is different */
+            }
+            .container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+            }
+            .content {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+            }
+            .left-section {
+                max-width: 50%;
+            }
+            .right-section {
+                max-width: 40%;
+                text-align: left;
+            }
+            .right-section p {
+                margin-bottom: 1.5rem;
+            }
+            .btn-block {
+                display: block;
+                width: 100%;
+                margin-bottom: 1rem;
+                padding: 10px;
+                background-color: #000;
+                color: #fff;
+                text-align: center;
+                border-radius: 4px;
+                text-decoration: none;
+            }
+            .social-media {
+                text-align: center;
+                margin-top: 2rem;
+            }
+            .social-media img {
+                width: 24px;
+                margin: 0 10px;
+            }
+        </style>
+    </head>
+    <body>
+        <!--nav bar-->
+        <nav class="navbar shadow-sm fixed-top bg-white">
+            <div class="container-fluid">
+            <a class="navbar-brand" href="#">
+                <img src="/static/logo.jpg" alt="" width="30" height="24" class="d-inline-block align-text-top">
+                SNEH FOUNDATION
+            </a>
+            </div>
+        </nav>
+        <div style="height:20px"></div>
+        <!--contact page-->
+        <div class="container">
+            <div class="row mb-4">
+                <div class="col-md-6">
+                    <h1 class="text-center">Contact Us</h1>
+                    <img src="static/contacts.jpg" style="width: 100%; height: auto; border-radius: 4px;">
+                </div>
+                <div class="col-12 col-md-6">
+                    <p>At Sneh Foundation, we are driven by our passion for making the world a better place for current and future generations.
+                        Join us in our mission to create a sustainable, greener, and more humane world.</p>
+                    <a href="#" class="btn-block">Podcast</a>
+                    <a href="#" class="btn-block">Pledges</a>
+                    <a href="#" class="btn-block">Articles</a>
+                    <a href="#" class="btn-block">Sign</a>
+                    <a href="#" class="btn-block">Petitions</a>
+                    <a href="#" class="btn-block">Donate</a>
+                    <div class="social-media">
+                        <p>FOLLOW US ON SOCIAL MEDIA</p>
+                        <a href="#"><img src="static/Insta.png" alt="Instagram"></a>
+                        <a href="#"><img src="static/linkedin.png" alt="LinkedIn"></a>
+                        <a href="#"><img src="static/twitter.png" alt="Twitter"></a>
+                        <a href="#"><img src="static/email.png" alt="Email"></a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+        {% include 'footer.html' %}
+    </body>
+</html>
diff --git a/templates/footer.html b/templates/footer.html
@@ -0,0 +1,19 @@
+<div class="container">
+    <footer class="py-3 my-4">
+      <ul class="nav justify-content-center border-bottom pb-3 mb-3">
+        <li class="nav-item"><a  target="_blank" href="{{ url_for('hello_world') }}" class="nav-link px-2 text-muted">Home</a></li>
+        <li class="nav-item"><a  target="_blank" href="#" class="nav-link px-2 text-muted">Products</a></li>
+
+        <li class="nav-item"><a target="_blank" href="{{ url_for('contact') }}" class="nav-link px-2 text-muted">Contact</a></li>
+        <li class="nav-item"><a  target="_blank" href="#" class="nav-link px-2 text-muted">About</a></li>
+      </ul>
+      <p class="text-center text-muted">ADDRESS:<br>
+        Sahaj Kunj 
+         Mukul Vihar Phase II<br>
+         Talli Bamori, Haldwani 26313<br>
+         P.No.: 9318745354<br>
+        Email: [email protected]
+      </p>
+      <p class="text-center text-muted">&copy; SNEH Foundation</p>
+    </footer>
+</div>
diff --git a/templates/home.html b/templates/home.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>SNEH FOUNDATION</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!--font for h1-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <!-- font for para-->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <style>
+        #banner {
+            width: 100%;
+            height: 650px;
+            object-fit: cover;
+            position: relative;
+            z-index: -1;
+        }
+        .overlay {
+          position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            max-width: 600px;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 20px;
+            border-radius: 8px;
+            color: white;
+            text-align: center;
+        }
+        .overlay h1 {
+            font-family:"Edu AU VIC WA NT Hand";
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+
+        }
+        .overlay p {
+            font-size: 1.2rem;
+        }
+    </style>
+</head>
+<body>
+    {% include 'nav.html' %}
+    <div style="height:20px"></div>
+    <div class="position-relative">
+        <img id="banner" src="static/BG.png" alt="Banner Image">
+        <div class="overlay">
+            <h1>"Let noble thoughts come to us from all directions"<br> – Rig Veda</h1>
+            <p></p>
+            <ul class="list-unstyled">
+                <li>Sustainability</li><br>
+                <li>Nature Conservation</li><br>
+                <li>Educational Initiatives</li><br>
+                <li>Humanity</li><br>
+                <li>Women Empowerment</li><br>
+                <li>Skill Development</li><br>
+            </ul>
+            <p class="mt-4">TOGETHER, WE CAN MAKE A DIFFERENCE.</p>
+        </div>
+    </div>
+    <div class="container" >
+      <h1 class="text-center mt-2 mb-4">
+        SNEH 
+      </h1>
+            <div class="row mb-4">
+        <div class="col-md-6">
+      <h2 class="text-center">About Us</h2>
+      <p class="lead">Sneh Foundation is a dedicated charitable NGO committed to creating a sustainable future.
+         Our core focus areas include:<br>
+         <b>Sustainability: </b>
+         We promote practices that ensure long-term ecological balance, advocating for renewable energy,
+         sustainable agriculture, and waste reduction.<br>
+         <b>Nature Conservation:</b> 
+         We work tirelessly to preserve natural habitats, protect endangered species, and promote biodiversity 
+         through various conservation projects and awareness campaigns.<br>
+        <b> Education:</b>
+         We are passionate about providing access to quality education for all. 
+         Our initiatives include offering scholarships, and conducting educational programs to empower the youth and
+         foster a love for learning.<br>
+        <b>Humanity:</b>
+        We believe in the power of compassion and strive to improve the quality of life for underprivileged communities.
+       Our projects include providing access to clean water, healthcare, and disaster relief.<br>
+        <b>Skill Development:</b>
+        We offer training programs that equip individuals with essential skills for employment and entrepreneurship. 
+        By fostering vocational skills, we help create opportunities for economic growth and personal development.<br>
+     </p>
+     </div>
+     <div class="d-none d-md-block col-md-6">
+      <img src="static/2image.jpg" style="height:400px;border-radius:4px;padding-top:70px;" >
+      </div>
+      <h2 class="text-center mt-2 mb-4">Products</h2>
+      <div>
+        <!--{% for job in jobs %}
+          {% include 'jobitem.html' %}
+        {% endfor %}-->
+        <p>Coming soon!</p>
+      </div>
+     <div class="text-center">
+      <a class="btn btn-primary btn-lg" href="mailto:[email protected]?subject=Question%20related%20to%20job%20opening&body=My%20name%3A%20%3Cyour%20name%20here%3E%0D%0AMy%20question%3A%20%3Center%20your%20question%3E">
+        Contact Us
+      </a>
+     </div>
+    </div>
+    {% include 'footer.html' %}
+</body>
+</html>
diff --git a/templates/jobitem.html b/templates/jobitem.html
@@ -0,0 +1,22 @@
+<div class="border-bottom row" style="margin-bottom:16px;
+ padding-bottom:8px;">
+  <div class="col-9">
+    <h4 style="color:rgb(120,120,120); margin-bottom: 8px;">
+        {{job['title']}}
+    </h4>
+    <div>
+        <b>Location:</b> {{job['Location']}}
+    </div>
+    {% if 'salary' in job %}
+    <div>
+        <b>Salary:</b>{{job['salary']}}
+    </div>
+    {% endif %}
+   </div>  
+   <div class="col-3">
+    <a href="mailto:[email protected]?subject=Application%20for%20{{job['title']}}&body=My%20name%3A%20%3Cyour%20name%20here%3E%0D%0AMy%20resume%20link%3A%3Cresume%20link%3E%0D%0AMy%20Linkdin%20link%3A%3CLinkdin%20link%3E"
+     type="button"  class="btn btn-outline-primary" >
+        Apply
+    </a>
+   </div>
+</div>
diff --git a/templates/nav.html b/templates/nav.html
@@ -0,0 +1,42 @@
+<!doctype html>
+
+<html lang="en">
+<body>
+
+    <nav class="navbar fixed-top navbar-expand-sm navbar-dark" style="background-color: black;">
+      <div class="container">
+        <a href="#" class="navbar-brand mb-0 h1">
+          <img class="d-inline-block align-top" src="/static/logo.jpg" width="30" height="30">
+            SNEH FOUNDATION  
+        </a>
+        <button type="button" 
+          data-bs-toggle="collapse" 
+          data-bs-target="#navbarNav" 
+          class="navbar-toggler"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item active">
+              <a href="{{ url_for('hello_world') }}" class="nav-link active">Home</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a href="#" class="nav-link dropdown-toggle"
+              id="navbarDropdown" role="button"
+              data-bs-target="dropdown"
+              aria-expanded="false"> Products</a>
+            </li>
+            <li class="nav-item">
+              <a href="{{ url_for('contact') }}" class="nav-link">Contact</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP@WintQrMb4s7Z0dauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/templates/products.html b/templates/products.html
diff --git a/templates/style.css b/templates/style.css
@@ -0,0 +1,67 @@
+h1{
+    font-family: verdana, arial;
+
+}
+p{
+    font-family: "Inter","courier new";
+}
+b{
+   font-weight: bold;
+   font-size: 1.5em;
+}
+body{
+    background: rgb(208, 202, 195);
+    font-family: Arial, Helvetica, sans-serif;
+    color: white;
+    margin: 0;
+    padding: 0;
+
+}
+header{
+    background: black ;
+    color: wheat;
+    padding: 20px;
+
+}
+section{
+    background: white;
+    color: gray;
+    padding: 20px;
+    display: flex;
+    flex-direction: row;
+
+}
+div{
+    background: rgb(213, 194, 16);
+    display: flex;
+    margin: auto;
+    width: 100px;
+
+}
+ul{
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+li{
+    display: inline-block;
+    margin-right: 20px;
+}
+footer{
+    background: black ;
+    color: gray;
+    padding: 10px 20px;
+}
+button{
+    background: gray;
+    border: none;
+    color: white;
+    padding: none;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+}
+.button{border-radius: 12px;}
+