1
Good afternoon,
I’m a beginner in Html, CSS and Javascript and this is my first project.
My group and I are doing a website on theme parks.
Almost at the bottom of the page, I have 3 images in each line, when the site is in web mode, as shown in the following image.
When it’s for mobile phone (up to 470px), all the images are underneath each other.
My question is when the view is for tablets (more or less up to 850px), I have each div with 3 images, and I would like the page to be presented with 3 lines of images, each line with only 2 images. That is, it was as shown in the next photo. But I don’t know how to do this part because there are 3 images in each div
Together I put my HTML and CSS code on this page
// --------------------------------------------IMAGEM 1----------------------------------------------------
var slideIndex1 = 1;
showDivs1(slideIndex1);
function plusDivs1(n) {
showDivs1(slideIndex1 += n);
}
function showDivs1(n) {
var i;
var x = document.getElementsByClassName("imagem1");
if (n > x.length) {slideIndex1 = 1}
if (n < 1) {slideIndex1 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex1-1].style.display = "block";
}
// --------------------------------------------IMAGEM 2----------------------------------------------------
var slideIndex2 = 1;
showDivs2(slideIndex2);
function plusDivs2(n) {
showDivs2(slideIndex2 += n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("imagem2");
if (n > x.length) {slideIndex2 = 1}
if (n < 1) {slideIndex2 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex2-1].style.display = "block";
}
// --------------------------------------------IMAGEM 3----------------------------------------------------
var slideIndex3 = 1;
showDivs3(slideIndex3);
function plusDivs3(n) {
showDivs3(slideIndex3 += n);
}
function showDivs3(n) {
var i;
var x = document.getElementsByClassName("imagem3");
if (n > x.length) {slideIndex3 = 1}
if (n < 1) {slideIndex3 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex3-1].style.display = "block";
}
// --------------------------------------------IMAGEM 4----------------------------------------------------
var slideIndex4 = 1;
showDivs4(slideIndex4);
function plusDivs4(n) {
showDivs4(slideIndex4 += n);
}
function showDivs4(n) {
var i;
var x = document.getElementsByClassName("imagem4");
if (n > x.length) {slideIndex4 = 1}
if (n < 1) {slideIndex4 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex4-1].style.display = "block";
}
// --------------------------------------------IMAGEM 5----------------------------------------------------
var slideIndex5 = 1;
showDivs5(slideIndex5);
function plusDivs5(n) {
showDivs5(slideIndex5 += n);
}
function showDivs5(n) {
var i;
var x = document.getElementsByClassName("imagem5");
if (n > x.length) {slideIndex5 = 1}
if (n < 1) {slideIndex5 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex5-1].style.display = "block";
}
// --------------------------------------------IMAGEM 6----------------------------------------------------
var slideIndex6 = 1;
showDivs6(slideIndex6);
function plusDivs6(n) {
showDivs6(slideIndex6 += n);
}
function showDivs6(n) {
var i;
var x = document.getElementsByClassName("imagem6");
if (n > x.length) {slideIndex6 = 1}
if (n < 1) {slideIndex6 = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex6-1].style.display = "block";
}*{margin: 0; padding: 0;} /* Coloca as margens e padding do navegador a 0*/
body{
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
}
/*---------------------------------------------------------------------------------------------*/
/* CORPO PÁG */
/*---------------------------------------------------------------------------------------------*/
.texto{ /* Texto inicial antes de todas as diversões */
margin-top: 2%;
margin-bottom: 2%;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 20px;
}
h1{
color:red;
}
#div_titulo_parque{
background-color: white;
padding-top: 10px;
}
#titulo_parque{
font-size: 72px;
text-align: center;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/*TÍTULO COM GRADIENTE*/
background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgba(214, 105, 105, 0.753) 75%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.Titulo_Diversoes{
color: rgba(248, 41, 41, 0.842);
}
.p_textodiversao{ /* Texto de cada diversão*/
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
margin-top: 16px;
margin-bottom: 16px;
}
.Diversao{
margin-bottom: 3%;
}
.Video_Diversao{ /* vídeo de cada diversão*/
/* position: relative; */
float: right;
margin-right: 7px;
}
#fundo_texto{
margin-left: 10px;
margin-right: 7px;
}
#imagem_centro{
width:100%;
height: 400px;
}
.texto_imagem{
margin-top: -30px;
background-color: rgba(255, 8, 0, 0.575); /* rgba -> a -> opacidade -> 0-muito 1-nada*/
width: 100%;
}
h3{
color: white;
margin-left: 7px;
}
.imagem_outras_atracoes{
width:100%;
height:270px;
}
.imagem_e_texto_outras_atracoes{
position: relative;
width: 27%;
height: auto;
display: flex;
flex-direction: column;
}
.outras_atracoes{
display: flex;
flex-direction: row;
place-content: space-between;
margin-bottom: 3%;
}
.seta_dir{
position: absolute;
margin-top: 130px;
margin-left: 87%;
width: 7%;
}
.seta_esq{
position: absolute;
margin-top: 130px;
margin-left: 5%;
width: 7%;
}
.mySlides {
display:none;
}
button{
width: 5%;
height: 23px;
}
.botao_esquerda{
position: absolute;
margin-top: 130px;
}
.botao_direira{
position: absolute;
margin-top: 130px;
margin-left: 95%;
}
@media only screen and (max-width: 470px)
{
#imagem_centro{
width:100%;
height: 250px;
}
.Video_Diversao{ /* vídeo de cada diversão*/
/* position: relative; */
float:none;
margin-left:auto;
margin-right: auto;
display: block;
}
.imagem_outras_atracoes{
width:100%;
height:270px;
}
.imagem_e_texto_outras_atracoes{
position: relative;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.outras_atracoes{
display: flex;
flex-direction: column;
place-content: space-between;
margin-bottom: 3%;
}
.Titulo_Diversoes{
color: rgba(248, 41, 41, 0.842);
margin-bottom: 15px;
}
}
/*---------------------------------------------------------------------------------------------*/<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Ferrari Park</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../menu/menu.css">
<link rel="stylesheet" type="text/css" href="../menu/projeto.css">
<script src="../menu/react.js"></script>
<script src="../menu/react-dom.js"></script>
<link rel="stylesheet" type="text/css" href="Style_FerrariPark.css">
</head>
<body>
<div id="data-hora"></div> <!-- div que vai mostrar a data e hora -->
<!-- ------------------------------------------------------------------------------------------------->
<header> <!-- Inserir o Cabeçalho -->
<div id="menudiv"></div> <!-- div para o menu -->
</header>
<!-- ------------------------------------------------------------------------------------------------->
<div id="div_titulo_parque"><h1 id="titulo_parque">Ferrari PARK</h1></div>
<!-- Esta div contém a imagem do parque temático -->
<div >
<img id="imagem_centro" src="../imagens/ferraripark.jpg">
</div>
<!-- ------------------------------------------------------------------------------------------------->
<div id="fundo_texto">
<!-- video de apresentação do parque temático -->
<div class="texto">
<p>FerrariPark é um dos nossos principais parques temáticos e é ideal para quem gosta de corridas e adrenalina.</p>
<p>Tem diversas diversões focadas em velcidade e para amantes de F1.</p>
<p>Vem e diverte-te!!!</p>
</div>
<h1>Principais Atrações</h1><br>
<div class="Diversao">
<h2 class="Titulo_Diversoes">Red Force</h2>
<iframe class="Video_Diversao" width="300" height="170" src="https://www.youtube.com/embed/VzvqtT4hga0" frameborder="0" allow="accelerometer;encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="p_textodiversao">Desfruta de uma viagem sensasional cheia de adrenalina com um percurso de 880 metros, atingindo 180km/h com uma altura máxima de 112metros.</p>
<p class="p_textodiversao">O Red Force usa energia eletromagnética, fornecida por motores síncronos lineares, para lançar seus carros dos 0 aos 180 Km/h em apenas cinco segundos, e a seguir escala uma torre em forma de cartola com ângulo vertical de 90 graus </p>
<p class="p_textodiversao">Esta diversão é mais direcionada para adultos e crianças com idade superior a 14 anos. </p>
<!-- <p class="p_textodiversao">Desfruta de uma viagem sensasional cheia de adrenalina com um percurso de 880 metros, atingindo 180km/h e uma altura máxima de 112metros </p> -->
</div>
<div class="Diversao">
<h2 class="Titulo_Diversoes">Torre de Emoções</h2>
<iframe class="Video_Diversao" width="300" height="200" src="https://www.youtube.com/embed/mGqZbVAOSDE" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="p_textodiversao">Sente a adrenalina e o movimento dos pistões de um motor Ferrari enquanto és lançado em direção ao céu e depois em direção ao chão</p>
<p class="p_textodiversao">Esta diversão possui um motor de 600 Cv V12, equiparado ao um motor de fórmula 1. Vem experimentar e sente a adrenalina de andar num carro de F1. </p>
<p class="p_textodiversao">Entra nesta diversão que te vai proporcionar muita adrenalina e emoção.</p>
<p class="p_textodiversao">Sente a adrenalina e o movimento dos pistões de um motor Ferrari enquanto és lançado em direção ao céu e depois em direção ao chão</p>
</div>
<div class="Diversao">
<h2 class="Titulo_Diversoes">Flying Aces</h2>
<iframe class="Video_Diversao" width="300" height="200" src="https://www.youtube.com/embed/4dq6oxI8Hy0" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="p_textodiversao">Suba a bordo do seu biplano militar e escala 63 metros em uma inclinação espetacular de 51 graus. Sinta sua pulsação enquanto voa pelo circuito mais alto da montanha-russa do mundo e atinge velocidades de até 120 km / h.</p>
<p class="p_textodiversao">Inspirado pelo lendário aviador do ás de ases, o Conde Baracca. Escale 63m em uma inclinação espetacular de 51 graus, alcance 120 km / h e voe pelo circuito mais alto da montanha-russa do mundo.</p>
<p class="p_textodiversao">Esta diversão possui um motor de 600 Cv V12, equiparado ao um motor de fórmula 1. Vem experimentar e sente a adrenalina de andar num carro de F1. </p>
<p class="p_textodiversao">Sente a adrenalina e o movimento dos pistões de um motor Ferrari enquanto és lançado em direção ao céu e depois em direção ao chão</p>
</div>
<h1>Outras atrações</h1><br>
<!-- --------------------------------------------IMAGEM 1 ---------------------------------------------------->
<div class="outras_atracoes">
<div class="imagem_e_texto_outras_atracoes">
<!-- <img src="../imagens/seta_direita.png" class="seta_dir" onclick="mudarfoto_frente_1_1();">
<img src="../imagens/seta_esquerda.png" class="seta_esq" onclick="mudarfoto_tras_1_1();"> -->
<img class="imagem_outras_atracoes imagem1" src="../imagens/fp1_1.jpg">
<img class="imagem_outras_atracoes imagem1" src="../imagens/fp1_2.jfif">
<img class="imagem_outras_atracoes imagem1" src="../imagens/fp1_3.jpg">
<button class="botao_esquerda" onclick="plusDivs1(-1)">❮</button><!-- ❮ unicode para seta da esquerda-->
<button class="botao_direira" onclick="plusDivs1(1)">❯</button><!-- ❯ unicode para seta da direira-->
<div class="texto_imagem">
<h3 class="nome_atracao">Racing legends</h3>
</div>
</div>
<!-- --------------------------------------------IMAGEM 2 ---------------------------------------------------->
<div class="imagem_e_texto_outras_atracoes">
<img class="imagem_outras_atracoes imagem2" src="../imagens/fp2_1.jpg">
<img class="imagem_outras_atracoes imagem2" src="../imagens/fp2_2.jpg">
<img class="imagem_outras_atracoes imagem2" src="../imagens/fp2_3.jpg">
<img class="imagem_outras_atracoes imagem2" src="../imagens/fp2_4.webp">
<button class="botao_esquerda" onclick="plusDivs2(-1)">❮</button><!-- ❮ unicode para seta da esquerda-->
<button class="botao_direira" onclick="plusDivs2(1)">❯</button><!-- ❯ unicode para seta da direira-->
<div class="texto_imagem">
<h3 class="nome_atracao">Formula Rossa</h3>
<!-- Fazer setas para mudar de imagem, ver exercício 2 ficha 7 -->
</div>
</div>
<!-- --------------------------------------------IMAGEM 3 ---------------------------------------------------->
<div class="imagem_e_texto_outras_atracoes">
<img class="imagem_outras_atracoes imagem3" src="../imagens/fp3_2.jpg">
<img class="imagem_outras_atracoes imagem3" src="../imagens/fp3_1.jpg">
<img class="imagem_outras_atracoes imagem3" src="../imagens/fp3_3.jpg">
<img class="imagem_outras_atracoes imagem3" src="../imagens/fp3_4.jpg">
<img class="imagem_outras_atracoes imagem3" src="../imagens/fp3_5.jpg">
<button class="botao_esquerda" onclick="plusDivs3(-1)">❮</button><!-- ❮ unicode para seta da esquerda-->
<button class="botao_direira" onclick="plusDivs3(1)">❯</button><!-- ❯ unicode para seta da direira-->
<div class="texto_imagem">
<h3 class="nome_atracao">Junior Grand Prix</h3>
<!-- Fazer setas para mudar de imagem, ver exercício 2 ficha 7 -->
</div>
</div>
</div>
<div class="outras_atracoes">
<!-- --------------------------------------------IMAGEM 4 ---------------------------------------------------->
<div class="imagem_e_texto_outras_atracoes">
<img class="imagem_outras_atracoes imagem4" src="../imagens/fp4_1.jpg">
<img class="imagem_outras_atracoes imagem4" src="../imagens/fp4_2.jpg">
<img class="imagem_outras_atracoes imagem4" src="../imagens/fp4_3.jpg">
<img class="imagem_outras_atracoes imagem4" src="../imagens/fp4_4.jpg">
<button class="botao_esquerda" onclick="plusDivs4(-1)">❮</button><!-- ❮ unicode para seta da esquerda-->
<button class="botao_direira" onclick="plusDivs4(1)">❯</button><!-- ❯ unicode para seta da direira-->
<div class="texto_imagem">
<h3 class="nome_atracao">Scuderia Challenge</h3>
<!-- Fazer setas para mudar de imagem, ver exercício 2 ficha 7 -->
</div>
</div>
<!-- --------------------------------------------IMAGEM 5 ---------------------------------------------------->
<div class="imagem_e_texto_outras_atracoes">
<img class="imagem_outras_atracoes imagem5" src="../imagens/fp5_1.jpg">
<img class="imagem_outras_atracoes imagem5" src="../imagens/fp5_3.jpg">
<button class="botao_esquerda" onclick="plusDivs5(-1)">❮</button><!-- ❮ unicode para seta da esquerda-->
<button class="botao_direira" onclick="plusDivs5(1)">❯</button><!-- ❯ unicode para seta da direira-->
<div class="texto_imagem">
<h3 class="nome_atracao">Karting Academy</h3>
<!-- Fazer setas para mudar de imagem, ver exercício 2 ficha 7 -->
</div>
</div>
<!-- --------------------------------------------IMAGEM 6 ---------------------------------------------------->
<div class="imagem_e_texto_outras_atracoes">
<img class="imagem_outras_atracoes imagem6" src="../imagens/fp6_1.jpg">
<img class="imagem_outras_atracoes imagem6" src="../imagens/fp6_2.jpg">
<img class="imagem_outras_atracoes imagem6" src="../imagens/fp6_.jpg">
<button class="botao_esquerda" onclick="plusDivs6(-1)">❮</button><!-- ❮ unicode para seta da esquerda-->
<button class="botao_direira" onclick="plusDivs6(1)">❯</button><!-- ❯ unicode para seta da direira-->
<div class="texto_imagem">
<h3 class="nome_atracao">CRAZY PISTONS</h3>
</div>
</div>
</div>
<script src="../menu/menu.js"></script> <!-- script do menu -->
<script src="script_FerrariPark.js"></script>
</body>
</html>I’d really appreciate it if someone could help me.
Merry Christmas and Happy New Year to all!
Thank you so much for your help. Merry Christmas!
– Gonçalo Costa