Как сделать карточку автора

Question

Как сделать карточку автора

Рейтинг: 0Ответов: 1Опубликовано: 27.01.2023

Здраствуйте, мне нужно создать карточку автора типо слева обложка книги, а справа по очереди сверху вниз: Автор: Название: Рейтинг: Оценка: Отзыв:

И внизу под этим всем Описание:

И что бы это было обёрнуто в border(книга отдельно, и каждый из пунктов по отдельности) у меня так получилось

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #add8e6;
  font-size: 26px;
  height: 100vh;
  font-family: Tahoma;
}

.solid {
  width: 100%;
  height: 180px;
  background: #add8e6;
  position: absolute;
  top: -160px;
  transition: top 1s ease-in-out;
  border: 5px solid black;
  border-top: 0;
  display: table-cell;
  vertical-align: bottom;
}

.solid:hover {
  top: 0;
}

.solid p {
  text-align: center;
  margin: 50px;
  color: black;
  font-size: 39px;
  word-spacing: 46px;
}

.solid a {
  color: black;
  text-decoration: none;
}

.content {
  height: 100px;
  margin-top: 25px;
}

.content-color {
  width: 60%;
  background-color: white;
  margin: auto;
}

.book {
  border: 5px solid #1087af;
  width: 65%;
  height: 300px;
  border-radius: 19px;
  margin: 45px;
}

.book-text {
  float: right;
  padding-right: 5px;
  /*padding-left: 3px;*/
  border-bottom: 10px solid #1087af;
}

.strelki {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: center;
}

.next-page {
  margin-top: 0%;
  margin-left: 0%;
  height: 50px;
  width: 50px;
}

.next-page1 {
  margin-top: 0%;
  margin-left: 95%;
  height: 50px;
  width: 50px;
}

.previous-page {
  margin-top: 0%;
  height: 50px;
  width: 50px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Book Reviews Mirokioo</title>
  <link href="assets/css/style.css" rel="stylesheet">
</head>

<body>
  <div class="solid">
    <p><a href="index.html">Главная </a><a href="#">Топ2 </a><a href="#">Топ1 </a><a href="#">Бонус</a></p>
  </div>
  <div class="content">
    <div class="content-color">
      <h2>ТОП 3</h2>
      <div class="book">
        <p><img src="assets/image/Картинка 1.png" alt="" style="padding: 0%; margin: 0%; width: 220px; height: 300px; border-right:5px solid #1087af; border-radius: 14px; align-items: flex-end;"><span class="book-text">Автор: Даниель Киз</span><span class="book-text">Название: <small>Цветы для Элджернона</small></span>
          <span
            class="book-text">Рейтинг: <b>18+</b></span><span class="book-text"></span><span class="book-text"></span><span class="book-text"></span></p>
      </div>
      <div class="strelki">
        <a href="index.html"><img src="assets/image/strelka2.png" alt="" class="previous-page"></a>
        <a href="#"><img src="assets/image/strelka1.png" alt="" class="next-page"></a>
      </div>
    </div>
  </div>
</body>

</html>

css html веб-программирование

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

p{margin: 0;} /*сжимаем <p> */
#x{
display: grid;
/* выбираем грид модель(способ и набор правил для размещения
элементов на странице), она одна из самых понятных и удобных */

grid-template-columns: 1fr/* ширина первого столбца - обложки */
1fr/*ширина второго с текстом*/;
/* 1fr - единицы использующиеся только в грид модели */

grid-template-rows: repeat(6, auto);
/*количество и высота строк */

grid-auto-flow: dense;
/* это на всякий случай, чтоб пунты с текстом не
"всплывали над картинкой" но похоже и без него норм*/

grid-gap: 1em; /* дополнительное расстояние между
элементами(картинкой и пунктами с текстом) */
}

#x > img{
background: pink;
grid-row: 1 /span 6;
/*растягиваем картинку "от 1й строки до 6й" */
}

#x, #x > *{ /* это селекторы. "#x" - тег с id='x'
"#x > *" - все теги находящиеся внутри него(тега с id='x') */
padding: .2em;
border: 3px solid skyblue;
border-radius: .5em;
}

<div id='x'>
<img alt='цветы для элджерона'>
<p>Автор: Даниель Киз</p>
<p>название: Цветы для Элджернона</p>
<p>рейтинг: 18+</p>
<p>Оценка: 10/10</p>
<!--Тут звезды как иконки будут под цифрами-->
<p>Отзыв: Книга просто класс прочитал в захлёб всем советую!</p>
<p id="opisanie">Описание: блаблабла скукотища не ну реально!</p>
</div>

сойдет?

Как сделать карточку автора

Ответы