Skip to content

Commit 8dfc8ae

Browse files
snykksnykk
committed
create landing page
1 parent 387c483 commit 8dfc8ae

File tree

6 files changed

+178
-1
lines changed

6 files changed

+178
-1
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ npm-debug.log
1414
yarn-error.log
1515
/.idea
1616
/.vscode
17+
/sample

‎public/css/landing.css

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@import url("https://fonts.googleapis.com/css?family=Varela+Round");
2+
@import url("https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i");
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
}
9+
10+
html {
11+
scroll-padding-top: calc(4.5rem - 1px) !important;
12+
}
13+
14+
body {
15+
letter-spacing: 0.0625em !important;
16+
}
17+
18+
.btn {
19+
box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
20+
padding: 1.25rem 2rem;
21+
font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI",
22+
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
23+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
24+
font-size: 80%;
25+
text-transform: uppercase;
26+
letter-spacing: 0.15rem;
27+
border: 0;
28+
}
29+
30+
.btn-primary {
31+
color: #fff;
32+
background-color: #64a19d;
33+
border-color: #64a19d;
34+
}
35+
.btn-primary:hover {
36+
color: #fff;
37+
background-color: #558985;
38+
border-color: #50817e;
39+
}
40+
.btn-check:focus + .btn-primary,
41+
.btn-primary:focus {
42+
color: #fff;
43+
background-color: #558985;
44+
border-color: #50817e;
45+
box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5);
46+
}
47+
.btn-check:checked + .btn-primary,
48+
.btn-check:active + .btn-primary,
49+
.btn-primary:active,
50+
.btn-primary.active,
51+
.show > .btn-primary.dropdown-toggle {
52+
color: #fff;
53+
background-color: #50817e;
54+
border-color: #4b7976;
55+
}
56+
.btn-check:checked + .btn-primary:focus,
57+
.btn-check:active + .btn-primary:focus,
58+
.btn-primary:active:focus,
59+
.btn-primary.active:focus,
60+
.show > .btn-primary.dropdown-toggle:focus {
61+
box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5);
62+
}
63+
.btn-primary:disabled,
64+
.btn-primary.disabled {
65+
color: #fff;
66+
background-color: #64a19d;
67+
border-color: #64a19d;
68+
}
69+
70+
.masthead {
71+
position: relative;
72+
width: 100%;
73+
height: auto;
74+
min-height: 35rem;
75+
padding: 15rem 0;
76+
background: linear-gradient(
77+
to bottom,
78+
rgba(0, 0, 0, 0.3) 0%,
79+
rgba(0, 0, 0, 0.7) 75%,
80+
#000 100%
81+
),
82+
url("/img/landing-background.jpg");
83+
background-position: center;
84+
background-repeat: no-repeat;
85+
background-attachment: scroll;
86+
background-size: cover;
87+
}
88+
.masthead h1,
89+
.masthead .h1 {
90+
font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI",
91+
Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
92+
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
93+
font-size: 2.5rem;
94+
line-height: 2.5rem;
95+
letter-spacing: 0.8rem;
96+
background: linear-gradient(
97+
rgba(255, 255, 255, 0.9),
98+
rgba(255, 255, 255, 0)
99+
);
100+
-webkit-text-fill-color: transparent;
101+
-webkit-background-clip: text;
102+
background-clip: text;
103+
}
104+
.masthead h2,
105+
.masthead .h2 {
106+
max-width: 20rem;
107+
font-size: 1rem;
108+
}
109+
@media (min-width: 768px) {
110+
.masthead h1,
111+
.masthead .h1 {
112+
font-size: 4rem;
113+
line-height: 4rem;
114+
}
115+
}
116+
@media (min-width: 992px) {
117+
.masthead {
118+
height: 100vh;
119+
padding: 0;
120+
}
121+
.masthead h1,
122+
.masthead .h1 {
123+
font-size: 6.5rem;
124+
line-height: 6.5rem;
125+
letter-spacing: 0.8rem;
126+
}
127+
.masthead h2,
128+
.masthead .h2 {
129+
max-width: 30rem;
130+
font-size: 1.25rem;
131+
}
132+
}

‎public/img/landing-background.jpg

3.13 MB
Loading

‎resources/views/landing/index.blade.php

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@extends('/templates/main')
2+
3+
@section("content")
4+
<header class="masthead">
5+
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
6+
<div class="d-flex justify-content-center">
7+
<div class="text-center">
8+
<h1 class="mx-auto my-0 text-uppercase">Laracoffee</h1>
9+
<h2 class="text-white-50 mx-auto mt-2 mb-5">
10+
New way to enjoy quality coffee
11+
</h2>
12+
<a class="btn btn-primary" href="auth">Get Started</a>
13+
</div>
14+
</div>
15+
</div>
16+
</header>
17+
@endsection

‎resources/views/templates/main.blade.php

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>{{ $title }}</title>
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
10+
11+
@if ( isset($css) )
12+
<link href="/css/{{ $css }}.css" rel="stylesheet" />
13+
@endif
14+
15+
</head>
16+
17+
<body>
18+
@yield("content")
19+
20+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
21+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
22+
</body>
23+
24+
</html>

‎routes/web.php

+4-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,8 @@
1414
*/
1515

1616
Route::get('/', function () {
17-
return view('welcome');
17+
return view('/landing.index', [
18+
"title" => "Landing Page",
19+
"css" => "landing"
20+
]);
1821
});

0 commit comments

Comments
 (0)