Update Landing Page

This commit is contained in:
Ananda Zakia S 2023-12-15 23:07:50 +07:00
parent b34bfeecf0
commit b0cde1ea1c
2 changed files with 334 additions and 282 deletions

View File

@ -92,7 +92,7 @@ .hero_area {
-webkit-box-direction: normal; -webkit-box-direction: normal;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
background-color: #7335b7; background-color: #0a0734;
border-radius: 0 0 350px 0; border-radius: 0 0 350px 0;
} }
@ -273,7 +273,7 @@ .slider_section {
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
padding: 45px 0; padding: 30px 0;
} }
.slider_section .row { .slider_section .row {
@ -317,12 +317,12 @@ .slider_section .detail-box .btn-box a {
.slider_section .detail-box .btn-box .btn1 { .slider_section .detail-box .btn-box .btn1 {
display: inline-block; display: inline-block;
padding: 12px 15px; padding: 12px 15px;
background-color: #5a2a8f; background-color: #0a0734;
color: #ffffff; color: #ffffff;
border-radius: 5px; border-radius: 5px;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
border: 1px solid #5a2a8f; border: 1px solid #0a0734;
} }
.slider_section .detail-box .btn-box .btn1:hover { .slider_section .detail-box .btn-box .btn1:hover {
@ -332,7 +332,7 @@ .slider_section .detail-box .btn-box .btn1:hover {
} }
.slider_section .img-box img { .slider_section .img-box img {
width: 100%; width: 70%;
} }
.slider_section .carousel-indicators { .slider_section .carousel-indicators {
@ -373,7 +373,7 @@ .service_section .heading_container {
.service_section .box { .service_section .box {
margin-top: 25px; margin-top: 25px;
padding: 15px; padding: 10px;
border-radius: 10px; border-radius: 10px;
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
@ -439,7 +439,7 @@ .service_section .box:hover {
.service_section .box:hover::before { .service_section .box:hover::before {
-webkit-transform: scale(5); -webkit-transform: scale(5);
transform: scale(5); transform: scale(5);
background-color: #7335b7; background-color: #0a0734;
} }
.service_section .box:hover img { .service_section .box:hover img {
@ -460,12 +460,12 @@ .service_section .btn-box {
.service_section .btn-box a { .service_section .btn-box a {
display: inline-block; display: inline-block;
padding: 10px 45px; padding: 10px 45px;
background-color: #7335b7; background-color: #0a0734;
color: #ffffff; color: #ffffff;
border-radius: 5px; border-radius: 5px;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
border: 1px solid #7335b7; border: 1px solid #0a0734;
} }
.service_section .btn-box a:hover { .service_section .btn-box a:hover {
@ -475,7 +475,7 @@ .service_section .btn-box a:hover {
} }
.about_section { .about_section {
background-color: #7335b7; background-color: #0a0734;
color: #ffffff; color: #ffffff;
border-radius: 250px 0 250px 0; border-radius: 250px 0 250px 0;
} }
@ -557,7 +557,7 @@ .case_section .box .detail-box p {
} }
.case_section .box .detail-box a { .case_section .box .detail-box a {
color: #7335b7; color: #0a0734;
} }
/* Gaya tambahan jika diperlukan */ /* Gaya tambahan jika diperlukan */
@ -607,7 +607,7 @@ .client_section .box .client_info .client_name h5 {
.client_section .box .client_info .client_name h6 { .client_section .box .client_info .client_name h6 {
margin-bottom: 0; margin-bottom: 0;
color: #7335b7; color: #0a0734;
font-weight: normal; font-weight: normal;
font-size: 15px; font-size: 15px;
text-transform: uppercase; text-transform: uppercase;
@ -623,7 +623,7 @@ .client_section .box p {
.client_section .box .detail-box { .client_section .box .detail-box {
background-color: #ffffff; background-color: #ffffff;
background-color: #7335b7; background-color: #0a0734;
color: #ffffff; color: #ffffff;
border-radius: 15px; border-radius: 15px;
padding: 85px 45px 15px 45px; padding: 85px 45px 15px 45px;
@ -641,7 +641,7 @@ .client_section .carousel-indicators {
} }
.client_section .carousel-indicators li { .client_section .carousel-indicators li {
background-color: #7335b7; background-color: #0a0734;
width: 10px; width: 10px;
height: 10px; height: 10px;
border-radius: 100%; border-radius: 100%;
@ -698,12 +698,12 @@ .contact_section button {
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
display: inline-block; display: inline-block;
padding: 10px 65px; padding: 10px 65px;
background-color: #7335b7; background-color:#0a0734;
color: #ffffff; color: #ffffff;
border-radius: 3px; border-radius: 3px;
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
border: 1px solid #7335b7; border: 1px solid #0a0734;
color: #fff; color: #fff;
margin-top: 10px; margin-top: 10px;
} }
@ -715,7 +715,7 @@ .contact_section button:hover {
} }
.contact_section .map_container { .contact_section .map_container {
height: 100%; height: 50%;
min-height: 325px; min-height: 325px;
overflow: hidden; overflow: hidden;
margin-left: 45px; margin-left: 45px;
@ -730,9 +730,9 @@ .contact_section .map_container .map #googleMap {
} }
.footer_container { .footer_container {
background-color: #7335b7; background-color: #0a0734;
color: #ffffff; color: #ffffff;
border-radius: 350px 0 0 0; border-radius: 100px 0 0 0;
padding-top: 145px; padding-top: 145px;
} }
@ -868,16 +868,16 @@ .info_section form button:hover {
/* end info section */ /* end info section */
/* footer section*/ /* footer section*/
.footer_section { .footer_section {
position: relative; position: center;
text-align: center; text-align: center;
} }
.footer_section p { .footer_section p {
padding: 25px 0; padding: 10px 0;
margin: 0; margin: 0;
} }
.footer_section p a { .footer_section p a {
color: inherit; color: inherit;
} }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

View File

@ -12,7 +12,7 @@
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="author" content="" /> <meta name="author" content="" />
<title>MAN 3 BANYUWANGI</title> <title>Home | SIPEX</title>
<!-- bootstrap core css --> <!-- bootstrap core css -->
@ -20,7 +20,7 @@
<!-- Swiper CSS --> <!-- Swiper CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- font awesome style --> <!-- font awesome style -->
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" /> <link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
@ -39,9 +39,6 @@
<div class="container-fluid"> <div class="container-fluid">
<nav class="navbar navbar-expand-lg custom_nav-container "> <nav class="navbar navbar-expand-lg custom_nav-container ">
<a class="navbar-brand" href="home.blade.php"> <a class="navbar-brand" href="home.blade.php">
<span>
MAN 3 BANYUWANGI
</span>
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@ -49,30 +46,28 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav "> <ul class="navbar-nav">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="about.html"> About</a> <a class="nav-link" href="#ekstrakurikuler">Ekstrakurikuler</a>
</li> </li>
<li class="nav-item">
<a class="nav-link" href="service.html">Extracuricular</a>
</li>
</ul> </ul>
<div class="quote_btn-container"> <div class="quote_btn-container">
<a href="login.blade.php" class="quote_btn"> <a href="{{ route('login') }}" class="quote_btn">
Get A Quote Login
</a> </a>
</div> </div>
</div> </div>
</nav> </nav>
</div> </div>
</header> </header>
<!-- end header section --> <!-- end header section -->
<!-- slider section --> <!-- slider section -->
<section class="slider_section "> <section id="home" class="slider_section ">
<div id="customCarousel1" class="carousel slide" data-ride="carousel"> <div id="customCarousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div class="carousel-item active">
@ -86,16 +81,11 @@
<div class="col-md-6"> <div class="col-md-6">
<div class="detail-box"> <div class="detail-box">
<h1> <h1>
Digital Marketing Experts Sistem Pendukung Keputusan
</h1> </h1>
<p> <h2>
Aenean scelerisque felis ut orci condimentum laoreet. Integer nisi nisl, convallis et augue sit amet, lobortis semper quam. Pemilihan Ekstrakurikuler Siswa MAN 3 Banyuwangi
</p> </h2>
<div class="btn-box">
<a href="" class="btn1">
Contact Us
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -108,29 +98,29 @@
<!-- end slider section --> <!-- end slider section -->
</div> </div>
<!-- service section --> <!-- ekstrakurikuler section -->
<section class="service_section layout_padding"> <section id="ekstrakurikuler" class="service_section layout_padding">
<div class="container"> <div class="container">
<div class="heading_container"> <div class="heading_container">
<h2> <h2>
Category Extracuricular Ekstrakurikuler
</h2> </h2>
<p> <p>
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Kegiatan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</p> </p>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-3">
<div class="box"> <div class="box">
<div class="img-box"> <div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt=""> <img src="{{ asset('img/s3.png') }}" alt="">
</div> </div>
<div class="detail-box"> <div class="detail-box">
<h5> <h5>
Olahraga Futsal
</h5> </h5>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Ekstrakurikuler di bidang olahraga
</p> </p>
<a href=""> <a href="">
<span> <span>
@ -141,17 +131,122 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Tenis Meja
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Silat
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Badminton
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Catur
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s3.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Taekwondo
</h5>
<p>
Ekstrakurikuler di bidang olahraga
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box"> <div class="box">
<div class="img-box"> <div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt=""> <img src="{{ asset('img/s1.png') }}" alt="">
</div> </div>
<div class="detail-box"> <div class="detail-box">
<h5> <h5>
Seni Seni Lukis
</h5> </h5>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Ekstrakurikuler di bidang seni
</p> </p>
<a href=""> <a href="">
<span> <span>
@ -162,245 +257,202 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-4"> <div class="col-md-6 col-lg-3">
<div class="box"> <div class="box">
<div class="img-box"> <div class="img-box">
<img src="{{ asset('img/s2.png') }}" alt=""> <img src="{{ asset('img/s1.png') }}" alt="">
</div> </div>
<div class="detail-box"> <div class="detail-box">
<h5> <h5>
KSM Seni Tari
</h5> </h5>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, Ekstrakurikuler di bidang seni
</p> </p>
<a href=""> <a href="">
<span> <span>
Read More Read More
</span> </span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i> <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a> </a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Teater
</h5>
<p>
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="box">
<div class="img-box">
<img src="{{ asset('img/s1.png') }}" alt="">
</div>
<div class="detail-box">
<h5>
Jurnalis
</h5>
<p>
Ekstrakurikuler di bidang seni
</p>
<a href="">
<span>
Read More
</span>
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</section> </section>
<!-- end service section --> <!-- end service section -->
<!-- case section --> {{-- <!-- case section -->
<section class="case_section layout_padding"> <section class="case_section layout_padding">
<div class="container"> <div class="container">
<div class="heading_container"> <div class="heading_container">
<h2>Studi Kasus Kami</h2> <h2>Studi Kasus Kami</h2>
</div>
<!-- Kontainer Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div> </div>
</div>
<!-- Slide 2 --> <div class="row">
<div class="swiper-slide"> <!-- Kolom 1 -->
<div class="box"> <div class="col-md-3">
<div class="img-box"> <div class="box">
<img src="img/case-2.jpg" alt=""> <div class="img-box">
</div> <img src="img/case-1.jpg" alt="">
<div class="detail-box"> </div>
<h5>Excepturi Placeat Nihil Eos Maxime</h5> <div class="detail-box">
</div> <h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
<!-- Kolom 2 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
<!-- Kolom 3 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
<!-- Kolom 4 -->
<div class="col-md-3">
<div class="box">
<div class="img-box">
<img src="img/case-1.jpg" alt="">
</div>
<div class="detail-box">
<h5>Sit Amet Consectetur Adipisicing Elit</h5>
</div>
</div>
</div>
</div> </div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide">
<div class="box">
<div class="img-box">
<img src="img/case-2.jpg" alt="">
</div>
<div class="detail-box">
<h5>Excepturi Placeat Nihil Eos Maxime</h5>
</div>
</div>
</div>
<!-- Tambahkan slide lainnya sesuai kebutuhan -->
</div> </div>
<!-- Tombol Navigasi --> </section>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
<!-- end case section -->
<!-- end case section --> --}}
<div class="footer_container"> <div class="footer_container">
<!-- info section --> <!-- info section -->
<section class="info_section "> <section class="info_section ">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6 col-lg-3 "> <div class="col-md-4">
<div class="info_detail"> <div class="info_detail">
<h4> <h4>
Digian Sistem Pendukung Keputusan Pemilihan Ekstrakurikuler Siswa di MAN 3 Banyuwangi
</h4> </h4>
<p> </div>
Necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful </div>
</p> <div class="col-md-4">
<div class="info_link_box">
<h4>
Links
</h4>
<div class="info_links">
<a class="" href="#home">
Home
</a>
<a class="" href="#ekstrakurikuler">
Ekstrakurikuler
</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="info_contact">
<h4>
Address
</h4>
<div class="contact_link_box">
<a href="https://maps.app.goo.gl/ibCGWyfsxw8pbR6i9">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>
Location
</span>
</a>
<a href="mailto:man3banyuwangi@gmail.com">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>
Email
</span>
</a>
<a href="tel:+62333397173">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>
Telepon
</span>
</a>
<a href="https://www.instagram.com/osimman3banyuwangi" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
<span>
Instagram
</span>
</a>
</div>
</div>
</div>
</div> </div>
</div>
<div class="col-md-6 col-lg-2 mx-auto">
<div class="info_link_box">
<h4>
Links
</h4>
<div class="info_links">
<a class="" href="index.html">
Home
</a>
<a class="" href="about.html">
About
</a>
<a class="" href="service.html">
Services
</a>
<a class="" href="contact.html">
Contact Us
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 ">
<h4>
Subscribe
</h4>
<form action="#">
<input type="text" placeholder="Enter email" />
<button type="submit">
Subscribe
</button>
</form>
</div>
<div class="col-md-6 col-lg-3 mb-0 ml-auto">
<div class="info_contact">
<h4>
Address
</h4>
<div class="contact_link_box">
<a href="">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>
Location
</span>
</a>
<a href="">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>
Call +01 1234567890
</span>
</a>
<a href="">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>
demo@gmail.com
</span>
</a>
</div>
</div>
<div class="info_social">
<a href="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
</div> </div>
</div>
</section> </section>
<!-- end info section --> <!-- end info section -->
<!-- footer section --> <!-- footer section -->
@ -408,7 +460,7 @@
<div class="container"> <div class="container">
<p> <p>
&copy; <span id="displayYear"></span> All Rights Reserved By &copy; <span id="displayYear"></span> All Rights Reserved By
<a href="https://html.design/">Free Html Templates</a> <a href="home">SIPEX</a>
</p> </p>
</div> </div>
</footer> </footer>
@ -442,4 +494,4 @@
</body> </body>
</html> </html>