feat: added header, footer and proper styling

This commit is contained in:
Aqqil Azman
2024-05-27 13:39:15 +08:00
parent 1517edf346
commit 335dace8a9
+29 -9
View File
@@ -1,3 +1,4 @@
@extends('layouts.base_portal')
<!doctype html>
<html lang="en">
<head>
@@ -16,12 +17,24 @@
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: white;
border-radius: 50%;
color: green;
font-size: 24px;
}
</style>
</head>
<body>
<header>
<!-- place navbar here -->
</header>
@section('inner_content')
<main>
<div class="container p-3">
<div class="row mb-3">
@@ -30,7 +43,7 @@
<!-- For loop here for multiple package -->
<div class="border p-3 mt-3">
<div class="row">
<div class="col-md-4">
<div class="col-md-3">
<div class="p-2">
<div class="fw-bold">Package ID:</div>
<div>AWS27897BB5</div>
@@ -38,7 +51,7 @@
<div>25x25x25 CM / 25KG</div>
</div>
</div>
<div class="col-md-4">
<div class="col-md-3">
<div class="p-2">
<div class="fw-bold">Delivery Address:</div>
<div>3-05-12, Lorem Ipsum, Magnum Opus</div>
@@ -46,12 +59,17 @@
<div>05/12/2026</div>
</div>
</div>
<div class="col-auto p-5">
<div class="col-md-3 p-5">
<div>Shipping Cost:</div>
<div class="h4">
$6969
</div>
</div>
<div class="col-auto p-5 m-3">
<div class="icon-circle">
<i class="fas fa-check"></i>
</div>
</div>
</div>
</div>
</div>
@@ -98,9 +116,9 @@
You will get grouped package at once if possible
</small>
</label>
<input class="form-check-input mt-3" type="checkbox" value="" id="" />
<input class="form-check-input m-3" type="checkbox" value="" id="" />
</div>
<div class="mt-3">
<div class="col mt-3">
<div class="d-grid gap-2">
<button
type="button"
@@ -116,9 +134,11 @@
</div>
</div>
</div>
</main>
@endsection
<footer>
<!-- place footer here -->
</footer>
<!-- Bootstrap JavaScript Libraries -->
<script