Day 2: Today we build the hero section | Bricks website build: MyxoTech

Опубликовано: 01 Январь 1970
на канале: Matty Eastwood

469

What it says on the tin. Come join me and let's build the hero section of myxotech.com, including the claim with that frame that opens on the right edge and lets the content flow out!

/* Here's the full playlist */

• Full Bricks Website Build: MyxoTech

/* Recommended shtuff */

Sridhar Katakam's CSS for outlines:
https://brickslabs.com/outlines-for-e...

// My edited version of the above CSS:
// (this makes the outlines only appear when the mouse cursor is actually hovering over the canvas and it doesn't require the PHP snippet from Sridhar's article)

body.logged-in:not(.admin-bar, .bricks-is-previewing):hover [class*=brxe-] {
outline-style: dashed;
outline-color: rgba(0,135,255,0.50);
outline-width: 1px;
outline-offset: 0;
}

body.logged-in:not(.admin-bar, .bricks-is-previewing):hover [class*=brxe-]:before {
outline-style: dashed;
outline-color: rgba(89, 0, 255, 0.35);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: 2px;
}

body.logged-in:not(.admin-bar, .bricks-is-previewing):hover [class*=brxe-]:after {
outline-style: dashed;
outline-color: rgba(255, 153, 0, 0.35);
outline-width: 2px;
/* The offset values prevent the outlines from overlapping with eachother. Set to 0px for maximum accuracy */
outline-offset: 4px;
}

/* Chapters */

00:00 Recap: open question from day 1
00:29 Hero structure: placing the elements
02:42 Background effect: diagonal line
07:34 Naming elements, entering contents
09:33 Styling the claim
18:16 Building the claim frame
26:39 Background nudging + anti-aliasing
28:22 Finishing up the claim frame
33:00 More styling, BEM magic in AT

Смотрите видео Day 2: Today we build the hero section | Bricks website build: MyxoTech онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Matty Eastwood 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 46 раз и оно понравилось 1 людям.

36,59