Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexandrbig1/webstudio

WebStudio: Responsive web design project featuring interactive elements, a modern aesthetic, and innovative functionality. Explore the Studio page for strategy insights, team profiles, and customer showcases. Visit the Portfolio page to view animated project cards. Built with HTML, CSS, and JavaScript.
https://github.com/alexandrbig1/webstudio

css3 freelance frontend html-css-javascript html5 javascript javascript-vanilla js landingpage localstorage responsive-web-design scrollup stickyheader themeswitcher ux-ui ux-ui-design webdesign webdevelopment

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/alexandrbig1/webstudio
Owner: Alexandrbig1
License: mit
Created: 2023-08-22T03:27:28.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-12-30T17:38:08.000Z (about 1 year ago)
Last Synced: 2023-12-30T18:40:29.748Z (about 1 year ago)
Topics: css3, freelance, frontend, html-css-javascript, html5, javascript, javascript-vanilla, js, landingpage, localstorage, responsive-web-design, scrollup, stickyheader, themeswitcher, ux-ui, ux-ui-design, webdesign, webdevelopment
Language: HTML
Homepage: https://alexandrbig1.github.io/WebStudio/
Size: 2.55 MB
Stars: 7
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# WebStudio - Responsive Web Design Project

[![GitHub last commit](https://img.shields.io/github/last-commit/Alexandrbig1/WebStudio)](https://github.com/Alexandrbig1/WebStudio/commits/main)
[![GitHub license](https://img.shields.io/github/license/Alexandrbig1/WebStudio)](https://github.com/Alexandrbig1/WebStudio/blob/main/LICENSE)
[![JavaScript](https://img.shields.io/badge/JavaScript-Latest-yellow.svg)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![HTML](https://img.shields.io/badge/HTML5--orange)](https://developer.mozilla.org/en-US/docs/Web/HTML)
[![CSS](https://img.shields.io/badge/CSS3-styles-blue)](https://developer.mozilla.org/en-US/docs/Web/CSS)

## Overview

WebStudio is a responsive web design project created for a fictional company named "WebStudio." This freelance project focuses on delivering a modern and visually appealing web presence using HTML, CSS, and JavaScript. The website consists of a home page called "Studio" and a portfolio page, each with unique features and functionality.

## Features

- **Responsive Design:** Ensures optimal viewing and interaction experience across a wide range of devices.
- **Interactive CTA Button:** Clicking the Call-to-Action (CTA) button on the Studio page opens a modal window where users can leave their contacts to receive a callback.
- **Burger Menu:** The navigation menu on both the Studio and Portfolio pages is hidden behind a burger icon on laptops and phones, optimizing space and improving navigation on smaller screens.
- **Portfolio Animation:** Hovering over the project cards on the Portfolio page triggers an animation popup, providing additional information about each project.

## Pages

### Studio

- **Introduction:** An explanation of the company's strategy and services.
- **Team Section:** Profile cards featuring members of the WebStudio team.
- **Customers Section:** Logos of satisfied customers.
- **Footer:** Studio information, social media links, and a newsletter subscription.

### Portfolio

- **Project Cards:** Displaying completed works, each with an animation popup when hovered over.

## Technologies

- ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=for-the-badge&logo=JavaScript&logoColor=black)
- ![HTML](https://img.shields.io/badge/HTML5-E34F26.svg?style=for-the-badge&logo=HTML5&logoColor=white)
- ![CSS](https://img.shields.io/badge/CSS3-1572B6.svg?style=for-the-badge&logo=CSS3&logoColor=white)

## Screenshots

![Studio Page](./images/web-home1.jpg)
_Caption for Screenshot 1 (WebStudio Studio Page)_
![Portfolio Page](./images/web-fav1.jpg)
_Caption for Screenshot 2 (WebStudio Portfolio Page Dark Theme)_

## Usage

- Explore the responsive design on different devices.
- Experience the interactive features on the Studio page, such as the CTA modal window.
- Navigate to the Portfolio page to view project cards with animation popups.

## Contact Us

Leave your contact information in the CTA modal on the Studio page, and we will get back to you as soon as possible.

## About WebStudio

WebStudio is a fictional web design and development studio that focuses on creating innovative and responsive web solutions for clients. Connect with us on social media to stay updated on our latest projects and news.

## Issues

If you encounter any issues or have suggestions, please
[open an issue](https://github.com/Alexandrbig1/WebStudio/issues).

## License

This project is licensed under the [MIT License](LICENSE).

## Feedback

I welcome feedback and suggestions from users to improve the application's
functionality and user experience.

### Languages and Tools:

## Connect with me: