Perdão pela página bugada, vou colocar algumas imagens a seguir de como ela está de verdade:
Essa imagem mostra onde eu coloquei as duas divs, uma ao lado da outra, já tentei várias coisas, usar col-sm, até mudar com margin-left e margin-top, também tentei o z-index pensando que poderia corrigir o problema, mas o que acontece é que ele fica em cima da sombra... Eu sei que é um problema básico, então perdão...
(function() {
//Show Modal
$('#exampleModalLong').on('show.bs.modal', function(e) {
$('.firstBlur').addClass('modalBlur');
})
//Remove modal
$('#exampleModalLong').on('hide.bs.modal', function(e) {
$('.firstBlur').removeClass('modalBlur');
})
})();
$('.nav-link').on('click', function() {
$('.active-link').removeClass('active-link');
$(this).addClass('active-link');
});
const body = document.querySelector('body');
const searchBtn = document.querySelector('#search');
const searchInput = document.querySelector('#search-input');
let active = false;
body.addEventListener('click', (e) => {
if(e.target.id === 'search' || e.target.id === 'search-input' || e.target.id === 'search-icon') {
if(!active) {
searchBtn.classList.add('active');
searchInput.classList.add('active');
active = true;
}
} else {
searchBtn.classList.remove('active');
searchInput.classList.remove('active');
searchInput.value = '';
active = false;
}
});
new InitPxVideo({
videoId: "myvid",
captionsOnDefault: true,
seekInterval: 20,
videoTitle: "PayPal Austin promo",
debug: true
});
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
a {
outline: none;
}
.navbar-container {
text-align: left;
background-color: #008080;
box-shadow: 0px 2px 5px 0px #333333;
font-size: 0;
position: relative;
}
.navbar-container ul {
margin: 0;
padding: 0;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navbar-container ul li {
display: inline-block;
font-size: 16px;
}
.navbar-container ul li a {
color: #ffffff;
text-decoration: none;
display: inline-block;
padding: 10px;
transition: color 0.5s;
}
.navbar-container ul li .underline {
height: 3px;
background-color: transparent;
width: 0%;
transition: width 0.2s, background-color 0.5s;
margin: 0 auto;
}
.navbar-container ul li.active-link .underline {
width: 100%;
background-color: white;
}
.navbar-container ul li:hover .underline {
background-color: white;
width: 100%;
}
.navbar-container ul li:hover a {}
.navbar-container ul li:active a {
transition: none;
color: rgba(255, 255, 255, 0.76);
}
.navbar-container ul li:active .underline {
transition: none;
background-color: rgba(255, 255, 255, 0.76);
}
@-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1.5; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0;}
100% { opacity: 1.5; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1.5; }
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1.5; }
}
.fadeIn {
-webkit-animation: fadeIn 1s ease-in-out;
-moz-animation: fadeIn 1s ease-in-out;
-o-animation: fadeIn 1s ease-in-out;
animation: fadeIn 1s ease-in-out;
}
body {
font-family: Caviar Dreams;
margin: 0 auto;
color: #FFF;
}
#search {
height: 60px;
width: 60px;
border: solid 5px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 35px;
transition: 0.3s;
margin-left: 530px;
margin-top: -65px;
}
#search-input {
height: 100%;
width: 0px;
font-size: 28px;
font-weight: 600;
background: none;
color: #FFF;
border: none;
outline: 0;
visibility: hidden;
transition: 0.3s;
margin-left: -35px;
}
#search.active {
width: 350px;
}
#search-input.active {
width: 260px;
margin-left: 16px;
visibility: visible;
}
#hero {
background-color: #e6ffff;
background-size: cover;
height: 525px;
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
}
#hero2{
margin-top: -25px;
background-size: cover;
background-color: #FFFFFF;
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
height: 255px;
width: 50%;
float: left;
}
#hero3{
margin-top: -25px;
background-size: cover;
background-color: #f2f2f2;
height: 255px;
width: 50%;
float: right;
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
}
.row{
width: 300px;
margin-top: -500px;
}
.logo2{
height: 600px;
width: 600px;
}
#wrapper {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#wrapper {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#brand a,
p a {
border: 1px #fff dotted;
}
#brand a:focus,
p a:focus {
border: 1px #999 dotted;
outline: none;
}
p {
padding-top: 1em;
}
.t2{
margin-top: 40px;
margin-left: 80px;
text-transform: uppercase;
}
.iconc{
margin-left: 100px;
}
.iconi{
margin-left: 125px;
}
#jum1 {
background-color: #c2FFFF;
margin-top:265px;
width: 50%;
margin: 0;
}
#jum2 {
background-color: #c244FF;
margin-top:0px;
width: 50%;
margin: 0;
}
#hero4{
width: 50%;
margin-top: 269px;
}
#hero5{
width: 50%;
margin-top: -168px;
float: right;
background-color: #e9FFFF;
}
@media only screen and (min-width: 620px) {
.custom-controls .transcript-link {
margin-top: -44px;
}
}
.transcript-single {
border-bottom: 2px solid black-thirty;
}
.transcript-single.hidden {
display: none;
}
.session--watch {
margin-bottom: HalfLineHeight;
}
.session--watch .button {
background: black-sixty;
margin-top: QuarterLineHeight;
}
.session--watch .button:hover,
.session--watch .button:active,
.session--watch .button:focus {
background: black-seventy;
}
.sr-only {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
.hide {
display: none;
}
.show-inline {
}
.px-video-container {
overflow: hidden;
min-width: 300px;
width: 600px;
height: 600px;
margin-left: 554px;
margin-top: 0px;
}
.px-video {
position: absolute;
top: 0;
left: 0;
margin-top: 0;
width: 100%;
height: 100%;
}
.px-video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
z-index: 1;
}
.px-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.progress-bar {
width: 85%;
}
@media only screen and (min-width: 480px) {
.progress-bar {
width: 89%;
}
}
@media only screen and (min-width: 970px) {
.progress-bar {
width: 95%;
}
}
@media only screen and (min-width: 1795px) {
.progress-bar {
width: 97.5%;
}
}
.px-video-controls {
margin-bottom: 10px;
margin-top: 10px;
}
.px-video-controls:after {
font-size: 0;
content: " ";
clear: both;
height: 0;
visibility: hidden;
}
.px-video-progress {
display: block;
width: 100%;
margin-bottom: 10px;
height: 10px;
}
.px-video-progress[value] {
-webkit-appearance: none;
border: none;
}
.px-video-progress[value]::-webkit-progress-bar {
background-color: #EFFBFB;
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
}
.px-video-progress[value]::-webkit-progress-value {
background-color: #008080;
}
.px-video-time {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
float: right;
line-height: 30px;
margin-top: -30px;
font-size: 14px;
}
.px-video-playback-buttons {
float: left;
line-height: 20px;
min-width: 145px;
}
@media only screen and (min-width: 620px) {
.px-video-playback-buttons {
float: none;
left: 50%;
margin-left: -120px;
min-width: 200px;
position: absolute;
width: 200px;
}
}
.px-video-controls button {
border: 1px transparent solid;
background: transparent;
padding: 0;
margin: 0 5px;
width: 25px;
height: 25px;
overflow: hidden;
background: no-repeat url("../images/px-video-sprite.svg");
}
@media only screen and (min-width: 620px) {
.px-video-controls button {
background-size: 150%;
width: 40px;
height: 40px;
box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.75);
}
}
.px-video-controls button:focus {
border: 1px #999 dotted;
outline: none;
}
.px-video-controls button {
cursor: pointer;
}
.px-video-controls button.px-video-restart {
background-position: -9px -331px;
}
.px-video-controls button.px-video-restart:hover,
.px-video-controls button.px-video-restart:focus {
background-position: -9px -295px;
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-restart {
background-position: -9px -523px;
}
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-restart:hover,
.px-video-controls button.px-video-restart:focus {
background-position: -9px -466px;
}
}
.px-video-controls button.px-video-rewind {
background-position: -9px -187px;
}
.px-video-controls button.px-video-rewind:hover,
.px-video-controls button.px-video-rewind:focus {
background-position: -9px -151px;
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-rewind {
background-position: -9px -295px;
}
.px-video-controls button.px-video-rewind:hover,
.px-video-controls button.px-video-rewind:focus {
background-position: -9px -238px;
}
}
.px-video-controls button.px-video-play {
background-position: -8px -43px;
}
.px-video-controls button.px-video-play:hover,
.px-video-controls button.px-video-play:focus {
background-position: -8px -7px;
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-play {
background-position: -8px -67px;
}
.px-video-controls button.px-video-play:hover,
.px-video-controls button.px-video-play:focus {
background-position: -8px -10px;
}
}
.px-video-controls button.px-video-pause {
background-position: -9px -115px;
}
.px-video-controls button.px-video-pause:hover,
.px-video-controls button.px-video-pause:focus {
background-position: -9px -79px;
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-pause {
background-position: -9px -182px;
}
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-pause:hover,
.px-video-controls button.px-video-pause:focus {
background-position: -9px -124px;
}
}
.px-video-controls button.px-video-forward {
background-position: -10px -259px;
}
.px-video-controls button.px-video-forward:hover,
.px-video-controls button.px-video-forward:focus {
background-position: -10px -223px;
}
@media only screen and (min-width: 620px) {
.px-video-controls button.px-video-forward {
background-position: -10px -409px;
}
.px-video-controls button.px-video-forward:hover,
.px-video-controls button.px-video-forward:focus {
background-position: -10px -352px;
}
}
.px-video-fullscreen-btn-container {
float: left;
width: 25px;
margin-top: 12px;
}
.px-video-fullscreen-btn-container label {
width: 25px;
height: 20px;
margin-top: 3px;
margin-left: 1px;
background: no-repeat url("../images/px-video-sprite.svg");
background-position: -6px -943px;
}
@media only screen and (min-width: 540px) {
.px-video-fullscreen-btn-container label {
margin-top: 5px;
}
}
.px-video-fullscreen-btn-container input[type="checkbox"]:focus+label {
outline: 1px #999 dotted;
background-position: -6px -907px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:hover+label {
background-position: -6px -907px;
cursor: pointer;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:focus+label {
outline: 1px #999 dotted;
background-position: -6px -907px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:checked+label {
background-position: -6px -979px;
}
.px-video-fullscreen-btn-container input[type="checkbox"]:checked:hover+label {
background-position: -6px -1015px;
}
.px-video-captions-btn-container {
float: left;
}
.px-video-controls input[type='range'] {
-webkit-appearance: none;
height: 6px;
width: 70px;
margin-top: 9px;
margin-right: 0;
margin-left: 5px;
background-color: #e6e6e6;
outline: none;
}
@media only screen and (min-width: 540px) {
.px-video-controls input[type='range'] {
margin-top: 12px;
width: 85px;
}
}
.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
outline: 1px #999 dotted;
}
.px-video-controls input[type='range']::-moz-range-track {
-moz-appearance: none;
height: 6px;
background-color: #e6e6e6;
border: none;
}
.px-video-controls input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 10px;
width: 6px;
background-color: #666;
}
.px-video-controls input[type='range']::-moz-range-thumb {
background-color: #666;
border: none;
height: 12px;
width: 8px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.px-video-controls input[type='range'] {
position: relative;
padding: 0;
height: 8px;
top: -3px;
}
.px-video-controls .px-video-time {
margin-top: 4px;
}
}
.px-video-controls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
}
.progress-bar {
flex-grow: 1;
width: 75%;
}
@media only screen and (min-width: 480px) {
.progress-bar {
width: 75%;
}
}
@media only screen and (min-width: 590px) {
.progress-bar {
width: 85%;
}
}
@media only screen and (min-width: 970px) {
.progress-bar {
width: 85%;
}
}
@media only screen and (min-width: 1795px) {
.progress-bar {
width: 85%;
}
}
.px-video-progress {
margin-top: 10px;
width: 100%;
}
.px-video-time {
flex-grow: 0;
flex-shrink: 0;
padding-left: 10px;
margin-top: 0;
}
.px-video-playback-buttons {
flex-grow: 1;
min-width: auto;
}
@media only screen and (min-width: 620px) {
.px-video-playback-buttons {
left: auto;
margin-left: auto;
min-width: auto;
position: relative;
width: auto;
display: flex;
flex-direction: row;
flex-wrap: no-wrap;
justify-content: center;
align-items: center;
align-content: center;
padding-left: 96px;
}
}
}
.px-video-controls button {
margin: 0 5px;
}
<body class="fadeIn">
<!-- TODA PROGRAMAÇÃO DEVE SER FEITA DENTRO DA DIV firstBlur!!!-->
<div class="firstBlur">
<div class="navbar-container">
<ul>
<li class="nav-link active-link">
<a href="#">Página inicial
</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a href="#">Vídeos</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a href="#">Quem somos?</a>
<div class="underline"></div>
</li>
<li class="nav-link">
<a class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong" href="#">Entrar</a>
<div class="underline">
</div>
</li>
</ul>
<div id="search">
<i class="fas fa-search" id="search-icon"></i>
<form>
<input type="text" id="search-input" name="search" autocomplete="off">
</form>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="hero">
<!-- you can also add something like style="min-height: 70vh;" to the div above -->
<div class="container">
<div class="px-video-container" id="myvid">
<div class="px-video-img-captions-container">
<div class="px-video-wrapper">
<video poster="images/Logotipo.jpg" class="px-video" controls>
<!-- video files -->
<source src="videoteste.mp4" type="video/mp4" />
<!-- text track file -->
<!-- fallback for browsers that don't support the video element -->
<div>
<img src="images/Logotipo.jpg" class="logo2" alt="download video" />
</div>
</video>
</div>
</div>
<!-- end container for captions and video -->
<div class="px-video-controls"></div>
</div>
<div class="row">
<div class="col">
<h2 class ="ti">Bem vindo ao site do <h2 class=
"t1" style="color:#008080">Projeto AVAL!</h2></h2>
<p>
<h5 class="t1">Assista esse vídeo que explica nosso projeto:</h5>
</p>
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="hero2">
<div class="row2">
<div class="col">
<strong><h2 class="t2" style="color:black">Funcionalidades do site</h2></strong>>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="hero3">
<div class="row2">
<div class="col">
<img src="images/iconv.png" class="iconv"/>
<img src="images/iconc.png" class="iconc"/>
<img src="images/iconi.png" class="iconi"/>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="hero4">
<div class="col-sm-8"></div>
<div class="row3">
<div class="col">
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="hero5">
<div class="col-sm-4"></div>
<div class="row3">
<div class="col">
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" data-backdrop="true" data-keyboard="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" style="color:black">Faça o login!</h5>
</div>
<div class="modal-body">
<!-- Início do formulário -->
<form class="log">
<div class="imgcontainer">
<div class="logo">
<img src="logotipo.png" alt="Avatar" class="logo">
</div>
</div>
<div class="container">
<label for="uname"><b>Nome</b></label>
<input type="text" placeholder="Digite seu nome" name="uname" required>
<label for="psw"><b>Senha</b></label>
<input type="password" placeholder="Digite sua senha" name="psw" required>
<button type="submit" class="shadow-pop-tr" style="background-color:#008080">Entrar</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Lembrar de mim
</label>
</div>
<div class="container1" style="background-color:#008080; height: 60px;">
<span class="psw" style="margin-top:0px">Esqueceu a<a href="#"> senha?</a></span>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fim do formulário -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
<script src="js/strings.js"></script>
<script src="js/px-video.js"></script>