Simple shopping website using html and css

CSS can be added to HTML documents in 3 ways. They are inline, internal and external CSS. Here I have used an external CSS file. The class selector selects HTML elements with a specific class attribute. We use [.] character, followed by the class name.

On page load, there will be some layout shifts. To avoid that, we set width and height attributes. The “cursor” property highlights the mouse cursor to be displayed when pointing over the element.

The above code part shows how I have used CSS functionalities for “intro” div class. We use the "overflow” property to specify whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. Here I have used “hidden” as the value. It means that the overflow is clipped, and the rest of the content will be invisible. We use the “position” to highlight the type of positioning method used for an element. As you can see here I have used a background image and have changed the properties according to my preference.

Have you ever noticed when you are moving the cursor upon some elements, their colour is changing🤔

We use “:hover” to select elements when you mouse over them. Here I have used the colour attribute to get him to know that he has clicked on the navigation elements.

Do you want to know how I created this button?😉

When we are Comparing to “display: inline”, the major difference is that “display: inline-block ”allows us to set a width and height on the element. We use the "border-radius” property defines the radius of the element's corners. I use orange as the background colour of the button. The “box-shadow” property attaches one or more shadows to an element. We use “padding” property to create space around an element’s content or inside borders. The “font-weight” property says how the characters should be displayed, thick or thin.

Let’s have a glimpse at the body of my website😃

I know you are eagerly waiting to get to know how I create these icons. It’s simple. Let’s have a look at the code.

I have defined a section called “section benefits”. Under that, I have defined a div class called “benefit-center box”. Under that, I have defined a div class called “benefit”. Under that, I have defined a span class called “icon”. Here I have imported box icons.

As you can you can see I have applied CSS to my div and span classes separately. As you can see here I have used a grid layout. The CSS “Grid Layout” offers a grid-based layout system, with rows and columns, making it easier to design web pages. The “flex-direction” property specifies the direction of the flexible items.

Let’s see how I display a product in my website😁

As you can see in the photo, I have mentioned the name of the product, how many stars it has and its price. When I move the cursor around the product, the product is appearing to be increasing its size. Let’s look at the code to get a more detailed idea.

Here I have defined a div class called “ac”. Under I have defined a div class called “img-cover”. I have inserted an image using the

As you can see, I have applied CSS to my div and span classes separately. We use “:hover” to increase the size of the product when the user moves the cursor over it. The “transition” effect could typically occur when a user hovers over an element. The “transform” property allows you to rotate, scale, move your elements.

We display our products using the grid layout. Let’s see an example of how I used the grid layout.

Let’s move to the footer😃

This is a photo of the “footer” of my web page. Here you can see some links and icons. Let’s see how I made this.

I have defined a section id called “footer”. Under that, I have defined a div class called “foot”. I have used the

tag to get an unordered list. I start the list item with the
• tag. We use the tag with its “href” attribute to create a hyperlink to web pages. The tag should indicate the link’s destination. I have defined another div class called “social-links”. I have imported the font-awesome icons.
  CSS Code of the footer

  You can see how I have applied CSS functionalities to the footer section and the other tags also.

  That’s all about creating a small website using HTML and CSS. So I think you got some basic knowledge about creating a website. Thank you for spending your valuable time to read this.

  If you think this blog enriches your knowledge, please do not forget to give me a clap, leave a comment and share this with your colleagues. Follow me for more interesting articles.

  How do I create a shopping page in HTML?

  Allow the user to empty the cart by one click..

  Step 1: Creating a card. HTML: ... .

  Step 2: Adding card header. HTML: ... .

  Step 3: Adding a product details. HTML: ... .

  Step 4: Creating a counter. HTML: ... .

  Step 5: Adding a price section. HTML: ... .

  Step 6: Duplicate cart item. ... .

  Step 7: Creating a checkout section..

  Can I make a website just using HTML and CSS?

  The short answer is yes, you can build a simple website with just HTML and CSS. However, if you want to start building some really cool websites, and have more flexibility in what you can do, you need to use JavaScript, a backend language, web hosting, and databases.

  Which website is best for HTML and CSS?

  Best Sites to Find CSS Snippets & Inspiration.

  CSS Flow..

  Code My UI..

  Codepad..

  Bootsnipp..

  Codeply..

  Little Snippets..

  Enjoy CSS..

  CSSDeck..