/Order-summary-component

Second frontend

Primary LanguageCSS

Order summary card

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • See hover states for interactive elements

Screenshot

Order summary card

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

While doing this project i was able to learn about the basic workflow in a CSS layout, and in the same way about the principles of using flex, and how to use hover states for interactive elements. With this project i also improve the arrangement of the background images, that help me to have better abilities in the use of CSS and Flex, to reinforce my own knowledge.

Some code that i used:

<div class="payment">
            <article>
              <h2>
                <button class="pay-button"><span>Proceed to Payment</span>
                </button>
              </h2>
              <p>
                <span>Cancel Order</span>
              </p>
            </article>
          </div>
.pay-button::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}

.pay-button:hover::after {
    background: hsl(225, 100%, 98%);
    opacity: 0.3;
}

Continued development

I want to focus on developing my programming and design skills through the use of the different tools and programming languages that exist, like HTML , CSS , JavaScript , Python , NodeJs , PL/SQL .

Useful resources

  • MDN Web Docs - This helped me for the first steps. I liked these documenting web technologies and will use it going forward.
  • w3schools.com - This is a powerful webpage to begin to learn to code, with a lot of useful tools and examples for beginners and advance developers.

Author

Acknowledgments