Skip to content

Commit 8cf62d8

Browse files
emkelleyemkelley
authored
Merge pull request BulmaTemplates#100 from emkelley/master
Added Showcase template
2 parents de14510 + 62779a8 commit 8cf62d8

4 files changed

Lines changed: 939 additions & 0 deletions

File tree

‎css/showcase.css‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
@import url("https://fonts.googleapis.com/css?family=Lato|Poppins|Kaushan+Script");
2+
.has-vertically-aligned-content {
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
}
7+
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
html {
13+
font-family: 'Poppins', Lato, Tahoma, sans-serif;
14+
width: 100%;
15+
min-height: 100%;
16+
}
17+
18+
.header-wrapper {
19+
padding-bottom: 30px;
20+
}
21+
22+
.hero {
23+
background-image: url(../img/bg.jpg);
24+
background: linear-gradient(rgba(31, 44, 108, 0.65), rgba(31, 44, 108, 0.65)), rgba(0, 0, 0, 0.55) url("../img/bg.jpg") no-repeat;
25+
background-attachment: fixed;
26+
background-size: cover;
27+
color: white;
28+
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
29+
font-family: 'Poppins', sans-serif;
30+
}
31+
32+
.hero .title {
33+
font-family: 'Kaushan Script', sans-serif;
34+
transform: rotate(-5deg);
35+
font-size: 5rem;
36+
color: whitesmoke;
37+
}
38+
39+
.hero .subtitle {
40+
padding: 5px;
41+
color: whitesmoke;
42+
}
43+
44+
.hero .profession {
45+
padding-top: 50px;
46+
font-size: 1.7rem;
47+
text-transform: uppercase;
48+
}
49+
50+
.hero .hero-foot {
51+
height: 50px;
52+
background: white;
53+
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.082);
54+
}
55+
56+
@media (max-width: 599px) {
57+
.hero .hero-foot {
58+
display: none;
59+
}
60+
}
61+
62+
.hero .hero-foot .hero-foot--wrapper {
63+
margin: 7px auto;
64+
height: 50px;
65+
}
66+
67+
.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop {
68+
line-height: 38px;
69+
font-weight: 600;
70+
text-transform: lowercase;
71+
letter-spacing: 1px;
72+
font-size: 1rem;
73+
}
74+
75+
.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li {
76+
display: inline-block;
77+
padding-right: 15px;
78+
padding-left: 15px;
79+
}
80+
81+
.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li.is-active a {
82+
border-bottom: 2px solid #1f2c6c;
83+
}
84+
85+
.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a {
86+
color: #1f2c6c;
87+
}
88+
89+
.hero .hero-foot .hero-foot--wrapper .hero-menu-desktop ul li a:hover {
90+
color: #1f2c6c;
91+
transition: all .2s ease-in-out;
92+
border-bottom: 2px solid #1f2c6c;
93+
}
94+
95+
.main-content {
96+
padding-top: 2rem;
97+
color: #3c4172;
98+
font-family: 'Poppins', sans-serif;
99+
}
100+
101+
.main-content .section-dark {
102+
background-color: #f0f3f5;
103+
padding: 60px 0px;
104+
}
105+
106+
.main-content .section-dark.resume {
107+
height: 400px;
108+
padding-top: 100px;
109+
}
110+
111+
@media (max-width: 599px) {
112+
.main-content .section-dark.resume {
113+
padding-top: 75px;
114+
}
115+
}
116+
117+
.main-content .section-dark.resume .title {
118+
padding: 20px;
119+
}
120+
121+
.main-content .section-dark.resume button {
122+
border: 2px solid #43485c;
123+
background: white;
124+
color: #43485c;
125+
height: 50px;
126+
width: 250px;
127+
font-size: 1rem;
128+
text-transform: uppercase;
129+
}
130+
131+
.main-content .section-dark.resume .fa-download {
132+
color: #1f2c6c;
133+
}
134+
135+
.main-content .section-dark.my-work {
136+
padding: 120px;
137+
}
138+
139+
@media (max-width: 599px) {
140+
.main-content .section-dark.my-work {
141+
padding: 75px 20px;
142+
}
143+
}
144+
145+
.main-content .section-dark.my-work .work-item {
146+
margin-bottom: 1rem;
147+
-webkit-transition: all .1s ease-in-out;
148+
transition: all .1s ease-in-out;
149+
border-radius: 5px;
150+
background-size: cover;
151+
background-repeat: no-repeat;
152+
box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
153+
}
154+
155+
.main-content .section-dark.my-work .work-item:hover {
156+
-webkit-transform: scale(1.055) translateY(-2px);
157+
transform: scale(1.055) translateY(-2px);
158+
-webkit-box-shadow: 0 2px 25px 0 rgba(30, 30, 30, 0.1);
159+
box-shadow: 0 2px 25px 0 rgba(30, 30, 30, 0.1);
160+
}
161+
162+
.main-content .section-light {
163+
padding: 30px;
164+
}
165+
166+
.main-content .section-light.about-me {
167+
padding-bottom: 100px;
168+
}
169+
170+
.main-content .section-light.about-me .is-larger {
171+
font-size: 1.2rem;
172+
}
173+
174+
@media (max-width: 599px) {
175+
.main-content .section-light.about-me .about-links {
176+
text-align: center;
177+
}
178+
}
179+
180+
.main-content .section-light.about-me .right-image img {
181+
border-radius: 11px;
182+
margin: 20px;
183+
box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
184+
}
185+
186+
@media (max-width: 599px) {
187+
.main-content .section-light.about-me .right-image img {
188+
margin: auto;
189+
}
190+
}
191+
192+
.main-content .section-light.skills {
193+
padding: 100px;
194+
}
195+
196+
@media (max-width: 599px) {
197+
.main-content .section-light.skills {
198+
padding: 50px 20px 40px 20px;
199+
padding-bottom: 20px;
200+
}
201+
}
202+
203+
.main-content .section-light.skills h1 {
204+
padding: 10px;
205+
}
206+
207+
.main-content .section-light.contact {
208+
padding: 200px;
209+
}
210+
211+
.main-content .section-light.contact button {
212+
width: 100%;
213+
background-color: #43485c;
214+
color: white;
215+
height: 50px;
216+
font-size: 1.1rem;
217+
text-transform: uppercase;
218+
font-family: 'Poppins', sans-serif;
219+
}
220+
221+
@media (max-width: 599px) {
222+
.main-content .section-light.contact {
223+
padding: 60px 20px;
224+
}
225+
}
226+
227+
.main-content .section-color.services {
228+
padding: 100px;
229+
background-color: #43485c;
230+
color: white;
231+
}
232+
233+
.main-content .section-color.services .title,
234+
.main-content .section-color.services .subtitle {
235+
color: white;
236+
}
237+
238+
.main-content .section-color.services i {
239+
font-size: 3rem;
240+
padding: 20px;
241+
}
242+
243+
.main-content .section-title {
244+
color: #43485c;
245+
text-transform: uppercase;
246+
font-size: 1.8rem;
247+
letter-spacing: 2px;
248+
padding-bottom: 30px;
249+
}
250+
251+
.footer {
252+
bottom: 0;
253+
width: 100vw;
254+
padding: 0;
255+
height: 80px;
256+
line-height: 25px;
257+
text-align: center;
258+
background: #1f2c6c;
259+
color: whitesmoke;
260+
padding-top: 2rem;
261+
}
262+
263+
.footer a {
264+
padding: 0rem 1rem 1rem 1rem;
265+
color: lightgrey;
266+
}
267+
268+
.footer a i {
269+
font-size: 1.5rem;
270+
padding: 0px 10px;
271+
}
272+
273+
.footer a .nav-item {
274+
color: whitesmoke;
275+
}
276+
277+
.fa-download {
278+
color: #43485c;
279+
}
280+
281+
#toTop {
282+
height: 50px;
283+
width: 50px;
284+
display: none;
285+
position: fixed;
286+
bottom: 20px;
287+
right: 30px;
288+
z-index: 99;
289+
border: none;
290+
outline: none;
291+
background-color: rgba(31, 44, 108, 0.65);
292+
color: white;
293+
cursor: pointer;
294+
border-radius: 50%;
295+
font-size: 2rem;
296+
box-shadow: 0 5px 20px rgba(14, 25, 80, 0.3);
297+
}
298+
299+
#toTop a {
300+
color: white;
301+
}
302+
303+
#toTop:hover {
304+
background-color: #43485c;
305+
}
306+
307+
::-webkit-scrollbar {
308+
width: 8px;
309+
background-color: rgba(245, 245, 245, 0);
310+
}
311+
312+
::-webkit-scrollbar-thumb {
313+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
314+
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
315+
background-color: #43485c;
316+
}
317+
318+
body.preloader-site {
319+
overflow: hidden;
320+
}
321+
322+
.preloader-wrapper {
323+
height: 100%;
324+
width: 100%;
325+
background: #1f2c6c;
326+
position: fixed;
327+
top: 0;
328+
left: 0;
329+
z-index: 9999999;
330+
}
331+
332+
.preloader-wrapper .preloader {
333+
position: absolute;
334+
top: 50%;
335+
left: 50%;
336+
-webkit-transform: translate(-50%, -50%);
337+
transform: translate(-50%, -50%);
338+
width: 120px;
339+
}

‎images/showcase.png‎

765 KB
Loading

‎js/showcase.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Get that hamburger menu cookin' //
2+
3+
document.addEventListener("DOMContentLoaded", function() {
4+
// Get all "navbar-burger" elements
5+
var $navbarBurgers = Array.prototype.slice.call(
6+
document.querySelectorAll(".navbar-burger"),
7+
0
8+
);
9+
// Check if there are any navbar burgers
10+
if ($navbarBurgers.length > 0) {
11+
// Add a click event on each of them
12+
$navbarBurgers.forEach(function($el) {
13+
$el.addEventListener("click", function() {
14+
// Get the target from the "data-target" attribute
15+
var target = $el.dataset.target;
16+
var $target = document.getElementById(target);
17+
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
18+
$el.classList.toggle("is-active");
19+
$target.classList.toggle("is-active");
20+
});
21+
});
22+
}
23+
});
24+
25+
// Smooth Anchor Scrolling
26+
$(document).on("click", 'a[href^="#"]', function(event) {
27+
event.preventDefault();
28+
$("html, body").animate(
29+
{
30+
scrollTop: $($.attr(this, "href")).offset().top
31+
},
32+
500
33+
);
34+
});
35+
36+
// When the user scrolls down 20px from the top of the document, show the scroll up button
37+
window.onscroll = function() {
38+
scrollFunction();
39+
};
40+
41+
function scrollFunction() {
42+
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
43+
document.getElementById("toTop").style.display = "block";
44+
} else {
45+
document.getElementById("toTop").style.display = "none";
46+
}
47+
}
48+
49+
// Preloader
50+
$(document).ready(function($) {
51+
$(".preloader-wrapper").fadeOut();
52+
$("body").removeClass("preloader-site");
53+
});
54+
$(window).load(function() {
55+
var Body = $("body");
56+
Body.addClass("preloader-site");
57+
});

0 commit comments

Comments
 (0)