Overlay a video over a background, and add a logo over a menu

Asked

Viewed 182 times

-1

I’m not getting to overlay a logo on a menu I created on the site, and I’m having trouble adding a video on top of an image on the site. Someone could give me that strength?

Follow the image: https://imgur.com/a/gM5vb I wanted to put this video on top of this background image.

about the logo : https://imgur.com/a/QSlFg

I wish it were so : https://imgur.com/a/Mv7vk

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>

  • if I understand what you want in both cases you can using background: url()

1 answer

0

That’s it?

*{margin:0;padding:0;}
.menu{
display:block;
width:100%;
text-align:center;
line-height: 50px;
background: #333 url(https://s.imgur.com/images/imgur-logo.svg?1) no-repeat 20px 50%;
}
.menu li{
display:inline-block;
list-style:none;
text-transform:uppercase;
margin: 0 10px;
}
.menu li a{
color: #fff;
font-family: arial;
font-size: 12px;
text-decoration:none;
}
.menu li a:hover{
text-decoration: underline;
}
<ul class="menu">
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
<li><a href="">item 3</a></li>
</ul>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.