Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/laaouatni/w11css

Windows 11 UI WEB-BASED. works directly on your Browser! made by Laaouatni. Using only HTML, CSS and Vanilla Javascript (No Framework)
https://github.com/laaouatni/w11css

animation css-animations css-flexbox css-grid css-grid-layout microsoft-windows operating-system os w11 w11-clone windows-11 windows-11-clone windows-11-web windows-11-web-clone windows-clone windows-desktop windows11 windows11-darkmode windows11-recreation windows11-web

Last synced: about 1 month ago
JSON representation

Windows 11 UI WEB-BASED. works directly on your Browser! made by Laaouatni. Using only HTML, CSS and Vanilla Javascript (No Framework)

Awesome Lists containing this project

README 

        
# Windows 11 CSS



> thanks for the ⭐ stars... 

> 
 the code isn't the best, I know but unfortunately, 

> 

> I won't edit this repo, to keep it simple for junior devs (like I was 2 years ago) 

> 
 because if is starred a lot I think is good as it is.

>

> sorry *(you can change it if you want to, to make it even better)*



### online website



w11-clone.vercel.app



-----



### User Interface



![windows 11 interfaccia clone](https://user-images.githubusercontent.com/87947051/145460305-997d42b9-3b7d-49e9-8da3-1d4e15563b66.png)



-----



## table of contents



- [Windows 11 Clone](#windows-11-clone)

  - [LINK website](#online-website-w11-clone)

- [Image of Windows 11 Clone](#user-interface)

  - [table of contents](#table-of-contents)

    - [on mouse_move, it will create a dinamic selection drag](#new-feature-on-mouse_move-it-will-create-a-dinamic-selection-drag)

    - [START MENU](#start-menu-with-animations)

      - [static image](#static-image-of-start-menu-windows-11)

      - [gif animation](#gif-of-the-animation-on-start-menu-windows-11)

    - [WIDGET section](#widget-taskbar-section-of-windows-11)

      - [static image](#static-image-of-widget-section-when-is-active-windows-11)

      - [gif animation](#gif-of-the-animation-on-widget-section-windows-11)

    - [CREATE NEW WINDOW on click](#create-new-windows-tab-on-click-of-any-icon)

      - [static image](#static-image-of-new-tab-when-generated-windows-11)

      - [gif animation](#gif-of-the-animation-of-new-tab-when-generated-windows-11)

    - [MOVABLE and RESIZABLE window](#movable-and-resizable-tab-window)

      - [static image](#static-image-of-movable-and-resizable-tab-window-windows-11)

      - [gif animation](#gif-with-animation-of-this-functionality)

        - [MOVABLE window functionality](#movable-window-functionality-onmousemove)

        - [RESIZABLE window functionality](#resize-window-functionality-without-using-javascript)

    - [SNAP FUNCTIONALITY](#windows-11-snap-functionality)

      - [LEFT snap](#left-snap)

        - [static image](#static-image-of-left-snap-functionality)

        - [gif animation](#animated-gif-of-left-snap-functionality)

      - [RIGHT snap](#right-snap)

        - [static image](#static-image-of-right-snap-functionality)

      - [FULL_SCREEN snap](#all_screen-snap)

        - [static image](#static-image-of-full_screen-snap-functionality)

        - [gif animation ](#animated-gif-of-full_screen-snap-functionality)

    - [if window minimized, the icon is in NavBar (all this is centered automatically)](#if-window-minimized-the-icon-is-in-navbar-all-this-is-centered-automatically)

      - [static image](#static-image)

      - [gif animation](#gif-animation)



-----



### ✅NEW FEATURE: on mouse_move, it will create a dinamic selection drag

![selection drag windows 11 clone](https://user-images.githubusercontent.com/87947051/147878194-a7d1806e-caed-4633-875d-273df00374d9.gif)



### Start Menu (with Animations)



###### static image of START menu (windows 11)



![windows 11 start section clone](https://user-images.githubusercontent.com/87947051/145460298-84d0d60b-c15e-4639-9525-a0e2dd5ddf51.png)



###### gif of the animation on START menu (Windows 11)



![windows 11 start menu animation](https://user-images.githubusercontent.com/87947051/147880209-195156a0-69bb-4538-a2f7-e10e59fc889e.gif)



-----



### Widget TaskBar Section of windows 11



###### static image of WIDGET section when is Active (windows 11)



![windows 11 widget section clone](https://user-images.githubusercontent.com/87947051/145460294-80e07f69-d55b-4ee9-8de9-ca66641beefe.png)



###### gif of the animation on WIDGET section (Windows 11)



![Widget windows 11 animation](https://user-images.githubusercontent.com/87947051/147880802-da349f95-08bb-4814-b746-d54262802287.gif)



-----



### create new windows tab on click of any icon



###### static image of new tab when generated (Windows 11)



![windows tab windows 11 clone](https://user-images.githubusercontent.com/87947051/145460289-6d894b1b-84ca-4e64-81a1-3126798ca601.png)



###### gif of the animation of new tab when generated (Windows 11)



![windows tab window generated, windows 11 dark animation](https://user-images.githubusercontent.com/87947051/147881150-93a6c02e-0eec-4ba6-a96f-bd3240a269ce.gif)



-----



### movable and resizable tab window



###### static image of movable and resizable tab window (Windows 11)



![windows 11 tab movement and rezible clone](https://user-images.githubusercontent.com/87947051/145460285-5bf51d47-5bd0-4576-83b0-ff434527104e.png)



#### gif with animation of this functionality



###### movable window functionality (onmousemove)



![movable window in windows 11 clone html css javascript animation](https://user-images.githubusercontent.com/87947051/147881528-a46aa162-f011-4d6b-b291-606ee7b52274.gif)



###### RESIZE window functionality (without using Javascript)



![resize window in windows 11 clone animation](https://user-images.githubusercontent.com/87947051/147881807-422861ed-1cd0-441b-83f5-ca8d0ac9ccc6.gif)



-----



### windows 11 snap functionality



#### **left** snap



###### static image of LEFT SNAP functionality



![windows 11 clone tab, can fit all right or left space](https://user-images.githubusercontent.com/87947051/145460277-a0fcf6a4-1b42-4745-8a30-11f3f7ad5547.png)



###### animated gif of LEFT SNAP functionality



![left snap animation windows 11](https://user-images.githubusercontent.com/87947051/147882279-8209b89f-b08b-4bfd-8367-0e2b222e45c3.gif)



#### **right** snap



###### static image of RIGHT SNAP functionality



![Immagine 2021-12-11 123206](https://user-images.githubusercontent.com/87947051/145674918-8fd6a583-0f7f-4fd3-baee-0ffebfbfef81.png)



#### **all_screen** snap



###### static image of FULL_SCREEN snap functionality

![all height tab windows 11 clone](https://user-images.githubusercontent.com/87947051/145670904-df8eb745-e670-4a82-b04d-1980ec501bbc.png)



###### animated gif of FULL_SCREEN snap functionality

![full screen window tab in windows 11](https://user-images.githubusercontent.com/87947051/147883682-420d7882-03d9-4ded-9054-1949a78113d5.gif)



-----



### if window minimized, the icon is in NavBar (all this is centered automatically)



###### static image

![navbar windows 11 html css clone](https://user-images.githubusercontent.com/87947051/145670732-259b9747-22e0-45e9-9c8e-b534341875fd.png)



###### animated gif

![gif navbar minimized icons](https://user-images.githubusercontent.com/87947051/147884263-2fc03350-ea53-487e-87b1-4c203ad335ad.gif)



-----



![w11 views](https://visitor-badge.glitch.me/badge?page_id=w11CSS)



views count started from 3 February, but the project is uploaded on december.