WebWay


Гео и язык канала: Украина, Украинский
Категория: Дизайн


Блог веб дизайнера💻
🔸Автор: @dimart_ua
🔸Контент кожен день

Связанные каналы

Гео и язык канала
Украина, Украинский
Категория
Дизайн
Статистика
Фильтр публикаций


Як і обіцяв продовжую проходити курс, отже сьогодні перший звіт

На курсі пройшов урок з mindfulness де поставив собі ціль та заякорив собі основні стани щоб я зміг її досягти, дізнався багато чого про те як ставити ціль правильно


Вирішив перезапустити цей канал, почав проходити курс з веб дизайну, буду ділитись тут своїм прогресом та іншими деталями

За курс дякую
університету Атом: https://www.instagram.com/atom.university?igsh=NnJscTRteWxhMXU1
та його засновнику https://www.instagram.com/sergey_khorunzhyi?igsh=MXBtZ2h2dHppZTVnNA==


Видео недоступно для предпросмотра
Смотреть в Telegram




Все, сьогодні нарешті доробив фінальну версію свого сайту, поки закинув проект на гітхаб, щоб поки був там


Скоро буде


Щось я тут чутка завтикав...


Нарешті все вийшло, все працює, все кайф
Посилання👇
https://bdjsikwk.github.io/Dimart-studio--_--Portfolio/


Привіт знову, вже все зверстав, і адаптив і все, тепер намагаюся закинути на гітхаб, щоб кинути сюди посилання


Видео недоступно для предпросмотра
Смотреть в Telegram
Всім привіт, я крч вирішив нарешті зробити свій сайт портфоліо та може спробувати залити його в мережу

Тут знову ж буду показувати усе що роблю, можу сказати що це мабуть найскладніше що я колись верстав, тому думаю це все буде довго


Видео недоступно для предпросмотра
Смотреть в Telegram
Вивчаю веб дизайн
День 50-й

Нарешті, якраз на 50-й день все готово, і сторінки, і адаптив


Доречі в мене є ще й інста, де сьогодні виклав нове, відео, там буду показувати деякий контент якого не буде тут, але він буде більш пов'язаний з життям, про дизайн будуть тільки рілси:
https://www.instagram.com/reel/C6HJeatsCta/?igsh=MW9lYThuYzJ0Ym1lZA==


Видео недоступно для предпросмотра
Смотреть в Telegram
Вивчаю веб дизайн
День 49-й

Адаптив вже 5-ї секції все.
Це вже передостанній, ще один і все


Видео недоступно для предпросмотра
Смотреть в Telegram
Вивчаю веб дизайн
День 48-й💻

Сьогодні адаптив 4-ї секції готовий.
Непогано адаптував випадашку, але трошки довелось помучатись


Видео недоступно для предпросмотра
Смотреть в Telegram
Вивчаю веб дизайн
День 47-й💻

Адаптив 3-ї секції готовий, залишилось ще 3.
Тепер все йде легше, більш ясно розумію що треба робити


Видео недоступно для предпросмотра
Смотреть в Telegram
Вивчаю веб дизайн
День 46-й💻

Сьогодні з адаптивом вже краще, готово вже 2. Плюс-мінус почав вже розуміти що до чого, тож процес пішов швидше


Scss
#about-section {
padding: 126px 0 81px;
}

.about-wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}

.about-img {
width: 50%;
}

.about {
max-width: 570px;
}

.about-text {
font-family: Poppins, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
margin-bottom: 35px;
margin-top: 6px;
}

// SHOP

#shop-section {
padding-bottom: 120px;
text-align: center;
}

.shop-subtitle {
margin: 2px 0 44px;
}

.shop-wrap {
display: flex;
justify-content: space-between;
gap: 24px;
}

.shop-img {
width: 270px;
height: 304px;
}

.shop-name {
display: block;
margin: 20px 0 10px;
font-size: 20px;
}

.shop-price {
display: block;
margin-bottom: 25px;
font-size: 20px;
}

.shop-btn {
margin: 25px auto 0;
color: #3D3017;
padding: 15px 25px;
border: 1px solid rgb(61, 48, 23);
text-transform: capitalize;
transition: .4s;
}

.shop-btn:hover {
color: #fff;
background-color: #3D3017;
}

// FEEDBACK

#feedback-section {
padding: 100px 0 100px;
background-color: #EEE4DC;
position: relative;
overflow: hidden;

&::before {
content: '';
position: absolute;
left: -136px;
bottom: 37px;
width: 422px;
height: 426px;
background: url(/images-lava/img.svg) 0% 100%/contain no-repeat;
}
}

.feedback {
position: relative;
padding: 0 85px;
display: flex;
align-items: center;
gap: 50px;
}

.feedback-img {
width: 408px;
height: 430px;
}

.feedback-info {
position: relative;
text-align: center;
max-width: 607px;
padding-top: 83px;

&::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 58px;
height: 43px;
transform: translateX(-50%);
background: url(/images-lava/Group.svg) 50%/100% no-repeat;
}

&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 154px;
height: 124px;
transform: translate(-50%, -40%);
background: url(/images-lava/Frame.png) 50%/100% no-repeat;
}
}

.feedback-text {
font-size: 20px;
line-height: 38px;
margin-bottom: 17px;
}

.feedback-name {
font-size: 22px;
margin-bottom: 10px;
}

.feedback-position {
display: block;
font-size: 20px;
}

.feedback-btn-back {
position: absolute;
top: 50%;
left: 2px;
width: 20px;
height: 38px;
background: url(/images-lava/back.svg) 50%/100% no-repeat;
transform: translateY(-50%);
}

.feedback-btn-fwd {
position: absolute;
top: 50%;
right: 2px;
width: 20px;
height: 38px;
background: url(/images-lava/fwd.svg) 50%/100% no-repeat;
transform: translateY(-50%);
}


HTML





About Us
Roast To Order
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Read More






Shop
Shop Products



Somanc, Kenya
$8.50
Add To Cart



La Faquin, Brazil
$7.85
Add To Cart



Los Vinati. Peru
$9.65
Add To Cart



Vavene, Ethiopia
$7.42
Add To Cart









Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad commodo consequat.

Founder&co







Видео недоступно для предпросмотра
Смотреть в Telegram
Вивчаю веб дизайн
День 45-й💻

Сьогодні доволі непогано попрацював із сайтом по уроку. Додав купу секцій та попрацював з псевдоелементами.

Також планую написати код js до цього сайту, якщо цього не буде на уроці


А робив я все завдяки цьому 🔽
@mixin tablet() {
@media (max-width: 992px) {
@content;
}
}

@mixin phone() {
@media (max-width: 680px) {
@content;
}
}

@mixin mobaile() {
@media (max-width: 320px) {
@content;
}
}

Показано 20 последних публикаций.