File: /var/www/html/fieldsblaze-heroku/resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FieldBlaze Web App</title>
{{-- Favicon --}}
<link rel="shortcut icon" href="{{ asset('uploads/favicon.png') }}">
<link rel="icon" type="image/png" href="{{ asset('uploads/favicon.png') }}">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,600&display=swap"
rel="stylesheet">
<!-- Styles -->
<style>
html,
body {
background-color: #fff;
color: #e27600;
font-family: 'Poppins', sans-serif;
font-weight: 200;
margin: 0;
background-image: url(uploads/fb-bg.jpg);
background-position: center center;
background-size: cover;
/* background-repeat: no-repeat; */
background-attachment: fixed;
position: relative;
z-index: 1;
}
.full-height {
height: 60vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
background: #498b5d;
opacity: 0.85;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
font-weight: bold;
}
.links>a {
color: #fff;
padding: 10px 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
a.login-btn {
background-color: #002147;
}
a.login-btn:hover {
background-color: #e27600;
}
a.register-btn {
background-color: #3ec59a;
}
a.register-btn:hover {
background-color: #e27600;
}
.m-b-md {
margin-bottom: 30px;
}
/* Header Style */
.header-fixed {
background-color: rgb(41 44 47 / 75%);
box-shadow: 0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
top: -100px;
-webkit-transition: top 0.3s;
transition: top 0.3s;
}
.header-fixed .header-limiter {
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
/* The header placeholder. It is displayed when the header is fixed to the top of the
browser window, in order to prevent the content of the page from jumping up. */
.header-fixed-placeholder {
height: 80px;
display: none;
}
/* The navigation links */
.header-fixed .header-limiter a {
color: #ffffff;
text-decoration: none;
}
.header-fixed .header-limiter nav {
line-height: 40px;
}
.header-fixed .header-limiter nav a {
display: inline-block;
padding: 0 15px;
text-decoration: none;
color: #ffffff;
opacity: 0.9;
}
.header-fixed .header-limiter nav a:hover {
opacity: 1;
}
.header-fixed .header-limiter nav a.selected {
color: #608bd2;
pointer-events: none;
opacity: 1;
}
/* Fixed version of the header */
body.fixed .header-fixed {
padding: 10px 40px;
height: 50px;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
body.fixed .header-fixed-placeholder {
display: block;
}
body.fixed .header-fixed .header-limiter h1 {
font-size: 24px;
line-height: 30px;
}
body.fixed .header-fixed .header-limiter nav {
line-height: 28px;
font-size: 13px;
}
/* Making the header responsive */
@media all and (max-width: 600px) {
.header-fixed {
padding: 20px 0;
height: 75px;
}
.header-fixed .header-limiter h1 {
float: none;
margin: -8px 0 10px;
text-align: center;
font-size: 24px;
line-height: 1;
}
.header-fixed .header-limiter nav {
line-height: 1;
float: none;
}
.header-fixed .header-limiter nav a {
font-size: 13px;
}
body.fixed .header-fixed {
display: none;
}
}
/* Footer */
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
font-size: 14px;
background-color: rgb(41 44 47 / 75%);
color: #fff;
text-align: center;
border-top: 1px solid a {
text-decoration: none;
color: inherit;
border-bottom: 1px solid;
&:hover {
border-bottom: 1px transparent;
}
}
}
</style>
</head>
<body>
<header class="header-fixed">
<div class="header-limiter">
<nav>
<a href="#">About Us</a>
<a href="#">Help</a>
<a href="#">Support</a>
<a href="#">FAQs</a>
<a href="#">Contact Us</a>
</nav>
</div>
</header>
<div class="header-fixed-placeholder"></div>
<div class="position-ref">
<div class="content" style="text-align: center;">
<img class="img-fluid" src="{{ url('/uploads/Field_Blaze_logo.png') }}" alt="FieldBlaze"
style="max-width: 250px; padding-top:50px">
<!-- <div class="title m-b-md">
Welcome to <span style="color: #002147;">Field</span><span style="color: #3ec59a;">Blaze</span>
</div> -->
</div>
</div>
<div class="flex-center position-ref full-height">
<div class="content">
@if (Route::has('login'))
<div class="links">
@auth
<a href="{{ url('/home') }}">Home</a>
@else
<a href="{{ route('login') }}" class="login-btn">Login</a>
@if (Route::has('register'))
<a href="{{ route('register') }}" class="register-btn">Register</a>
@endif
@endauth
</div>
@endif
</div>
</div>
<!-- Footer starts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var showHeaderAt = 150;
var win = $(window),
body = $('body');
// Show the fixed header only on larger screen devices
if(win.width() > 400){
// When we scroll more than 150px down, we set the
// "fixed" class on the body element.
win.on('scroll', function(e){
if(win.scrollTop() > showHeaderAt) {
body.addClass('fixed');
}
else {
body.removeClass('fixed');
}
});
}
});
</script>
<footer>
<!-- Copyright -->
<div class="footer-copyright text-center">©
<?php echo date('Y'); ?> Developed by
<a href="https://cccinfotech.com/" class="white-text" target="_blank"
style="color: #e27600; text-decoration: none;">CloudCentric Infotech Pvt Ltd.</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer ends-->
</body>
</html>