Merge branch 'master' of http://147.91.204.116:8888/poop-tim-2/SkuciSe

SkuciSe/src/main/java/com/example/SkuciSe/controller/AppController.java

+package com.example.SkuciSe.controller;
+
+import com.example.SkuciSe.model.korisnik.Korisnik;
+import com.example.SkuciSe.model.korisnik.KorisnikDetails;
+import com.example.SkuciSe.repository.KorisnikRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PostMapping;
+
+@Controller
+public class AppController
+{
+    @Autowired
+    KorisnikRepository kRepo;
+
+    @GetMapping({"/","","/index"})
+    public String getIndex(Model model, @AuthenticationPrincipal KorisnikDetails korisnik)
+    {
+        model.addAttribute("loggedUser", korisnik);
+        return("index");
+    }
+
+    @GetMapping("/login")
+    public String getLogin( Model model )
+    {
+        return("login");
+    }
+
+    @GetMapping("/register")
+    public String getRegister( Model model )
+    {
+        model.addAttribute("newUser", new Korisnik());
+        return("register");
+    }
+
+    @PostMapping("/register-proccess")
+    public String postRegisterProccess(@ModelAttribute Korisnik korisnik)
+    {
+        System.out.println(korisnik);
+        kRepo.insert( korisnik);
+        return("redirect:/login");
+    }
+
+}

SkuciSe/src/main/java/com/example/SkuciSe/model/Korisnik.java → SkuciSe/src/main/java/com/example/SkuciSe/model/korisnik/Korisnik.java

-package com.example.SkuciSe.model;
+package com.example.SkuciSe.model.korisnik;
 
 import lombok.AllArgsConstructor;
 import lombok.Getter;
@@ -18,16 +18,14 @@ public class Korisnik
     String sifra;
     String telefon;
     int tipId;
-    String slika;
 
-    public Korisnik(String ime, String prezime, String email, String sifra, String telefon, int tipId, String slika) {
+    public Korisnik(String ime, String prezime, String email, String sifra, String telefon, int tipId) {
         this.ime = ime;
         this.prezime = prezime;
         this.email = email;
         this.sifra = sifra;
         this.telefon = telefon;
         this.tipId = tipId;
-        this.slika = slika;
     }
 
     @Override
@@ -40,7 +38,6 @@ public class Korisnik
                 ", sifra='" + sifra + '\'' +
                 ", telefon='" + telefon + '\'' +
                 ", tipId=" + tipId +
-                ", slika='" + slika + '\'' +
                 '}';
     }
 }

SkuciSe/src/main/java/com/example/SkuciSe/model/Oglas.java → SkuciSe/src/main/java/com/example/SkuciSe/model/oglas/Oglas.java

-package com.example.SkuciSe.model;
+package com.example.SkuciSe.model.oglas;
 
 import lombok.AllArgsConstructor;
 import lombok.Getter;

SkuciSe/src/main/java/com/example/SkuciSe/repository/KorisnikRepository.java

 package com.example.SkuciSe.repository;
 
+import com.example.SkuciSe.model.korisnik.Korisnik;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.stereotype.Component;
 
-import java.sql.Connection;
-import java.sql.DriverManager;
-import java.sql.SQLException;
-import java.sql.Statement;
+import java.sql.*;
 
 @Component
 public class KorisnikRepository
 {
     Connection connection = null;
     Statement statement = null;
-
     public KorisnikRepository()
     {
         try {
@@ -22,4 +21,30 @@ public class KorisnikRepository
             throw new RuntimeException(e);
         }
     }
+
+    public void insert(Korisnik korisnik)
+    {
+        String sql = "insert into korisnik( ime, prezime, telefon, email, sifra, tipId) values('"+korisnik.getIme()+"','"+korisnik.getPrezime()+"','"+korisnik.getTelefon()+"','"+korisnik.getEmail()+"','"+new BCryptPasswordEncoder().encode(korisnik.getSifra())+"',1)";
+        try {
+            statement.executeUpdate( sql);
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+    }
+
+    public Korisnik findByEmail(String email)
+    {
+        String sql = "select * from korisnik where email = '"+email+"'";
+        ResultSet rs = null;
+        try {
+            rs = statement.executeQuery( sql);
+            while( rs.next())
+            {
+                return ( new Korisnik( rs.getInt("korisnikId"), rs.getString("ime"), rs.getString("prezime"), rs.getString("email"), rs.getString("sifra"), rs.getString("telefon"), rs.getInt("tipid")));
+            }
+        } catch (SQLException e) {
+            throw new RuntimeException(e);
+        }
+        return( null);
+    }
 }

SkuciSe/src/main/resources/static/css/style.css

+body{
+    font-family: 'Jost', serif;font-size: 22px;
+    background-color: #d8dde0;
+    overflow-x: hidden;
+}
+header{
+    width: 100%;
+    height: 120px;
+    background: white;
+    display: flex;
+    flex-flow: row;
+}
+header img{
+    margin-left:15%;
+}
+header nav{
+    width: 50%;
+}
+header nav ul{
+    height: 120px;
+    display: flex;
+    justify-content: start;
+}
+header nav ul li{
+    text-decoration: none;
+}
+header nav ul li{
+    float:left;
+    list-style-type: none;
+    padding:50px;
+}
+header nav ul li a{
+    text-decoration: none;
+    color:#333333;
+    transition: width 2s;
+    display: inline-block;
+    position: relative;
+}
+header nav ul li a:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: #0087ca;
+    transform-origin: bottom right;
+    transition: transform 0.25s ease-out;
+}
+
+header nav ul li a:hover:after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
+}
+header #navbar-login{
+    margin-top:1%;
+    width: 50%;
+    height: 120px;
+}
+header #navbar-login{
+    display:flex;
+    justify-content: end;
+    align-items: center;
+}
+header #navbar-login ul li{
+    float:left;
+    padding:20px;
+    list-style-type: none;
+}
+header #navbar-login ul li a{
+    text-decoration: none;
+    color: #367588;
+}
+header #navbar-login ul li button{
+    background-color:  #367588;
+    border:0px;
+}
+#pozadina{
+    width: 100%;
+    height: 600px;
+    background-image: url("../images/pozadina.jpg");
+    background-size:cover;
+    background-repeat: no-repeat;
+}
+#pozadina{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#pozadina h1{
+    color:#367588;
+    font-size:60px;
+}
+.container-fluid{
+    overflow:hidden;
+    margin-top: 250px ;
+    background:#262626 ;
+    color: #627482  !important;
+    margin-bottom: 0 ;
+    padding-bottom:0  ;
+}
+
+small{
+    font-size: calc(12px + (15 - 12) * ((100vw - 360px) / (1600 - 360))) !important;
+}
+
+.bold-text{
+    color: #989c9e !important;
+}
+
+
+.mt-55{
+    margin-top: calc(50px + (60 - 50) * ((100vw - 360px) / (1600 - 360))) !important;
+}
+
+
+h3{
+    font-size: calc(34px + (40 - 34) * ((100vw - 360px) / (1600 - 360))) !important;
+}
+
+.social{
+    font-size: 21px !important;
+}
+
+.rights{
+    font-size: calc(10px + (12 - 10) * ((100vw - 360px) / (1600 - 360))) !important;
+}
+.form-body{
+    height: 600px;
+}
+.form-holder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+
+.form-holder .form-content {
+    position: relative;
+    text-align: center;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-align-items: center;
+    align-items: center;
+    padding: 60px;
+}
+
+.form-content .form-items {
+    border: 3px solid #fff;
+    padding: 40px;
+    display: inline-block;
+    width: 100%;
+    min-width: 540px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    text-align: left;
+    -webkit-transition: all 0.4s ease;
+    transition: all 0.4s ease;
+}
+
+.form-content h3 {
+    color: #fff;
+    text-align: left;
+    font-size: 28px;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.form-content h3.form-title {
+    margin-bottom: 30px;
+}
+
+.form-content p {
+    color: #fff;
+    text-align: left;
+    font-size: 17px;
+    font-weight: 300;
+    line-height: 20px;
+    margin-bottom: 30px;
+}
+
+
+.form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
+    color: #fff;
+}
+
+.form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select {
+    width: 100%;
+    padding: 9px 20px;
+    text-align: left;
+    border: 0;
+    outline: 0;
+    border-radius: 6px;
+    background-color: #fff;
+    font-size: 15px;
+    font-weight: 300;
+    color: #8D8D8D;
+    -webkit-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+    margin-top: 16px;
+}
+
+
+.btn-primary{
+    background-color: #6C757D;
+    outline: none;
+    border: 0px;
+    box-shadow: none;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
+    background-color: #495056;
+    outline: none !important;
+    border: none !important;
+    box-shadow: none;
+}
+
+.form-content textarea {
+    position: static !important;
+    width: 100%;
+    padding: 8px 20px;
+    border-radius: 6px;
+    text-align: left;
+    background-color: #fff;
+    border: 0;
+    font-size: 15px;
+    font-weight: 300;
+    color: #8D8D8D;
+    outline: none;
+    resize: none;
+    height: 120px;
+    -webkit-transition: none;
+    transition: none;
+    margin-bottom: 14px;
+}
+
+.form-content textarea:hover, .form-content textarea:focus {
+    border: 0;
+    background-color: #ebeff8;
+    color: #8D8D8D;
+}
+
+.mv-up{
+    margin-top: -9px !important;
+    margin-bottom: 8px !important;
+}
+
+.invalid-feedback{
+    color: #ff606e;
+}
+
+.valid-feedback{
+    color: #2acc80;
+}
\ No newline at end of file

SkuciSe/src/main/resources/static/js/main.js

+(function () {
+    'use strict'
+    const forms = document.querySelectorAll('.requires-validation')
+    Array.from(forms)
+        .forEach(function (form) {
+            form.addEventListener('submit', function (event) {
+                if (!form.checkValidity()) {
+                    event.preventDefault()
+                    event.stopPropagation()
+                }
+
+                form.classList.add('was-validated')
+            }, false)
+        })
+})()
\ No newline at end of file

SkuciSe/src/main/resources/templates/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+    <title>Small Business - Start Bootstrap Template</title>
+    <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
+
+    <!-- Favicon-->
+    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+
+    <!-- Core theme CSS (includes Bootstrap)-->
+    <link href="/css/style.css" rel="stylesheet" />
+
+
+</head>
+<body th:object="${loggedUser}">
+<header>
+    <nav>
+        <ul>
+            <li><a th:href="@{/index}">Pocetna</a></li>
+            <li><a href="#">Kategorije</a></li>
+            <li><a href="#">O nama</a></li>
+        </ul>
+    </nav>
+    <!--<img src="../static/images/logo.png" alt="Logo">-->
+    <div id="navbar-login">
+        <ul>
+            <li><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
+            <li><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
+            <li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i>       Postavite novi oglas</button></li>
+        </ul>
+    </div>
+</header>
+<div id="pozadina">
+    <h1>
+        <span th:if="${loggedUser == null}">Uloguj se</span>
+        <span th:if="${loggedUser != null}" th:text="${loggedUser.getKorisnik().getIme()}"></span>
+    </h1>
+</div>
+
+<footer class="text-center text-white fixed-bottom" style="background-color: #21081a;">
+
+    <!-- Copyright -->
+    <div class="text-center p-3" style="background-color: #d8dde0;">
+        © 2020 Copyright:
+        <a class="text-white" href="https://mdbootstrap.com/">PMFKG</a>
+    </div>
+</footer>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
+<script src="/js/main.js"></script>
+</body>
+</html>

SkuciSe/src/main/resources/templates/login.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+    <title>Small Business - Start Bootstrap Template</title>
+    <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
+
+    <!-- Favicon-->
+    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+
+    <!-- Core theme CSS (includes Bootstrap)-->
+    <link href="/css/style.css" rel="stylesheet" />
+
+
+</head>
+<body>
+<header>
+    <nav>
+        <ul>
+            <li><a th:href="@{/index}">Pocetna</a></li>
+            <li><a href="#">Kategorije</a></li>
+            <li><a href="#">O nama</a></li>
+        </ul>
+    </nav>
+    <!--<img src="../static/images/logo.png" alt="Logo">-->
+    <div id="navbar-login">
+        <ul>
+            <li><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
+            <li><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
+            <li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i>       Postavite novi oglas</button></li>
+        </ul>
+    </div>
+</header>
+
+<div class="form-body">
+    <div class="row">
+        <div class="form-holder">
+            <div class="form-content">
+                <div class="form-items">
+                    <h3>Prijavi se</h3>
+                    <form class="requires-validation" novalidate th:action="@{/login}" method="POST">
+
+                        <div class="col-md-12">
+                            <input class="form-control" type="text" name="email" placeholder="Email" required>
+                            <div class="invalid-feedback">Email ne sme biti prazan!</div>
+                        </div>
+
+                        <div class="col-md-12">
+                            <input class="form-control" type="text" name="password" placeholder="Sifra" required>
+                            <div class="invalid-feedback">Sifra ne sme biti prazna!</div>
+                        </div>
+
+
+                        <div class="form-button mt-3">
+                            <button id="submit" type="submit" class="btn btn-primary">Prijavi se</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
+    <footer>
+        <div class="row my-5 justify-content-center py-5">
+            <div class="col-11">
+                <div class="row ">
+                    <div class="col-xl-8 col-md-4 col-sm-4 col-12   my-auto mx-auto a"><h3 class="text-muted mb-md-0 mb-5 bold-text">Pepper.</h3></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 bold-text "><b>MENU</b></h6><ul class="list-unstyled"><li>Home</li><li>About</li><li>Blog</li><li>Portfolio</li></ul></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 text-muted bold-text mt-sm-0 mt-5"><b>ADDRESS</b></h6><p class="mb-1">605, RATAN ICON BUILDING</p><p>SEAWOODS SECTOR</p> </div>
+                </div>
+                <div class="row ">
+                    <div class="col-xl-8 col-md-4 col-sm-4 col-auto  my-md-0 mt-5 order-sm-1 order-3 align-self-end"><p class="social text-muted mb-0 pb-0 bold-text"> <span  class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span> </p><small class="rights"><span>&#174;</span> Pepper All Rights Reserved.</small></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-auto order-1 align-self-end "><h6 class="mt-55 mt-2 text-muted bold-text"><b>ANIRUDH SINGLA</b></h6><small> <span><i class="fa fa-envelope" aria-hidden="true"></i></span> anirudh@gmail.com</small></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-auto order-2 align-self-end mt-3   "><h6 class="text-muted bold-text"><b>RISHABH SHEKHAR</b></h6><small><span><i class="fa fa-envelope" aria-hidden="true"></i></span> rishab@gmail.com</small></div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
+<script src="/js/main.js"></script>
+</body>
+</html>

SkuciSe/src/main/resources/templates/register.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="description" content="" />
+    <meta name="author" content="" />
+    <title>Small Business - Start Bootstrap Template</title>
+    <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
+
+    <!-- Favicon-->
+    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
+
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+
+    <!-- Core theme CSS (includes Bootstrap)-->
+    <link href="/css/style.css" rel="stylesheet" />
+
+
+</head>
+<body>
+<header>
+    <nav>
+        <ul>
+            <li><a th:href="@{/index}">Pocetna</a></li>
+            <li><a href="#">Kategorije</a></li>
+            <li><a href="#">O nama</a></li>
+        </ul>
+    </nav>
+    <!--<img src="../static/images/logo.png" alt="Logo">-->
+    <div id="navbar-login">
+        <ul>
+            <li><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Uloguj se</span></a></li>
+            <li><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
+            <li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i>       Postavite novi oglas</button></li>
+        </ul>
+    </div>
+</header>
+
+<div class="form-body">
+    <div class="row">
+        <div class="form-holder">
+            <div class="form-content">
+                <div class="form-items">
+                    <h3>Registrujte se</h3>
+                    <p>Popunite podatke ispod.</p>
+                    <form class="requires-validation" novalidate th:object="${newUser}" method="POST" th:action="@{/register-proccess}">
+
+                        <div class="col-md-12">
+                            <input th:field="${newUser.ime}" class="form-control" type="text" name="name" placeholder="Ime" required>
+                            <div class="valid-feedback">Dobro ime!</div>
+                            <div class="invalid-feedback">Ime ne sme biti prazno!</div>
+                        </div>
+
+                        <div class="col-md-12">
+                            <input th:field="${newUser.prezime}" class="form-control" type="text" name="surname" placeholder="Prezime" required>
+                            <div class="valid-feedback">Dobro prezime!</div>
+                            <div class="invalid-feedback">Prezime ne sme biti prazno!</div>
+                        </div>
+
+                        <div class="col-md-12">
+                            <input th:field="${newUser.telefon}" class="form-control" type="text" name="phone" placeholder="Broj telefona" required>
+                            <div class="valid-feedback">Dobar broj!</div>
+                            <div class="invalid-feedback">Broj telefona ne sme biti prazan!</div>
+                        </div>
+
+                        <div class="col-md-12">
+                            <input th:field="${newUser.email}" class="form-control" type="email" name="email" placeholder="E-mail Adresa" required>
+                            <div class="valid-feedback">Dobar email!</div>
+                            <div class="invalid-feedback">Email ne sme biti prazan!</div>
+                        </div>
+
+
+
+                        <div class="col-md-12">
+                            <input th:field="${newUser.sifra}" class="form-control" type="password" name="password" placeholder="Sifra" required>
+                            <div class="valid-feedback">Dobra sifra!</div>
+                            <div class="invalid-feedback">Sifra ne sme biti prazna!</div>
+                        </div>
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+                            <label class="form-check-label">Potvrdjujem da su svi podaci tacni</label>
+                            <div class="invalid-feedback">Molim vas da potvrdite da su svi podaci tacni!</div>
+                        </div>
+
+
+                        <div class="form-button mt-3">
+                            <button id="submit" type="submit" class="btn btn-primary">Registruj se</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
+    <footer>
+        <div class="row my-5 justify-content-center py-5">
+            <div class="col-11">
+                <div class="row ">
+                    <div class="col-xl-8 col-md-4 col-sm-4 col-12   my-auto mx-auto a"><h3 class="text-muted mb-md-0 mb-5 bold-text">Pepper.</h3></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 bold-text "><b>MENU</b></h6><ul class="list-unstyled"><li>Home</li><li>About</li><li>Blog</li><li>Portfolio</li></ul></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 text-muted bold-text mt-sm-0 mt-5"><b>ADDRESS</b></h6><p class="mb-1">605, RATAN ICON BUILDING</p><p>SEAWOODS SECTOR</p> </div>
+                </div>
+                <div class="row ">
+                    <div class="col-xl-8 col-md-4 col-sm-4 col-auto  my-md-0 mt-5 order-sm-1 order-3 align-self-end"><p class="social text-muted mb-0 pb-0 bold-text"> <span  class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span> </p><small class="rights"><span>&#174;</span> Pepper All Rights Reserved.</small></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-auto order-1 align-self-end "><h6 class="mt-55 mt-2 text-muted bold-text"><b>ANIRUDH SINGLA</b></h6><small> <span><i class="fa fa-envelope" aria-hidden="true"></i></span> anirudh@gmail.com</small></div>
+                    <div class="col-xl-2 col-md-4 col-sm-4 col-auto order-2 align-self-end mt-3   "><h6 class="text-muted bold-text"><b>RISHABH SHEKHAR</b></h6><small><span><i class="fa fa-envelope" aria-hidden="true"></i></span> rishab@gmail.com</small></div>
+                </div>
+            </div>
+        </div>
+    </footer>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
+<script src="/js/main.js"></script>
+<!-- Core theme JS-->
+</body>
+</html>