Здесь делается вжух

who is next?

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » who is next? » Open the door » новости


новости

Сообщений 1 страница 2 из 2

1

[html]
<style>
  .news {
    width: 552px;
    height: 407px;
    background: #FFF;
    border-radius: 40px;
    position: relative;
    display: flex;
border:12px solid #A31313; margin:0 auto;
  }

.grid-container {
            display: grid;
            grid-template-columns: 90px 1fr;
            grid-template-rows: 90px auto; 
            gap: 15px;
            width: 100%;
            padding: 40px 51.5px;
            border-radius: 12px;
        }

        .image-block {
            grid-column: 1 / 2;
            grid-row: 1 / 2; 
            width: 90px;
            height: 90px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #888;
        }

        .image-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
border:2px solid #A31313;border-radius: 19px;
        }

        .text-block {
            grid-column: 2 / 3; 
            grid-row: 1 / 2; 
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 5px;
        }

        .text-block .line1 {
            font-size: 32px;
    font-weight: 700;
    color: #000;
    letter-spacing: -1px;
    line-height: 32px;
   width: 250px;
   text-align:left;
        }

        .text-block .line2 {
            background: #A1A2A1;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    padding: 0 10px;
    border-radius: 14px;
    width: fit-content;
    font-weight: 500;
        }

        .highlight-block {
            grid-column: 1 / 3;
            grid-row: 2 / 3; 
            background: #EAEAEA;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
            padding: 14px 18px;
            border-radius: 23px;
            font-size: 10px;
            line-height: 1.4;
            color: #000;
height:184px;
overflow-y: auto;z-index: 2;
        }
  .highlight-block p { padding: 0 10px!important;  font-size: 10px; color: #000;border-left: 3px solid #A31313;}
.card__photo {
    position: absolute;
    top: 65px;
    right: 25px;
    width: 136px;
    height: 172px;
    background: url('https://upforme.ru/uploads/0017/55/b9/2/767469.png') center no-repeat;
    z-index: 1;
  }
</style>

  <div class="news">

<div class="grid-container">
        <div class="image-block">
            <img src="https://i.pinimg.com/1200x/4f/e9/b3/4fe9b35048c9c64c18c8b661d12addd2.jpg">
        </div>

        <div class="text-block">
            <span class="line1">NEWS #1</span>
            <span class="line2">Для тех, кто интересуется и ждет</span>
        </div><div class="card__photo"></div>

        <div class="highlight-block">

<p>

всем привет!<br>
<br>
мы решили выйти на связь, чтобы вы были в курсе событий.<br>
нас уже семь человек. мы учимся работать вместе, выносим на обсуждение любой спорный момент, и мнение каждого важно. нас объединяет то, что мы хотим создать место, где будет комфортно и интересно всем. а еще нам очень хочется, чтобы будущий проект стал чем-то новым, глотком свежего воздуха, который так всем нам нужен.
работа идет полным ходом, но мы понимаем, что торопиться нельзя, чтобы учесть и проработать все, поэтому пока не можем объявить конкретные сроки. но постараемся регулярно писать вам о статусе.<br>
<br>
также хотим обратить внимание, что набор в команду еще открыт, и мы будем рады активным и инициативным людям, которые присоединятся к нам на этом пути и станут частью проекта.

</p>

        </div>
    </div>
  </div>

[/html]

+3

2

[html]
<style>
  .news {
    width: 552px;
    height: 407px;
    background: #FFF;
    border-radius: 40px;
    position: relative;
    display: flex;
border:12px solid #A31313; margin:0 auto;
  }

.grid-container {
            display: grid;
            grid-template-columns: 90px 1fr;
            grid-template-rows: 90px auto; 
            gap: 15px;
            width: 100%;
            padding: 40px 51.5px;
            border-radius: 12px;
        }

        .image-block {
            grid-column: 1 / 2;
            grid-row: 1 / 2; 
            width: 90px;
            height: 90px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #888;
        }

        .image-block img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
border:2px solid #A31313;border-radius: 19px;
        }

        .text-block {
            grid-column: 2 / 3; 
            grid-row: 1 / 2; 
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 5px;
        }

        .text-block .line1 {
            font-size: 32px;
    font-weight: 700;
    color: #000;
    letter-spacing: -1px;
    line-height: 32px;
   width: 250px;
   text-align:left;
        }

        .text-block .line2 {
            background: #A1A2A1;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    padding: 0 10px;
    border-radius: 14px;
    width: fit-content;
    font-weight: 500;
        }

        .highlight-block {
            grid-column: 1 / 3;
            grid-row: 2 / 3; 
            background: #EAEAEA;
            box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
            padding: 14px 18px;
            border-radius: 23px;
            font-size: 10px;
            line-height: 1.4;
            color: #000;
height:184px;
overflow-y: auto;z-index: 2;
        }
  .highlight-block p { padding: 0 10px!important;  font-size: 10px; color: #000;border-left: 3px solid #A31313;}
.card__photo {
    position: absolute;
    top: 65px;
    left: 175px;
    width: 100%;
    height: 172px;
    background: url('https://upforme.ru/uploads/0017/55/b9/2/767469.png') center no-repeat;
    z-index: 1;
  }
</style>

  <div class="news">

<div class="grid-container">
        <div class="image-block">
            <img src="https://i.pinimg.com/736x/05/44/9c/05449c999329049980075915d1b20caa.jpg">
        </div>

        <div class="text-block">
            <span class="line1">NEWS #2</span>
            <span class="line2">Скучали?</span>
        </div><div class="card__photo"></div>

        <div class="highlight-block">

<p>

приветик~ <br>
<br>
несу вам новости о том, что мы полностью собрали нашу команду и активно готовимся к открытию. <br>
большая часть работы уже сделана - дизайн готов и почти всё уже стоит на кодах, конкурсы написаны, развлечения придуманы. <br>
совсем скоро мы всё закончим и откроем для вас свои двери. пока без точных дат и бронирования внешностей, но обещаю, что затягивать с открытием мы не будем. <br><br>
до скорых встреч!

</p>

        </div>
    </div>
  </div>

[/html]

+3

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»



Вы здесь » who is next? » Open the door » новости


Рейтинг форумов | Создать форум бесплатно