Ben bezig met deze website: https://met-rob.com/cleverbuyparts/
Het logo en de tekst zou wat hoger in de foto moeten komen zodat de tekst ook in het donkere gedeelte komt te staan zodat het wat leesbaarder is.
Ik kom er maar niet achter waar in de code dat staat om het aan te kunnen passen.
Hier zou het volgens mij ergens aangepast moeten kunnen worden:
gr. Rob
Het logo en de tekst zou wat hoger in de foto moeten komen zodat de tekst ook in het donkere gedeelte komt te staan zodat het wat leesbaarder is.
Ik kom er maar niet achter waar in de code dat staat om het aan te kunnen passen.
Hier zou het volgens mij ergens aangepast moeten kunnen worden:
Code:
#banner {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
cursor: default;
height: 100vh;
min-height: 35em;
overflow: hidden;
position: relative;
text-align: center;
}
#banner h2 {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
transition: transform 0.5s ease, opacity 0.5s ease;
display: inline-block;
font-size: 1.75em;
opacity: 1;
padding: 0.35em 1em;
position: relative;
z-index: 1;
}
#banner h2:before, #banner h2:after {
-moz-transition: width 0.85s ease;
-webkit-transition: width 0.85s ease;
-ms-transition: width 0.85s ease;
transition: width 0.85s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
background: #fff;
content: '';
display: block;
height: 2px;
position: absolute;
width: 100%;
}
#banner h2:before {
top: 0;
left: 0;
}
#banner h2:after {
bottom: 0;
right: 0;
}
#banner p {
letter-spacing: 0.225em;
text-transform: uppercase;
}
#banner p a {
color: inherit;
}
#banner .more {
-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
transition: transform 0.75s ease, opacity 0.75s ease;
-moz-transition-delay: 3.5s;
-webkit-transition-delay: 3.5s;
-ms-transition-delay: 3.5s;
transition-delay: 3.5s;
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
border: none;
bottom: 0;
color: inherit;
font-size: 0.8em;
height: 8.5em;
left: 50%;
letter-spacing: 0.225em;
margin-left: -8.5em;
opacity: 1;
outline: 0;
padding-left: 0.225em;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 16em;
z-index: 1;
}
#banner .more:after {
background-image: url("images/arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
bottom: 4em;
content: '';
display: block;
height: 1.5em;
left: 50%;
margin: 0 0 0 -0.75em;
position: absolute;
width: 1.5em;
}
#banner:after {
pointer-events: none;
-moz-transition: opacity 3s ease-in-out;
-webkit-transition: opacity 3s ease-in-out;
-ms-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
-moz-transition-delay: 1.25s;
-webkit-transition-delay: 1.25s;
-ms-transition-delay: 1.25s;
transition-delay: 1.25s;
content: '';
background: #2e3842;
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
gr. Rob
Bijlagen
Laatst bewerkt door een moderator: