API tools faq
paste
Advertisement
Talithacelin

AFL3

Talithacelin
May 16th, 2025 (edited)
150
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Python 8.28 KB | None | 0 0
raw download clone embed print report
  1. header.blade.php
  2.  
  3.   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  4.   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
  5.   <style>
  6.     .top-bar {
  7.       background-color: #3d0d5d;
  8.       padding: 16px 24px;
  9.     }
  10.  
  11.     .brand-text {
  12.       color: white;
  13.     }
  14.  
  15.     .brand-subtitle {
  16.       font-size: 0.9rem;
  17.       color: #dcdcdc;
  18.     }
  19.  
  20.     .search-wrapper {
  21.       position: relative;
  22.       max-width: 450px;
  23.       width: 100%;
  24.       flex: 1;
  25.     }
  26.  
  27.     .search-wrapper input {
  28.       padding-left: 38px;
  29.       border-radius: 8px;
  30.     }
  31.  
  32.     .search-wrapper .fa-search {
  33.       position: absolute;
  34.       top: 50%;
  35.       left: 12px;
  36.       transform: translateY(-50%);
  37.       color: #aaa;
  38.     }
  39.  
  40.     @media (max-width: 576px) {
  41.         .search-wrapper {
  42.             width: 100%;
  43.             max-width: 100%;
  44.             margin-top: 10px;
  45.         }
  46.  
  47.         .header-content {
  48.             flex-direction: column;
  49.             align-items: flex-start;
  50.             gap: 2rem;
  51.         }
  52.     }
  53.  
  54.     .bottom-bar {
  55.       background-color: #f8f9fa;
  56.       padding: 0px 20px;
  57.       border-top: 1px solid #ddd;
  58.       padding-left: 3rem;  /* jarak kiri */
  59.       padding-right: 3rem; /* jarak kanan */
  60.     }
  61.  
  62.     .navbar .nav-link {
  63.       color: #000;
  64.       font-weight: 500;
  65.     }
  66.  
  67.     .navbar .nav-link:hover {
  68.       color: #6f42c1;
  69.     }
  70.  
  71.     .icon-badge {
  72.       position: relative;
  73.       display: inline-block;
  74.     }
  75.  
  76.     .icon-badge .badge {
  77.       position: absolute;
  78.       top: -6px;
  79.       right: -8px;
  80.       background-color: #8079f7;
  81.       color: white;
  82.       font-size: 12px;
  83.       font-weight: 600;
  84.       width: 18px;
  85.       height: 18px;
  86.       border-radius: 50%;
  87.       display: flex;
  88.       justify-content: center;
  89.       align-items: center;
  90.       padding: 0;
  91.       line-height: 1;
  92.     }
  93.  
  94.     .hover-dropdown:hover > .dropdown-menu {
  95.       display: block;
  96.       margin-top: 0;
  97.     }
  98.  
  99.     .nav-link span {
  100.       position: absolute;
  101.       top: -8px;
  102.       right: -12px;
  103.       background-color: #8079f7;
  104.       color: white;
  105.       font-size: 12px;
  106.       font-weight: 600;
  107.       width: 18px;
  108.       height: 18px;
  109.       border-radius: 50%;
  110.       display: flex;
  111.       justify-content: center;
  112.       align-items: center;
  113.       padding: 0;
  114.       line-height: 1;
  115.     }
  116.    
  117.   </style>
  118.  
  119. <body>
  120.  
  121. <!-- Top Bar -->
  122. <div class="top-bar">
  123.   <div class="d-flex justify-content-between align-items-center header-content">
  124.     <div class="d-flex align-items-center gap-4 w-100">
  125.       <div>
  126.         <h4 class="brand-text mb-0">AMETHYSHELF</h4>
  127.         <div class="brand-subtitle">ISB's Largest Bookstore</div>
  128.      </div>
  129.      <div class="search-wrapper" style="flex:1;">
  130.        <i class="fas fa-search"></i>
  131.        <input type="text" class="form-control" placeholder="Cari Produk">
  132.      </div>
  133.    </div>
  134.    <div class="text-white d-flex align-items-center">
  135.        Felicia <i class="fas fa-user ms-2"></i>
  136.    </div>
  137.  
  138.  </div>
  139. </div>
  140.  
  141. <div class="bottom-bar">
  142.  <div class="container-fluid">
  143.    <nav class="navbar navbar-expand-md navbar-light">
  144.      <div class="collapse navbar-collapse show">
  145.        <div class="row w-100">
  146.          <!-- Kiri -->
  147.          <div class="col-12 col-md-8">
  148.            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
  149.              <li class="nav-item dropdown hover-dropdown mx-3">
  150.                <a class="nav-link dropdown-toggle" href="#" role="button">Categories</a>
  151.                <ul class="dropdown-menu">
  152.                  <li><a class="dropdown-item" href="#">Novel</a></li>
  153.                  <li><a class="dropdown-item" href="#">Fiction</a></li>
  154.                  <li><a class="dropdown-item" href="#">Education</a></li>
  155.                </ul>
  156.              </li>
  157.              <li class="nav-item mx-3"><a class="nav-link" href="#">Products</a></li>
  158.              <li class="nav-item mx-3"><a class="nav-link" href="#">Order History</a></li>
  159.              <li class="nav-item mx-3"><a class="nav-link" href="#">About Us</a></li>
  160.            </ul>
  161.          </div>
  162.  
  163.          <!-- Kanan -->
  164.          <div class="col-12 col-md-4">
  165.            <ul class="navbar-nav ms-md-auto justify-content-md-end">
  166.              <li class="nav-item me-3">
  167.                <a class="nav-link" href="#"><i class="far fa-heart me-1"></i> Wishlist</a>
  168.              </li>
  169.              <li class="nav-item">
  170.                <a class="nav-link d-flex align-items-center" href="#" style="gap:4px;">
  171.                  <div style="position: relative; display: inline-block;">
  172.                    <i class="fas fa-shopping-cart"></i>
  173.                    <span>1</span>
  174.                  </div>
  175.                  My Cart
  176.                </a>
  177.              </li>
  178.            </ul>
  179.          </div>
  180.        </div>
  181.      </div>
  182.    </nav>
  183.  </div>
  184. </div>
  185. </body>
  186.  
  187. footer.blade.php
  188.  
  189.  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  190.  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  191.  <style>
  192.    .footer {
  193.      background-color: #3d0d5d;
  194.      color: white;
  195.      padding: 40px 60px 20px;
  196.      margin-top: 40px;
  197.    }
  198.  
  199.    .footer h6 {
  200.      font-weight: bold;
  201.      margin-bottom: 15px;
  202.    }
  203.  
  204.    .footer a {
  205.      color: white;
  206.      text-decoration: none;
  207.      font-size: 0.9rem;
  208.      margin-bottom: 6px;
  209.      display: block;
  210.    }
  211.  
  212.    .footer a:hover {
  213.      text-decoration: underline;
  214.    }
  215.  
  216.    .footer-bottom {
  217.      border-top: 1px solid #ccc;
  218.      text-align: center;
  219.      padding-top: 10px;
  220.      margin-top: 20px;
  221.      font-size: 0.85rem;
  222.    }
  223.  
  224.    .social-icons i {
  225.      margin-right: 8px;
  226.    }
  227.  
  228.    @media (max-width: 768px) {
  229.      .footer {
  230.        padding: 30px 20px;
  231.      }
  232.    }
  233.  </style>
  234.  
  235. <body>
  236.  
  237. <footer class="footer">
  238.  <div class="container-fluid">
  239.    <div class="row">
  240.      <div class="col-md-3 col-sm-6 mb-3">
  241.        <h6>Information</h6>
  242.        <a href="#">About Us</a>
  243.        <a href="#">Shipping & Delivery</a>
  244.        <a href="#">Terms & Condition</a>
  245.        <a href="#">Privacy Policy</a>
  246.      </div>
  247.      <div class="col-md-3 col-sm-6 mb-3">
  248.        <h6>Customer Service</h6>
  249.        <a href="#">Contact Us</a>
  250.        <a href="#">How to Register</a>
  251.        <a href="#">How to Shop</a>
  252.      </div>
  253.      <div class="col-md-3 col-sm-6 mb-3">
  254.        <h6>My Account</h6>
  255.        <a href="#">Account Details</a>
  256.        <a href="#">Order History</a>
  257.        <a href="#">Wishlist</a>
  258.      </div>
  259.      <div class="col-md-3 col-sm-6 mb-3">
  260.        <h6>Our Social Media</h6>
  261.        <a href="#"><i class="fab fa-instagram"></i> Amethyshelf.co</a>
  262.        <a href="#"><i class="fab fa-facebook"></i> Amethyshelf.co</a>
  263.        <a href="#"><i class="fab fa-twitter"></i> Amethyshelf.co</a>
  264.        <a href="#"><i class="fab fa-tiktok"></i> Amethyshelf.co</a>
  265.      </div>
  266.    </div>
  267.  
  268.    <div class="footer-bottom">
  269.      © 2025 AMETHYSHELF BY GROUP 1
  270.    </div>
  271.  </div>
  272. </footer>
  273. </body>
  274.  
  275. base.blade.php
  276. <!DOCTYPE html>
  277. <html lang="en">
  278. <head>
  279.    <meta charset="UTF-8">
  280.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  281.    <meta http-equiv="X-UA-Compatible" content="ie=edge">
  282.    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  283.    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  284.    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  285.    <title>My Store</title>
  286. </head>
  287. <body>
  288.    @include('include.header')
  289.    <div class="container-fluid" style="min-width:100%; margin:0 auto;" >
  290.        @yield('content')
  291.    </div>
  292.    @include('include.footer')
  293. </body>
  294. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!