update: add responsive layout on landing page and dasboard
This commit is contained in:
parent
2e30200d46
commit
59d96eff16
|
|
@ -11,6 +11,7 @@
|
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
{{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}
|
||||
|
||||
|
||||
<title>iCLOP</title>
|
||||
|
|
@ -63,17 +64,19 @@
|
|||
@auth
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="container" style="margin-top: 70px; justify-content: center; align-items: center;">
|
||||
<p style="font-size: 22px;">Choose your<br><span style="font-size: 35px; font-weight: 600; color: #34364A;">Learning Materials</span></p>
|
||||
<div class="container px-4 px-md-0" style="margin-top: 70px;">
|
||||
<!-- Judul -->
|
||||
<p style="font-size: 22px;">Choose your<br>
|
||||
<span style="font-size: 35px; font-weight: 600; color: #34364A;">Learning Materials</span>
|
||||
</p>
|
||||
|
||||
<!-- CARD 1 -->
|
||||
<!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
|
||||
<div class="row" style="margin-top: 45px;">
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src={{asset("./images/cards/Android.png")}} class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Android.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Android programming
|
||||
with Java and Kotlin</h5>
|
||||
<h5 class="card-title">Android programming with Java and Kotlin</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src={{asset("./images/book.png")}} style="width: 13px; height: 16px;">
|
||||
|
|
@ -82,43 +85,43 @@
|
|||
<p>18 learning topics</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: auto;">
|
||||
<div class="mt-auto">
|
||||
<a href="/android23/topic" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src={{asset("./images/cards/Flutter.png")}} class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Flutter.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Mobile programming with Flutter</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src={{asset("./images/book.png")}} style="width: 13px; height: 16px;">
|
||||
<img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>18 learning topics</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: auto;">
|
||||
<div class="mt-auto">
|
||||
<a href="/flutter/start" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-0" style="width: 305px; height:375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src={{asset("./images/cards/Node.js.png")}} class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Node.js.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Web application with Node.JS</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src={{asset("./images/book.png ")}} style="width: 13px; height: 16px;">
|
||||
<img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>18 learning topics</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: auto;">
|
||||
<div class="mt-auto">
|
||||
<a href="/nodejs" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,9 +131,9 @@
|
|||
|
||||
<!-- CARD 2 -->
|
||||
<!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
|
||||
<div class="row" style="margin-top: 45px;">
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/Python.png")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Python.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Python programming</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -147,8 +150,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/MySQL.png")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/MySQL.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">SQL Querying with MySQL</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -165,8 +168,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/PostgreSQL.png")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/PostgreSQL.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">SQL Querying with PostgreSQL</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -187,9 +190,9 @@
|
|||
|
||||
<!-- CARD 3 -->
|
||||
<!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
|
||||
<div class="row" style="margin-top: 45px;">
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/Network.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Network.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Network programming with Java</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -206,8 +209,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/Unity.png")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Unity.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Game programming with Unity</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -224,8 +227,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/Data analytic.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/Data analytic.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Data Analytics with Python</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -242,9 +245,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 45px;">
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/DB.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<!-- ---------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
<!-- CARD 4 -->
|
||||
<!-- <div class="row" style="margin-top: 45px; display: flex; justify-content: center; align-items: center;"> -->
|
||||
<div class="d-flex flex-wrap" style="gap: 25px; margin-top: 45px;">
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/DB.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Database with PHP Programming</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -260,8 +267,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/React.jpg")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/React.jpg') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Learn React JS</h5>
|
||||
<div class="row align-items-start">
|
||||
|
|
@ -276,16 +284,15 @@
|
|||
<a href="{{ route('react_welcome') }}" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<!-- Hapus class mt-3 biar gambar mepet ke atas -->
|
||||
<img src="{{asset('./images/cards/literacy.png')}}" class="card-img-top"
|
||||
style="width: 100%; height: 200px; object-fit: cover; border-radius: 5px 5px 0 0;">
|
||||
</div>
|
||||
|
||||
<div class="card p-0 shadow-sm" style="width: 305px; height: 375px;">
|
||||
<img src="{{ asset('./images/cards/literacy.png') }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Learn Literacy</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src="{{asset('./images/book.png')}}" style="width: 13px; height: 16px;">
|
||||
<img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>6 learning topics</p>
|
||||
|
|
@ -297,28 +304,11 @@
|
|||
@elseif(Auth::user()->role === 'student')
|
||||
<a href="{{ route('literacy_student_materials') }}" class="btn btn-primary">Start Learning</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{asset("./images/cards/DB.png ")}}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">Database Programming with PHP</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src="{{asset("./images/book.png ")}}" style="width: 13px; height: 16px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>18 learning topics</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: auto;">
|
||||
<a href="{{ route('welcome') }}" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ---------------------------------------------------------------------------------------------------- -->
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
|
|
@ -375,7 +365,9 @@
|
|||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
|
||||
</script>
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
||||
<link href="{{asset('css/style.css')}}" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
<title>iCLOP</title>
|
||||
|
||||
<title>iCLOP</title>
|
||||
|
||||
<!-- Bootstrap 5 (CSS & JS Bundle) -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
||||
|
||||
<!-- Bootstrap 5 Bundle JS (includes Popper, NO jQuery needed) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
|
@ -1,97 +1,118 @@
|
|||
<style>
|
||||
.btn-google {
|
||||
text-decoration: none;
|
||||
border: 1px solid #1466C2;
|
||||
color: #1466C2;
|
||||
display: inline-block;
|
||||
padding: 10px 100px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-google:hover {
|
||||
background-color: #0056b3; /* Warna latar saat di-hover */
|
||||
color: white; /* Warna teks saat di-hover */
|
||||
}
|
||||
text-decoration: none;
|
||||
border: 1px solid #1466C2;
|
||||
color: #1466C2;
|
||||
display: inline-block;
|
||||
padding: 10px 100px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn-google:hover {
|
||||
background-color: #0056b3;
|
||||
/* Warna latar saat di-hover */
|
||||
color: white;
|
||||
/* Warna teks saat di-hover */
|
||||
}
|
||||
</style>
|
||||
<nav class="navbar navbar-expand-lg" style="background-color: #fff; ">
|
||||
<div class="container-fluid">
|
||||
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
|
||||
<img src="./images/logo.png" alt="logo" width="104" height="65">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<div class="mx-auto">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0 justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Tutorials</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
|
||||
<img src="./images/logo.png" alt="logo" width="104" height="65">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<div class="mx-auto">
|
||||
<ul class="navbar-nav mb-2 mb-lg-0 justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Tutorials</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" style="border-radius: 20px; margin-right: 10px; width: 100px; height: 35px;">Sign In</button>
|
||||
<button class="btn btn-primary custom-button-sign-up" onclick="window.location.href='{{ route('signup') }}'">Sign Up</button>
|
||||
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#loginModal"
|
||||
style="border-radius: 20px; margin-right: 10px; width: 100px; height: 35px;">Sign In</button>
|
||||
<button class="btn btn-primary custom-button-sign-up" onclick="window.location.href='{{ route('signup') }}'">Sign
|
||||
Up</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- MODAL -->
|
||||
<div class="modal" id="loginModal">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn-close" aria-label="Close" data-dismiss="modal"></button>
|
||||
</div>
|
||||
<!-- Modal Header -->
|
||||
<div class="modal-header border-0">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div class="modal-body" style="margin-bottom:100px;">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 content-left">
|
||||
<img src="./images/sign-in.png" alt="Illustration" style="width: 450px; height: 450px; margin-right: 50px; margin-left: 50px;">
|
||||
</div>
|
||||
<!-- IMAGE -->
|
||||
<div class="col-lg-6 content-right" style="padding-right: 180px;">
|
||||
<!-- TITLE -->
|
||||
<p class="sign-in-modal">Sign In</p>
|
||||
<p class="welcome-modal">Welcome back! Please enter<br>your details.</p>
|
||||
<!-- FORM -->
|
||||
<form action="{{route('login')}}" method="post">
|
||||
@csrf
|
||||
<div class="form-modal">
|
||||
<label for="email" class="form-label" style="text-align: left; font-weight: 500">Email</label>
|
||||
<input class="form-control" list="datalistOptions" id="email" placeholder="Email" name="email" style=" margin-bottom: 20px;">
|
||||
<!-- Modal Body -->
|
||||
<div class="modal-body">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<!-- IMAGE SECTION -->
|
||||
<div class="col-12 col-lg-6 text-center mb-4 mb-lg-0">
|
||||
<img src="./images/sign-in.png" alt="Illustration" class="img-fluid" style="max-height: 400px;">
|
||||
</div>
|
||||
|
||||
<!-- FORM SECTION -->
|
||||
<div class="col-12 col-lg-6 px-4 px-lg-5">
|
||||
<!-- TITLE -->
|
||||
<p class="sign-in-modal fs-3 fw-bold mb-1">Sign In</p>
|
||||
<p class="welcome-modal text-muted mb-4">Welcome back! Please enter your details.</p>
|
||||
|
||||
<!-- FORM -->
|
||||
<form action="{{ route('login') }}" method="post">
|
||||
@csrf
|
||||
|
||||
<!-- Email -->
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label fw-medium">Email</label>
|
||||
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label fw-medium">Password</label>
|
||||
<input type="password" class="form-control" id="password" name="password" placeholder="Password"
|
||||
required>
|
||||
</div>
|
||||
|
||||
<!-- Sign In Button -->
|
||||
<div class="d-grid mb-3">
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Google Sign In -->
|
||||
<div class="d-grid mb-3">
|
||||
<a href="{{ route('google.redirect') }}"
|
||||
class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2">
|
||||
<img src="./images/google.png" alt="Google Icon" style="width: 16px; height: 16px;">
|
||||
Sign In with Google
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="form-modal">
|
||||
<label for="password" class="form-label" style="text-align: left; font-weight: 500">Password</label>
|
||||
<input type="password" class="form-control" list="datalistOptions" id="password" name="password" placeholder="Password" style=" margin-bottom: 20px;">
|
||||
</div>
|
||||
<!-- BUTTON SIGN IN -->
|
||||
<button type="submit" class="btn btn-primary custom-button-sign-in-modal">Sign In</button>
|
||||
{{-- <button class="btn btn-primary custom-button-sign-in-modal" type="submit" value="login"> --}}
|
||||
</form>
|
||||
<a href="{{ route('google.redirect') }}" class="btn-google mt-3">
|
||||
<img src="./images/google.png" style="width: 15px; height: 15px;" alt="Google Icon"> Sign In with Google
|
||||
</a>
|
||||
<p class="dont-have-account-modal">Don’t have an account? <span style="color: #1466C2;" onclick="window.location.href='signup'"><a href="javascript:void(0)" style="text-decoration: none;">Sign Up</a></span></p>
|
||||
|
||||
<!-- Sign Up Link -->
|
||||
<p class="text-center mb-0">
|
||||
Don’t have an account?
|
||||
<a href="{{ route('signup') }}" class="text-primary text-decoration-none">Sign Up</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<!-- <div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,123 +1,111 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
@extends('partials.header') <!-- Menggunakan bagian header -->
|
||||
<link rel="icon" href="./images/logo.png" type="image/png">
|
||||
@include('partials.header')
|
||||
<link rel="icon" href="{{ asset('images/logo.png') }}" type="image/png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- NAVBAR -->
|
||||
@include('partials.navbar') <!-- Menggunakan bagian navbar -->
|
||||
@include('partials.navbar')
|
||||
|
||||
<!-- CONTENT -->
|
||||
<div class="container" style="margin-top: 50px;">
|
||||
<div class="container mt-5">
|
||||
<div class="row">
|
||||
<!-- TEXT -->
|
||||
<div class="col-lg-6 content-left">
|
||||
<p class="welcome-to-iclop">Welcome To iCLOP</p>
|
||||
<p class="where-education" style="line-height:60px ;">Where Your <span class="education">Education</span> Has No
|
||||
Limit</p>
|
||||
<p class="where-education" style="line-height:60px;">Where Your <span class="education">Education</span> Has No Limit</p>
|
||||
<p class="subtext">iCLOP (intelligent computer assisted programming learning platform)</p>
|
||||
<p class="subtext">With our easy-to-follow tutorials and examples, you can learn to code in no time. Learn to
|
||||
code by reading tutorials, trying out examples, and writing applications.</p>
|
||||
<p class="subtext">With our easy-to-follow tutorials and examples, you can learn to code in no time...</p>
|
||||
</div>
|
||||
<!-- IMAGE -->
|
||||
<div class="col-lg-6 content-right">
|
||||
<img src="./images/Edeucation.png" alt="Illustration" style="width: 500px; height: auto;">
|
||||
<img src="{{ asset('images/Edeucation.png') }}" alt="Illustration" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="margin-top: 10px">
|
||||
<div class="container mt-3">
|
||||
<div class="row">
|
||||
<!-- IMAGE -->
|
||||
<div class="col-lg-6 content-left">
|
||||
<img src="./images/online_virtual_machine.png" alt="Illustration" style="width: 500px; height: auto;">
|
||||
<img src="{{ asset('images/online_virtual_machine.png') }}" alt="VM" class="img-fluid">
|
||||
</div>
|
||||
<!-- TEXT -->
|
||||
<div class="col-lg-6 content-right">
|
||||
<p class="where-education" style="font-size: 40px;">Online Virtual Machine</p>
|
||||
<p style="font-size: 20px; margin-top: 35px;">Make learning an easy process with support for an online virtual
|
||||
machine which will relieve you from the hustle of finding the right computer for your learning needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="background-color: #FAFAFA; height: 750px; margin-top: 50px; display: flex; flex-direction: column; align-items: center;">
|
||||
<p class="where-education" style="font-size: 35px; text-align: center; margin-top: 50px;">Choose What You Want To
|
||||
Study</p>
|
||||
<p class="popular-languages" style="font-size: 20px; text-align: center;">Begin By Studying Some of The Most
|
||||
Popular Programming Languages</p>
|
||||
<div class="row" style="margin-top: 50px;">
|
||||
|
||||
<div class="container text-center" style="margin-top: 35px;">
|
||||
<div class="row">
|
||||
@foreach ($cards as $card)
|
||||
<div class="card p-0" style="width: 305px; height: 375px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<img src="{{ $card['image'] }}" class="card-img-top" style="width: auto; height: 200px;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">{{ $card['title'] }}</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src="./images/book.png" style="width: 13px; height: 16px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>{{ $card['topics'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: auto;">
|
||||
<a href="#" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button class="btn btn-primary custom-button-sign-up" style="width: 252px; height: 42px; margin-top: 60px;">Load
|
||||
More</button>
|
||||
</div>
|
||||
|
||||
<p class="where-education" style="font-size: 40px; text-align: center; margin-top: 50px;">Our Services</p>
|
||||
<p style="font-size: 25px; text-align: center; margin-top: 25px; color: #636363;">Make Your Learning
|
||||
Experience<br>Extraordinary With The Services We Provide</p>
|
||||
|
||||
<!-- CARD 1 -->
|
||||
<div class="container text-center" style="margin-top: 100px;">
|
||||
<div class="row">
|
||||
@foreach ($cardsData as $card)
|
||||
<div class="col" style="width: 430px; height: 440px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<div class="container">
|
||||
<img src="{{ $card['image'] }}" alt="computer" style="height: 102px; margin-left: 30px; margin-top: 20px;">
|
||||
<p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
|
||||
<p style="font-size: 18px;">{{ $card['description'] }}<br>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARD 2 -->
|
||||
<div class="container text-center" style="margin-top: 35px;">
|
||||
<div class="row">
|
||||
@foreach ($cardsData2 as $card)
|
||||
<div class="col" style="width: 430px; height: 440px; margin-left: 25px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
|
||||
<div class="container">
|
||||
<img src="{{ $card['image'] }}" alt="computer" style="height: 102px; margin-left: 30px; margin-top: 20px;">
|
||||
<p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
|
||||
<p style="font-size: 18px;">{{ $card['description'] }}<br>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<p style="font-size: 20px; margin-top: 35px;">Make learning an easy process...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
<footer>
|
||||
@include('partials.footer')
|
||||
</footer>
|
||||
<div class="container py-5" style="background-color: #FAFAFA;">
|
||||
<p class="where-education text-center" style="font-size: 35px;">Choose What You Want To Study</p>
|
||||
<p class="popular-languages text-center" style="font-size: 20px;">Begin By Studying Some of The Most Popular Programming Languages</p>
|
||||
|
||||
<div class="row gx-4 gy-4 justify-content-center mt-4">
|
||||
@foreach ($cards as $card)
|
||||
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4 d-flex justify-content-center">
|
||||
<div class="card p-0 shadow-sm" style="width: 100%; max-width: 305px; height: 375px;">
|
||||
<img src="{{ $card['image'] }}" class="card-img-top" style="height: 200px; object-fit: cover;">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">{{ $card['title'] }}</h5>
|
||||
<div class="row align-items-start">
|
||||
<div class="col-1">
|
||||
<img src="{{ asset('images/book.png') }}" style="width: 13px; height: 16px;">
|
||||
</div>
|
||||
<div class="col">
|
||||
<p>{{ $card['topics'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-auto">
|
||||
<a href="#" class="btn btn-primary">Start Learning</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<button class="btn btn-primary custom-button-sign-up" style="width: 252px; height: 42px;">Load More</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container text-center mt-5">
|
||||
<p class="where-education" style="font-size: 40px;">Our Services</p>
|
||||
<p style="font-size: 25px; color: #636363;">Make Your Learning Experience<br>Extraordinary With The Services We Provide</p>
|
||||
</div>
|
||||
|
||||
<div class="container text-center mt-5">
|
||||
<div class="row gx-4 gy-4 justify-content-center">
|
||||
@foreach ($cardsData as $card)
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex justify-content-center">
|
||||
<div class="card shadow-sm" style="width: 100%; max-width: 430px; height: 440px;">
|
||||
<div class="card-body">
|
||||
<img src="{{ $card['image'] }}" alt="icon" style="height: 102px; margin-top: 20px;">
|
||||
<p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
|
||||
<p style="font-size: 18px;">{{ $card['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container text-center mt-4">
|
||||
<div class="row gx-4 gy-4 justify-content-center">
|
||||
@foreach ($cardsData2 as $card)
|
||||
<div class="col-12 col-md-6 col-lg-4 mb-4 d-flex justify-content-center">
|
||||
<div class="card shadow-sm" style="width: 100%; max-width: 430px; height: 440px;">
|
||||
<div class="card-body">
|
||||
<img src="{{ $card['image'] }}" alt="icon" style="height: 102px; margin-top: 20px;">
|
||||
<p style="font-size: 22px; font-weight: 600; color: #34364A; margin-top: 24px;">{{ $card['title'] }}</p>
|
||||
<p style="font-size: 18px;">{{ $card['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="{{ asset('script.js') }}"></script>
|
||||
|
||||
@include('partials.footer')
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user