Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/j11tendra/intrinsic
Intrinsic is a interior design company providing clean designs. This website features a add to card, shop, contact page.
https://github.com/j11tendra/intrinsic
html5-css3-javascript scss-framework ui-design
Last synced: about 1 month ago
JSON representation
Intrinsic is a interior design company providing clean designs. This website features a add to card, shop, contact page.
- Host: GitHub
- URL: https://github.com/j11tendra/intrinsic
- Owner: J11tendra
- Created: 2023-09-12T16:43:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-29T15:53:07.000Z (9 months ago)
- Last Synced: 2024-11-21T23:59:56.780Z (about 1 month ago)
- Topics: html5-css3-javascript, scss-framework, ui-design
- Language: HTML
- Homepage: https://intrinsic-xi.vercel.app
- Size: 29.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Intrinsic - Interior Design Website
Interior design is the art and science of enhancing the interior of a building to achieve a healthier and more aesthetically pleasing environment for the people who use the space. At Intrinsic, we provides professional interior design services to clients, such as homeowners, businesses, institutions, or organizations.
## Table of Content
* [Overview](#overview)
* [The Challenge](#challenge)
* [Screenshots](#screenshots)
* [Website Preview Links](#livepreview)
* [Features](#features)
* [My Process](#process)
* [Build with](#builtwith)
* [My Learnings](#mylearning)
* [Author](#author)
* [Acknowledgements](#builtwith)
* [Useful Links](#usefullinks)
## Overview[](#overview)
**The Challenge**
The Tablet "Footer" was challenging for me to code. Despite the last flex being overflowing on the x-axis, I eventually overcame the challenge and made the footer responsive for lablet as well. I defined the maximum width for footer and gap for flex to deal the problem.
**Screenshots**
**Features**
- Fully responsive website
- Sematic HTML5 markdown
- Scalable clean code
- Mobile first approach
- Multipage
## My Process
Started the project with simple HTML5 boilerplate and created separate SCSS and JavaScript folder for scalability.Then I went on creating variables for colors, font sizes and font weights.
I created separate file for each universal section of website such as navigation bar and footer. Made use of "Global.scss" file to create base styling for the project which include all margins, paddings, font sizes, font color, and button styles. I placed all images and svg in separate folder for better debugging.
Firstly the navigation bar was coded for mobile and then moved to the larger display sizes. Natural responsiveness approach was used to reduce the use of media queries.
The shop section was grid which adapts to display sizes. I used flexbox for about section and addded a max-width which helped me align the section horizontally.
For the testimonal and footer section again I used flex for desired alignment.
Now, For the shop and about page the code basically reuseable from the component and added few specific styling using ids and class. This approach turned to write less code improve overall development productivity.
The rest all development was combination of flex, grid and long hours of debugging.
**Built with**
**My learnings**
This project has been my learning ground as it pushed me to research about the bugs i encounter during development and found out some better methods to deal with the project.
I figure out the better semantic way to center the buttons.
a {
color: $black;
margin: 0 auto;
font-weight: $reg;
@include breakpoint-up(medium) {
font-size: $font-5;
}
}
I used margin auto for images and had its max-width set to some rem.
&__container {
margin: 0 auto;
max-width: 25rem;
width: 100%;
@include breakpoint-up(medium) {
max-width: 48rem;
}
@include breakpoint-up(large) {
max-width: 80rem;
}
@include breakpoint-up(x-large) {
max-width: 110rem;
}
}
For the individual card
&__01 {
height: 15rem;
max-width: 11.5625rem;
width: 100%;
border-radius: 0.25rem;
background-color: $very-light-gray;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@include breakpoint-up(medium) {
height: 26.5rem;
max-width: 22.8125rem;
}
@include breakpoint-up(large) {
height: 26.5rem;
max-width: 29rem;
}
@include breakpoint-up(x-large) {
height: 28.5rem;
max-width: 30rem;
}
}
The Footer section which was challenging for lablet display. I used flex and column gap to stop the content from overflowing.
.links {
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
align-items: center;
margin: 3.75rem 0;
@include breakpoint-up(large) {
grid-area: links;
flex-direction: row;
align-items: flex-start;
gap: 4rem;
text-align: left;
margin: 0 0 3.75rem 0;
}
@include breakpoint-up(x-large) {
gap: 8rem;
}
}
## Author
Website Design: Jitendra Choudhary
Development: Jitendra Choudhary
## Acknowledgement
Finally I'd like to thanks all resources i used during the development process that includes all Fontawesome icons and Freepik images.
## Useful Links
_If you would like to improve the project or have a suggestions, feedback or issues. Feel free to contact me on the above links and i'd happy to respond._
Email: [Jitendra Choudhary]([email protected])
Twitter: [JiitendraC](https://twitter.com/JiitendraC)