change index, tidy up css

This commit is contained in:
fr34k 2020-10-31 16:48:02 +01:00
parent a418762649
commit ae86ae0cda
3 changed files with 30 additions and 27 deletions

View file

@ -142,19 +142,16 @@ header {
} }
.nav a { .nav a {
font-weight: 900; font-weight: 500;
text-decoration: none; text-decoration: none;
/*! padding: 0.5em; */ color: #f9f9ed;
color: white; font-size: 18pt;
font-size: 14pt;
/*! font-weight: bold; */
} }
.nav a:hover { .nav a:hover {
color: #ddd; color: #ddd;
font-size: 16pt; font-size: 20pt;
/*! font-weight: bold; */
} }
.logo { .logo {
@ -164,6 +161,17 @@ header {
} }
/* Index
================ */
.index_start {
background-image: url(/images/backgroud_img/index_bg.jpg);
background-size: cover;
background-position: center;
top: 0px;
}
/* Collection /* Collection
================*/ ================*/
@ -217,7 +225,13 @@ div.collection div.col-desc {
/*border: 2px solid #f9f9ed; */ /*border: 2px solid #f9f9ed; */
} }
.col-img-desc { .col-image:hover{
filter: blur(1px);
filter: brightness(50%);
cursor: pointer;
}
/*.col-img-desc {
display: block; display: block;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -230,7 +244,7 @@ div.collection div.col-desc {
opacity: 0; opacity: 0;
border-radius: 50%; border-radius: 50%;
transition: .5s ease; transition: .5s ease;
} }
.col-img-container:hover .col-img-desc { .col-img-container:hover .col-img-desc {
opacity: 1; opacity: 1;
@ -246,7 +260,7 @@ div.collection div.col-desc {
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center; text-align: center;
} } */
/* Images Instagram /* Images Instagram
=======================*/ =======================*/

View file

@ -91,22 +91,13 @@ p:last-of-type {
/* Parallax /* Parallax
=================== */ /* Das sollte wohl mal DAS werden https://www.w3schools.com/howto/howto_css_parallax.asp */ =================== */ /* Das sollte wohl mal DAS werden https://www.w3schools.com/howto/howto_css_parallax.asp */
.parallax--bg { /*.parallax--bg {
width: auto; width: auto;
} }*/
/* hero-home /* hero-home
=================== */ =================== */
.home-hero {
background-image: url(/images/backgroud_img/hero-bg.jpg);
background-size: cover;
background-position: center;
padding: 10em 0;
top: 0px;
color: #fff;
}
@media (min-width: 60rem) { @media (min-width: 60rem) {
.home-hero { .home-hero {
height: 100vh; height: 100vh;

View file

@ -1,12 +1,10 @@
<?php include('header.tpl'); ?> <?php include('header.tpl'); ?>
<section class="home-hero parallax--bg"> <div class="index_start">
<div class="container"> <div>
<h1 class="title parallax--box"><span><img src="images/logo_button/title_ivory.png" alt="bricabracomania metalworks"></span> <img src="images\logo_button\title_ivory.png"></img>
</h1>
<a href="/projects" class="button button-accent">See Our Work</a>
</div> </div>
</section> </div>
<div class="container"> <div class="container">
<section class="home-about"> <section class="home-about">