Untitled


<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Laptopify | Get Your Own Laptop</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <script src="https://kit.fontawesome.com/a076d05399.js"></script>

</head>

<body>
  <div class="header" style="width: 100%">
    <div class="container">

  <!-- Navbar content -->
      <nav>
      <div class="menu-icon">
<span class="fas fa-bars"></span></div>
<div class="logo">Laptopify</div>
<div class="nav-items">
  <li><a href="{{url('/')}}">Home</a></li>
  <li>
    <a href="{{url('/productspage')}}">
      <div class="dropdown">
        <button class="dropbtn">Products ▼</button>
        <div class="dropdown-content">
          <a href="#" style="color: #000;">Link 1</a>
          <a href="#" style="color: #000;">Link 2</a>
          <a href="#" style="color: #000;">Link 3</a>
        </div>
      </div>
    </a>
  </li>
  <li><a href="">About</a></li>
  <li><a href="">Contact</a></li>
  @if(Auth::check())
      <li><a href="{{url('/logout')}}">Logout</a></li>
      <li><a href="{{url('/cart')}}"><img src="images/cart.png"></i>

</a></li>
  @else
      <li><a href="{{url('/login')}}">Login</a></li>
  @endif
</div>
<div class="search-icon">
<span class="fas fa-search"></span></div>
<div class="cancel-icon">
<span class="fas fa-times"></span></div>
<form action="{{url('/showSearch')}}" method="POST">
  @csrf
        <input type="search" class="search-data" name="searchText" placeholder="Search" required>
        <button type="submit" class="fas fa-search"></button>
      </form>
</nav>
<script>
    const menuBtn = document.querySelector(".menu-icon span");
    const searchBtn = document.querySelector(".search-icon");
    const cancelBtn = document.querySelector(".cancel-icon");
    const items = document.querySelector(".nav-items");
    const form = document.querySelector("form");
    menuBtn.onclick = ()=>{
      items.classList.add("active");
      menuBtn.classList.add("hide");
      searchBtn.classList.add("hide");
      cancelBtn.classList.add("show");
    }
    cancelBtn.onclick = ()=>{
      items.classList.remove("active");
      menuBtn.classList.remove("hide");
      searchBtn.classList.remove("hide");
      cancelBtn.classList.remove("show");
      form.classList.remove("active");
      cancelBtn.style.color = "#ff3d00";
    }
    searchBtn.onclick = ()=>{
      form.classList.add("active");
      searchBtn.classList.add("hide");
      cancelBtn.classList.add("show");
    }
  </script>


      </div>
      <div class="row">
        <div class="col-2">
          <h1>Get Your <br>Own Laptop!</h1>
          <p>The new way to get your own laptop.<br> Easier than ever, with a wide range of specs to find your liking.
          </p>
          <a href="/productspage" class="btn">Start Shopping &#8594; </a>
        </div>
        <div class="col-2">
          <img src="images/legion-y540.webp">
        </div>


    </div>
  </div>

  <!------------ Brands------------>
  <div class="brands">
    <h2 class="title">Brands</h2>
    <div class="pageContainer">
      <div class="row">
        <div class="col-5">
          <a href="/search/<?php echo "Lenovo"?>"> <img src="images/brands/logo1.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Dell"?>"> <img src="images/brands/logo2.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Asus"?>"> <img src="images/brands/logo3.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Apple"?>"> <img src="images/brands/logo4.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Samsung"?>"> <img src="images/brands/logo5.png"></a>
        </div>
      </div>
      <div class="row">
        <div class="col-5">
            <a href="/search/<?php echo "Toshiba"?>"> <img src="images/brands/logo6.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Msi"?>"> <img src="images/brands/logo7.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Microsoft"?>"> <img src="images/brands/logo8.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "HP"?>"> <img src="images/brands/logo9.png"></a>
        </div>
        <div class="col-5">
            <a href="/search/<?php echo "Sony"?>"> <img src="images/brands/logo10.png"></a>
        </div>
      </div>
    </div>
  </div>
  <!--Offer-->
  <div class="offer">
    <div class="pageContainer">
      <div class="row">
        <div class="col-2">
          <img src="images/Products/Alienware/Alienware_6.png">
        </div>
        <div class="col-2">
          <p>Special offer on Laptopify</p>
          <h1>Silver AlienWare by Dell</h1>
          <small>The incredibly thin and light MacBook Air is now more powerful than ever. It features a
            brilliant Retina display, new Magic Keyboard, Touch ID, processors with up to twice the
            performance,1 faster graphics, and double the storage capacity. The sleek wedge-shaped
            design is created from 100 percent recycled aluminum, making it the greenest Mac ever.2 And
            with all-day battery life, our most popular Mac is your perfectly portable, do-it-all notebook.</small>
          <a href="/productdetails" class="btn">Buy Now &#8594;</a>
        </div>
      </div>
    </div>
  </div>
  <!--featured products-->
  <div class="pageContainer">
    <div class="row">
      <div class="col-4">
        <a href="/getlaptop/Acer/Predator"><img src="images/Products/Acer Predator/Acer Predator_1.jpg"></a>
        <h4>Acer Predator</h4>
        <div class="rating">
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
        </div>
        <p>$1100</p>
      </div>
      <div class="col-4">
      <a href="/getlaptop/Dell/Alienware"> <img src="images/Products/Alienware/Alienware_1.jpg">
        <h4>ALIENWARE</h4>
        <div class="rating">
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star-half-o"></i>
        </div>
        <p>$2500</p>
      </div>
      <div class="col-4">
      <a href="/getlaptop/HP/Omen"><img src="images/Products/HP Omen/HP Omen_1.jpg">
        <h4>HP Omen</h4>
        <div class="rating">
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star-o"></i>
        </div>
        <p>$1500</p>
      </div>
      <div class="col-4">
      <a href="/getlaptop/Lenovo/Legion"> <img src="images/Products/Lenovo Legion/Lenovo Legion_1.jpg">
        <h4>Lenovo Legion</h4>
        <div class="rating">
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star"></i>
          <i class="fa fa-star-half-o"></i>
          <i class="fa fa-star-o"></i>
        </div>
        <p>$1600</p>
      </div>
    </div>
  </div>

  <!--footer-->
  <div class="footer">
    <div class="container">
      <div class="row">
        <div class="footer-col1">
          <h3>Download Our App</h3>
          <p>Download our app for android and iOS.</p>
          <div class="app-logo">
            <img src="images/Icons/playstore.png">
            <img src="images/Icons/appstore.png">
          </div>
        </div>
        <div class="footer-col2">
          <img src="images/Icons/logo.png" style="max-width: 100px;">
          <p>Our Purpose is to get you your own personalized laptop.</p>
        </div>
        <div class="footer-col3">
          <h3>Useful Links</h3>
          <ul>
            <li>Contact Us</li>
            <li>Return Policy</li>
            <li>Services</li>
            <li>Affiliates</li>
          </ul>
        </div>
        <div class="footer-col4">
          <h3>Follow Us</h3>
          <ul>
            <li>Facebook</li>
            <li>Twitter</li>
            <li>Instagram</li>
          </ul>
        </div>
      </div>
      <hr>
      <p class="copyright">Copyright 2020 - Laptopify</p>
    </div>
  </div>
</body>

</html>