Boa tarde,
Sou iniciante na parte de Html,CSS e Javascript e este é o meu primeiro projeto.
Eu e o meu grupo estamos a fazer um site cujo tema é sobre parques temáticos.
Quase no fundo da página, tenho 3 imagens em cada linha, quando o site está no modo web, tal como mostra a seguinte imagem.
Quando é para telemóvel (até 470px), Todas as imagens umas por baixo das outras.
A minha dúvida está quando a vista é para tablets (mais ou menos até 850px), tenho cada div com 3 imagens, e gostaria que a página fosse apresentada com 3 linhas de imagens, cada linha com apenas 2 imagens. Ou seja, ficasse como mostro na foto seguinte. Mas não sei como fazer essa parte pois estão 3 imagens em cada div
Junto coloco o meu código HTML e CSS desta página
// --------------------------------------------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>
Agradecia imenso se algúem me conseguisse ajudar.
Feliz natal e próspero Ano Novo a todos!