tried to fix index

This commit is contained in:
fr34k 2020-10-31 18:58:17 +01:00
parent 9c93d1e23c
commit a3e32a4933
3 changed files with 69 additions and 65 deletions

View file

@ -164,13 +164,73 @@ header {
/* Index /* Index
================ */ ================ */
.index_start { .hero-image {
background-image: url(/images/backgroud_img/index_bg.jpg); background: url(images/background_img/index_bg.jpg) no-repeat center;
background-size: cover; background-size: cover;
background-position: center; background-color: #f9f9ed ;
top: 0px; height: 500px;
position: relative;
margin-top: 100px;
} }
.hero-text {
justify-content: center;
}
.home-about-textbox {
background-color: #232323;
padding: 10em 20%;
width: 100%;
outline: 2px solid#f9f9ed;
outline-offset: -2.5em;
color: #f9f9ed;
position: relative;
text-align: justify;
}
.home-about-textbox h1 {
color: #f9f9ed;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.75em;
background: #232323;
padding: 0 0.145em;
}
@media (min-width: 25rem) {
h1 {
font-size: 2rem;
}
.home-about-textbox h1 {
top: 0.6em;
}
}
@media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-repeat: no-repeat;
}
.home-about-textbox {
width: 100%;
outline-offset: -3.75em;
/* margin-left: -2.5%; */
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, 0.3);
}
.home-about-textbox h1 {
top: 0.75em;
left: 6rem;
transform: translateX(0);
}
}
/* Collection /* Collection
================*/ ================*/
@ -179,6 +239,7 @@ div.collection_container {
clear: both; clear: both;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 50px;
} }
div.collection { div.collection {
@ -222,11 +283,10 @@ div.collection div.col-desc {
width: 220px; width: 220px;
height: 220px; height: 220px;
border-radius: 50%; border-radius: 50%;
/*border: 2px solid #f9f9ed; */
} }
.col-image:hover{ .col-image:hover{
filter: blur(1px); filter: blur(3px);
filter: brightness(50%); filter: brightness(50%);
cursor: pointer; cursor: pointer;
} }

View file

@ -108,60 +108,7 @@ p:last-of-type {
/* hero-home /* hero-home
=================== */ =================== */
.home-about-textbox {
background-color: #232323;
padding: 10em 20%;
width: 100%;
outline: 2px solid#f9f9ed;
outline-offset: -2.5em;
color: #f9f9ed;
position: relative;
text-align: justify;
}
.home-about-textbox h1 {
color: #f9f9ed;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0.75em;
background: #232323;
padding: 0 0.145em;
}
@media (min-width: 25rem) {
h1 {
font-size: 2rem;
}
.home-about-textbox h1 {
top: 0.6em;
}
}
@media (min-width: 60rem) {
h1 {
font-size: 2.5rem;
}
.home-about {
background-repeat: no-repeat;
}
.home-about-textbox {
width: 100%;
outline-offset: -3.75em;
/* margin-left: -2.5%; */
text-align: left;
box-shadow: 0 0 4em 0 rgba(0, 0, 0, 0.3);
}
.home-about-textbox h1 {
top: 0.75em;
left: 6rem;
transform: translateX(0);
}
}
/* portfolio /* portfolio
=================== */ =================== */

View file

@ -1,9 +1,7 @@
<?php include('header.tpl'); ?> <?php include('header.tpl'); ?>
<div class="index_start"> <div class="hero-image">
<div> Logo
<img src="images\logo_button\title_ivory.png"></img>
</div>
</div> </div>
<div class="container"> <div class="container">
@ -102,5 +100,4 @@
<p><a style="color: #f9f9ed; text-decoration: none;" href="https://www.instagram.com/bricabracomania_metalworks/">Check out our instagram page</a></p> <p><a style="color: #f9f9ed; text-decoration: none;" href="https://www.instagram.com/bricabracomania_metalworks/">Check out our instagram page</a></p>
<div id="ig_container"><!-- instagram posts will be inserted here --></div> <div id="ig_container"><!-- instagram posts will be inserted here --></div>
</div> </div>
<?php include('footer.tpl'); ?> <?php include('footer.tpl'); ?>