This is a landing page designed for a SAAS based business firm in pure HTML and CSS. The overall design consists of 3 sections. The entire webpage is divided into multiple segments which are the navigation bar, intro section, features section and cards section. All the buttons are designed along with animations.
Most of the alignment with the elements was done using Flexbox and its various properties. In total, I gave 8-9 hours to build this entire website. In the beginning, I spent a lot of time writing HTML segments where I declared all of the crucial components like the navbar, intro section, card sections, creative team, button designing, footer, and all of their images, and icons. Selecting the correct icons, images, and their size according to the color scheme was one of the challenging tasks for me. Eventually, I spent most of my time designing and maintaining the responsiveness of each object for multiple screen sizes. In this webpage, the responsive breakpoints are at 1024px, 768px, and 576px.
The image property was an important element that I learned in this project. Correct cropping and aligning of images were necessary for this webpage. This particular project has trained me more on Flexbox, media queries, images`, and properties along with designing aspects.
Here's a Screen-Shot of my 13th project along with the responsive snippets.
Using Technologies
HTMLCSSMarkDown
The challenge of this project was to make the design responsive from scratch with pure CSS without using any frameworks .
This project is presently deployed in Netlify Service.
In This project I learnt the following properties of HTML and CSS.
- In depth learning of Responsive designs.
- Image positioning properties
- Flexbox and its Properties.
- Media Queries.
- Name 👨💻: Harshal Verma
- Email 📧: harshalvrm3@gmail.com
- Linkedln 📝: Click Here
- Blog 📝: Hashnode blog