так что я играю в камень, ножницы, бумагу, чтобы я мог играть с javaScript и Jquery, но у меня проблемы с css.
Где я добавил абзац, который я хочу добавить изображение, в зависимости от того, что пользователь выбирает в поле выбора. Я добавил параграф только для того, чтобы проверить его, я собираюсь добавить изображение, как только я получу css фиксированный lol.
Я хочу, чтобы 1-я сетка выглядела точно так же, как 3-я сетка, у которой еще ничего нет над ней .
О, а также у меня есть еще один вопрос, я впервые использую Jquery, но я попытался сделать предупреждение, и оно не работает, я делаю это правильно?
Мой код :
$( document ).ready(function() {
console.log( "ready!" );
});
body{
background-image: url(fondo.jpg);
background-color: #F7B05B;
}
#titulo{
background-color:#FCDE9C;
font-family: 'Gloria Hallelujah', cursive;
text-align:center;
font-size: 25px;
text-shadow: 2px 2px #ff0000;
margin-left:80px;
margin-right:80px;
}
.grid-container {
display: grid;
grid-column-gap:10px;
grid-template-columns: 450px 360px 450px; /* 3 columnas */
grid-template-rows: 450px; /* una sola fila */
margin:30px;
}
#usuario{
grid-column-start: 1; /* es lo mismo que grid-column: 2/3; */
grid-column-end: 1;
}
#computadora{
grid-column-start: 3;
grid-column-end: 3;
}
#resultado{
border-color: #C7EF00;
border-style: solid;
background-color: #F3DFA2;
}
.texto{ /* This is what i want inside my grid but it keeps going lower when i add something*/
text-align: center;
margin-top: 250px;
position:relative;
font-family: 'Indie Flower', cursive;
font-size:25px;
}
.estilo{
border-color: #F7CE5B;
border-style: solid;
border-width: 10px;
background-color: #FE5F55;
border-radius: 5px;
}
.botones{
padding:20px;
font-size:25px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #2D3142;
border:none;
color: #FCDEBE;
}
#nuevoIntento{
padding: 20px;
font-size:15px;
font-family: 'Baloo Bhai', cursive;
font-style:bold;
border-radius: 8px;
background-color: #561D25;
border-color: #ECDD7B;
color: #FCDEBE;
width:250px;
border-style: outset;
border-width: 7px;
margin-top:25px;
}
#imageHolder{
/* This is the place where i want to insert an image, in this case i added a paragraph to test my css */
}
<!DOCTYPE html>
<html>
<head>
<script src="javascript1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai|Indie+Flower&display=swap" rel="stylesheet">
<title>Piedra, Papel o Tijera</title>
</head>
<body>
<header id="titulo">
<h1>PIEDRA, PAPEL O TIJERA!</h1>
</header>
<div class="grid-container">
<div id="usuario" class="estilo">
<div id="imageHolder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam cumque, aspernatur explicabo? Hic, officiis ad minima, tenetur atque alias beatae cum optio libero amet, commodi, quaerat iste consequuntur sint placeat!</p>
</div>
<br>
<div class="texto">
<h3>Seleccione una opción:</h3>
<select id="seleccion" class="botones">
<option value="Piedra">PIEDRA</option>
<option value="Papel">PAPEL</option>
<option value="Tijera">TIJERA</option>
</select>
</div>
</div>
<div id="resultado">
<div class="texto">
<p>Aca va mi resultado</p>
<button id="nuevoIntento" onClick="window.location.reload();">Volver a intentar!</button>
</div>
</div>
<div id="computadora" class="estilo">
<div class="texto">
<h3>Haga click y espere resultado:</h3>
<button class="botones"> Click me!</button>
</div>
</div>
</div>
</body>
</html>