mirror of
https://github.com/gilbN/theme.park.git
synced 2024-08-18 07:59:37 +02:00
style fixes on landing page
This commit is contained in:
Marius
parent
8f89b05899
commit
c86a9253e8
BIN
Resources/landing-page/assets/img/aquamarine-small.jpg
Normal file
BIN
Resources/landing-page/assets/img/aquamarine-small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
BIN
Resources/landing-page/assets/img/dark-small.jpg
Normal file
BIN
Resources/landing-page/assets/img/dark-small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
BIN
Resources/landing-page/assets/img/hotline-small.jpg
Normal file
BIN
Resources/landing-page/assets/img/hotline-small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
BIN
Resources/landing-page/assets/img/organizr-dark-small.jpg
Normal file
BIN
Resources/landing-page/assets/img/organizr-dark-small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
BIN
Resources/landing-page/assets/img/plex-small.jpg
Normal file
BIN
Resources/landing-page/assets/img/plex-small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
BIN
Resources/landing-page/assets/img/space-gray-small.jpg
Normal file
BIN
Resources/landing-page/assets/img/space-gray-small.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
@ -8,6 +8,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#mainNav, #mainNav.navbar-scrolled {
|
||||
padding: 0 1rem 0 1rem !important;
|
||||
}
|
||||
.branding {
|
||||
height: 40px !important;
|
||||
}
|
||||
#mainNav .navbar-nav .nav-item .nav-link{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
|
||||
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
||||
#mainNav,
|
||||
@ -73,12 +84,20 @@
|
||||
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
|
||||
color: #12afa0;
|
||||
}
|
||||
#mainNav .navbar-nav .nav-item .nav-link.active {
|
||||
#mainNav .navbar-nav .nav-item .nav-link.active {
|
||||
color: #12afa0 !important;
|
||||
}
|
||||
.navbar-light .navbar-toggler-icon {
|
||||
filter: invert(1);
|
||||
}
|
||||
.navbar-light .navbar-toggler {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
border-color: rgb(255 255 255 / 10%);
|
||||
}
|
||||
|
||||
.branding {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.mfp-container {
|
||||
backdrop-filter: blur(10px);
|
||||
@ -166,28 +185,6 @@ header.masthead {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
|
||||
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
|
||||
#portfolio .container-md .portfolio-box .portfolio-box-caption,
|
||||
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
|
||||
#portfolio .container-xl .portfolio-box .portfolio-box-caption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
transition: opacity 0.25s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bg-primary,
|
||||
.bg-dark {
|
||||
background: #2d2d2d;
|
||||
@ -241,46 +238,42 @@ p {
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
/* @media (min-width: 992px) {
|
||||
.portfolio-box img {
|
||||
object-fit: cover;
|
||||
width: 562.4px;
|
||||
height: 295.56px;
|
||||
}
|
||||
} */
|
||||
|
||||
/* EXAMPLE IMAGES*/
|
||||
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.aquamarine-hover,
|
||||
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.hotline-hover,
|
||||
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.space-gray-hover,
|
||||
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.organizr-dark-hover,
|
||||
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.dark-hover,
|
||||
#portfolio [class*="container-"] .portfolio-box:hover .portfolio-box-caption.plex-hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.aquamarine-hover:hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.aquamarine-hover {
|
||||
background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
|
||||
opacity: .9;
|
||||
width: 562.4px;
|
||||
}
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.hotline-hover:hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.hotline-hover {
|
||||
background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
|
||||
opacity: .9;
|
||||
width: 562.4px;
|
||||
}
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.space-gray-hover:hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.space-gray-hover {
|
||||
background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
|
||||
opacity: .9;
|
||||
width: 562.4px;
|
||||
}
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.organizr-dark-hover:hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-dark-hover {
|
||||
background: #1f1f1f;
|
||||
opacity: .9;
|
||||
width: 562.4px;
|
||||
}
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.dark-hover:hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.dark-hover {
|
||||
background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
|
||||
opacity: .9;
|
||||
width: 562.4px;
|
||||
}
|
||||
|
||||
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.plex-hover:hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.plex-hover {
|
||||
background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
|
||||
opacity: .9;
|
||||
width: 562.4px;
|
||||
}
|
||||
@ -470,7 +470,7 @@ mark,
|
||||
color: #6c757d;
|
||||
}
|
||||
.blockquote-footer::before {
|
||||
content: "— ";
|
||||
content: "— ";
|
||||
}
|
||||
|
||||
.img-fluid {
|
||||
@ -2443,32 +2443,32 @@ fieldset:disabled a.btn {
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #009688;
|
||||
border-color: #009688;
|
||||
background-color: #f4623a;
|
||||
border-color: #f4623a;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #12afa0;
|
||||
border-color: #12afa0;
|
||||
background-color: #f24516;
|
||||
border-color: #ee3e0d;
|
||||
}
|
||||
.btn-primary:focus, .btn-primary.focus {
|
||||
color: #fff;
|
||||
background-color: #12afa0;
|
||||
border-color: #12afa0;
|
||||
box-shadow: 0 0 0 0.2rem #12afa080;
|
||||
background-color: #f24516;
|
||||
border-color: #ee3e0d;
|
||||
box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5);
|
||||
}
|
||||
.btn-primary.disabled, .btn-primary:disabled {
|
||||
color: #fff;
|
||||
background-color: #009688;
|
||||
border-color: #009688;
|
||||
background-color: #f4623a;
|
||||
border-color: #f4623a;
|
||||
}
|
||||
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
|
||||
color: #fff;
|
||||
background-color: #12afa0;
|
||||
border-color: #12afa0;
|
||||
background-color: #ee3e0d;
|
||||
border-color: #e23a0d;
|
||||
}
|
||||
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
|
||||
box-shadow: 0 0 0 0.2rem #12afa080;
|
||||
box-shadow: 0 0 0 0.2rem rgba(246, 122, 88, 0.5);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@ -10105,12 +10105,12 @@ hr.light {
|
||||
header.masthead {
|
||||
padding-top: 10rem;
|
||||
padding-bottom: calc(10rem - 4.5rem);
|
||||
background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.404) 100%), url("../assets/img/slides/2.jpg");
|
||||
background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../assets/img/bg-masthead.jpg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
header.masthead h1 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
151
index.html
151
index.html
@ -28,8 +28,8 @@
|
||||
<!-- Navigation-->
|
||||
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
|
||||
<div class="container">
|
||||
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img
|
||||
src="Resources/landing-page/assets/img/themepark-logo.png" height="55px" alt=""></a>
|
||||
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="branding"
|
||||
src="Resources/landing-page/assets/img/themepark-logo.png" alt=""></a>
|
||||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
|
||||
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
|
||||
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
|
||||
@ -357,98 +357,67 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Portfolio-->
|
||||
<div id="portfolio" class="theme-overview">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters theme-overview">
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.png" alt="..." />
|
||||
<div class="portfolio-box-caption aquamarine-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Aquamarine</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.png" alt="..." />
|
||||
<div class="portfolio-box-caption hotline-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Hotline</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.png" alt="..." />
|
||||
<div class="portfolio-box-caption space-gray-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Space Gray</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.png" alt="..." />
|
||||
<div class="portfolio-box-caption organizr-dark-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Organizr Dark</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.png" alt="..." />
|
||||
<div class="portfolio-box-caption dark-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Dark</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.png" alt="..." />
|
||||
<div class="portfolio-box-caption p-3 plex-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Plex</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Portfolio-->
|
||||
<div id="portfolio" class="theme-overview">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
|
||||
<div class="portfolio-box-caption aquamarine-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Aquamarine</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
|
||||
<div class="portfolio-box-caption hotline-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Hotline</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
|
||||
<div class="portfolio-box-caption space-gray-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Soace Gray</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg" alt="..." />
|
||||
<div class="portfolio-box-caption organizr-dark-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Organizr Dark</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
|
||||
<div class="portfolio-box-caption dark-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Dark</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
|
||||
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
|
||||
<div class="portfolio-box-caption p-3 plex-hover">
|
||||
<div class="project-category text-white-50">Theme</div>
|
||||
<div class="project-name">Plex</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Call to action-->
|
||||
<!-- <section class="page-section bg-dark text-white">
|
||||
<div class="container text-center">
|
||||
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
|
||||
<a class="btn btn-light btn-xl" href="https://startbootstrap.com/theme/creative/">Download Now!</a>
|
||||
</div>
|
||||
</section> -->
|
||||
<!-- Contact-->
|
||||
<!-- <section class="page-section" id="contact">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<h2 class="mt-0">Let's Get In Touch!</h2>
|
||||
<hr class="divider my-4" />
|
||||
<p class="text-white-50 mb-5">Ready to start your next project with us? Give us a call or send us an
|
||||
email and we will get back to you as soon as possible!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
|
||||
<i class="fas fa-phone fa-3x mb-3 text-white-50"></i>
|
||||
<div>+1 (555) 123-4567</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mr-auto text-center">
|
||||
<i class="fas fa-envelope fa-3x mb-3 text-white-50"></i>
|
||||
<!-- Make sure to change the email address in BOTH the anchor text and the link target below!-->
|
||||
<!-- <a class="d-block" href="mailto:contact@yourwebsite.com">contact@yourwebsite.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
<!-- Footer-->
|
||||
<footer class=" py-5">
|
||||
<div class="container">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user