Skip to content

Commit 858922a

Browse files
Sukhpreet-sSukhpreet-s
committed
Use landing_page stylesheet for custom styles
1 parent 78924bb commit 858922a

File tree

2 files changed

+145
-157
lines changed

2 files changed

+145
-157
lines changed

‎app/assets/stylesheets/landing_page.scss‎

Lines changed: 107 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,127 @@
1-
html, body {
2-
background-color: white;
3-
height: calc(100vw - 3em);
4-
position: relative;
5-
}
1+
@import 'bootstrap';
62

73
.hero {
8-
&-background {
9-
background: linear-gradient(135deg, #3023AE , #C86DD7);
10-
width: 100%;
11-
color: white;
12-
height: 660px;
13-
@media (max-width: 1200px) {
14-
height: 590px;
15-
}
16-
@media (max-width: 992px) {
17-
height: auto;
18-
}
19-
@media (max-width: 768px) {
20-
height: auto;
21-
}
22-
@media (max-width: 576px) {
23-
height: auto;
24-
}
25-
}
26-
&-image {
27-
flex-basis: 1400px;
28-
@media (max-width: 576px) {
29-
margin-bottom: 20px;
30-
}
31-
@media (max-width: 768px) {
32-
margin-bottom: 20px;
33-
}
34-
}
35-
&-copy {
36-
z-index: 1;
37-
@media (max-width: 768px) {
38-
text-align: center;
39-
}
40-
@media (max-width: 576px) {
41-
text-align: center;
42-
}
43-
}
44-
}
45-
46-
.navbar-brand {
47-
margin-right: none !important;
4+
background: linear-gradient(135deg, #3023AE, #C86DD7);
485

49-
@media (max-width: 568px) {
6+
nav {
507
h2 {
51-
font-size: 0.8em;
8+
@media (max-width: 567px) {
9+
font-size: 1.125rem;
10+
}
5211
}
53-
}
54-
}
55-
56-
.navbar-light .navbar-toggler {
57-
border: none;
58-
margin-top: 13px;
59-
}
6012

61-
button:focus {
62-
outline: none !important;
63-
outline: none !important;
64-
}
13+
button span {
14+
font-size: 1.25rem;
6515

66-
button:hover, button:focus, .button:hover, .button:focus {
67-
background-color: rgba(255, 255, 255, 0) !important;
68-
}
69-
70-
.btn-primary {
71-
background-color: #55af59 !important;
72-
border-color: #55af59 !important;
16+
@media (max-width: 567px) {
17+
font-size: 1rem;
18+
}
19+
}
20+
}
7321
}
7422

75-
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
76-
background-color: #55af59 !important;
77-
border-color: #55af59 !important;
23+
.container-fluid {
24+
max-width: 1280px;
7825
}
7926

80-
.text {
8127

82-
&-header {
83-
color: #454F5B;
84-
}
85-
&-body-color {
86-
color: #919EAB !important;
87-
line-height: 2em;
88-
}
89-
&-testimonials {
90-
color: white;
91-
line-height: 1.5em;
92-
font-size: 14px;
28+
// .navbar-brand {
29+
// margin-right: none !important;
30+
// }
9331

94-
}
95-
}
96-
97-
.description-container {
98-
margin-top: 120px;
99-
@media (max-width: 576px) {
100-
margin-top: 80px;
101-
}
102-
}
32+
// .navbar-light .navbar-toggler {
33+
// border: none;
34+
// margin-top: 13px;
35+
// }
10336

104-
.bottom-cta {
105-
margin-top: 80px;
106-
margin-bottom: 80px;
107-
@media (max-width: 576px) {
108-
margin-top: 50px;
109-
margin-bottom: 50px;
110-
}
111-
}
37+
// button:focus {
38+
// outline: none !important;
39+
// outline: none !important;
40+
// }
11241

113-
.app-images {
114-
width: 400px;
115-
height: 400px;
116-
&-block {
117-
flex-basis: 340px;
118-
}
119-
}
42+
// button:hover,
43+
// button:focus,
44+
// .button:hover,
45+
// .button:focus {
46+
// background-color: rgba(255, 255, 255, 0) !important;
47+
// }
12048

121-
.green-bkg {
122-
background: linear-gradient(45deg, #1AD1BD , #02A98C);
123-
height: auto;
49+
.btn-success {
50+
background-color: #55af59 !important;
51+
border-color: #55af59 !important;
12452
}
12553

126-
.quote {
127-
&-block {
128-
flex-basis: 400px;
129-
}
130-
&-image {
131-
flex-basis: 600px;
132-
}
54+
.btn-success:hover,
55+
.btn-success:focus,
56+
.btn-success:active,
57+
.btn-success.active {
58+
background-color: #408e44 !important;
59+
border-color: #408e44 !important;
13360
}
13461

135-
.footer-content {
136-
background-color: #C4CDD5;
137-
padding-top: 150px;
138-
padding-bottom: 150px;
139-
}
62+
// .text {
63+
64+
// &-header {
65+
// color: #454F5B;
66+
// }
67+
68+
// &-body-color {
69+
// color: #919EAB !important;
70+
// line-height: 2em;
71+
// }
72+
73+
// &-testimonials {
74+
// color: white;
75+
// line-height: 1.5em;
76+
// font-size: 14px;
77+
78+
// }
79+
// }
80+
81+
// .description-container {
82+
// margin-top: 120px;
83+
84+
// @media (max-width: 576px) {
85+
// margin-top: 80px;
86+
// }
87+
// }
88+
89+
// .bottom-cta {
90+
// margin-top: 80px;
91+
// margin-bottom: 80px;
92+
93+
// @media (max-width: 576px) {
94+
// margin-top: 50px;
95+
// margin-bottom: 50px;
96+
// }
97+
// }
98+
99+
// .app-images {
100+
// width: 400px;
101+
// height: 400px;
102+
103+
// &-block {
104+
// flex-basis: 340px;
105+
// }
106+
// }
107+
108+
// .green-bkg {
109+
// background: linear-gradient(45deg, #1AD1BD, #02A98C);
110+
// height: auto;
111+
// }
112+
113+
// .quote {
114+
// &-block {
115+
// flex-basis: 400px;
116+
// }
117+
118+
// &-image {
119+
// flex-basis: 600px;
120+
// }
121+
// }
122+
123+
// .footer-content {
124+
// background-color: #C4CDD5;
125+
// padding-top: 150px;
126+
// padding-bottom: 150px;
127+
// }

‎app/views/static/index.html.erb‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<%# <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script> %>
99
<%# <script src="https://cdn.tailwindcss.com"></script> %>
10-
<%= stylesheet_link_tag 'application', media: 'all' %>
10+
<%= stylesheet_link_tag 'landing_page', media: 'all' %>
1111

1212
<style>
1313
.app-images {
@@ -17,7 +17,7 @@
1717
</head>
1818
<body>
1919
<%= render partial: "shared/flash_tailwind" %>
20-
<div class='pt-2' style="background: linear-gradient(135deg, #3023AE, #C86DD7)">
20+
<div class='hero pt-2'>
2121

2222
<!--
2323
<div class="container max-w-7xl mx-auto pt-5 px-5">
@@ -44,30 +44,30 @@
4444
</div>
4545
-->
4646

47-
<div class="container-xl px-4 pt-3" style="max-width:1280px;">
48-
<nav>
49-
<div class="d-flex justify-content-between align-items-center">
50-
<div>
51-
<a href="#" class="text-decoration-none">
52-
<h2 class="text-white fw-bold">HumanEssentials.app</h2>
53-
</a>
54-
</div>
55-
56-
<div class="d-flex">
57-
<div class="d-flex text-white gap-4 gap-lg-5 align-items-center">
58-
<a class="d-none d-md-block text-white text-decoration-none fs-5" href="#about">About</a>
59-
<a class="d-none d-md-block text-white text-decoration-none fs-5" href="#testimonials">Testimonials</a>
60-
<a class="d-none d-md-block text-white text-decoration-none fs-5" href="#contact">Contact</a>
61-
<a href="<%= new_user_session_path %>">
62-
<button class="btn btn-success d-flex align-items-center rounded-4">
63-
<span class="fs-5">Login</span>
64-
</button>
65-
</a>
47+
<div class="container-fluid px-4 pt-3">
48+
<nav>
49+
<div class="d-flex justify-content-between align-items-center">
50+
<div>
51+
<a href="#" class="text-decoration-none">
52+
<h2 class="text-white fw-bold mb-0">HumanEssentials.app</h2>
53+
</a>
54+
</div>
55+
56+
<div class="d-flex">
57+
<div class="d-flex text-white gap-4 gap-lg-5 align-items-center">
58+
<a class="d-none d-md-block text-white text-decoration-none fs-5" href="#about">About</a>
59+
<a class="d-none d-md-block text-white text-decoration-none fs-5" href="#testimonials">Testimonials</a>
60+
<a class="d-none d-md-block text-white text-decoration-none fs-5" href="#contact">Contact</a>
61+
<a class="text-decoration-none" href="<%= new_user_session_path %>">
62+
<button class="btn btn-success d-flex align-items-center rounded-4">
63+
<span>Login</span>
64+
</button>
65+
</a>
66+
</div>
67+
</div>
6668
</div>
67-
</div>
69+
</nav>
6870
</div>
69-
</nav>
70-
</div>
7171

7272
<!--
7373
<div class="container max-w-7xl mx-auto text-white font-bold flex px-5" style='height:60vh; min-height: 500px'>
@@ -88,24 +88,24 @@
8888
</div>
8989
</div>
9090
-->
91-
<div class="container px-4 text-white" style='max-width:1280px; height:60vh; min-height: 500px'>
92-
<div class="row h-100 align-items-center">
93-
<div class="col-12 col-lg-7">
94-
<div class="d-flex flex-column align-items-center align-items-lg-start text-center">
95-
<h2 class="fs-2 fw-bold text-lg-start">The easiest and most love-filled <br> way to manage your <br> Human Essentials bank.</h2>
96-
<p class='fs-5 mb-3 mt-2 text-lg-start'>Ready to make yourself more efficient?</p>
97-
<a href="<%= new_account_request_path %>"><button type="button" class="btn btn-success fs-4 fw-bold text-white rounded-4">
98-
Register your bank here for free!
99-
</button></a>
100-
</div>
101-
</div>
102-
103-
<div class="col-0 d-none d-lg-block position-absolute w-25 p-0" style="right:13rem">
104-
<%= image_tag("hero-image.svg", class: "w-100") %>
91+
<div class="container px-4 text-white" style='max-width:1280px; height:60vh; min-height: 500px'>
92+
<div class="row h-100 align-items-center">
93+
<div class="col-12 col-lg-7">
94+
<div class="d-flex flex-column align-items-center align-items-lg-start text-center">
95+
<h2 class="fs-2 fw-bold text-lg-start">The easiest and most love-filled <br> way to manage your <br> Human Essentials bank.</h2>
96+
<p class='fs-5 mb-3 mt-2 text-lg-start'>Ready to make yourself more efficient?</p>
97+
<a href="<%= new_account_request_path %>"><button type="button" class="btn btn-success fs-4 fw-bold text-white rounded-4">
98+
Register your bank here for free!
99+
</button></a>
105100
</div>
106101
</div>
102+
103+
<div class="col-0 d-none d-lg-block position-absolute w-25 p-0" style="right:13rem">
104+
<%= image_tag("hero-image.svg", class: "w-100") %>
105+
</div>
107106
</div>
108107
</div>
108+
</div>
109109

110110
<div class="container max-w-7xl mx-auto pt-5" id="about">
111111
<div class="text-center mt-10">

0 commit comments

Comments
 (0)