What you will be making:

Style the elements in the box below:

Be the sunshine
Your task:

Style the text (heading) on the right according to the sample above and using a before pseudoelement, add a custom graphic (URL is provided) on top left.

Details you need:

Heading level (class): h5
Font family: Outfit, 48px
Font weight: 600
Font color: #7591FF
Graphics URL: https://www.velvetmade.com/wp-content/uploads/2024/03/star-curvy-01-min.png
If you are using px values for background image size of the before pseudoelement, the symbol should be around 60px width and 60px height.

Hints:

Use pseudoelement (::before) with an empty content and use background-image to insert the content. There are other ways to do it, but this is recommended!
Pro hint: use em values for background image size on the before pseudoelement.
Used properties: background-image (including its sizing and position), transform (rotate), position (absolute)
If the changes are not applying, don’t forget to use !important tag! See general instructions and tips below for more details.

Got stuck?

Warning: Undefined array key 0 in /usr/www/users/vmade/wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-text.php on line 33

Warning: Undefined array key 1 in /usr/www/users/vmade/wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-text.php on line 33

or receive the code in your email by filling the form below:

Be the sunshine

General instructions:

  1. Open the exercise in your browser and read the task and the content on the left side of the screen. 
  2. You will be editing the content on the right side of the screen.
  3. In order to do that, right click on the exercise page that you opened and go to ‘Inspect’.
  4. Go to ‘Sources’ in the top bar and if you cannot see an empty CSS sheet where you can type the code, press Ctrl + P and start typing ‘styl’ in the search bar. Then press enter to open the CSS sheet.
  5. Follow the notes on the left and start typing your CSS code to see the changes online!
  6. Important! Do not refresh the page while you are editing the code, as these changes are in preview mode only and you can see them immediately, as soon as you write a line of functioning code.
  7. Use the custom classes in the notes on the left side of the screen, as well as ‘Elements’ on the top bar of the ‘Inspect’ to target and style the classes and elements. For example, you can enable the small icon on the top left of the ‘Inspect’ window (‘Select an element in the page to inspect it’) to find the default class name of the element you want to edit, while you are in the ‘Elements’ tab.

Tips:

  1. If the code is not showing any changes, try adding the !important tag at the end of the line before closing it (before the “;” symbol) and see if it works then.
  2. Don’t forget there are usually more ways to achieve the same result. Be creative!
  3. If you get stuck, write your email address in the form on the left side of the screen and you will get the solution (CSS code) in your email.

Sources:

  1. You can find a lot of tutorials on my youtube channel. 
  2. Watch the tutorial on how to solve these exercises here.

Please check your email and stay tuned for updates on the course.

We will notify you shortly when it’s available for presale.