Вопрос по форматированию блока(блоков) от чайника

Question

Вопрос по форматированию блока(блоков) от чайника

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

Коллеги, я не волшебник, а только учусь, потому вопрос из двух составляющих:
Есть контейнер блоков:

С их отрисовкой и размещением я разобрался, но встал в ступор на двух вещах:
Отрисовка символа ">" на каждом из блоков. Головой я понимаю, что это делается через Flex со смещением право, если не хватает высоты блока, но вот как конкретно реализовать - не хватает мозгов.(поэтому просто сделал отступ справа, чтобы не сползло форматирование текста внутри)

И, вторая часть вопроса: скорее всего можно описать свойства всех блоков(я прибивал текст кв верзу и низу через space between) менее громоздко, чем у меня, но я пока не понимаю как, поэтому для каждого блока описывал отдельно.

.infobox {
    width: 1440px;
    position: relative;   
    margin-top: -117px; 
    margin-left: 43px;
    /* padding: 57px 57px; */
    display: flex;
    
}

.infoblock1, .infoblock2, .infoblock3, .infoblock4 {    
    display: flex;
    flex-wrap: wrap;
    width: 315px;
    padding: 20px 80px 20px 20px ;
    height: 380px;
    margin-right: 12px; 
    margin-left: 12px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    background-color: #4073de;
    color: white; 
    align-content: space-between;
    justify-content: center;
}

.infoblock1 {
    background-image: linear-gradient(to bottom, #f2b417, #ff912a);
}

.infoblock1 p1{
    font-size: 40px;
    font-weight: 500;
}

.infoblock1 p2{
    font-size: 19px;
}

.infoblock2 {
    background-image: linear-gradient(to bottom, #927bfd, #407bda);
}

.infoblock2 p1{   
    font-size: 40px;
    font-weight: 500;
}

.infoblock2 p2{
    font-size: 19px;
}

.infoblock3 {
    background-image: linear-gradient(to bottom, #cf5d80, #ff31a1);
}

.infoblock3 p1{
    font-size: 40px;
    font-weight: 500;
}

.infoblock3 p2{
    font-size: 19px;
}

.infoblock4 {
    background-image: linear-gradient(to bottom, #fe14e7, #b71fe0);
}

.infoblock4 p1{
    font-size: 40px;
    font-weight: 500;
}

.infoblock4 p2{
    font-size: 19px;
}

<div class="infobox">
    <div class="infoblock1">
        <p1>Register for swim lessons</p1>
        <p2>Our experienced instructors offer a variety of swimming lessons for children and teens.</p2>
    </div>
    <div class="infoblock2">
        <p1>Franchise Opportu&shy;nities</p1>
        <p2>Swimming School Franchise is posi&shy;tioned as the leader in the thriving chil&shy;dren's education</p2>
    </div>
    <div class="infoblock3">
        <p1>What Level Is My Child?</p1>
        <p2>Use our Level Finder to determine your swimmer's level or call us for any assis&shy;tance you need!</p2>
    </div>
    <div class="infoblock4">
        <p1>Locate a Swim School</p1>
        <p2>Use our Level Finder to determine your swimmer's level or call us for any assis&shy;tance you need!</p2>
    </div>
</div>

Заранее благодарен

css html5 css3

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

Answer 1

▲ 0Принят

Как-то так

:root {
  --width-gap: 15px;
  --width-four-blocks: calc(25% - calc((15px * 3) / 4));
}

body {
  font-family: 'Roboto', sans-serif;
}
div {
  box-sizing: border-box;
}
.infobox {
  display: flex;
  flex-flow: row wrap;
  gap: var(--width-gap);
}

.block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #4073de;
  color: white;
  padding: 20px;
  width: var(--width-four-blocks);
}
.block h2 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 30px;
}

.block p {
    font-size: 14px;
    margin: 0;
}


.infoblock1 {
    background-image: linear-gradient(to bottom, #f2b417, #ff912a);
}

.infoblock2 {
    background-image: linear-gradient(to bottom, #927bfd, #407bda);
}

.infoblock3 {
    background-image: linear-gradient(to bottom, #cf5d80, #ff31a1);
}

.infoblock4 {
    background-image: linear-gradient(to bottom, #fe14e7, #b71fe0);
}

.desc {
  display: flex;
  align-items: flex-end;
  column-gap: 10px;
}

a {
  text-decoration: none;
  font-size: 0;
  display: block;
  width: 15px;
  min-width: 15px;
  height: 15px;
  border: 2px solid white;
  border-width: 2px 0 0 2px;
  transform: rotate(135deg);
  transition: .3s;
}
a:hover {
  border: 2px solid black;
  border-width: 2px 0 0 2px;
}

<div class="infobox">
    <div class="block infoblock1">
      <h2>Register for swim lessons</h2>
      <div class="desc">
        <p>Our experienced instructors offer a variety of swimming lessons for children and teens</p>
        <a href="#">Подробнее</a>
      </div>
    </div>
    <div class="block infoblock2">
        <h2>Franchise Opportu&shy;nities</h2>
        <div class="desc">
          <p>Swimming School Franchise is posi&shy;tioned as the leader in the thriving chil&shy;dren's education</p>
          <a href="#">Подробнее</a>
        </div>
    </div>
    <div class="block infoblock3">
        <h2>What Level Is My Child?</h2>
        <div class="desc">
          <p>Use our Level Finder to determine your swimmer's level or call us for any assis&shy;tance you need!</p>
          <a href="#">Подробнее</a>
        </div>
    </div>
    <div class="block infoblock4">
        <h2>Locate a Swim School</h2>
        <div class="desc">
          <p>Use our Level Finder to determine your swimmer's level or call us for any assis&shy;tance you need!</p>
          <a href="#">Подробнее</a>
        </div>
    </div>
</div>

Answer 2

▲ 1

Не существует таких стандартных HTML тегов: <p1>, <p2>, ...
Можно пробрасывать данные картинки через псевдо элементы, можно сделать картинками... решений вашей задачи множество. Вот как вариант, только с другими стрелками.

.infobox {
  width: 1440px;
  position: relative;
  margin-top: -117px;
  margin-left: 43px;
  display: flex;

}

.infoblock {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 315px;
  padding: 20px 80px 20px 20px;
  height: 380px;
  margin: 0 12px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  background-color: #4073de;
  color: white;
  align-content: space-between;
  justify-content: center;
}

.infoblock:after {
  content: "\1F846";
  font-size: 50px;
  color: #fff;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.infoblock1 {
  background-image: linear-gradient(to bottom, #f2b417, #ff912a);
}

.infoblock2 {
  background-image: linear-gradient(to bottom, #927bfd, #407bda);
}

.infoblock3 {
  background-image: linear-gradient(to bottom, #cf5d80, #ff31a1);
}

.infoblock4 {
  background-image: linear-gradient(to bottom, #fe14e7, #b71fe0);
}

.infoblock p {
  font-size: 40px;
  font-weight: 500;
}

.infoblock p:nth-child(2) {
  font-size: 19px;
}

<div class="infobox">
  <div class="infoblock infoblock1">
    <p>Register for swim lessons</p>
    <p>Our experienced instructors offer a variety of swimming lessons for children and teens.</p>
  </div>
  <div class="infoblock infoblock2">
    <p>Franchise Opportu&shy;nities</p>
    <p>Swimming School Franchise is posi&shy;tioned as the leader in the thriving chil&shy;dren's education</p>
  </div>
  <div class="infoblock infoblock3">
    <p>What Level Is My Child?</p>
    <p>Use our Level Finder to determine your swimmer's level or call us for any assis&shy;tance you need!</p>
  </div>
  <div class="infoblock infoblock4">
    <p>Locate a Swim School</p>
    <p>Use our Level Finder to determine your swimmer's level or call us for any assis&shy;tance you need!</p>
  </div>
</div>

Вопрос по форматированию блока(блоков) от чайника

Ответы