Day 2: Today we build the hero section | Bricks website build: MyxoTech
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
Watch video Day 2: Today we build the hero section | Bricks website build: MyxoTech online without registration, duration hours minute second in high quality. This video was added by user Matty Eastwood 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 46 once and liked it 1 people.