Reputation: 439
In my project I have a problem. In the last area of the site I have a text written "Example" and an image on the side, but for some reason the image is below the text. I wanted to do the same thing as the top div, but invert the text on the left and the image on the right, does anyone know how I put the text up?
Code:
@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
html, body, #root, .render{
height: 100%;
}
body {
background: #111;
font-family: 'Manjari', sans-serif;
}
.mainBanner {
background: url('https://i.ibb.co/7XY9yyb/fundo.jpg');
height: 100%;
width: 100%;
}
.variacao {
height: 12%;
background-image: linear-gradient(to bottom, transparent 0%, #111 100%);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.wall {
background: rgba(0, 0, 0, 0.5);
height: 100%;
overflow: auto;
width: 100%;
}
.topContainer {
margin-top: 15px;
}
.topContainer h1 {
font-size: 35px;
text-align: center;
color: #e50914;
}
.wellcomemsg {
text-align: center;
margin-top: 8%;
font-size: 5vw;
text-shadow: 1px 2px 3px rgba(255, 255, 255, 0.6);
color: #FFF;
}
.btns button {
margin: 0 auto;
padding: 15px 20px;
margin-top: 5px;
cursor: pointer;
border-radius: 3px;
margin-left: 10px;
border: 1px solid #e50914;
background: #e50914;
color: #FFF;
font-size: 22px;
}
.multi {
position: relative;
}
.multi p {
color: #FFF;
font-size: 2vw;
word-wrap: break-word;
float: right;
margin-right: 70px;
margin-top: 12%;
}
.multi img {
margin-bottom: 5%;
opacity: 0.95;
margin-left: 60px;
width: 30%;
margin-top: 4%;
cursor: pointer;
}
.multi img:hover {
opacity: 1;
}
.down {
position: relative;
}
.down p {
color: #FFF;
font-size: 2vw;
word-wrap: break-word;
margin-left: 70px;
margin-top: 12%;
}
.down img {
margin-bottom: 5%;
opacity: 0.95;
margin-right: 60px;
width: 30%;
float: right;
margin-top: 0%;
cursor: pointer;
}
.down img:hover {
opacity: 1;
}
hr {
border-color: #ccc;
width: 90%;
margin: 0 auto;
}
@media only screen and (max-width: 600px) {
.wellcomemsg {
font-size: 30px;
margin-top: 8vh;
}
.btns button {
margin-top: 20px;
font-size: 20px;
}
.multi img {
margin-top: 30px;
width: 90%;
margin-left: 5%;
}
.multi p {
width: 100%;
margin-top: 8%;
margin-right: 0;
text-align: center;
font-size: 20px;
}
}
<div class="render">
<div class="mainBanner">
<div class="wall">
<div class="topContainer">
<h1>IMM | YouWatch</h1>
</div>
<div class="wellcomemsg">
<p>Bem-vindo a YouWatch</p>
<p>Cria uma conta gratis ou experimenta</p>
<p>Uma conta paga durante 1 Mês</p>
<div class="btns">
<button>Criar uma conta</button>
<button>Iniciar Sessão</button>
</div>
</div>
<div class="variacao"></div>
</div>
</div>
<div class="multi">
<img src="https://i.ibb.co/q9s3R9v/multi.png" alt="Multi Plataformas" title="Multi Plataformas"/>
<p>Veja os seus filmes e series favoritos onde e quando quiser!</p>
</div>
<hr />
<div class="down">
<p>Example</p>
<img src="https://i.ibb.co/q9s3R9v/multi.png" alt="Multi Plataformas" title="Multi Plataformas"/>
</div>
<hr />
<p>T</p>
</div>
Upvotes: 2
Views: 1832
Reputation: 4323
The image is underneath the 'Example' line in your code, surely this is why?
<div class="down">
<p>Example</p>
<img src="https://i.ibb.co/q9s3R9v/multi.png" alt="Multi Plataformas" title="Multi Plataformas"/>
</div>
Upvotes: 1