A semi dynamic responsive website built with modern web technologies.
Composition is a responsive website that showcases dynamic content. The project emphasizes modern design principles and smooth user interactions. You can communicate with me by sending a message through the contact form.
- Responsive layout system.
- Interactive UI elements.
- Dynamic content depends on json.
- Contact form API by Web3Forms.
- Carousel works dynamically.
- Up modal button works.
- HTML5
- Web3Forms API in contact form
- CSS3
- Compiled by Prepros APP
- SCSS
- Custom variables
- Nested structures
- Mixins & Extends
- Components
- Layout system
- JavaScript
- ES6+ features
- DOM manipulation
- Components & Handlers
- Organized code
- Dynamic content based on JSON
- Modern web browser
- Clone the repository
git clone https://github.com/ImIsmaeilAlrewany/composition_sass- Navigate to project directory
cd composition_sass- Run the website using LiveServer
composition_sass/
│
├── assets/
│ ├── images/
│ └── svg/
│
├── css/
│ ├── main.scss
│ ├── main.css
│ ├── main.css.map
│ └── sass/
| ├── components/
| | ├── _blog-card.scss
| | ├── _button.scss
| | ├── _carousel.scss
| | ├── _customer-card.scss
| | ├── _input.scss
| | ├── _project-card.scss
| | ├── _section-heading.scss
| | └── _service-card.scss
| |
| ├── helpers/
| | ├── _global-rules.scss
| | ├── _mixins.scss
| | ├── _placeholder.scss
| | └── _variables.scss
| |
| ├── layout/
| | ├── _body-styles.scss
| | ├── _container.scss
| | ├── _footer.scss
| | ├── _header.scss
| | ├── _navigation.scss
| | └── _up-modal.scss
| |
| └── pages/
| └── _home.scss
│
├── javascript/
│ ├── main.js
│ ├── json/
| | ├── blog-cards.js
| | ├── carousel-data.js
| | ├── customer-cards.js
| | ├── project-cards.js
| | └── service-cards.js
| |
│ ├── helpers/
| | ├── carousel-handler.js
| | └── section-cards-handler.js
| |
│ └── components/
| ├── blog-card.js
| ├── carousel.js
| ├── customer-card.js
| ├── project-card.js
| ├── service-card.js
| └── up-button.js
|
├── index.html
├── .gitignore
└── README.md
This website is still under development.
You are free to Inform me with any Errors, or Features only use contact form in contact section.
Currently, this project is not accepting contributions.
This project is currently unlicensed. [It will be licensed in the next versions]
- New website / brand Logo.
- New UI will be designed from scratch.
- Work on backend using (Deno.js / Node.js).
- Use Fresh, TypeScript, and Tailwind-css.
- Changing the content to content related to site activity.