search

p-foundation / pink-app

The repository is created for learning adaptive web design and team collaboration through git and GitHub
https://p-foundation.github.io/pink-app/
0 stars 0 forks source link

Feature card #50

Open rasokolovska opened 5 months ago

rasokolovska commented 5 months ago

Description

The card element is part of a card component designed for displaying structured content such as images, titles, descriptions, and interaction buttons. Here's a breakdown of its classes and modifiers:

How this element appears in a Figma

The _openedmodifier indicates the state of the card when it is expanded or opened. This class can be applied to an element that represents an expanded version of a card to distinguish it from a normal version.

How this element appears in a Figma

Usage

HTML structure of the element

 <ul class="card"> 
      <li class="card__content">
         <picture>
           <source srcset="./images/catalog-card-1-mobile.png" media="(max-width: 659px)">
           <source srcset="./images/catalog-card-1-tablet.png" media="(max-width: 1199px)">
           <img class="card__image" src="./images/catalog-card-1-desktop.png" alt="Фотокамера на штативе перед 
                белым автомобилем, припаркованным возле здания">
          </picture>
          <div class="card__description">
            <h3 class="card__title">Левон <span class="card__span">(5 часов назад)</span></h3>
              <p class="card__paragraph">Вчера  он на луну летал,  сегодня  в  руки  к нам  попал.</p>
               <div class="card__like">
                  <p  class="card__likes">Нравится: 356</p>
                  <button class="card__button" type="button" aria-label="поставить лайк"> <svg aria-hidden="true" focusable="false" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.46867 12C6.3589 12.0014 6.25012 11.9798 6.14988 11.9367C6.04963 11.8935 5.96033 11.8298 5.88815 11.75C1.95926 7.42 1.03665 6.44 0.860416 6.17C0.307088 5.49497 0.00416162 4.66056 0 3.8C0.00441359 3.07425 0.223059 2.36473 0.63034 1.7545C1.03762 1.14428 1.61668 0.658598 2.29973 0.354328C2.98278 0.0500576 3.74155 -0.0602132 4.48721 0.036425C5.23287 0.133063 5.93456 0.432611 6.51014 0.9C7.22774 0.319491 8.13412 0.00090711 9.07066 0C10.1136 0.00264761 11.1129 0.404172 11.8494 1.11652C12.5859 1.82888 12.9995 2.79391 12.9995 3.8C13.014 4.67715 12.6845 5.5272 12.0769 6.18L7.03883 11.74C6.9678 11.8185 6.88016 11.8814 6.78182 11.9246C6.68348 11.9677 6.5767 11.99 6.46867 11.99V12ZM2.07329 5.28C2.29099 5.54 4.63381 8.12 6.46867 10.14L10.947 5.2C11.3073 4.81798 11.5005 4.3163 11.486 3.8C11.486 3.18205 11.2316 2.5894 10.7786 2.15244C10.3256 1.71548 9.71126 1.47 9.07066 1.47C8.69007 1.47297 8.31512 1.55909 7.97398 1.7219C7.63285 1.8847 7.33439 2.11996 7.10103 2.41C7.02566 2.49603 6.9321 2.56553 6.82661 2.61382C6.72113 2.66211 6.60615 2.68809 6.48941 2.69C6.37337 2.68847 6.25936 2.6605 6.15667 2.60836C6.05398 2.55622 5.96552 2.4814 5.89852 2.39C5.66784 2.10104 5.37087 1.86758 5.03093 1.70796C4.69099 1.54833 4.31732 1.46688 3.93926 1.47C3.48505 1.47534 3.04153 1.6036 2.65919 1.84016C2.27684 2.07673 1.97103 2.41211 1.77658 2.8081C1.58213 3.2041 1.50684 3.64481 1.5593 4.08006C1.61176 4.5153 1.78985 4.9276 2.07329 5.27V5.28Z" fill="#D22856"/></svg>
                </button>
          </div>
      </div>
    </li>
</ul>

Checklist

Before submitting this pull request, please ensure the following: