pedf
/
domu-nevidis
1
0
Fork 0
Code Releases Activity

Center video section positioning

Browse Source
master
Emil Miler 2 years ago
parent cbda8a2291
commit 6b588f5a7a
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File

30
index.html
Unescape Escape View File

@ -30,21 +30,23 @@
</header> </header>
<section class="wrap"> <section class="wrap">
<div class="text"> <div class="grid">
<div class="title">To, co se děje u&nbsp;nich doma, nevidíte&nbsp;&hellip;</div> <div class="text">
<p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p> <div class="title">To, co se děje u&nbsp;nich doma, nevidíte&nbsp;&hellip;</div>
</div> <p>&hellip;&nbsp;ale mají kolem sebe jiné svědky, kteří to bohužel vidí.</p>
<div class="player"> </div>
<video> <div class="player">
<source src="/static/vid/pestouni.mp4" type="video/mp4"> <video>
</video> <source src="/static/vid/pestouni.mp4" type="video/mp4">
</div> </video>
<div class="video-list"> </div>
<img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" class="active"> <div class="video-list">
<img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/tyrani.mp4"> <img src="/static/vid/pestouni.jpg" alt="Pěstouni" data-video="/static/vid/pestouni.mp4" class="active">
<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4"> <img src="/static/vid/tyrani.jpg" alt="Týrání" data-video="/static/tyrani.mp4">
<img src="/static/vid/samozivitel.jpg" alt="Samoživitel" data-video="/static/vid/samozivitel.mp4">
</div>
<a href="" class="button">Vyhledat pomoc</a>
</div> </div>
<a href="" class="button">Vyhledat pomoc</a>
</section> </section>
</div> </div>
<section class="wrap facts"> <section class="wrap facts">

26
sass/style.scss
Unescape Escape View File

@ -30,7 +30,7 @@ body {
.wrap { .wrap {
max-width: 90rem; max-width: 90rem;
margin: 0 auto; margin: 0 auto;
padding: 0 1rem; padding: 0 2rem;
} }
.narrow { .narrow {
@ -72,6 +72,8 @@ body.noscroll {
.intro { .intro {
min-height: 100vh; min-height: 100vh;
display: flex;
flex-direction: column;
header { header {
position: relative; position: relative;
@ -157,11 +159,18 @@ body.noscroll {
} }
section { section {
display: grid; flex: 1;
grid-template-columns: 1fr; display: flex;
grid-column-gap: 2rem; flex-direction: column;
grid-row-gap: 2rem; justify-content: center;
align-items: center;
.grid {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2rem;
grid-row-gap: 2rem;
align-items: center;
}
.text { .text {
max-width: 25rem; max-width: 25rem;
@ -492,7 +501,10 @@ footer {
@media only screen and (min-width: $size-mobile) { @media only screen and (min-width: $size-mobile) {
.intro section { .intro section {
grid-template-columns: 2fr 3fr;
.grid {
grid-template-columns: 2fr 3fr;
}
.text { .text {
text-align: left; text-align: left;

Write Preview
Loading…
Cancel
Save