Skip to content

Commit ce086f6

Browse files
LevelUpJosh-devLevelUpJosh-dev
committed
More styling tweaks
More styling more structure shifts and polishing pre release 2.0 which will be the first non WIP release.
1 parent 29f95fa commit ce086f6

File tree

7 files changed

+109
-63
lines changed

7 files changed

+109
-63
lines changed

‎helpers/Bootstrap.css‎

Lines changed: 67 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3022,7 +3022,7 @@
30223022

30233023
.btn {
30243024
display: inline-block;
3025-
font-weight: 400;
3025+
font-weight: bold;
30263026
line-height: 1.5;
30273027
color: #212529;
30283028
text-align: center;
@@ -3034,10 +3034,9 @@
30343034
-ms-user-select: none;
30353035
user-select: none;
30363036
background-color: transparent;
3037-
border: 1px solid transparent;
30383037
padding: 0.375rem 0.75rem;
30393038
font-size: 1rem;
3040-
border-radius: 0.25rem;
3039+
border-radius: 0.5rem;
30413040
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
30423041
}
30433042
@media (prefers-reduced-motion: reduce) {
@@ -3058,24 +3057,24 @@
30583057
}
30593058

30603059
.btn-primary {
3061-
color: #fff;
3062-
background-color: #FAA300;
3063-
border-color: #000000;
3060+
color: #FAA300;
3061+
background-color: #080808;
3062+
border: 1px solid #FAA300;;
30643063
}
30653064
.btn-primary:hover {
30663065
color: #000000;
3067-
background-color: #ffffff;
3068-
border-color: #ffffff;
3066+
background-color: #FAA300;
3067+
border-color: #000000;
30693068
}
30703069
.btn-check:focus + .btn-primary, .btn-primary:focus {
30713070
color: #FAA300;
3072-
background-color: #ffffff;
3073-
border-color: #ffffff;
3071+
background-color: #ADB2A9;
3072+
border-color: #FAA300;
30743073
box-shadow: 0 0 0 0.25rem rgba(123, 175, 172, 0.5);
30753074
}
30763075
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
30773076
color: #fff;
3078-
background-color: #50817e;
3077+
background-color: #FAA300;
30793078
border-color: #4b7976;
30803079
}
30813080
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
@@ -3613,7 +3612,7 @@
36133612
text-decoration: underline;
36143613
}
36153614
.btn-link:hover {
3616-
color: #50817e;
3615+
color: #FAA300;
36173616
}
36183617
.btn-link:disabled, .btn-link.disabled {
36193618
color: #6c757d;
@@ -4955,13 +4954,13 @@
49554954
}
49564955
.page-link:hover {
49574956
z-index: 2;
4958-
color: #50817e;
4957+
color: #FAA300;
49594958
background-color: #e9ecef;
49604959
border-color: #dee2e6;
49614960
}
49624961
.page-link:focus {
49634962
z-index: 3;
4964-
color: #50817e;
4963+
color: #FAA300;
49654964
background-color: #e9ecef;
49664965
outline: 0;
49674966
box-shadow: 0 0 0 0.25rem rgba(100, 161, 157, 0.25);
@@ -6621,7 +6620,7 @@
66216620
color: #64a19d;
66226621
}
66236622
.link-primary:hover, .link-primary:focus {
6624-
color: #50817e;
6623+
color: #FAA300;
66256624
}
66266625

66276626
.link-secondary {
@@ -7525,6 +7524,14 @@
75257524
.mt-5 {
75267525
margin-top: 3rem !important;
75277526
}
7527+
7528+
.mt-6 {
7529+
margin-top: 3.25rem !important;
7530+
}
7531+
7532+
.mt-7 {
7533+
margin-top: 5.5rem !important;
7534+
}
75287535

75297536
.mt-auto {
75307537
margin-top: auto !important;
@@ -7581,6 +7588,18 @@
75817588
.mb-5 {
75827589
margin-bottom: 3rem !important;
75837590
}
7591+
7592+
.mb-6 {
7593+
margin-bottom: 3.25rem !important;
7594+
}
7595+
7596+
.mb-7 {
7597+
margin-bottom: 3.5rem !important;
7598+
}
7599+
7600+
mb-12 {
7601+
margin-bottom: 5rem !important;
7602+
}
75847603

75857604
.mb-auto {
75867605
margin-bottom: auto !important;
@@ -11516,7 +11535,7 @@
1151611535
padding: 0.9rem 0;
1151711536
}
1151811537
#mainNav .navbar-nav .nav-item:hover {
11519-
color: fade(#fff, 80%);
11538+
color: fade(#F8F9FA, 80%);
1152011539
outline: none;
1152111540
background-color: transparent;
1152211541
}
@@ -11571,15 +11590,14 @@
1157111590
border-bottom: 0.25rem solid #FAA300;
1157211591
}
1157311592
}
11574-
11593+
/* Main button class */
1157511594
.btn {
1157611595
box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
1157711596
padding: 1.25rem 2rem;
11578-
font-family: "MonoLisa"
11597+
font-family: "MonoLisa";
1157911598
font-size: 80%;
1158011599
text-transform: uppercase;
1158111600
letter-spacing: 0.15rem;
11582-
border: 0;
1158311601
}
1158411602

1158511603
.masthead {
@@ -11607,6 +11625,7 @@
1160711625
background-clip: text;
1160811626
}
1160911627
.masthead h2, .masthead .h2 {
11628+
color: #FAA300;
1161011629
max-width: 20rem;
1161111630
font-size: 1rem;
1161211631
}
@@ -11631,25 +11650,44 @@
1163111650
font-size: 1.25rem;
1163211651
}
1163311652
}
11634-
11653+
11654+
#transparent-laptop {
11655+
top: 100;
11656+
}
11657+
11658+
#intro-text {
11659+
margin-bottom: 5rem;
11660+
}
11661+
11662+
#intro-text div:first-child {
11663+
color: #FAA300;
11664+
}
1163511665
.about-section {
1163611666
padding-top: 10rem;
1163711667
background: linear-gradient(to bottom, #000 75%, rgba(0, 0, 0, 0.9) 75%, rgba(0, 0, 0, 0.8) 100%);
1163811668
}
1163911669
.about-section p {
1164011670
margin-bottom: 5rem;
1164111671
}
11642-
11672+
11673+
#js-land-mission-statement-header {
11674+
color: #FAA300;
11675+
}
11676+
11677+
#js-land-mission-statement {
11678+
color: #000;
11679+
}
11680+
1164311681
.projects-section {
11644-
padding: 10rem 0;
11682+
padding: 1rem 0;
1164511683
}
1164611684
.projects-section .featured-text {
1164711685
padding: 2rem;
1164811686
}
1164911687
@media (min-width: 992px) {
11650-
.projects-section .featured-text {
11688+
.projects-section #js-land-mission-statement-bottom-border {
1165111689
padding: 0 0 0 2rem;
11652-
border-left: 0.5rem solid #FAA300;
11690+
border-bottom: 0.25rem solid #FAA300;
1165311691
}
1165411692
}
1165511693
.projects-section .project-text {
@@ -11693,6 +11731,11 @@
1169311731
border: 0;
1169411732
border-bottom: 0.25rem solid #FAA300;
1169511733
}
11734+
11735+
.signup-section h2 {
11736+
color: #FAA300;
11737+
}
11738+
1169611739
.contact-section .card h4, .contact-section .card .h4 {
1169711740
font-size: 0.8rem;
1169811741
font-family: "MonoLisa";

‎pages/home/home.js‎

Lines changed: 42 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,9 @@ async function Home () {
4848
<div class="d-flex justify-content-center">
4949
<div class="text-center">
5050
<h1 class="mx-auto">Js.Land</h1>
51-
<h2 class="text-white-50 mx-auto mt-2 mb-5">Your source for everything code</h2>
51+
<h2 class="mx-auto mt-2 mb-5">Your source for everything code</h2>
5252
<a class="btn btn-primary" href="#about">Learn more..</a>
53+
5354
</div>
5455
</div>
5556
</div>
@@ -58,36 +59,43 @@ async function Home () {
5859
<section class="about-section text-center" id="about">
5960
<div class="container px-4 px-lg-5">
6061
<div class="row gx-4 gx-lg-5 justify-content-center">
61-
<div class="col-lg-5 mb-5">
62-
<img class="img-fluid" src="assets/img/coffee-code.png" alt="..." />
62+
<div class="col-lg-5 mt-7">
63+
<img class="img-fluid" src="assets/img/home/coffee-code.png" alt="..." />
6364
</div>
64-
<div class="col-lg-7 mt-5">
65-
<h4 class="text-white mb-4">
66-
Hi my name is Josh,
67-
I'm a Full-Stack developer and general Js enthusiast.
68-
</h4>
69-
<p class="text-white-50">
70-
My aim with Js.Land is to be an informative space for development news and info for both professional and aspiring web developers.
71-
I believe the current landscape of technology and development specifically the ability of anyone to self-teach is unprecedented.
72-
Being a self-taught developer myself, I felt I could contribute to the general development community in positive way.
73-
</p>
65+
<div id="intro-text" class="col-lg-7">
66+
<div class="text-center mx-auto mb-3">
67+
<h3>
68+
Hi my name is Josh,
69+
I'm a Full-Stack developer and general Js enthusiast.
70+
</h3>
71+
</div>
72+
<div class="text-white mx-auto pb-3">
73+
<p>
74+
My aim with Js.Land is an informative space for development news and info for professional and aspiring web developers.
75+
I believe the current landscape of technology and development, specifically the ability of anyone to get online and learn, is unprecedented.
76+
I',m a self-taught developer and lifelong Developer Advocate.
77+
</p>
78+
</div>
7479
</div>
7580
</div>
7681
</div>
7782
</section>
7883
<!-- Projects-->
79-
<section class="projects-section bg-light" id="projects">
84+
<section class="projects-section bg-light mb-3 mt-3" id="projects">
8085
<div class="container px-4 px-lg-5">
8186
<!-- Featured Project Row-->
82-
<div class="row gx-0 mb-4 mb-lg-5 align-items-center">
83-
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0 border-0" src="assets/img//home/cloud-code.png" alt="..." /></div>
84-
<div class="col-xl-4 col-lg-5">
85-
<div class="featured-text text-center text-lg-left">
86-
<h4>Knowledge</h4>
87-
<p class="text-black-50 mb-0">
88-
Weather it be YouTube, Twitter, Free Code Academy or some other resource
89-
There is truely a wealth of knowledge and information available to you.
87+
<div class="div gx-0 mb-4 mb-lg-5 align-items-center">
88+
<div class="row">
89+
<div class="row justify-content-center mb-3"><img class="img-fluid mb-3 mb-lg-0 border-0 w-50" src="assets/img//home/cloud-code-one.png" alt="..." /></div>
90+
<div class="row featured-text text-center text-lg-left pt-1">
91+
<h4 id="js-land-mission-statement-header" class="mt-3">Js.Land () {</h4>
92+
<p id="js-land-mission-statement" class="text-black mb-5">
93+
will provide tools, knowledge and access to anyone pursuing their dreams of being a better developer. JsLand is my attempt to find a way to share the lessons, articles, and knowledge
94+
I have gathered over the years and still do to this day. As well as a way to connect with the greater community of developers.
9095
</p>
96+
<div class="row justify-content-center">
97+
<div id="js-land-mission-statement-bottom-border" class="w-25"></div>
98+
</div>
9199
</div>
92100
</div>
93101
</div>
@@ -100,7 +108,7 @@ async function Home () {
100108
<div class="bg-black text-center h-100 project">
101109
<div class="d-flex h-100">
102110
<div class="project-text w-100 my-auto text-center text-lg-left">
103-
<p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
111+
<p class="text-white">A person who helps connect the world around them in ways that would otherwise not be possible.</p>
104112
<hr class="d-none d-lg-block mb-0 ms-0" />
105113
</div>
106114
</div>
@@ -114,14 +122,9 @@ async function Home () {
114122
<div class="bg-black text-center h-100 project">
115123
<div class="d-flex h-100">
116124
<div class="project-text w-100 my-auto text-center text-lg-right">
117-
<ul>
118-
<li>Vanilla JavaScript</li>
119-
<li>NodeJs</li>
120-
<li>Deno</li>
121-
<li>ExpressJs</li>
122-
123-
124-
</ul>
125+
<p class="text-white">
126+
The most widely used language in the world for creating complex aplications and websites on the internet.
127+
</p>
125128
<hr class="d-none d-lg-block mb-0 me-0" />
126129
</div>
127130
</div>
@@ -136,7 +139,7 @@ async function Home () {
136139
<div class="row gx-4 gx-lg-5">
137140
<div class="col-md-10 col-lg-8 mx-auto text-center">
138141
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
139-
<h2 class="text-white mb-5">Subscribe to receive updates!</h2>
142+
<h2 class="mb-5">Subscribe to receive updates!</h2>
140143
<!-- * * * * * * * * * * * * * * *-->
141144
<!-- * * SB Forms Contact Form * *-->
142145
<!-- * * * * * * * * * * * * * * *-->
@@ -161,7 +164,7 @@ async function Home () {
161164
<div class="fw-bolder">Form submission successful!</div>
162165
To activate this form, sign up at
163166
<br />
164-
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
167+
<a target="_blank" href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
165168
</div>
166169
</div>
167170
<!-- Submit error message-->
@@ -182,29 +185,29 @@ async function Home () {
182185
<div class="card py-4 h-100">
183186
<div class="card-body text-center">
184187
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
185-
<h4 class="text-uppercase m-0">LinkedIn</h4>
188+
<h3 class="text-uppercase m-0">LinkedIn</h3>
186189
<hr class="my-4 mx-auto" />
187-
<div class="small text-black-50"><a href="https://www.linkedin.com/in/redvanjosh/">@RedVanJosh</a></div>
190+
<div class="small text-black-50"><a target="_blank" href="https://www.linkedin.com/in/redvanjosh/">@RedVanJosh</a></div>
188191
</div>
189192
</div>
190193
</div>
191194
<div class="col-md-4 mb-3 mb-md-0">
192195
<div class="card py-4 h-100">
193196
<div class="card-body text-center">
194197
<i class="fas fa-envelope text-primary mb-2"></i>
195-
<h4 class="text-uppercase m-0">Email</h4>
198+
<h3 class="text-uppercase m-0">Email</h3>
196199
<hr class="my-4 mx-auto" />
197-
<div class="small"><a href="#!">josh@js.land.com</a></div>
200+
<div class="small"><a target="_blank" href="#!">josh@js.land.com</a></div>
198201
</div>
199202
</div>
200203
</div>
201204
<div class="col-md-4 mb-3 mb-md-0">
202205
<div class="card py-4 h-100">
203206
<div class="card-body text-center">
204207
<i class="fas fa-mobile-alt text-primary mb-2"></i>
205-
<h4 class="text-uppercase m-0">Twitter</h4>
208+
<h3 class="text-uppercase m-0">Twitter</h3>
206209
<hr class="my-4 mx-auto" />
207-
<div class="small"><a href="https://www.twitter.com/JsLandJosh">@JsLandJosh</a></div>
210+
<div class="small"><a target="_blank" href="https://www.twitter.com/JsLandJosh">@JsLandJosh</a></div>
208211
</div>
209212
</div>
210213
</div>

‎public/assets/img/coffee-code.png‎

-2.98 MB
Binary file not shown.

‎public/assets/img/home/cloud-code-one.png‎

161 KB
Loading

‎public/assets/img/home/cloud-code.png‎

-148 KB
Loading

‎public/assets/img/home/coffee-code.png‎

3.14 MB
Loading

‎public/assets/img/home/transparent-laptop.png‎

549 KB
Loading

0 commit comments

Comments
 (0)