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.
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.
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.
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.
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.
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 (×) 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.
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.