heavenlystrategies

[heavenlystrategies]

Ok.

This will be a small tutorial on some typography. To practice my typography, I’ve started a series called, “Things They Say”. It’s just a bunch of quotes that mean a lot to me or something that sticks out. I take inspiration in a TikTok account called TwoSleepyHeads. We��ll use the word “Ok.” As the example.

Start off with a base colour, this is optional but you can make a colour palette so it’s easier to visualize the Color’s.

Select the shape tool and we’ll make the background with the base colour.

With the type tool click wherever you want the text to be.

In this example we use the font called Abril.

Copy and paste the text so that there are two versions.

Select one of the texts to be the shadow colour and make sure its behind the lighter colour text

Position them how you like, picture there to be a light source and move the dark text around to be the shadow

Select both text to begin the gradient

Select “Object” and go down to “Blend”

Once you hover over “Blend”, you’ll see a submenu pop up saying “Blend Options”

Once clicked on it will show a pop up box

In spacing, find the specified steps and enter a high number to the side

As a recommendation, anything over 100+ should do the trick

Click “OK”

Now it should have a blended 3D effect

From here you can play around with the shape or the depth

[heavenlystrategies]

Add to Portfolio Page in WP

How to add photos to the Amy Bollana website(Only if you have admin access)

Make a new portfolio with the categories you prefer:

>>Click on the Portfolio on the left side of the dashboard and add New portfolio to make a new portfolio page

>>You can select the category of the portfolio you wish to create. You can add more than one category

>>Click on Add media to insert picture from the media section and use the visual interface to insert titles, paragraphs to your new portfolio

>>Click on publish to post the new portfolio

>>The new portfolio needs to be added to the menu, first go to permalinks in setting on the left side

>>Do not change anything on the permalinks page but click on save changes

>>To add your new portfolio to the website you go the menu in the appearance section

>>Under portfolio you will see your new portfolio name, click on the check box and click on add to menu then save menu

>>Uncheck the current portfolio so It won’t be confusing to the use

[heavenlystrategies]

DROPDOWN NAVIGATION TUTORIAL

This is a tutorial on a dropdown navigation for this Gelato Grotto website. We start off with a basic build of the website which can be downloaded here: link

We’ll begin by writing the HTML needed, including a <header> with a <nav> and a <section> for a hero banner. Inside the <nav>, we’ll put an unordered list with a class of .menu and two nested unordered lists with a class of .submenu. These are the following menu items and submenu items:

Current Flavours About

>> Our Story

>> Farms

>> Collaborators

>> Sustainability

>> FAQs

Shops >> Coolangatta

>> Fortitude Valley

>> Mooloolaba Beach

>> South Brisbane

ContactIn the <nav>, include the <svg> next to the links with nested menus.

In the <section>, make sure that there are two non-semantic child elements. One will be empty, while the other will have the typography. These will be flex items for the desktop view.

Validate and outline your HTML. There shouldn’t be any validation errors as it needs to be a clean code before writing any CSS.

We’ll start the CSS with universal styles (i.e. things that will remain the same regardless of the size of the viewport).

Next, style we’ll style for the mobile view. The <nav> should be vertical and fill the whole screen. For this view, we will hide the <svg> element, since we don’t need to show that there are sub-menus. Scrolling down, the hero banner should be darker and smaller, with all of its contents centred.

Now we’ll style the desktop view. Using a media query, define the flex containers.

Make the <svg> element visible to indicate the sub-menus.

Position and hide the sub-menu items (i.e. the drop-down menu).

When hovering over the list item <li> make the submenu items appear. Add a smooth transition (add transition: all 0.5s ease; to ul.submenu ).

Now, write a media query for the largest view for example (@media screen and (max-width: 1100px) {) . Inside, prevent the flex items within the hero banner from expanding by setting a max-width.