Submitted about 1 year ago

responsive e-commerce payment page

Abdul Rahman•10

@abdulabhi

Preview site View code

This is a solution for...Order summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

As the digital sun sets on the horizon, a new chapter emerges in my journey as a web developer. Today marks the culmination of a remarkable project: the creation of an enchanting HTML and CSS e-commerce payment gateway page. In the realm where code meets creativity, this accomplishment radiates like a beacon of innovation and user-centric design. Every line of code written, every pixel meticulously placed, has woven together an online tapestry where seamless functionality dances with aesthetic allure. This achievement isn't just about crafting lines of HTML and CSS; it's about sculpting an immersive experience where users can seamlessly transition from shopping cart to checkout with confidence. Through countless iterations and the skillful mastery of design elements, I've given life to a digital marketplace that embodies the spirit of modern commerce. As the final pixel finds its perfect position, I reflect on the fusion of technical prowess and artistic expression that has brought this project to life. This e-commerce masterpiece isn't just about colors and typography; it's about creating a canvas where user journeys are intuitive and transactions are secure. With this achievement, I join the ranks of digital artisans, forging pathways for seamless online interactions. This project isn't just a collection of web pages; it's a gateway to a new realm of possibilities in the ever-evolving landscape of digital experiences. Just as HTML and CSS lay the foundation, this project lays the groundwork for a future where online shopping is not just a transaction, but an engaging voyage. As the virtual shopping cart transforms into a virtual checkout counter, I take pride in contributing to the digital evolution, one elegantly coded page at a time.

Community feedback

nicodes•240

@nicodes-devPosted about 1 year ago

Hi, I feel like you may have rushed your solution and did not test it before submitting because the page only looks okay on desktop screen width because you use translate to center your container but use a negative value. top: -50%;

There are also styles in your container that does not work. I assume you want to use flex because you added flex-direction.

.container { //forgot to add display: flex;
   background-color: #fff;
  width: 450px;
  align-items: center; 
  flex-direction: column;
  text-align: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0px 4px 8px var(--desaturated_blue);
  position: relative;
  top: -50%;
  left: 50%;
  margin-top: 30%;
  transform: translate(-50%, -50%);
}

To center your container, you can use grid or flex and add it into the body. Also add a min-height to your body to cover the whole viewport.

using flex

body {
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

using grid

body {
   min-height: 100vh;
   display: grid;
   align-content: center;
   justify-content: center;
}

Then your container styles should look like this.

.container {
  background-color: #fff;
  width: 450px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px var(--desaturated_blue);
}

I hope this helps you fix your solution.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord