Custom Homepage Design and Development with SCSS and Responsive Layout
Budget: €30 – €250 EUR
I am looking to develop a homepage using SCSS for styling to ensure it's fully responsive. I'll provide an image of the design layout and some basic SCSS file structures to aid in the development process. Additionally, I will share some links templates to simplify the design implementation.
Key Requirements:
Code Quality: I expect clean and well-structured code. Please avoid the use of any external CSS or JavaScript frameworks (e.g., no Bootstrap).
you need keep the structure my example scss. you can add or edit color or components....
Responsive Design: The page must be responsive across all devices. For tablet and mobile views, please refer to the following menu design:
- Tablet and Mobile Menu Design :https://codepen.io/ig_design/pen/XWXZaGb
- For laptop and desktop screens, the design should maintain a standard appearance, with dynamic background changes similar to a text-logo transition.
Interactive Elements:
Social Media Icons: Use this interaction style for the social media icons:
https://codepen.io/javidnikoo/pen/MWxGbzV
Add more icons for platforms like Facebook, YouTube, etc.
Search Icon:
Implement a search icon with functionality as shown here:
https://codepen.io/javidnikoo/pen/KKERavx
The search should be accessible on all pages titles , with a form and input field activation upon 'Enter'.
Slider: For the slider component, use this design:
https://codepen.io/javidnikoo/pen/poYVEGb.
Include design tags below the slider for alternate navigation, inspired by the image design I will provide. For button styling, refer to this: https://codepen.io/javidnikoo/pen/oNVdZjw
Timeline Section: Develop a timeline section based on my design, using this for inspiration:
https://codepen.io/javidnikoo/pen/vYPjgpg
For timeline tags, use the same button styling link provided for the slider. https://codepen.io/javidnikoo/pen/oNVdZjw
and another button
https://codepen.io/ash_creator/pen/oNyNbNO
Footer: The footer design will be based on the provided image design, details to follow.
Additional Instructions:
All code must be original, without reliance on external libraries or frameworks.
The final design should be user-friendly, adhering to modern web standards.
Deliverables:
please use standards size ... my designe is just to give you what i want
Complete source files including HTML and SCSS.
Documentation or comments within the code for clarity and future maintenance.
I look forward to collaborating with a developer who has a strong attention to detail and a portfolio demonstrating their ability to translate design concepts into functional web pages.
Key Requirements:
Code Quality: I expect clean and well-structured code. Please avoid the use of any external CSS or JavaScript frameworks (e.g., no Bootstrap).
you need keep the structure my example scss. you can add or edit color or components....
Responsive Design: The page must be responsive across all devices. For tablet and mobile views, please refer to the following menu design:
- Tablet and Mobile Menu Design :https://codepen.io/ig_design/pen/XWXZaGb
- For laptop and desktop screens, the design should maintain a standard appearance, with dynamic background changes similar to a text-logo transition.
Interactive Elements:
Social Media Icons: Use this interaction style for the social media icons:
https://codepen.io/javidnikoo/pen/MWxGbzV
Add more icons for platforms like Facebook, YouTube, etc.
Search Icon:
Implement a search icon with functionality as shown here:
https://codepen.io/javidnikoo/pen/KKERavx
The search should be accessible on all pages titles , with a form and input field activation upon 'Enter'.
Slider: For the slider component, use this design:
https://codepen.io/javidnikoo/pen/poYVEGb.
Include design tags below the slider for alternate navigation, inspired by the image design I will provide. For button styling, refer to this: https://codepen.io/javidnikoo/pen/oNVdZjw
Timeline Section: Develop a timeline section based on my design, using this for inspiration:
https://codepen.io/javidnikoo/pen/vYPjgpg
For timeline tags, use the same button styling link provided for the slider. https://codepen.io/javidnikoo/pen/oNVdZjw
and another button
https://codepen.io/ash_creator/pen/oNyNbNO
Footer: The footer design will be based on the provided image design, details to follow.
Additional Instructions:
All code must be original, without reliance on external libraries or frameworks.
The final design should be user-friendly, adhering to modern web standards.
Deliverables:
please use standards size ... my designe is just to give you what i want
Complete source files including HTML and SCSS.
Documentation or comments within the code for clarity and future maintenance.
I look forward to collaborating with a developer who has a strong attention to detail and a portfolio demonstrating their ability to translate design concepts into functional web pages.