Давайте сделаем логотип Instagram с помощью HTML и CSS!

Всем привет,
Я выкладываю статью после долгого перерыва, так что надеюсь, она вам понравится!

Сегодня мы сделаем логотип Instagram с помощью HTML и CSS.

Давайте приступим!

1. HTML

<div class="outer">  
    <div class="inner">  
    </div>  
</div> 
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы создали div, который содержит другой div с классами outer и inner соответственно!

2. CSS

 /* Basic */  
 * {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
 }   
 body {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   width: 100vw;  
   height: 100vh;  
   overflow: hidden;  
 }
Вход в полноэкранный режим Выход из полноэкранного режима

Выше мы использовали css, чтобы наша страница выглядела красиво. Теперь давайте разработаем логотип.

.outer {  
   width: 150px;  
   height: 150px;  
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);  
   border-radius: 35px;  
   display: grid;  
   place-items: center;  
 }  
 /* innerside in outer box */  
 .inner {  
   width: 120px;  
   height: 120px;  
   border: 10px solid #fff;  
   border-radius: 32px;  
   display: grid;  
   place-items: center;  
   position: relative;  
 } 
 /* center circle of logo */  
 .inner::before {  
   content: '';  
   width: 45px;  
   height: 45px;  
   border: 10px solid #fff;  
   border-radius: 50%;  
   background: transparent;  
   position: absolute;  
 }  
 /* top right circle of logo */  
 .inner::after {  
   content: '';  
   width: 10px;  
   height: 10px;  
   border: 2px solid #fff;  
   border-radius: 50%;  
   background: #fff;  
   position: absolute;  
   top: 8px;  
   right: 10px;  
 } 
Войти в полноэкранный режим Выход из полноэкранного режима

Вот и все. Вы создали логотип Instagram.
Кодепен можно посмотреть ниже.

Оцените статью
Procodings.ru
Добавить комментарий