# Windows 11 CSS

> thanks for the ⭐ stars... 
> <br> 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) 
> <br> 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

<a href="https://w11-clone.vercel.app">w11-clone.vercel.app</a>

-----

### 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.
