About the theme
Before talking about bugs, let’s have a looksy at the header above. It’s a fairly straightforward construct, the row uses the eye-catching image as background. A minimum height is added to make big part of the image visible. Then there are three columns. The first one contains the Lady Bugg branding or logo (h1) and sub-title (h3). We’re using various h1’s on the page with different typographical styles so in this case the designer decided to apply all styles to a class. For the h3 however all typographical styles have been applied to the type, making it easy to make variations or tweaks on the class. An example is the font-color, which is changed to white on the other pages. The second column is the navigation container. The links are neatly positioned as inline blocks, the current page link gets an extra class that add the lady bug like border. The last column is stack below the other two and contains the call-to-action text and button. The space is created using top padding on the column.
Flexbox is used to keep the links below horizontally aligned. Both the column and container need to use displayed flex. This can be done on the design pane in the position section.
Learn More -->
Then the paragraph needs to use a flex grow of 1. This means it will take up any remaining space, pushing the links to the same height. At smaller widths we go back to display: block for the columns to stack the containers.
Learn More -->
We need you
Across North America ladybug species composition is changing. Over the past twenty years native ladybugs that were once very common have become extremely rare. During this same time ladybugs from other parts of the world have greatly increased both their numbers and range. This is happening very quickly and we don’t know how, or why, or what impact it will have on ladybug diversity or the role that ladybugs play in keeping plant-feeding insect populations low. We're asking you to join us in finding out where all the ladybugs have gone so we can try to prevent more native species from becoming so rare. Find out how you can help.
All photography provided by pixabay