added a template website[Theme: Vegan]

AyanSaha25 · Oct 17, 2020 · 5da339c · 5da339c
1 parent 4e65a21
commit 5da339c
Show file tree

Hide file tree

Showing 10 changed files with 391 additions and 0 deletions.
diff --git a/Temp_website/index.html b/Temp_website/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
+        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
+        crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
+    <link rel="icon" href="/static/image/knowing-vegan.JPG" type="image/gif" sizes="16x16">
+    <link rel="stylesheet" href="static/style.css">
+    <title>Knowing_Vegan</title>
+
+</head>
+
+<body>
+    <!-- Showcase & Navbar -->
+    <div id="showcase">
+        <header>
+            <nav class='cf fill'>
+                <a href="index.html" class="pull-left"><img height="70px" width="90px"
+                        src="/static/image/knowing-vegan.JPG"></a>
+                <ul class='cf'>
+                    <li>
+                        <a href='index.html'>Home</a>
+                    </li>
+                    <li>
+                        <a href='#'>About Us</a>
+                    </li>
+                    <li>
+                        <a href='#'>Contact Us</a>
+                    </li>
+                </ul>
+                <a href='#' id='openup'><span id="logo_mobile"><img height="50px" width="70px"
+                            src="/static/image/knowing-vegan.JPG"></span></a>
+            </nav>
+        </header>
+
+        <!-- main matter -->
+
+        <div class="section-main container">
+            <h1 class="section-head" style="font-size: 6rem;">Knowing Vegan 🍀 </h1>
+            <p class="lead" style="font-size:2rem;">Veganism is
+                the practice of not using animal products, particularly in diet, and
+                an associated philosophy that rejects the commodity status of animals. An individual who follows the
+                diet or philosophy is known as a vegan. Distinctions may be made between several categories of veganism.
+                Dietary vegans, also known as "strict vegetarians", refrain from consuming meat, eggs, dairy products,
+                and any other animal-derived substances. An ethical vegan, also known as a "moral vegetarian", is
+                someone who not only follows a vegan diet but extends the philosophy into other areas of their lives,
+                and opposes the use of animals for any purpose.
+            </p>
+            <div class="why-us"> <a href="#carousel"><i class="fas fa-angle-double-down"></i></a></div>
+        </div>
+    </div>
+    <section id="carousel" class="section">
+
+        <!-- carousel -->
+        <div class="wrap">
+            <div id="myCarousel" class="carousel slide" data-interval="4000" data-ride="carousel">
+
+                <ol class="carousel-indicators">
+                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                    <li data-target="#myCarousel" data-slide-to="1"></li>
+                    <li data-target="#myCarousel" data-slide-to="2"></li>
+                    <li data-target="#myCarousel" data-slide-to="3"></li>
+                    <li data-target="#myCarousel" data-slide-to="4"></li>
+                </ol>
+
+                <div class="carousel-inner">
+                    <div class="item active">
+                        <img class="d-block w-100" src="/static/image/1.jpg" alt="First slide">
+                    </div>
+
+                    <div class="item">
+                        <img class="d-block w-100" src="/static/image/2.jpg" alt="Second slide">
+                    </div>
+
+                    <div class="item">
+                        <img class="d-block w-100" src="/static/image/3.jpg" alt="Third slide">
+                    </div>
+
+                    <div class="item">
+                        <img class="d-block w-100" src="/static/image/4.jpg" alt="Fourth slide">
+                    </div>
+
+                    <div class="item">
+                        <img class="d-block w-100" src="/static/image/5.jpg" alt="Fourth slide">
+                    </div>
+                </div>
+
+                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+                    <span class="sr-only">Previous</span>
+                </a>
+                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+                    <span class="sr-only">Next</span>
+                </a>
+            </div>
+
+        </div>
+    </section>
+
+
+    <!-- footer -->
+
+    <footer class="footer-section">
+        <!-- social networking links -->
+        <div class="footer-social">
+            <a href="#"><i class="fab fa-facebook"></i></a>
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-github"></i></a>
+        </div>
+        <!-- copyright -->
+        <div class="main-footer">
+            <p>Copyright &copy 2020 Knowing Vegan</p>
+        </div>
+    </footer>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
+    <script src="http://code.jquery.com/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+
+    <script src="/static/script.js"></script>
+</body>
+
+
+</html>
diff --git a/Temp_website/static/image/1.jpg b/Temp_website/static/image/1.jpg
diff --git a/Temp_website/static/image/2.jpg b/Temp_website/static/image/2.jpg
diff --git a/Temp_website/static/image/3.jpg b/Temp_website/static/image/3.jpg
diff --git a/Temp_website/static/image/4.jpg b/Temp_website/static/image/4.jpg
diff --git a/Temp_website/static/image/5.jpg b/Temp_website/static/image/5.jpg
diff --git a/Temp_website/static/image/bg.jpg b/Temp_website/static/image/bg.jpg
diff --git a/Temp_website/static/image/knowing-vegan.JPG b/Temp_website/static/image/knowing-vegan.JPG
diff --git a/Temp_website/static/script.js b/Temp_website/static/script.js
@@ -0,0 +1,20 @@
+$(function () {
+    menu = $('nav ul');
+
+    $('#openup').on('click', function (e) {
+        e.preventDefault(); menu.slideToggle();
+    });
+
+    $(window).resize(function () {
+        var w = $(this).width(); if (w > 480 && menu.is(':hidden')) {
+            menu.removeAttr('style');
+        }
+    });
+
+    $('nav li').on('click', function (e) {
+        var w = $(window).width(); if (w < 480) {
+            menu.slideToggle();
+        }
+    });
+    $('.open-menu').height($(window).height());
+});
diff --git a/Temp_website/static/style.css b/Temp_website/static/style.css
@@ -0,0 +1,239 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: #fff;
+    scroll-behavior: smooth;
+  }
+  body {
+    font-family: 'PT Sans', sans-serif;
+    line-height: 1.6;
+  }
+
+  .section-head {
+    font-size: 3rem;
+    text-align: center;
+  }
+  #showcase {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100vh;
+    overflow-y: hidden;
+    background-image: url("/static/image/bg.jpg");
+  }
+
+  #showcase .container{
+      margin-top: 20vh;
+  }
+
+ .container {
+    max-width: 1180px;
+    text-align: center;
+    margin: 0 auto;
+    padding: 0 3rem;
+  } 
+
+  .lead{
+    font-size: 1.8rem;
+    font-family: "Sriracha";
+  }
+
+  /* carousel */
+
+    .wrap{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 10vh;
+    padding-top: 10vh;
+    background: linear-gradient(20deg, rgb(4, 36, 1), rgb(101, 211, 79));
+  }
+
+  /* Navigation */
+
+  .pull-left{
+    margin-top: 0px;
+  }
+  nav {
+    height: 82px;
+    width: 100%;
+    background-color: rgb(30, 40, 51);
+    color: #eee;
+    position: fixed;
+    display: block;
+    z-index: 2;
+  }
+  nav ul {
+    padding: 0;
+    margin: 0;
+    text-align: right;
+  }
+  nav li {
+    display: inline;
+    font-size: 2rem;
+  }
+  nav a {
+    display: inline-block;
+    width: 130px;
+    text-align: center;
+    text-decoration: none;
+    align-items: center;
+    padding: 8px 0;
+    margin-top: 15px;
+    color: rgb(141, 126, 126);
+  }
+  nav a#openup {
+    display: none;
+  }
+
+  /* Nav-hover effects */
+
+  nav.fill ul li a {
+    position: relative;
+  }
+  nav.fill ul li a:after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 0%;
+    content: '.';
+    color: transparent;
+    background: #aaa;
+    height: 2px;
+  }
+  nav.fill ul li a {
+    transition: all 2s;
+  }
+
+  nav.fill ul li a:after {
+    text-align: left;
+    content: '.';
+    margin: 0;
+    opacity: 0;
+  }
+  nav.fill ul li a:hover {
+    background-color: rgb(46, 62, 78);
+    color: white;
+    z-index: 1;
+  }
+  nav.fill ul li a:hover:after {
+    z-index: -10;
+    animation: fill 1s forwards;
+    -webkit-animation: fill 1s forwards;
+    -moz-animation: fill 1s forwards;
+    opacity: 1;
+  }
+
+  .why-us{
+    margin-top: 3rem;
+    font-size: 2rem;
+    display: inline-block;
+    border: 1px solid white;
+    transition: all 200ms ease;
+    padding: 10px 20px;
+  }
+ .why-us:hover{
+    background: white;
+    opacity: 0.7;
+ }
+ .fas:hover{
+    color: rgb(46, 62, 78);
+ }
+
+ /*Media queries */
+
+  @media screen and (max-width: 685px) {    
+    *{
+        overflow-x: hidden;
+    }
+    .pull-left {
+      display: none;
+    }
+    .wrap{
+        width:80%;
+        margin: 10px auto;
+    }  
+    #showcase .container {
+        margin-top: 20vh;
+    }   
+    .section-main p{
+        display: none;
+    }    
+    nav {
+      height: auto;
+      border-bottom: 0;
+    }
+    nav ul {
+      display: none;
+      height: auto;
+    }
+    nav li {
+      width: 100%;
+      float: right;
+      position: relative;
+    }
+    nav a {
+      text-align: left;
+      width: 100%;
+      text-indent: 25px;
+      font-size: 2rem;
+      /* background: #333; */
+      border-bottom: 1px solid #ccc;
+      color:#eee;
+    }
+
+    nav a#openup:after {
+      content: "|||";
+      transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+      /* IE 9 */
+      -webkit-transform: rotate(-90deg);
+      /* Safari and Chrome */
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+
+      position: absolute;
+      right: 5px;
+      top: 20px;
+    }
+    nav a#openup {
+      display: block;
+      /* background-color: #333; */
+      width: 100%;
+      position: relative;
+    }
+  }
+  .cf:before, .cf:after {
+    content: "";
+    display: table;
+  }
+
+  .cf:after {
+    clear: both;
+  }
+
+  .cf {
+    zoom: 1;
+  }
+
+  /* footer styling */
+
+  .footer-section{
+    background: rgb(30, 40, 51);
+    color: #fff;
+    font-size: 2rem;
+  }
+  .main-footer{
+    display: flex;
+    justify-content: center;
+  }  
+  .footer-social{
+    display: flex;
+    justify-content: space-around;
+    font-size: 4rem;
+  }
+
+