Webpage link – https://lazycoder-1506.github.io/KTJ_Assignment_1/index.html

Github repository link – https://github.com/LazyCoder-1506/KTJ_Assignment_1.git


This is my first complete HTML/CSS project, and I built it simultaneously while learning. It is a single page that would serve as the homepage of a shopping website. Since it was built while I was learning, I tried to implement as many features as possible.

Page Overview

The  first thing to strike is the fav-icon on the tab on top denoting the brand. It is done with a help of a link to the logo image in the <head> tag. In the body, there are two things which stay fixed on the screen – the navigation bar and the “Back to top” button. These are fixed in position using the position: fixed; CSS property.

Navigation Bar

In the navbar, the logo is again present, which acts as a link to the homepage, i.e., the page itself. There is a special “Stay Safe” link that takes the user to the Google Covid-19 advisory page, and it opens on a new tab due to target = “_blank” attribute. It has a continuous blinking animation of changing background colours. This is achieved using @keyframes for animation and animation-iteration-count : infinite; for the continuous iterations. The other links on the navbar take the user to the corresponding sections on the page. They change colour and style on hovering the pointer, due to the hover pseudo class applied.

Back to top button

This button is fixed at the bottom right corner, using the bottom : 0; and right : 0; properties. As obvious from the name, it’s function is to bring the user to the top of the page. It is in the shape of a parallelogram, with a green border. The shape is achieved using the clip-path: polygon(); advanced CSS property. Putting suitable values of coordinates of the corner points will clip or cut the div accordingly. Ordinary divs can be given solid borders easily using the border property. However when a div is clipped, giving a proper border is not easy. Here, two divs of the same shape are used, one slightly bigger than the other. Only the outer boundaries of the bigger div will be visible, which will act as a border. The upward caret symbol after the text  is done using a small square. Only two adjacent borders of the square are made visible by border-width : 0 3px 3px 0; , and coloured. The square is rotated by transform : rotate(-135deg); such that these two borders are on the upper side. Some hover effects are also added.

Header portion

The background of the header portion is done by having a translucent green shade and an image behind it. This is done by background-image : linear-gradient(to bottom, rgba(25,157,18,0.8),rgba(30,194,21,0.8)), url(../images/wallpaper1.jpg); The brand name fades in and slides from the left when the page loads, because of the transform property and a colour change animation. The Check out our special discounts right now is a link that takes the user to the special discounts section. On hovering, it gets a skewed shape with a shadow due to the transform : skewX(15deg) skewY(-4deg); and text-shadow : 5px -5px 10px #ECEAEA; properties.

Body section

The body has various sections for each purpose. All the sections have rounded coloured borders, a light shadow, a heading and a dashed line separating the content. Each section has a unique background image, some of which are changing size.

Products to be launched soon

It contains three cards for three categories. On hovering over any card, it flips horizontally to reveal images of products. The flipping action is achieved due to the perspective property. Each card has a front side and a back side. The back side is initially inverted, and on hovering it becomes normal. This is done by transform: rotateY(180deg); or transform: rotateY(0); , as suitable. The visibility or non-visibility is controlled by the backface-visibility property. On hovering over any product image, it expands due to change in size.

Special Discounts

This section also has three cards, showing three products with their images, names, prices and discounts. Hovering over any card results in a slide-up to appear, with a Know More button. Clicking on the button will open a popup/modal, showing Terms and Conditions and the image. There is a cross symbol (&times) to close the popup.

Most Bought Items

This section has 10 cards, each card showing the image of a product. Hovering over any card results in the image becoming a small circular thumbnail, with the display of some additional information. The circular shape is done by border-radius: 50%; 

Reviews given by previous customers

This section displays the reviews given by customers. The background is moving due to animation. A circular image of the user is on the left, hovering on which makes it faded and displays the name over it. On the right is the review given.

Tell us your opinion

This section is for submitting reviews. The background is moving due to changing size, like the previous section. The content of this section has a form, with a text input field for name, and a textarea (paragraph) field for the review. The submit button would submit the form for further action, that will be done by backend.

Footer section

The footer is the last part of the page. It has links Terms and Conditions, Privacy Policy, Contact Us and Help on the left. The brand logo and brand name are on the right. Some contact options like Google, LinkedIn and Facebook are also provided below the brand name.

General features

Text styles are done using font-family for fonts, color for the text colour, font-size for the size. Borders are given border, and shadows using box-shadow. Background images or gradients are done using background-img property. Positioning is done by left, right, top and bottom properties. A lot of other CSS properties are also used.

Started Thread

Get involved!

Get paid for what you write

Register yourself now to submit your story......


No comments yet