Я пытаюсь собрать эту веб-страницу в формате
имя изображения информация
имя изображение информация
имя изображение информация
имя изображение info
В основной части кода. Когда я активирую сетку, она автоматически помещает элемент в
Name 4 раза рядом пи c info
И я не могу изменить позицию.
Вот код HTML:
.head {
font-size: 100px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
padding: 25px 50px 25px;
background-color: orange;
color: blue;
text-shadow: white 5px 5px 5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
li {
float: left;
}
li a {
display: block;
color: orange;
text-align: center;
padding: 14px 20px;
}
li a:hover:not(.active) {
background-color: rgb(255, 255, 255);
}
.active {
background-color: white;
}
img {
border: 1px solid rgb(105, 105, 105);
height: 200px;
padding: 10px;
width: 300px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(186, 0, 177, 0.5);
}
.mainweb {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto auto;
grid-gap: 10px;
padding: 10px;
background-color: orange;
}
.mainweb .name {
font-weight: bold;
font-size: 25px;
}
.footer {
text-align: center;
background-color: blue;
color: white;
}
#Sasuke.name {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
#Sasuke .pic {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#Sasuke .info {
grid-row: 2 / 3;
grid-column: 3 / 4;
}
.Kakashi .name {
grid-column: ;
grid-row: 3 / 4;
}
.Kakashi .pic {
grid-row: 3 / 4;
grid-column: ;
}
.Kakashi .info {
grid-row: 3 / 4;
grid-column: ;
}
.Gaara .name {
grid-column: ;
grid-row: 4 / 5;
}
.Gaara .pic {
grid-row: 4 / 5;
grid-column: ;
}
.footer {
text-align: center;
}
<link rel="stylesheet" type="text/css" href="css.css">
<div class="head">
<header>Naruto Wiki</header>
</div>
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#donate">Donate</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div>
<div class="container">
<div class="mainweb">
<div id="Naruto">
<p class="name">Naruto Uzamaki</p>
<a href="/Graphics/Naruto.png">
<img class="pic" src="/Graphics/Naruto.png" alt="Naruto">
</a>
<p class="info">
Naruto Uzumaki (うずまきナルト, Uzumaki Naruto) is a shinobi of Konohagakure's Uzumaki clan. He became the jinchūriki of the Nine-Tails on the day of his birth — a fate that caused him to be shunned by most of Konoha throughout his childhood. After joining Team
Kakashi, Naruto worked hard to gain the village's acknowledgement all the while chasing his dream to become Hokage. In the following years, through many hardships and ordeals, he became a capable ninja regarded as a hero both by the villagers,
and soon after, the rest of the world, becoming known as the Hero of the Hidden Leaf (木ノ葉隠れの英雄, Konohagakure no Eiyū, Literally meaning: Hero of the Hidden Tree Leaves). He soon proved to be one of the main factors in winning the Fourth Shinobi
World War, leading him to achieve his dream and become the village's Seventh Hokage (七代目火影, Nanadaime Hokage, Literally meaning: Seventh Fire Shadow).
</p>
</div>
<div id="Sasuke">
<p class="name">Sasuke Uchiha</p>
<a href="/Graphics/Sasuke.png">
<img id src="/Graphics/Sasuke.png" alt="Sasuke">
</a>
<p class="info">
Sasuke Uchiha (うちはサスケ, Uchiha Sasuke) is one of the last surviving members of Konohagakure's Uchiha clan. After his older brother, Itachi, slaughtered their clan, Sasuke made it his mission in life to avenge them by killing Itachi. He is added to Team
7 upon becoming a ninja and, through competition with his rival and best friend, Naruto Uzumaki, Sasuke starts developing his skills. Dissatisfied with his progress, he defects from Konoha so that he can acquire the strength needed to exact his
revenge. His years of seeking vengeance and his actions that followed become increasingly demanding, irrational and isolates him from others, leading him to be branded as an international criminal. After learning the truth of his brother's sacrifice,
later proving instrumental in ending the Fourth Shinobi World War, and being happily redeemed by Naruto, Sasuke decides to return to Konoha and dedicate his life to help protect the village and its inhabitants, becoming referred to as the "Supporting
Kage" (支う影, Sasaukage, Literally meaning: Supporting Shadow).
</p>
</div>
<div id="Kakashi">
<p class="name">Kakashi Hatake</p>
<a href="/Graphics/Kakashi.jpg">
<img src="/Graphics/Kakashi.jpg" alt="Kakashi">
</a>
<p class="info">
Kakashi Hatake (はたけカカシ, Hatake Kakashi) is a shinobi of Konohagakure's Hatake clan. Famed as Kakashi of the Sharingan (写輪眼のカカシ, Sharingan no Kakashi), he is one of Konoha's most talented ninja; regularly looked to for advice and leadership despite his
personal dislike of responsibility. To his students on Team 7, Kakashi teaches the importance of teamwork, a lesson he received, along with the Sharingan, from his childhood friend, Obito Uchiha. After the Fourth Shinobi World War, Kakashi becomes
Konoha's Sixth Hokage (六代目火影, Rokudaime Hokage, Literally meaning: Sixth Fire Shadow).
</p>
</div>
<div id="Gaara">
<p class="name">Gaara</p>
<a href="/Graphics/Gaara.png">
<img src="/Graphics/Gaara.png" alt="Gaara">
</a>
<p class="info">
Gaara (我愛羅) is a shinobi of Sunagakure. He was made the jinchūriki of the One-Tailed Shukaku before he was born, causing the villagers of Suna to fear him as a monster. With nobody to connect to, Gaara grew up hating the world and looking out only for
himself, giving his life meaning by killing anyone he came across. After being defeated by Naruto Uzumaki — a jinchūriki like himself who found strength in his friendships — Gaara starts emulating him. He becomes Suna's Fifth Kazekage (五代目風影,
Godaime Kazekage, Literally meaning: Fifth Wind Shadow) so that he can protect the village and all those who live there, dispelling the fears he cast on the villagers.
</p>
</div>
</div>
</div>
<div class="footer">
All information has been provided by <a href="https://naruto.fandom.com/wiki/Narutopedia">https://naruto.fandom.com/wiki/Narutopedia</a> Naruto Wiki | 2020
</div>