further sorting

This commit is contained in:
fr34k 2020-10-31 20:11:41 +01:00
parent a3e32a4933
commit 36e8cde534
3 changed files with 113 additions and 95 deletions

View file

@ -170,7 +170,7 @@ header {
background-color: #f9f9ed ;
height: 500px;
position: relative;
margin-top: 100px;
justify-content: center;
}
.hero-text {
@ -232,6 +232,92 @@ header {
}
}
/* portfolio
=================== */
/* .portfolio {
margin: 3em 0 0;
} */
.port-item {
margin: 0;
position: relative;
}
.port-item img {
display: block;
}
.port-desc {
position: absolute;
z-index: 100;
bottom: 0em;
left: 0em;
right: 0em;
color: white;
background: rgba(0, 0, 0, 0.6);
padding-bottom: 2em;
}
.port-desc p {
margin: 1em;
}
@media (min-width: 37rem) {
.port-item {
width: 50%;
float: left;
}
}
@media (min-width: 60rem) {
.port-item {
width: 33.3333334%;
overflow: hidden;
}
.port-desc {
transform: translateY(150%);
}
.port-item:hover .port-desc {
transform: translateY(0%);
}
}
/* Images Instagram
=======================*/
.images {
filter: grayscale(100%);
transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
height: 200px;
width: 200px;
cursor:pointer;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
.images:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
transition: filter 0.8s ease-out;
}
/* About
=============== */
video {
width: 100%;
height: auto;
}
/* Jewellery
=============== */
/* Collection
================*/
@ -322,28 +408,33 @@ div.collection div.col-desc {
text-align: center;
} */
/* Images Instagram
=======================*/
/* Contacts
================== */
.images {
filter: grayscale(100%);
transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
height: 200px;
width: 200px;
cursor:pointer;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
.contact-bg {
align-items: center;
background: url('../img/who-we-are.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
}
.images:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
transition: filter 0.8s ease-out;
.contact-info {
background: #80808090;
margin: 25vmin 0;
padding: 1.5rem;
}
@media screen and (max-width: 1000px) {
.contact-info h2 {
font-size: 14px;
}
}
/* buttons
=======================*/ /* Noch ordnen */
================== */ /* Noch ordnen */
.button {
display: inline-block;

View file

@ -21,10 +21,7 @@ footer::after {
clear: both;
}
video {
width: 100%;
height: auto;
}
/* typography
=================== */
@ -110,58 +107,6 @@ p:last-of-type {
/* portfolio
=================== */
/* .portfolio {
margin: 3em 0 0;
} */
.port-item {
margin: 0;
position: relative;
}
.port-item img {
display: block;
}
.port-desc {
position: absolute;
z-index: 100;
bottom: 0em;
left: 0em;
right: 0em;
color: white;
background: rgba(0, 0, 0, 0.6);
padding-bottom: 2em;
}
.port-desc p {
margin: 1em;
}
@media (min-width: 37rem) {
.port-item {
width: 50%;
float: left;
}
}
@media (min-width: 60rem) {
.port-item {
width: 33.3333334%;
overflow: hidden;
}
.port-desc {
transform: translateY(150%);
}
.port-item:hover .port-desc {
transform: translateY(0%);
}
}
/* display flex */
@ -188,27 +133,7 @@ p:last-of-type {
/* Contact
=================== */
.contact-bg {
align-items: center;
background: url('../img/who-we-are.jpg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
}
.contact-info {
background: #80808090;
margin: 25vmin 0;
padding: 1.5rem;
}
@media screen and (max-width: 1000px) {
.contact-info h2 {
font-size: 14px;
}
}
.gallery-description {
display: none;

View file

@ -1,7 +1,9 @@
<?php include('header.tpl'); ?>
<div class="hero-image">
Logo
<div id="content_padding">
<div class="hero-image">
<img src="images/logo_button/title_ivory.png" alt="bricabracomania metalworks logo">
</div>
</div>
<div class="container">