123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
- @mixin flex($dis, $jst,$al) {
- display: $dis;
- justify-content: $jst;
- align-items: $al;
- }
- $margin: 0 auto;
- *{
- box-sizing: border-box;
- font-family: 'Roboto', sans-serif;
- }
- .header{
- border: 1px solid #C4C4C4;
- height: 100px;
- margin-bottom: 30px;
- &__container{
- display: flex;
- justify-content: space-between;
- width: 640px;
- margin: 0 auto;
- }
- &__icons{
- padding: 21px 28px 16px 0;
- }
- }
- .stories{
- border: 1px solid #C4C4C4;
- width: 640px;
- height: 164px;
- padding: 30px 0 27px;
- @include flex(flex, center, center);
- margin: 0 auto;
- &__icons{
- width: 80px;
- height: 80px;
- border-radius: 50%;
- border: 2px;
- background:linear-gradient(45deg, #EBAF4D, #D60A66);
- @include flex(flex, center, center);
- position: relative;
- }
- &__img_gr{
- width: 74px;
- height: 74px;
- border: 2px solid white;
- background-color: white;
- border-radius: 50%;
- z-index: 1;
- position: absolute;
- }
- &__icons_name{
- padding: 118px 0 0 0;
- @include flex(flex, center, center);
- width: 78px;
- position: absolute;
- font-size: 14px;
- }
- }
- .stories_contant{
- margin-bottom: 30px;
- justify-content: space-around;
- }
- .main{
- margin-bottom: 30px;
- &__headerPosts{
- border: 1px solid #C4C4C4;
- width: 640px;
- height: 60px;
- margin: $margin;
- display: flex;
- }
- &__logoHeaderContainer{
- padding: 12px 16px 12px 24px;
- }
- &__textIntellectfoxHeader{
- display: flex;
- font-weight: 700;
- justify-content: center;
- align-items: center;
- }
- &__containerPosts{
- height: 640px;
- width: 640px;
- border: 1px solid #C4C4C4;
- margin: $margin;
- display: flex;
- }
- &__footerPosts{
- height: 113px;
- width: 640px;
- border: 1px solid #C4C4C4;
- margin: $margin;
- display: flex;
- flex-direction: column;
- }
- &__likes{
- display: flex;
- }
- &__textPostLikes{
- font-weight: 700;
- padding: 29px 0 0 0;
- }
- &__markLike{
- font-weight: 700;
- padding: 29px 0 0 5px;
- }
- }
- .foxgram_logo{
- padding: 21px 243px 16px 0;
- }
- .logo_heart{
- display: flex;
- }
- .heart_img{
- padding: 24px 16px 16px 24px;
- }
- .footer_container{
- display: flex;
- }
- .text_intellectfox_footer{
- font-weight: 700;
- padding: 0 16px 24px 24px;
- }
- .footer_text{
- flex-direction: row;
- }
|