I have a problem while styling my Laravel. I've downloaded a third party theme and css file one for the user template and the other one is for the admin panel template. Both have different css styling. The problem occurred when the user tried to log in and the font, title logo, and some button color in the user hompage suddenly changed. I've stored the files separately, I created admin folder for the admin, and for the user I just paste it in the public folder.
Here is my code for both user and admin.
---ADMIN Home.blade.php---
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
@include('admin.css')
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_sidebar.html -->
@include('admin.sidebar')
<!-- partial -->
@include('admin.navbar')
<!-- partial -->
<!-- container-scroller -->
<!-- plugins:js -->
@include('admin.script')
<!-- End custom js for this page -->
</body>
</html>
---ADMIN css.blade.php---
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Admin Panel</title>
<!-- plugins:css -->
<link rel="stylesheet" href="admin/assets/vendors/mdi/css/materialdesignicons.min.css">
<link rel="stylesheet" href="admin/assets/vendors/css/vendor.bundle.base.css">
<!-- endinject -->
<!-- Plugin css for this page -->
<link rel="stylesheet" href="admin/assets/vendors/jvectormap/jquery-jvectormap.css">
<link rel="stylesheet" href="admin/assets/vendors/flag-icon-css/css/flag-icon.min.css">
<link rel="stylesheet" href="admin/assets/vendors/owl-carousel-2/owl.carousel.min.css">
<link rel="stylesheet" href="admin/assets/vendors/owl-carousel-2/owl.theme.default.min.css">
<!-- End plugin css for this page -->
<!-- inject:css -->
<!-- endinject -->
<!-- Layout styles -->
<link rel="stylesheet" href="admin/assets/css/style.css">
<!-- End layout styles -->
<link rel="shortcut icon" href="admin/assets/images/favicon.png" />
---USER Home.blade.php---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>E-Konsultasi</title>
<link rel="stylesheet" href="../assets/css/maicons.css">
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<link rel="stylesheet" href="../assets/vendor/owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href="../assets/vendor/animate/animate.css">
<link rel="stylesheet" href="../assets/css/theme.css">
</head>
<body>
<!-- Back to top button -->
<div class="back-to-top"></div>
<header>
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-sm-8 text-sm">
<div class="site-info">
<a href="#"><span class="mai-call text-primary"></span> </a>
<span class="divider">|</span>
<a href="#"><span class="mai-mail text-primary"></span> </a>
</div>
</div>
<div class="col-sm-4 text-right text-sm">
<div class="social-mini-button">
<a href=""><span class="mai-logo-youtube"></span></a>
<a href=""><span class="mai-logo-instagram"></span></a>
</div>
</div>
</div> <!-- .row -->
</div> <!-- .container -->
</div> <!-- .topbar -->
<nav class="navbar navbar-expand-lg navbar-light shadow-sm">
<div class="container">
<a class="navbar-brand" href="/"><span class="text-primary">E</span>-Konsultasi</a>
<div class="collapse navbar-collapse" id="navbarSupport">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Beranda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#layanan">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Kontak</a>
</li>
@if (Route::has('login'))
@auth
<li class="nav-item">
<a class="nav-link" href="{{url('cek_konsul')}}">Cek Status Konsul</a>
</li>
<x-app-layout>
</x-app-layout>
@else
<li class="nav-item">
<a class="btn btn-primary ml-lg-3" href="{{route('register')}}">Login / Register</a>
</li>
@endauth
@endif
</ul>
</div> <!-- .navbar-collapse -->
</div> <!-- .container -->
</nav>
</header>
@if (session()->has('message'))
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">x</button>
{{session()->get('message')}}
</div>
@endif
<div class="page-hero bg-image overlay-dark" style="background-image: url(../assets/img/Consult01.jpg);">
<div class="hero-section">
<div class="container text-center wow zoomIn">
<span class="subhead">Konsultasi Seputar</span>
<h1 class="display-4">Barang dan Jasa</h1>
@if (Route::has('login'))
@auth
@else
<a href="{{route('register')}}" class="btn btn-primary">Konsultasi Sekarang</a>
@endauth
@endif
</div>
</div>
</div>
<div class="bg-light">
<div class="page-section py-3 mt-md-n5 custom-index">
<div class="container">
</div>
</div> <!-- .page-section -->
<div class="page-section pb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 py-3 wow fadeInUp">
<h1>Konsultasi Masalah<br> Berbasis Elektronik</h1>
<p class="text-grey mb-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Accusantium aperiam earum ipsa eius, inventore nemo labore eaque porro consequatur ex aspernatur. Explicabo, excepturi accusantium! Placeat voluptates esse ut optio facilis!</p>
</div>
<div class="col-lg-6 wow fadeInRight" data-wow-delay="400ms">
<div class="img-place custom-img-1">
<img src="../assets/img/logoukpbj.jpeg" alt="">
</div>
</div>
</div>
</div>
</div> <!-- .bg-light -->
</div> <!-- .bg-light -->
<div class="page-section" id="layanan">
<div class="container">
<h1 class="text-center mb-5 wow fadeInUp">Jenis Layanan</h1>
<div class="owl-carousel wow fadeInUp" id="doctorSlideshow">
<div class="item">
<div class="card-doctor">
<div class="header">
<img height="300px" src="../assets/img/isiform.jpg" alt="">
</div>
<div class="body">
<p class="text-xl mb-0">Isi Form<br> Konsultasi</p>
<span class="text-sm text-grey">Lengakapi formulir dan submit keluhan dan permasalahan yang ingin ditanyakan.</span>
@if (Route::has('login'))
@auth
<div class="col text-center">
<a href="{{url('form_konsul')}}" class="btn btn-primary mt-3">Isi Sekarang</a>
</div>
@else
<div class="col text-center">
<a href="{{route('register')}}" class="btn btn-primary mt-3">Isi Sekarang</a>
</div>
@endauth
@endif
</div>
</div>
</div>
<div class="item">
<div class="card-doctor">
<div class="header">
<img height="300px" src="../assets/img/f2f01.jpg" alt="">
</div>
<div class="body">
<p class="text-xl mb-0">Buat Jadwal Konsul Tatap Muka</p>
<span class="text-sm text-grey">Atur jadwal konsul tatap muka bersama admin secara langsung.</span>
@if (Route::has('login'))
@auth
<div class="col text-center">
<a href="" class="btn btn-primary mt-3">Isi Sekarang</a>
</div>
@else
<div class="col text-center">
<a href="{{route('register')}}" class="btn btn-primary mt-3">Isi Sekarang</a>
</div>
@endauth
@endif
</div>
</div>
</div>
<div class="item">
<div class="card-doctor">
<div class="header">
<img height="300px" src="../assets/img/zoom01.png" alt="">
</div>
<div class="body">
<p class="text-xl mb-0">Buat Jadwal Konsul Online</p>
<span class="text-sm text-grey">Atur jadwal konsul secara online melalui aplikasi zoom meeting.</span>
@if (Route::has('login'))
@auth
<div class="col text-center">
<a href="" class="btn btn-primary mt-3">Isi Sekarang</a>
</div>
@else
<div class="col text-center">
<a href="{{route('register')}}" class="btn btn-primary mt-3">Isi Sekarang</a>
</div>
@endauth
@endif
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer" id="footer">
<div class="container">
<div class="row px-md-3">
<div class="col-sm-6 col-lg-3 py-3">
<h5>E-Konsultasi</h5>
<p class="footer-link mt-2">Unit Kerja Pengadaan Barang dan Jasa Sekretariat Daerah Kota Pontianak</p>
</div>
<div class="col-sm-6 col-lg-3 py-3">
</div>
<div class="col-sm-6 col-lg-3 py-3">
</div>
<div class="col-sm-6 col-lg-3 py-3">
<h5>Kontak</h5>
<p class="footer-link mt-2"></p>
<a href="#" class="footer-link"></a>
<a href="#" class="footer-link"></a>
<h5 class="mt-3">Social Media</h5>
<div class="footer-sosmed mt-3">
<a href="" target="_blank"><span class="mai-logo-youtube"></span></a>
<a href="" target="_blank"><span class="mai-logo-instagram"></span></a>
</div>
</div>
</div>
<hr>
<p id="copyright">Copyright © 2022 E-Konsultasi UKPBJ. All right reserved</p>
</div>
</footer>
<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/owl-carousel/js/owl.carousel.min.js"></script>
<script src="../assets/vendor/wow/wow.min.js"></script>
<script src="../assets/js/theme.js"></script>
</body>
</html>
Is there anything I did wrong? Thank
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
Laravel is a free open source PHP framework that came out in 2011. Since then, it has been able to become the framework of choice for web developers. One of the main reasons for this is that Laravel makes it easier, faster, and safer to develop complex web applications than any other framework.
https://laravel.com/
JQuery is arguably the most popular JavaScript library with so many features for modern development. JQuery is a fast and concise JavaScript library created by John Resig in 2006. It is a cross-platform JavaScript library designed to simplify client-side HTML scripting. Over 19 million websites are currently using jQuery! Companies like WordPress, Facebook, Google, IBM and many more rely on jQuery to provide a kind of web browsing experience.
https://jquery.com/
CSS (Cascading Style Sheets) is a formal language for describing the appearance of a document written using a markup language.
It is mainly used as a means of describing, decorating the appearance of web pages written using HTML and XHTML markup languages, but can also be applied to any XML documents, such as SVG or XUL.
https://www.w3.org/TR/CSS/#css
Bootstrap is not exclusively a CSS framework, but its most popular features are CSS-centric. These include a powerful grid, icons, buttons, map components, navigation bars, and more.
https://getbootstrap.com/
There are several libraries that do almost the same thing: add one or more animations to a specified element. The first such library to gain popularity in recent years was Dan Eden's Animate.css. This fun library contains dozens of built-in animations that shake, fade, slide, scale, and more.
https://animate.style/
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.