Full-Size Header
You saw this when you opened the page. These kinds of headers are used to catch people's attention with large hero images. A lot of the time, these are applied to sites that want to bring attention to a specific service or part of the site, like a sale or an upcoming event or a contact page.
I did this by making the height the same as the viewport height. Then I applied my image as a background. I also had to adjust the size of the background.
Flexbox Nav
On the landing page, I have adjusted the navigation so it is in a flexbox. I have done the same to the buttons and nav at the top of this page. Using flexboxes, makes elements more flexible. It makes it easy to throw things into a row or a column and you can add properties that allow elements to wrap when the screen shrinks.
Sticky Header/Footer
I have applied both a sticky header and a sticky footer to this page. You should be able to see the nav at the top of the screen but you’ll find the footer all the way at the bottom.
Sticky Header
I set the position to sticky and told the CSS when the position hits zero, it’ll stay there. I had to move the nav outside of the header to make this work because of how I made the full-sized header. It was preventing the nav from hitting the 0 position.
Sticky Footer
Even though this is called a sticky footer, you don’t make this by setting the position to sticky. This type of footer is also sometimes confused with a fixed footer. A fixed footer stays in one spot on the screen while a sticky footer, sticks to the bottom of the screen when you reach the end of the content. There are a plethora of ways to do this. I did this by making the body a flexbox and changing the proportions.
Cards
Cards are used to display related content together. A lot of the time they are used when you need to display a group of information in a grid layout like a products page or employee directory. Below is my example made from a flexbox.
Title 01
Nullam fermentum metus vitae elit mollis, hendrerit iaculis dui volutpat. Aliquam maximus pretium posuere.
Sub Title
Title 02
Nullam fermentum metus vitae elit mollis, hendrerit iaculis dui volutpat. Aliquam maximus pretium posuere.
Sub Title
Title 03
Nullam fermentum metus vitae elit mollis, hendrerit iaculis dui volutpat. Aliquam maximus pretium posuere.
Sub Title
Multicolumn Layout
Separating text into columns is super easy with CSS. All you need to do is apply column-count to a container. You can use column-gap to control the space between columns. All the text after this is gibberish to show off the property.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue nisi non urna rutrum accumsan a et magna. Donec sit amet est ut tortor tristique euismod. Nulla facilisi. Vestibulum sem nibh, mattis vel sem et, elementum eleifend odio. Vestibulum id ornare orci. Aliquam malesuada quam urna, quis pellentesque est gravida in. Aliquam varius lectus nisl, vel pellentesque ante egestas non. Maecenas fermentum bibendum odio, at porttitor purus dictum faucibus. Nullam sapien felis, eleifend eget libero facilisis, tincidunt accumsan erat. Ut in egestas lorem. Ut diam orci, ultricies a magna a, sollicitudin rhoncus orci. Suspendisse mollis malesuada sodales. Ut non justo mattis, pellentesque quam a, eleifend dolor. Aliquam a ultrices eros.
Nullam fermentum metus vitae elit mollis, hendrerit iaculis dui volutpat. Aliquam maximus pretium posuere. Mauris malesuada vehicula nibh, vel tempus sapien porttitor at. Nulla facilisis sodales aliquam. In hac habitasse platea dictumst. Nulla in mi sed ipsum efficitur facilisis. Quisque maximus, quam sodales gravida consequat, velit nunc volutpat eros, ut egestas tellus metus id tellus.
Nulla eget tortor non ipsum finibus ultricies non quis mauris. Suspendisse ut risus venenatis, iaculis ex eget, ultricies nisl. Ut cursus auctor augue a feugiat. Integer aliquam arcu et risus blandit vehicula. Pellentesque ac eleifend dui. Duis ut ex lacus. Pellentesque maximus magna sit amet nisi tempus facilisis.
Fancy Text Wrap
Wrapping text around images is also a simple task. You just have to combine floats with shape-outside properties. Sometimes clip-paths can be useful as well. You can wrap around geometric shapes or irregular shapes. This is laid out in chapter 15 of the textbook. Flip to that chapter if you need a review of how these work. All the text after this is gibberish to show off the property.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue nisi non urna rutrum accumsan a et magna. Donec sit amet est ut tortor tristique euismod. Nulla facilisi. Vestibulum sem nibh, mattis vel sem et, elementum eleifend odio. Vestibulum id ornare orci. Aliquam malesuada quam urna, quis pellentesque est gravida in. Aliquam varius lectus nisl, vel pellentesque ante egestas non. Maecenas fermentum bibendum odio, at porttitor purus dictum faucibus. Nullam sapien felis, eleifend eget libero facilisis, tincidunt accumsan erat. Ut in egestas lorem. Ut diam orci, ultricies a magna a, sollicitudin rhoncus orci. Suspendisse mollis malesuada sodales. Ut non justo mattis, pellentesque quam a, eleifend dolor. Aliquam a ultrices eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue nisi non urna rutrum accumsan a et magna. Donec sit amet est ut tortor tristique euismod. Nulla facilisi. Vestibulum sem nibh, mattis vel sem et, elementum eleifend odio. Vestibulum id ornare orci. Aliquam malesuada quam urna, quis pellentesque est gravida in. Aliquam varius lectus nisl, vel pellentesque ante egestas non. Maecenas fermentum bibendum odio, at porttitor purus dictum faucibus. Nullam sapien felis, eleifend eget libero facilisis, tincidunt accumsan erat. Ut in egestas lorem. Ut diam orci, ultricies a magna a, sollicitudin rhoncus orci. Suspendisse mollis malesuada sodales. Ut non justo mattis, pellentesque quam a, eleifend dolor. Aliquam a ultrices eros.