I can not overlay a logo on a menu that I created on the site, and I'm not able to add a video over an image on the site. Could someone give me this strength?
Follow the img: link I wanted to put this video on top of that background image.
About the logo: link
I wanted it to look like this: link
My code so far:
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300|Lato:400,300,700);
@import url('https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i');
h1 {
text-shadow: 2px 2px #ff0000;
}
h2 {
text-shadow: 2px 2px #ffce0b;
}
body {
margin: 0;
padding: 0;
background: #eeeeee;
}
a:link {
text-decoration: none;
}
.wrap {
margin: auto;
width: 960px;
}
.header {
width: 100%;
background: #383838;
}
.header .menutop {
display: inline-block;
margin: 0;
padding-bottom: 20px;
padding-top: 20px;
}
.header .menu {
overflow: hidden;
background: #202020;
}
.header .menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.header .menu ul li {
float: right;
display: inline-block;
margin: 0 23px 0 0;
}
.header .menu ul li a {
display: block;
padding: 32px 0;
font-family: 'Oswald', sans-serif;
font-size: 15px;
font-weight: 700;
color: #eeeeee;
}
.header .menu ul li a:hover {
text-decoration: underline;
color: #b0fafd;
}
.slide {
margin: 0;
}
.slide .fundo1 {
margin: 0;
width: 1583px;
height: 500px;
display: block;
background: url(../images/fundo1.png);
}
.footer {
overflow: hidden;
margin: 0px 0 0 0;
font-family: Arial;
font-size: 13px;
color: #ababab;
text-align: center;
background: #484846;
padding-bottom: 5px;
padding-top: 5px;
}
.row {
margin: 0 -30px 0 0;
height: 500px;
font-family: Arial;
font-size: 20px;
}
.row h1 {
color: #53a062;
font-family: Forte;
font-size: 48px;
}
.row h2 {
color: #c2945b;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 48px;
}
.raw {
margin: 0 -30px 0 0;
height: 500px;
font-family: Arial;
font-size: 20px;
}
.raw {
margin: 0;
width: 1583px;
height: 500px;
display: block;
background: url(../images/fundo2.png);
}
.raw h1 {
color: #b7d0ff;
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 38px;
text-align: center;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Secure JOB</title>
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/gallery.prefixed.css">
<link rel="stylesheet" href="css/gallery.theme.css">
</head>
<body>
<header class="header">
<div class="menutop">
</div>
<nav class="menu">
<ul>
<li><a href="contato.html" title="CONTATO">CONTATO</a></li>
<li><a href="faq.html" title="FAQ">FAQ</a></li>
<li><a href="vit.html" title="VITÓRIAS">VITÓRIAS</a></li>
<li><a href="duo.html" title="DUOBOOST">DUOBOOST</a></li>
<li><a href="elo.html" title="ELOBOOST">ELOBOOST</a></li>
<li><a href="md10.html" title="MD10">FAQ</a></li>
<li><a href="inicio.html" title="ÍNICIO">ÍNICIO</a></li>
</ul>
</nav>
</header>
<section class="slide">
<div class="fundo1">
<img scr="images/fundo1.png" />
</div>
</section>
<section class="conteudo">
<div class="wrap">
<div class="row">
<h1 align="center">A ÚNICA COM SEGURANÇA</h1>
<h2 align="center">PMD</h2>
<p>Nós da SecureElobosting percebemos que muitos sites de ELOJOB tiveram seus dados vazados por hackers, muitos clientes tiveram seus emails vazados e consequentemente tiveram suas contas banidas do LEAGUE OF LEGENDS. Foi por isso que nós da SecureJob
criamos esse sistema de segurança chamado PMD. Mas afinal, o que é a segurança PMD? PMD significa Pendrive – Messenger- Description. Usamos um messenger criptografado para troca de informações (planos PREMIUM e SJBOOST), pendrive para armazenar
o MÍNIMO de suas informações, sem manter NADA online, Sendo assim, se um de nossos boosters ou administradores sofrerem ataques em seus computadores, nenhuma informação sua correrá riscos, tudo estará armazenado em um pendrive, sendo imediatamente
deletado após a efetuação do seu elojob.</p>
</div>
</a>
</div>
</div>
</section>
<section class="conteudofaq">
<div class="raw">
<br />
<h1 align="center">COMO TER O SEU ELO DOS SONHOS EM POUCO TEMPO SEM TROLLS</h1>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/QN_FdiMItvA"frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</section>
<footer class="footer">
<div class="wrap">
<div class="wrap">
<p align="left">© SecureElojob 201-2017 | TODOS OS DIREITOS RESERVADOS</p>
<p>League of legends é uma marca registrada da Riot Games, Inc. Nós não somos de nenhuma forma afiliados, associados ou endossado pela Riot Games, Inc. Todos os direitos autoriais, marcas, imagens e marcas de serviço pertencem a seus respectivos
proprietários.
</p>
</div>
</div>
</footer>
</body>
</html>