** Ecommerce Website Design README **
Design Choices for ZipStore(a ecommerce website)
In this README file, we'll walk you through the design choices made for our ecommerce website ZipStore.
-
Scroll-Behavior: Smooth:
html { scroll-behavior: smooth; }We chose smooth scrolling to enhance the user's navigation experience. It provides a polished feel when users click on navigation links, smoothly guiding them to their destination on the page.
-
Global CSS Reset:
* { margin: 0; padding: 0; box-sizing: border-box; }A global CSS reset ensures consistent rendering of elements across different browsers, reducing inconsistencies in padding and margins.
-
Font Choice:
body { font-family: 'Poppins', sans-serif; }We selected the 'Poppins' font to provide a modern, clean, and easy-to-read typeface for our content.
-
Background Image:
body { background-image: url(Images/background-02.jpg); background-position: contain; }We've added a captivating background image that enhances the visual appeal of the site while maintaining content readability.
-
Navigation Bar:
.navbar { ... }Our navigation bar is designed for clarity and accessibility. It uses a sleek font size, aligns elements, and features a smooth hover effect for menu items.
-
Text and Link Styling:
a, p, li { ... }We've carefully styled text and links to ensure they are readable, with a pleasant color scheme and subtle text shadows for added depth.
-
Layout and Grid System:
.container, .row, .col-2, .col-3, .col-4, .col-5 { ... }Our website uses a responsive grid system to maintain a structured layout across various screen sizes.
-
Button Styling:
.button { ... }We've designed attractive buttons with a smooth color transition on hover to encourage user interaction.
-
Section Styles:
.header, .categories, .deals, .testimonial, .brands { ... }Each section has its own unique styling, enhancing the overall visual appeal and user experience.
-
Footer Design:
.footer { ... }Our footer is designed for easy navigation, with a balanced color scheme and clear organization of content.
-
Background Gradient:
.deals { ... }To create visual interest, we've used a radial gradient background in the "Deals" section.
-
Testimonials:
.testimonial { ... }Testimonial cards feature a clean and intuitive design, making it easy for users to read and engage with customer feedback.
-
Brands Section:
.brands { ... }The "Brands" section showcases logos in an interactive manner, providing a dynamic user experience.
to create an engaging and visually appealing user experience.
- Table Styling:
table th, table td { border: 1px solid black; }We've applied a 1px solid black border to both table headers and table data cells to ensure a clear visual separation between table elements, enhancing readability.
- Table Layout:
table { width: 900px; border-collapse: collapse; margin: 0 20px; }The table's width is set to 900px, and we've used 'border-collapse: collapse' to maintain a consistent and organized appearance, eliminating unwanted spacing between cells.
- Alternating Row Colors:
table tr:nth-child(odd) { background-color: #6dd5ed; }Odd rows feature a background color of #6dd5ed, enhancing readability and providing visual distinction.
- Consistent Borders and Padding:
table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; }We've maintained consistent border styles and padding for table elements, ensuring a polished and professional look.
- List-Style for Elements:
td { list-style: disc; padding-left: 30px; padding-top: 30px; line-height: 28px; }For elements, we've implemented a list-style with adjusted padding and line-height, creating structured and readable lists.
- Form Element Styling:
input[type=text], select, textarea { ... }Our styling for form elements ensures user-friendliness with a responsive design, adequate padding, and a border-radius of 4px.
- Submit Button Styling:
#submit { ... }The submit button is designed for visual appeal, with a background color transition on hover, encouraging user interaction.
- Container Styling:
.container-contact { border-radius: 5px; padding: 20px; }Containers are styled with a border-radius of 5px and padding for a pleasing and organized layout.