<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

В рамках многочисленных упражнений Вы так же создадите свой собственный сайт, что даст Вам ту необходимую практику для закрепления материала, а также полноценную серьёзную работу для своего портфолио.

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Дизайн карточки на чистом CSS

Дизайн карточки на чистом CSS

Создавать красивый дизайн у карточки можно только на чистом CSS с добавлением FontAwesome иконок.

HTML разметка

Внутри контейнера card у нас находится блок с окружностью, фотография и текстовый контент с иконками из библиотеки FontAwesome.

//ссылка на библиотеку
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<div class="card">
    <div class="circle">
        <div class="imgBx">
        <img src="img.jpg">
        </div>
    </div>
    <div class="content">
        <a href="#" class="icon">
        <i class="fa fa-linkedin"></i>
        </a>
        <h3>Sophia Anderson</h3>
        <div class="text">
        <h4>Frontend Developer</h4>
        <a href="#"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

CSS код

Разместим карточку в центре экрана.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
    margin: 0;/*обнуление отступов*/
    padding: 0;/*обнуление полей*/
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;/*гибкий flex контейнер*/
    justify-content: center;/*в центре по горизонтали*/
    align-items: center;/*в центре по вертикали*/
    background: radial-gradient(#777,#111);/*градиентный фон*/
    min-height: 100vh;/*на всю высоту экрана*/
}
.card{
    position: relative;/*относительное позиционирование*/
    width: 340px;/*ширина карточки*/
    height: 450px;/*высота карточки*/
    overflow: hidden;/*скрыть за пределами карточки*/
    background: #fff;/*фон карточки*/
    border-radius: 10px;/*закругление углов*/
}


Дизайн карточки на чистом CSS.

С помощью свойства clip-path отсечем по форме круга часть изображения внизу. Псевдоэлемент before создаст декоративную розовую полоску.

.circle{
    position: absolute;/*абсолютное позиционирование*/
    top: -190px;/*позиция сверху*/
    left: 50%;/*позиция слева*/
    transform: translateX(-50%);/*сдвиг по оси X*/
    width: 500px;/*ширина*/
    height: 500px;/*высота*/
    clip-path: circle();/*отсечение по кругу*/
    background: #f00;
}
.circle::before{
    content: '';
    position: absolute;
    top: -8px;
    left: -16px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;/*прозрачный фон*/
    box-shadow: 0 0 0 20px rgba(255,0,0,0.5);/*тень*/
    z-index: 10000;/*на верхнем слое*/
    pointer-events: none;
}


Дизайн карточки на чистом CSS.

Позиционируем картинку так, как нам надо и установим hover-эффект масштабирования.

.imgBx{
    position: absolute;
    width: 340px;
    height: 310px;
    background: #ff0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 1000;
}
.imgBx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;/*сохраняет соотношение сторон*/
    transition: 0.5s;/*плавный переход*/
    transform-origin: top;/*направление трансформации*/
}
.imgBx:hover img{
    transform: scale(1.5);/*масштабирование*/
}

И последнее - оформим текст и иконки.

.content{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 140px;
    padding: 20px 30px;
}
.fa-linkedin{
    background: #0e76a8;
    padding: 2px 4px;
    color: #fff;
    border-radius: 2px;
}
h3{
    margin: 7px 0 2px;
    font-size: 1.4em;
    font-weight: 700;
    color: #333;
}
.text{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text h4{
    font-weight: 500;
    color: #e91e63;
}
.text a .fa {
    color: #e91e63;
}


Дизайн карточки на чистом CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.