├── 3D Box ├── output.png ├── 3Dbox.html └── 3Dbox.css ├── Array Card Flip ├── js.jpg └── JavaScript Array Card Flip.css ├── Tooltip ├── Screenshot_1.png ├── cssTooltip.html └── cssTooltip.css ├── Accordion Menu 2 ├── Thumbs.db ├── output.png ├── Accordion Menu 2.css └── Accordion Menu 2.html ├── Image Slider ├── slider css.png └── Image Slider.css ├── Marvel Tabs └── Marvel Tabs.png ├── Rock Paper Scissors ├── tas.png ├── kagit.png ├── makas.png └── taskagıtmakas.css ├── TEAM CARDS └── Screenshot_1.png ├── To Do List ├── to do list 1.png ├── ToDoList1.html └── ToDoList1.css ├── spam find └── Screenshot_1.png ├── Animation Button 2 ├── Photo.png ├── animationRadioButton.html └── animationRadioButton.css ├── Card Flip 1 ├── Screenshot_1.png ├── JavaScript Card Flip.html └── JavaScript Card Flip.css ├── Mouse Scroll ├── Screenshot_1.png ├── mouseScroller.html └── mouseScroller.css ├── Prime Number ├── Screenshot_1.png └── primeNumber.html ├── Accordion Menu 5 ├── accordion5.png ├── Accordion Menu 5.css └── Accordion Menu 5.html ├── Dna Animation ├── Screenshot_1.png ├── DnaAnimation.html └── DnaAnimation.css ├── Eyes Animation ├── Screenshot_1.png ├── cssEyesAnimation.html └── cssEyesAnimation.css ├── Hover Effect 2 ├── Screenshot_1.png ├── JShoverEffect.html └── JShoverEffect.css ├── Only Css Menu ├── Screenshot_1.png ├── only css menu.html └── only css menu.scss ├── Text Animation ├── Screenshot_1.png ├── cssTextAnimation.html └── cssTextAnimation.css ├── Growing Card Flip ├── Screenshot_2.png ├── Growing Card Flip.html └── Growing Card Flip.css ├── Loding Animation ├── Screenshot_1.png ├── cssLodingAnimation.html └── cssLodingAnimation.css ├── SCSS and JS Tabs ├── Screenshot_1.png └── SCSS and JS Tabs.scss ├── Accordion Menu 4 ├── Accordion Menu 4.png ├── Accordion Menu 4.css └── Accordion Menu 4.html ├── Accordion Menu 6 ├── Accordion Menu 6.png ├── Accordion Menu 6.css └── Accordion Menu 6.html ├── Array Accordion ├── Array Accordion.png └── Array Accordion.css ├── Dark Light Menu ├── Dark Light Menu.png ├── Dark Light Menu.html └── Dark Light Menu.css ├── Diffirent Animation ├── Screenshot_1.png └── cssDiffirentAnimation.css ├── Library System ├── images │ └── wallpaper.jpg ├── CSS │ ├── book_list.css.map │ ├── insertion_section.css.map │ ├── book_list.css │ ├── book_list.scss │ ├── insertion_section.scss │ ├── insertion_section.css │ └── main.css ├── LICENSE └── JS │ └── main.js ├── Line Menu Animation ├── Screenshot_1.png └── lineMenu.html ├── Radar ├── JavaScript Animation Radar.png ├── radar.html └── radar.css ├── Tab - Tesla Car Models ├── tesla-car.png ├── tesla-car.html └── tesla-car.scss ├── 3D Hover Effect - Alita Card ├── output.png ├── 3D Hover Effect - Alita Card.html └── 3D Hover Effect - Alita Card.scss ├── Hypotenuse calculation ├── Screenshot_1.png └── HypotenuseCalculation.html ├── factorial calculation ├── Screenshot_1.png └── factorial calculation.html ├── Animation - Nice Weather ├── Screenshot_1.png └── cssNiceWeather.html ├── JS Promise Login System ├── Screenshot_3.png └── JS Promise Login System.html ├── Tabs Styled 1 ├── JavaScript Tabs Styled 1.png └── JavaScript Tabs Styled 1.css ├── Tabs Styled 2 ├── JavaScript Tabs Style 2.png ├── JavaScript Tabs Style 2.css └── JavaScript Tabs Style 2.html ├── Array.from Animation ├── Array.from Animation.png ├── Array.from Animation.html └── Array.from Animation.css ├── JavaScript To Do List ├── JavaScript To Do List.png ├── JavaScript To Do List.html └── JavaScript To Do List.css ├── Bootstrap Sidebar Menu └── Bootstrap Sidebar Menu.png ├── Information Card Slider ├── JS Information Card Slider.png └── JS Information Card Slider.css ├── Array Slice Animation ├── JavaScript Array Slice Animation.png ├── ArraySliceAnimation.html └── ArraySliceAnimation.css ├── Responsive Accordion Slider ├── Responsive Accordion Slider.png ├── Responsive Accordion Slider.css └── Responsive Accordion Slider.html ├── Rectangle Area and Circumference Calculation ├── Screenshot_1.png ├── Javascript Rectangle Area and Circumference Calculation.css └── Javascript Rectangle Area and Circumference Calculation.html ├── Before & After Comparison ├── JavaScript Before & After Comparison.png ├── JavaScript Before & After Comparison.css └── JavaScript Before & After Comparison.html ├── Find The Largest And Smallest Number ├── Find The Largest And Smallest Number On An Array.png └── Find the largest and smallest number on an array.html ├── Card Slide In Hover ├── index.html └── style.css ├── Users (Modal Box) ├── readme.md ├── css │ └── main.css └── javascript │ ├── main.js │ └── info.json ├── Name Animation ├── cssNameAnimation.html └── cssNameAnimation.css ├── Pomodora Timer ├── License.md ├── css │ ├── style.css.map │ └── style.css ├── index.html └── js │ └── main.js ├── Quick Autocomplete ├── License.md ├── js │ └── main.js └── index.html ├── Animation Check ├── checkAnimation.html └── checkAnimation.css ├── JS CLASS - Login System ├── JS CLASS - Login System.css └── JS CLASS - Login System.html ├── Hover Effect ├── css_hover_effect.html └── css_hover_effect.css ├── Animation Button ├── animeBut.css └── animeBut.html ├── README.md └── Calculator └── calculator.html /3D Box/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/3D Box/output.png -------------------------------------------------------------------------------- /Array Card Flip/js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Array Card Flip/js.jpg -------------------------------------------------------------------------------- /Tooltip/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Tooltip/Screenshot_1.png -------------------------------------------------------------------------------- /Accordion Menu 2/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Accordion Menu 2/Thumbs.db -------------------------------------------------------------------------------- /Accordion Menu 2/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Accordion Menu 2/output.png -------------------------------------------------------------------------------- /Image Slider/slider css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Image Slider/slider css.png -------------------------------------------------------------------------------- /Marvel Tabs/Marvel Tabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Marvel Tabs/Marvel Tabs.png -------------------------------------------------------------------------------- /Rock Paper Scissors/tas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Rock Paper Scissors/tas.png -------------------------------------------------------------------------------- /TEAM CARDS/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/TEAM CARDS/Screenshot_1.png -------------------------------------------------------------------------------- /To Do List/to do list 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/To Do List/to do list 1.png -------------------------------------------------------------------------------- /spam find/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/spam find/Screenshot_1.png -------------------------------------------------------------------------------- /Animation Button 2/Photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Animation Button 2/Photo.png -------------------------------------------------------------------------------- /Card Flip 1/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Card Flip 1/Screenshot_1.png -------------------------------------------------------------------------------- /Mouse Scroll/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Mouse Scroll/Screenshot_1.png -------------------------------------------------------------------------------- /Prime Number/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Prime Number/Screenshot_1.png -------------------------------------------------------------------------------- /Rock Paper Scissors/kagit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Rock Paper Scissors/kagit.png -------------------------------------------------------------------------------- /Rock Paper Scissors/makas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Rock Paper Scissors/makas.png -------------------------------------------------------------------------------- /Accordion Menu 5/accordion5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Accordion Menu 5/accordion5.png -------------------------------------------------------------------------------- /Dna Animation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Dna Animation/Screenshot_1.png -------------------------------------------------------------------------------- /Eyes Animation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Eyes Animation/Screenshot_1.png -------------------------------------------------------------------------------- /Hover Effect 2/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Hover Effect 2/Screenshot_1.png -------------------------------------------------------------------------------- /Only Css Menu/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Only Css Menu/Screenshot_1.png -------------------------------------------------------------------------------- /Text Animation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Text Animation/Screenshot_1.png -------------------------------------------------------------------------------- /Growing Card Flip/Screenshot_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Growing Card Flip/Screenshot_2.png -------------------------------------------------------------------------------- /Loding Animation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Loding Animation/Screenshot_1.png -------------------------------------------------------------------------------- /SCSS and JS Tabs/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/SCSS and JS Tabs/Screenshot_1.png -------------------------------------------------------------------------------- /Accordion Menu 4/Accordion Menu 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Accordion Menu 4/Accordion Menu 4.png -------------------------------------------------------------------------------- /Accordion Menu 6/Accordion Menu 6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Accordion Menu 6/Accordion Menu 6.png -------------------------------------------------------------------------------- /Array Accordion/Array Accordion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Array Accordion/Array Accordion.png -------------------------------------------------------------------------------- /Dark Light Menu/Dark Light Menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Dark Light Menu/Dark Light Menu.png -------------------------------------------------------------------------------- /Diffirent Animation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Diffirent Animation/Screenshot_1.png -------------------------------------------------------------------------------- /Library System/images/wallpaper.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Library System/images/wallpaper.jpg -------------------------------------------------------------------------------- /Line Menu Animation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Line Menu Animation/Screenshot_1.png -------------------------------------------------------------------------------- /Radar/JavaScript Animation Radar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Radar/JavaScript Animation Radar.png -------------------------------------------------------------------------------- /Tab - Tesla Car Models/tesla-car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Tab - Tesla Car Models/tesla-car.png -------------------------------------------------------------------------------- /3D Hover Effect - Alita Card/output.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/3D Hover Effect - Alita Card/output.png -------------------------------------------------------------------------------- /Hypotenuse calculation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Hypotenuse calculation/Screenshot_1.png -------------------------------------------------------------------------------- /factorial calculation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/factorial calculation/Screenshot_1.png -------------------------------------------------------------------------------- /Animation - Nice Weather/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Animation - Nice Weather/Screenshot_1.png -------------------------------------------------------------------------------- /JS Promise Login System/Screenshot_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/JS Promise Login System/Screenshot_3.png -------------------------------------------------------------------------------- /Tabs Styled 1/JavaScript Tabs Styled 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Tabs Styled 1/JavaScript Tabs Styled 1.png -------------------------------------------------------------------------------- /Tabs Styled 2/JavaScript Tabs Style 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Tabs Styled 2/JavaScript Tabs Style 2.png -------------------------------------------------------------------------------- /Array.from Animation/Array.from Animation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Array.from Animation/Array.from Animation.png -------------------------------------------------------------------------------- /JavaScript To Do List/JavaScript To Do List.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/JavaScript To Do List/JavaScript To Do List.png -------------------------------------------------------------------------------- /Bootstrap Sidebar Menu/Bootstrap Sidebar Menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Bootstrap Sidebar Menu/Bootstrap Sidebar Menu.png -------------------------------------------------------------------------------- /Information Card Slider/JS Information Card Slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Information Card Slider/JS Information Card Slider.png -------------------------------------------------------------------------------- /Array Slice Animation/JavaScript Array Slice Animation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Array Slice Animation/JavaScript Array Slice Animation.png -------------------------------------------------------------------------------- /Responsive Accordion Slider/Responsive Accordion Slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Responsive Accordion Slider/Responsive Accordion Slider.png -------------------------------------------------------------------------------- /Rectangle Area and Circumference Calculation/Screenshot_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Rectangle Area and Circumference Calculation/Screenshot_1.png -------------------------------------------------------------------------------- /Before & After Comparison/JavaScript Before & After Comparison.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Before & After Comparison/JavaScript Before & After Comparison.png -------------------------------------------------------------------------------- /Find The Largest And Smallest Number/Find The Largest And Smallest Number On An Array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/HEAD/Find The Largest And Smallest Number/Find The Largest And Smallest Number On An Array.png -------------------------------------------------------------------------------- /Card Slide In Hover/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |
10 |
11 | Codeblogger 12 |
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Users (Modal Box)/readme.md: -------------------------------------------------------------------------------- 1 | ### Users(Modal Box) 2 | 3 | ------ 4 | **Used:** 5 | * HTML 6 | * CSS 7 | * JavaScript (JQuery) 8 | * JSON 9 | ------ 10 | 11 | **Features:** 12 | * There's a list of *names* and *surnames*. 13 | * Pressing the button *'More'* will be *'Modal Box'* active. 14 | * There's more information about the person in the 'modal box'. 15 | * Press X to close the 'Modal Box' or anywhere on the screen. -------------------------------------------------------------------------------- /Library System/CSS/book_list.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,UAAU;EACN,UAAU,EAAE,mBAAe;EAC3B,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,IAAI,EAAE,IAAI;EACV,UAAU,EAAE,MAAM;EAClB,aAAa,EAAE,KAAK;EACpB,6BAAqB;IACjB,OAAO,EAAE,IAAI;EAEjB,gBAAK;IACD,UAAU,EAAE,yBAAqB;IACjC,aAAa,EAAE,KAAK;IAEpB,sBAAK;MACD,KAAK,EAAE,OAAO;IAElB,sBAAK;MACD,KAAK,EAAE,OAAO", 4 | "sources": ["book_list.scss"], 5 | "names": [], 6 | "file": "book_list.css" 7 | } 8 | -------------------------------------------------------------------------------- /Library System/CSS/insertion_section.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAAA,kBAAkB;EACd,UAAU,EAAE,mBAAe;EAC3B,aAAa,EAAE,KAAK;EACpB,OAAO,EAAE,mBAAmB;EAC5B,KAAK,EAAE,IAAI;EACX,8BAAW;IACP,KAAK,EAAE,GAAG;IACV,WAAW,EAAE,GAAG;IAEhB,0EAAW;MACP,KAAK,EAAE,GAAG;IAEd,oCAAK;MACD,OAAO,EAAE,GAAG;MACZ,UAAU,EAAE,GAAG;MACf,OAAO,EAAE,IAAI;IAGjB,2CAAY;MACR,WAAW,EAAE,KAAK;MAClB,iDAAK;QACD,KAAK,EAAE,GAAG;IAGlB,qCAAM;MACF,WAAW,EAAE,GAAG", 4 | "sources": ["insertion_section.scss"], 5 | "names": [], 6 | "file": "insertion_section.css" 7 | } 8 | -------------------------------------------------------------------------------- /Library System/CSS/book_list.css: -------------------------------------------------------------------------------- 1 | #book_list { 2 | background: rgba(0, 0, 0, 0.75); 3 | width: 92.5%; 4 | height: 385px; 5 | left: 25px; 6 | overflow-y: scroll; 7 | border-radius: 7.5px; } 8 | #book_list::-webkit-scrollbar { 9 | display: none; } 10 | #book_list table { 11 | background: rgba(255, 255, 255, 0.75); 12 | border-radius: 7.5px; } 13 | #book_list table thead { 14 | color: #1a1a1a; } 15 | #book_list table tbody { 16 | color: #262626; } 17 | 18 | /*# sourceMappingURL=book_list.css.map */ 19 | -------------------------------------------------------------------------------- /Library System/CSS/book_list.scss: -------------------------------------------------------------------------------- 1 | #book_list{ 2 | background: rgba(0,0,0,.75); 3 | width: 92.5%; 4 | height: 385px; 5 | left: 25px; 6 | overflow-y: scroll; 7 | border-radius: 7.5px; 8 | &::-webkit-scrollbar { 9 | display: none; 10 | } 11 | table{ 12 | background: rgba(256,256,256,.75); 13 | border-radius: 7.5px; 14 | 15 | thead{ 16 | color: #1a1a1a; 17 | } 18 | tbody{ 19 | color: #262626; 20 | } 21 | 22 | } 23 | } -------------------------------------------------------------------------------- /Loding Animation/cssLodingAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Eyes Animation/cssEyesAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Name Animation/cssNameAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Mouse Scroll/mouseScroller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Tooltip/cssTooltip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | ? 16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Text Animation/cssTextAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | codeblogge 15 | r 16 |

17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Library System/CSS/insertion_section.scss: -------------------------------------------------------------------------------- 1 | #insertion_section{ 2 | background: rgba(0,0,0,.75); 3 | border-radius: 7.5px; 4 | padding: 15px 10px 15px 10px; 5 | width: 100%; 6 | .form-group{ 7 | width: 90%; 8 | margin-left: 10%; 9 | 10 | input,label{ 11 | width: 90%; 12 | } 13 | input{ 14 | opacity: .20; 15 | transition: .5s; 16 | outline: none; 17 | } 18 | 19 | #two-section{ 20 | margin-left: -7.5%; 21 | input{ 22 | width: 85%; 23 | } 24 | } 25 | button{ 26 | margin-left: -5%; 27 | } 28 | 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /Library System/CSS/insertion_section.css: -------------------------------------------------------------------------------- 1 | #insertion_section { 2 | background: rgba(0, 0, 0, 0.75); 3 | border-radius: 7.5px; 4 | padding: 15px 10px 15px 10px; 5 | width: 100%; } 6 | #insertion_section .form-group { 7 | width: 90%; 8 | margin-left: 10%; } 9 | #insertion_section .form-group input, #insertion_section .form-group label { 10 | width: 90%; } 11 | #insertion_section .form-group input { 12 | opacity: .20; 13 | transition: .5s; 14 | outline: none; } 15 | #insertion_section .form-group #two-section { 16 | margin-left: -7.5%; } 17 | #insertion_section .form-group #two-section input { 18 | width: 85%; } 19 | #insertion_section .form-group button { 20 | margin-left: -5%; } 21 | 22 | /*# sourceMappingURL=insertion_section.css.map */ 23 | -------------------------------------------------------------------------------- /Library System/CSS/main.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0; 3 | margin: 0; 4 | height: 100vh; 5 | } 6 | /* 7 | Wallpaper 8 | Source: https://wallpapersafari.com/hd-library-wallpaper/ 9 | */ 10 | #one-page{ 11 | height: 100%; 12 | background-image: url("/images/wallpaper.jpg"); 13 | background-size: auto; 14 | -webkit-background-size: auto; 15 | -moz-background-size: auto; 16 | -o-background-size: auto ; 17 | 18 | } 19 | .container{ 20 | position: relative; 21 | top: 15%; 22 | } 23 | h1{ 24 | font-size: 50px; 25 | } 26 | 27 | @media (max-width: 976px){ 28 | #one-page{ 29 | height: 150%; 30 | background-image: url("/images/wallpaper.jpg"); 31 | background-size: auto; 32 | -webkit-background-size: auto; 33 | -moz-background-size: auto; 34 | -o-background-size: auto ; 35 | } 36 | } -------------------------------------------------------------------------------- /Radar/radar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Mouse Scroll/mouseScroller.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #262626; 3 | } 4 | #container{ 5 | display:flex; 6 | align-content:center; 7 | } 8 | #scroll-down{ 9 | position:absolute; 10 | top:50%; 11 | left:50%; 12 | transform:translate(-50%,-50%); 13 | margin:auto; 14 | } 15 | #mouse { 16 | width: 20px; 17 | height: 100px; 18 | padding: 150px 100px; 19 | border: 10px solid #ff6a00; 20 | border-radius:120px; 21 | } 22 | #scroller{ 23 | width:25px; 24 | height:50px; 25 | background:#ff6a00; 26 | border-radius:20px; 27 | opacity:0.9; 28 | animation:ani 1s linear infinite; 29 | animation-direction:alternate; 30 | } 31 | @keyframes ani{ 32 | 0%{ 33 | transform: translateY(0); 34 | } 35 | 50% { 36 | transform: translateY(-125px); 37 | } 38 | 100% { 39 | opacity: 0; 40 | transform: translateY(-125px); 41 | } 42 | } -------------------------------------------------------------------------------- /Before & After Comparison/JavaScript Before & After Comparison.css: -------------------------------------------------------------------------------- 1 | body{ 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | } 7 | .container { 8 | position: relative; 9 | overflow: hidden; 10 | --width: 800px; 11 | --height: 400px; 12 | width: var(--width); 13 | height: var(--height); 14 | } 15 | .image { 16 | position: absolute; 17 | height: 100%; 18 | background: url("https://cn.opendesktop.org/img/c/7/4/1/c5a5f92b530de2cf2c18e917c8a51ac60cb6.jpg"); 19 | background-size: var(--width) var(--height); 20 | } 21 | .image:first-child{ 22 | right: 0; 23 | width: 100%; 24 | background-position: center left; 25 | } 26 | .image:last-child{ 27 | right: 0; 28 | width: calc( 100% - var(--x,50%)); 29 | background-position: center right; 30 | filter: grayscale(100%); 31 | box-shadow: inset 2px 0 0 #111, -2px 0 0 #111; 32 | } -------------------------------------------------------------------------------- /Growing Card Flip/Growing Card Flip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | Front 17 |
18 |
19 | Back 20 |
21 |
22 |
23 | 24 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /3D Box/3Dbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

truecodes.org

15 |

codeblogger

16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Users (Modal Box)/css/main.css: -------------------------------------------------------------------------------- 1 | #backWall { 2 | display: none; 3 | position: fixed; 4 | z-index: 1; 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | overflow: auto; 10 | background: rgba(0, 0, 0, 0.25); } 11 | 12 | #modalBox { 13 | display: none; 14 | text-align: center; 15 | background-color: #fff; 16 | z-index: 99; 17 | position: relative; 18 | top: 50%; 19 | left: 50%; 20 | transform: translate(-50%, -50%); 21 | box-shadow: 0px 0px 50px #262626; 22 | width: 400px; 23 | padding: 25px; } 24 | #modalBox .close { 25 | color: #aaaaaa; 26 | position: absolute; 27 | top: 5px; 28 | right: 25px; 29 | font-size: 30px; 30 | font-weight: bold; 31 | transition: .25s; } 32 | #modalBox .close:hover, #modalBox .close:focus { 33 | color: #000; 34 | text-decoration: none; 35 | cursor: pointer; 36 | transform: scale(1.5); 37 | color: red; } 38 | 39 | #more { 40 | font-size: 12px; } 41 | 42 | #img{ 43 | width: 100px; 44 | height: 100px; 45 | } -------------------------------------------------------------------------------- /Only Css Menu/only css menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
Home
15 |
16 |
17 |
Projects
18 |
19 |
20 |
Art
21 |
22 |
23 |
Social
24 |
25 |
26 |
Setup
27 |
28 |
29 |
Help
30 |
31 |
32 | 33 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Card Slide In Hover/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "DM Sans", sans-serif; 3 | background-color: #f2f5f7; 4 | } 5 | 6 | .card{ 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%,-50%); 11 | cursor: pointer; 12 | overflow: hidden; 13 | } 14 | 15 | .card-in{ 16 | width: 360px; 17 | height: 160px; 18 | border: 7.5px solid #262626; 19 | border-radius: 7.5px; 20 | } 21 | 22 | .card-text{ 23 | text-align: center; 24 | line-height: 160px; 25 | font-size: 40px; 26 | color: #262626; 27 | font-weight: bold; 28 | text-transform: uppercase; 29 | transition: 1s; 30 | } 31 | 32 | .card-background{ 33 | display: block; 34 | width: 362px; 35 | height: 162px; 36 | background: red; 37 | background-color: #262626; 38 | z-index: -1; 39 | transition: 1s; 40 | } 41 | 42 | .card:hover .card-background{ 43 | margin-top: -161px; 44 | transition: 1s; 45 | } 46 | 47 | .card:hover .card-text{ 48 | transition: 1s; 49 | color: #f2f5f7; 50 | text-shadow: 0px 0px 30px rgba(255,255,255,0.86); 51 | } -------------------------------------------------------------------------------- /Animation Button 2/animationRadioButton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |

animation radio button

13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Hover Effect 2/JShoverEffect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 |
JS
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Pomodora Timer/License.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Codeblogger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Quick Autocomplete/License.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Codeblogger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Rectangle Area and Circumference Calculation/Javascript Rectangle Area and Circumference Calculation.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0; 3 | margin: 0; 4 | background: #333; 5 | font-family: Verdana; 6 | font-weight: bold; 7 | } 8 | #container{ 9 | display: block; 10 | position: absolute; 11 | top: 50%; 12 | left: 50%; 13 | transform: translate(-50%,-50%); 14 | background: #b83c3c; 15 | padding: 20px; 16 | border-radius: 20px; 17 | box-shadow: 0px 0px 50px #000; 18 | } 19 | button{ 20 | background: #000000; 21 | border: none; 22 | border-radius: 20px; 23 | color: #fff; 24 | padding: 8px; 25 | transition: .5s; 26 | outline: none; 27 | cursor: pointer; 28 | } 29 | #res{ 30 | margin-left: 170px; 31 | } 32 | button:hover { 33 | background: #fff; 34 | color: #000; 35 | } 36 | #shortEdge{ 37 | margin-left: 20px; 38 | width: 200px; 39 | border: none; 40 | padding: 5px; 41 | font-weight: bold; 42 | } 43 | #longEdge { 44 | margin-left: 25px; 45 | width: 200px; 46 | border: none; 47 | padding: 5px; 48 | font-weight: bold; 49 | } 50 | h2{ 51 | text-align: center; 52 | } -------------------------------------------------------------------------------- /Before & After Comparison/JavaScript Before & After Comparison.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Accordion Menu 6/Accordion Menu 6.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu'); 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | display: flex; 6 | height: 100vh; 7 | justify-content: center; 8 | align-items: center; 9 | background: #eee; 10 | font-family: 'Ubuntu', sans-serif; 11 | } 12 | h2{ 13 | text-align: center; 14 | font-weight: bold; 15 | } 16 | .wrapper{ 17 | max-width: 500px; 18 | height: auto; 19 | } 20 | .wrap_title { 21 | width: 500px; 22 | height: 45px; 23 | line-height: 45px; 24 | border-radius: 30px 30px 0px 0px; 25 | text-align: center; 26 | background: #262626; 27 | color: #eee; 28 | font-weight: bold; 29 | cursor: pointer; 30 | } 31 | .wrap-text { 32 | padding: 10px 20px; 33 | border: 2px solid #262626; 34 | color: #262626; 35 | max-height: 0; 36 | opacity: 0; 37 | transition: .5s; 38 | } 39 | .wrap-text p{ 40 | transform: scale(0); 41 | transition: .5s; 42 | } 43 | .wrap.active .wrap-text { 44 | max-height: 200px; 45 | opacity: 1; 46 | margin-bottom: 20px; 47 | transition: .5s; 48 | } 49 | .wrap.active > .wrap-text > p { 50 | transform: scale(1); 51 | } -------------------------------------------------------------------------------- /Loding Animation/cssLodingAnimation.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | background: #252626; 3 | display: flex; 4 | height: 100vh; 5 | justify-content: center; 6 | align-items: center; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | .top { 11 | position: relative; 12 | display: inline-block; 13 | width: 50px; 14 | height: 50px; 15 | border-radius: 50%; 16 | margin: 30px; 17 | } 18 | .top.a1 , .top.a1:before{ 19 | background: #d21f1f; 20 | animation-delay: 0s; 21 | } 22 | .top.a2, .top.a2:before{ 23 | background: #69c820; 24 | animation-delay: 0.2s; 25 | } 26 | .top.a3, .top.a3:before{ 27 | background: #ceb32a; 28 | animation-delay: 0.4s; 29 | } 30 | .top.a4, .top.a4:before{ 31 | background: #306bb3; 32 | animation-delay: 0.6s; 33 | } 34 | .top:before{ 35 | content: ""; 36 | display: block; 37 | position: absolute; 38 | left: -5px; 39 | top: -5px; 40 | width: 60px; 41 | height: 60px; 42 | border-radius: 50%; 43 | animation: ani 2s infinite ease-in; 44 | } 45 | @keyframes ani{ 46 | 0%{ 47 | transform: scale(0.5); 48 | opacity: 1; 49 | } 50 | 100%{ 51 | transform: scale(2); 52 | opacity: 0; 53 | } 54 | } -------------------------------------------------------------------------------- /Animation Check/checkAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Checkboxes

14 |
15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 |

Radio Buttons

26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Quick Autocomplete/js/main.js: -------------------------------------------------------------------------------- 1 | const search = document.getElementById("search"); 2 | const matchList = document.getElementById("match-list"); 3 | 4 | const searchStates = async searchText => { 5 | const res = await fetch("../data/states.json"); 6 | const states = await res.json(); 7 | 8 | let matches = states.filter(state => { 9 | const regex = new RegExp(`^${searchText}`,"gi"); 10 | return state.name.match(regex) || state.abbr.match(regex); 11 | }) 12 | 13 | if(searchText.length === 0){ 14 | matches = []; 15 | matchList.innerHTML = ""; 16 | } 17 | 18 | outputHtml(matches); 19 | } 20 | 21 | const outputHtml = matches => { 22 | if(matches.length >0){ 23 | const html = matches.map(match => 24 | `
25 |

${match.name} (${match.abbr}) 26 | ${match.capital} 27 | Lat: ${match.lat} \ Long: ${match.long} 28 |

29 |
` 30 | ).join("") 31 | matchList.innerHTML = html; 32 | } 33 | } 34 | 35 | search.addEventListener("input", () => searchStates(search.value)); -------------------------------------------------------------------------------- /Library System/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 CodeBlogger 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/community/license/new?branch=master 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /JS CLASS - Login System/JS CLASS - Login System.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: url("https://images.pexels.com/photos/1896021/pexels-photo-1896021.jpeg?cs=srgb&dl=architecture-buildings-business-1896021.jpg&fm=jpg"); 3 | background-size: cover; 4 | } 5 | #login_table{ 6 | position: absolute; 7 | top: 50%; 8 | left: 50%; 9 | transform: translate(-50%,-50%); 10 | width: 400px; 11 | } 12 | input{ 13 | opacity: .5; 14 | } 15 | input:focus{ 16 | opacity: 1; 17 | } 18 | 19 | .modal { 20 | display: none; 21 | position: fixed; 22 | z-index: 1; 23 | padding-top: 100px; 24 | left: 0; 25 | top: 50px; 26 | width: 100%; 27 | height: 100%; 28 | overflow: auto; 29 | background-color: rgb(0,0,0); 30 | background-color: rgba(0,0,0,0.4); 31 | } 32 | 33 | .modal-content { 34 | background-color: #ccc; 35 | margin: auto; 36 | padding: 20px; 37 | border: 1px solid #888; 38 | width: 500px !important; 39 | text-align: center; 40 | font-size: 20px !important; 41 | } 42 | 43 | .close { 44 | color: #aaaaaa; 45 | float: right; 46 | font-size: 42px !important; 47 | font-weight: bold; 48 | } 49 | 50 | .close:hover, 51 | .close:focus { 52 | color: #000; 53 | text-decoration: none; 54 | cursor: pointer; 55 | } -------------------------------------------------------------------------------- /Growing Card Flip/Growing Card Flip.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background: #eee; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | .container{ 7 | font-family: Verdana; 8 | font-weight: bold; 9 | font-size: 75px; 10 | width: 400px; 11 | height: 250px; 12 | border-radius: 10px; 13 | perspective: 1400px; 14 | position: absolute; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%,-50%); 18 | } 19 | .card { 20 | position: relative; 21 | height: 100%; 22 | border-radius: 10px; 23 | width: 100%; 24 | transform-style: preserve-3d; 25 | transition-delay: 1s; 26 | transition: 1s ease-in-out; 27 | cursor: pointer; 28 | } 29 | .front, .back { 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | width: 100%; 34 | height: 100%; 35 | backface-visibility: hidden; 36 | border-radius: 10px; 37 | text-align: center; 38 | } 39 | .back { 40 | color: #fff; 41 | background: #bc2828; 42 | transform: rotateY(180deg); 43 | } 44 | .front { 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | background: #fff; 49 | color: #bc2828; 50 | } 51 | .card.active { 52 | transform: rotateY(180deg) rotateX(360deg) scale(2.5); 53 | 54 | } -------------------------------------------------------------------------------- /3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Alita: Battle Angel

15 |

16 | The movie has a February 14, 2019 release date directed 17 | by Robert Rodriguez, produced by James Cameron, starring 18 | Rosa Salazar as Alita, Eiza González as Nyssiana, Michelle 19 | Rodriguez as Gelda, Jennifer Connelly as Chiren, with 20 | Christoph Waltz as Dr. Dyson Ido, Jeff Fahey as McTeague, 21 | Ed Skrein as Zapan, Mahershala Ali as Vector, Casper Van 22 | Dien as Amok, Lana Condor as Koyomi and Jackie Earle Haley. 23 |

24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Card Flip 1/JavaScript Card Flip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |
TRUECODES
17 |
18 | 19 |
20 |
CODEBLOGGER
21 |
22 |
23 | 24 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Dark Light Menu/Dark Light Menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 | DARK 14 |
15 | LIGHT 16 |
17 |
18 | 25 |
26 | 27 | 28 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Array Accordion/Array Accordion.css: -------------------------------------------------------------------------------- 1 | body{ 2 | padding: 0; 3 | margin: 0; 4 | background: #333; 5 | } 6 | .container { 7 | width: 400px; 8 | height: 500px; 9 | margin: 50px auto; 10 | } 11 | h2 { 12 | font-family: 'AR CENA'; 13 | color: #ccc; 14 | text-transform: uppercase; 15 | font-size: 42px; 16 | text-align: center 17 | } 18 | .section { 19 | position: relative; 20 | height: 50px; 21 | text-align: center; 22 | line-height: 50px; 23 | background: #ffe725; 24 | margin: 5px; 25 | color: #262626; 26 | font-family: 'AR CENA'; 27 | font-weight: bold; 28 | transition: all 0.4s ease-in-out 0.15s; 29 | cursor: pointer; 30 | font-size: 20px; 31 | box-shadow: inset 0px 0px 20px #262626; 32 | } 33 | .item > .info { 34 | opacity: 0; 35 | transition: all 0.5s ease 0.3s; 36 | max-height: 0; 37 | } 38 | .section.active ~ .info { 39 | transition: all 0.4s ease-in-out 0.15s; 40 | opacity: 1; 41 | max-height: 100%; 42 | padding: 20px; 43 | background: #ccc; 44 | color: #262626; 45 | font-family: 'Segoe UI'; 46 | font-size: 15px; 47 | box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.5); 48 | } 49 | .section.active { 50 | border-radius: 30px 30px 0px 0px; 51 | margin:0; 52 | box-shadow: inset 0px 0px 20px #262626; 53 | } 54 | -------------------------------------------------------------------------------- /Users (Modal Box)/javascript/main.js: -------------------------------------------------------------------------------- 1 | let backWall = $("#backWall"); 2 | let modal = $("#modalBox"); 3 | 4 | $(".more").click(function(){ 5 | backWall.show(0); 6 | modal.show(500); 7 | }); 8 | 9 | $(".close").click(function(){ 10 | backWall.hide(0); 11 | modal.hide(0); 12 | }) 13 | window.onclick = function(event) { 14 | if (event.target == document.getElementById("backWall")) { 15 | backWall.hide(0); 16 | modal.hide(0); 17 | } 18 | }; 19 | 20 | let more = document.querySelectorAll(".more"); 21 | 22 | more.forEach( (x)=> x.addEventListener("click", function(){ 23 | var a = x.getAttribute("id"); 24 | console.log(a); 25 | let xmlRequest,obj; 26 | xmlRequest = new XMLHttpRequest(); 27 | xmlRequest.onreadystatechange = function(){ 28 | if(this.readyState === 4 && this.status === 200){ 29 | obj = JSON.parse(this.responseText); 30 | $("#fullName").text(obj[a]["fullName"]); 31 | $("#id").text(obj[a]["id"]); 32 | $("#age").text(obj[a]["age"]); 33 | $("#from").text(obj[a]["from"]); 34 | $("#job").text(obj[a]["job"]); 35 | var imageSource = obj[a]["image"]; 36 | console.log(imageSource); 37 | let profile_image = document.getElementById("img"); 38 | profile_image.setAttribute("src",imageSource); 39 | } 40 | } 41 | xmlRequest.open("GET","/javascript/info.json",true); 42 | xmlRequest.send(); 43 | })) -------------------------------------------------------------------------------- /Text Animation/cssTextAnimation.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | background: #262626; 4 | align-items: center; 5 | justify-content: center; 6 | font-family: 'Lucida Sans Unicode'; 7 | font-size: 40px; 8 | height: 100vh; 9 | overflow: hidden; 10 | color: #ff6a00 11 | } 12 | *{ box-sizing: border-box; } 13 | .container{ 14 | display: inline-block; 15 | } 16 | .end1, .middle1, .middle2{ 17 | display: inline-block; 18 | overflow:hidden; 19 | height: 1.5em; 20 | } 21 | .end2{ 22 | position:absolute; 23 | color:#ff6a00 24 | } 25 | .middle1, .middle2{ 26 | color: #cfcfcf 27 | } 28 | .middle1 { 29 | animation: ani1 5s infinite; 30 | animation-delay: -3s; 31 | max-width: 0; 32 | } 33 | .middle2 { 34 | animation: ani2 5s infinite; 35 | animation-delay: -3s; 36 | max-width: 0; 37 | } 38 | 39 | @keyframes ani1 { 40 | 0% { 41 | max-width: 500px; 42 | } 43 | 44 | 25% { 45 | max-width: 0; 46 | } 47 | 48 | 75% { 49 | max-width: 0; 50 | } 51 | 52 | 90% { 53 | max-width: 500px; 54 | } 55 | 56 | 100% { 57 | max-width: 500px; 58 | } 59 | } 60 | 61 | @keyframes ani2 { 62 | 0% { 63 | max-width: 0; 64 | } 65 | 66 | 25% { 67 | max-width: 0; 68 | } 69 | 70 | 50% { 71 | max-width: 500px; 72 | } 73 | 74 | 75% { 75 | max-width: 0; 76 | } 77 | 78 | 100% { 79 | max-width: 0; 80 | } 81 | } -------------------------------------------------------------------------------- /Card Flip 1/JavaScript Card Flip.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | height: 100%; 3 | margin: 0; 4 | } 5 | body{ 6 | background: #262626; 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | } 12 | .container{ 13 | position: relative; 14 | width: 225px; 15 | height: 350px; 16 | perspective:1000px; 17 | -webkit-perspective: 1000px; 18 | border-radius: 4px; 19 | } 20 | .card { 21 | width: 100%; 22 | height: 100%; 23 | position: absolute; 24 | -webkit-transform-style: preserve-3d; 25 | transform-style: preserve-3d; 26 | transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 27 | transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 28 | border-radius: 6px; 29 | box-shadow: 0 6px 16px rgba(0,0,0,.15); 30 | cursor: pointer; 31 | } 32 | .card div{ 33 | position: absolute; 34 | width: 100%; 35 | height: 100%; 36 | backface-visibility: hidden; 37 | -webkit-backface-visibility: hidden; 38 | border-radius: 6px; 39 | background: #fff; 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | font-size: 18px; 44 | font-family: Verdana; 45 | color: #262626; 46 | } 47 | .card .back { 48 | -webkit-transform: rotateX(180deg); 49 | transform: rotateX(180deg); 50 | } 51 | .container.active .card{ 52 | -webkit-transform: rotateX(180deg); 53 | transform: rotateX(180deg); 54 | } -------------------------------------------------------------------------------- /Quick Autocomplete/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Quick Autocomplete 16 | 17 | 18 | 19 |
20 |
21 |
22 |

23 | State Capital Lookp 24 |

25 |
26 | 28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Array.from Animation/Array.from Animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Array.from

16 | 17 | 18 |
19 |
20 | 21 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Animation - Nice Weather/cssNiceWeather.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Accordion Menu 4/Accordion Menu 4.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou'); 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | background: ; 6 | font-family: 'ZCOOL QingKe HuangYou', cursive; 7 | } 8 | .container{ 9 | width: 325px; 10 | margin: 50px auto; 11 | } 12 | .accordion { 13 | width: 100%; 14 | background: #00bcd4; 15 | padding: 15px; 16 | box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.25); 17 | color: #fff; 18 | font-size: 21px; 19 | text-indent: 10px; 20 | box-sizing: border-box; 21 | } 22 | .item { 23 | background: #fff; 24 | width: 100%; 25 | box-sizing: border-box; 26 | font-size: 18px; 27 | margin: 6px 0px; 28 | transition: .5s; 29 | } 30 | .section { 31 | position: relative; 32 | padding: 15px; 33 | color: #262626; 34 | cursor: pointer; 35 | border-bottom: 1.5px solid #ccc; 36 | } 37 | .info { 38 | width: 90%; 39 | color: #808080; 40 | max-height: 0; 41 | opacity: 0; 42 | transition: .5s; 43 | } 44 | .section:before { 45 | font-family: "Font Awesome 5 Free"; 46 | font-weight: 600; 47 | content: "\f105"; 48 | padding-right: 10px; 49 | transition: .5s; 50 | } 51 | .item.active > .info { 52 | max-height: 100%; 53 | margin-left: 10px; 54 | padding: 13px 10px 20px 10px; 55 | opacity: 1; 56 | } 57 | .item.active { 58 | box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50); 59 | transform: scale(1.05); 60 | margin-top: 8px; 61 | margin-bottom: 8px; 62 | } 63 | .item.active > .section:before{ 64 | font-family: "Font Awesome 5 Free"; 65 | font-weight: 600; 66 | content: "\f107"; 67 | } -------------------------------------------------------------------------------- /Accordion Menu 5/Accordion Menu 5.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 2 | body { 3 | background: #262626; 4 | height: 100vh; 5 | display: flex; 6 | justify-content: center; 7 | font-family: 'Roboto Condensed', sans-serif; 8 | overflow: hidden; 9 | } 10 | .container{ 11 | margin-top: 60px; 12 | width: 375px; 13 | height: 400px; 14 | } 15 | h2{ 16 | font-size: 30px; 17 | text-align: center; 18 | color: #eeeeee; 19 | font-weight: normal; 20 | } 21 | .accordion_Boxes{ 22 | position: relative; 23 | display: block; 24 | width: 100%; 25 | } 26 | .top { 27 | position: relative; 28 | width: 100%; 29 | height: 57px; 30 | line-height: 57px; 31 | background: #eeeeee; 32 | border-top: 1px solid rgba(0, 0, 0, 0.50); 33 | border-bottom: 1px solid rgba(0, 0, 0, 0.50); 34 | border-radius: 3px; 35 | font-size: 18px; 36 | cursor: pointer; 37 | } 38 | .top:before{ 39 | content: ""; 40 | width: 20px; 41 | height: 20px; 42 | border: none; 43 | background: #ccc; 44 | border-radius: 50%; 45 | margin-left: 20px; 46 | margin-right: 10px; 47 | margin-top: 17px; 48 | display: inline-block; 49 | box-shadow: inset 0px 0px 12.5px #262626; 50 | transition: .5s; 51 | } 52 | .top.active:before{ 53 | background: #386a26; 54 | } 55 | span{ 56 | position: absolute; 57 | top: 0px; 58 | } 59 | .bottom { 60 | display: block; 61 | background: #dedede; 62 | padding: 0; 63 | max-height: 0; 64 | opacity: 0; 65 | transition: .5s; 66 | } 67 | .top.active ~ .bottom{ 68 | padding: 25px; 69 | opacity: 1; 70 | max-height: 100%; 71 | } 72 | -------------------------------------------------------------------------------- /Hover Effect/css_hover_effect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

12

16 |

JUN

17 |
18 |
19 |

An Abstract Post Heading

20 |

Which is worse, that everyone has his price, or that the price is always so low.

21 |
22 |
23 |
24 |
25 |

16

26 |

JUN

27 |
28 |
29 |

Down with this sort of thing

30 |

I'm killing time while I wait for life to shower me with meaning and happiness.

31 |
32 |
33 |
34 |
35 |

20

36 |

JUN

37 |
38 |
39 |

The World Ended Yesterday

40 |

The only skills I have the patience to learn are those that have no real application in life.

41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Animation Button/animeBut.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 100vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | margin: 0; 7 | font-family: sans-serif; 8 | background: #262626; 9 | } 10 | .container { 11 | perspective:800px; 12 | } 13 | .toggle{ 14 | position:relative; 15 | border: solid 6px #8a3a00; 16 | border-radius:55px; 17 | transition: transform cubic-bezier(0,0,0.30,2) .4s; 18 | transform-style:preserve-3d; 19 | perspective:800px; 20 | } 21 | .toggle>input[type="radio"]{ 22 | display:none; 23 | } 24 | .toggle > #but1:checked ~ #flap{ 25 | transform:rotateY(-180deg); 26 | } 27 | .toggle > #but1:checked ~ #flap > .content{ 28 | transform:rotateY(-180deg) 29 | } 30 | .toggle > #but2:checked ~ #flap { 31 | transform: rotateY(0deg); 32 | } 33 | .toggle > label{ 34 | display:inline-block; 35 | min-width:170px; 36 | padding:30px; 37 | font-size:30px; 38 | text-align:center; 39 | color:#8a3a00; 40 | cursor:pointer; 41 | } 42 | .toggle > label, 43 | .toggle > #flap{ 44 | font-weight:bold; 45 | text-transform:capitalize; 46 | } 47 | .toggle > #flap{ 48 | position:absolute; 49 | top: calc(0px - 6px); 50 | left:50%; 51 | height:calc(100% + 12px); 52 | width:50%; 53 | display:flex; 54 | justify-content:center; 55 | align-items:center; 56 | font-size:30px; 57 | background:#8a3a00; 58 | border-top-right-radius:55px; 59 | border-bottom-right-radius:55px; 60 | transform-style:preserve-3d; 61 | transform-origin:left; 62 | transition: transform cubic-bezier(0.4,0,0.2,1) .5s; 63 | } 64 | .toggle > #flap > .content{ 65 | color:#262626; 66 | transition:transform 0s linear .25s; 67 | transform-style:preserve-3d; 68 | } 69 | 70 | -------------------------------------------------------------------------------- /Array.from Animation/Array.from Animation.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Fjalla+One'); 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Fjalla One', sans-serif; 6 | } 7 | .container{ 8 | position: absolute; 9 | top: 30%; 10 | left: 50%; 11 | transform: translate(-50%,-50%); 12 | text-align: center; 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | #text, button{ 17 | width: 200px; 18 | text-align: center; 19 | margin: 0 auto; 20 | } 21 | #text { 22 | border: 2px solid rgba(0, 0, 0, 0.5); 23 | border-radius: 20px 20px 0px 0px; 24 | outline: none; 25 | padding: 5px; 26 | font-size: 20px; 27 | font-family: 'Fjalla One', sans-serif; 28 | color: rgba(0, 0, 0, 0.6); 29 | } 30 | button { 31 | border: none; 32 | border-radius: 0px 0px 20px 20px; 33 | outline: none; 34 | padding: 7px; 35 | width: 214px; 36 | background: rgba(0, 0, 0, 0.5); 37 | font-family: 'Fjalla One', sans-serif; 38 | color: #eee; 39 | font-size: 20px; 40 | transition: .5s; 41 | cursor: pointer; 42 | } 43 | button:hover{ 44 | background: #262626; 45 | } 46 | .boxes { 47 | position: absolute; 48 | top: 210px; 49 | margin-top: 20px; 50 | width: 500px; 51 | height: auto; 52 | left: -125px; 53 | } 54 | .box { 55 | position: relative; 56 | float: left; 57 | padding: 5px 10px; 58 | color: rgba(0, 0, 0, 0.6); 59 | border: 2px solid rgba(0, 0, 0, 0.5); 60 | margin: 5px; 61 | font-size: 20px; 62 | cursor: pointer; 63 | transition: .5s; 64 | } 65 | h2 { 66 | font-size: 50px; 67 | color: rgba(0, 0, 0, 0.8); 68 | } 69 | .box:hover{ 70 | transform: scale(1.3); 71 | background: #262626; 72 | color: #eee; 73 | } -------------------------------------------------------------------------------- /Only Css Menu/only css menu.scss: -------------------------------------------------------------------------------- 1 | html, body{ 2 | padding: 0px; 3 | margin: 0px; 4 | font-family: Verdana, Geneva, Tahoma, sans-serif; 5 | color: #fff; 6 | height: 100%; 7 | 8 | .container{ 9 | max-width: 200px; 10 | background: #262626; 11 | margin: 40px auto; 12 | padding: 10px 0px 20px 0px; 13 | border: 1px solid #111; 14 | border-radius: 4px; 15 | box-shadow: 0px 4px 5px rgba(0,0,0,.75); 16 | 17 | .link{ 18 | font-size: 16px; 19 | font-weight: bold; 20 | text-align: center; 21 | position: relative; 22 | height: 40px; 23 | line-height: 40px; 24 | margin-top: 10px; 25 | overflow: hidden; 26 | width: 90%; 27 | margin-left: 5%; 28 | cursor: pointer; 29 | 30 | &:after{ 31 | content: ""; 32 | position: absolute; 33 | width: 40%; 34 | border-bottom: 1px solid rgba(255,255,255,.5); 35 | bottom: 50%; 36 | left: -100%; 37 | transition-delay: all .5s; 38 | transition: all .5s; 39 | } 40 | &:hover:after,.link.hover:after{ 41 | left:100%; 42 | } 43 | .text{ 44 | text-shadow:0px -40px 0px rgba(255, 255, 255, 1); 45 | transition:all 0.75s; 46 | transform:translateY(100%); 47 | transition-delay:all 0.25s; 48 | } 49 | } 50 | .link:hover .text, 51 | .link.hover .text{ 52 | text-shadow:0px -40px 0px rgba(255, 255, 255, 0); 53 | transform:translateY(0%) translateZ(0) scale(1.1); 54 | font-weight:600; 55 | } 56 | } 57 | 58 | 59 | } 60 | -------------------------------------------------------------------------------- /Rectangle Area and Circumference Calculation/Javascript Rectangle Area and Circumference Calculation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Calculating Rectangle Area and Circumference

14 |
15 |

16 | Short Edge 17 | 18 |

19 |
20 |
21 |

22 | Long Edge 23 | 24 |

25 |
26 | 27 | 28 |
29 | 30 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Tabs Styled 2/JavaScript Tabs Style 2.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 2 | body { 3 | background: #262626; 4 | display: flex; 5 | justify-content: center; 6 | margin-top: 150px; 7 | font-family: 'Roboto Condensed', sans-serif; 8 | } 9 | .container{ 10 | width: 330px; 11 | height: auto; 12 | border-radius: 8px 8px 0px 0px; 13 | } 14 | h2 { 15 | text-align: center; 16 | margin-bottom: 50px; 17 | color: #ccc; 18 | font-family: 'Roboto Condensed', sans-serif; 19 | font-weight: normal; 20 | text-shadow: 0px 20px 36px rgba(0, 0, 0, 0.45); 21 | font-size: 32px; 22 | } 23 | .tabs { 24 | position: relative; 25 | width: 100%; 26 | height: 40px; 27 | color: #ccc; 28 | border-radius: 8px 8px 0px 0px; 29 | } 30 | .tab { 31 | width: 110px; 32 | float: left; 33 | text-align: center; 34 | line-height: 40px; 35 | font-family: arial; 36 | cursor: pointer; 37 | transition: .3s; 38 | } 39 | .text_box { 40 | position: relative; 41 | display: block; 42 | width: 100%; 43 | } 44 | .text { 45 | position: absolute; 46 | padding: 25px; 47 | width: 100%; 48 | height: 120px; 49 | background: #d5d5d5; 50 | box-sizing: border-box; 51 | border-radius: 0px 0px 8px 8px; 52 | box-shadow: 0px 20px 36px rgba(0, 0, 0, 0.45); 53 | } 54 | .tab1,.tab2,.tab3 { 55 | background: #bc2626; 56 | } 57 | .tab1{border-radius:8px 0px 0px 0px} 58 | .tab3{border-radius:0px 8px 0px 0px} 59 | .tab1:hover,.tab2:hover,.tab3:hover{ 60 | transform: scaleY(1.1) translateY(-2px); 61 | box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.15); 62 | } 63 | .tab1.active, 64 | .tab2.active, 65 | .tab3.active{ 66 | transform: scaleY(1.3) translateY(-3px); 67 | background: #d5d5d5; 68 | color: #262626; 69 | box-shadow: 10px 0px 10px #262626; 70 | } -------------------------------------------------------------------------------- /Tab - Tesla Car Models/tesla-car.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

17 |
18 |

Tesla Model X

19 |
20 | 21 |
22 |

Tesla Model S

23 |
24 | 25 |
26 |

Tesla Model Y

27 |
28 | 29 |
30 |
Model X
31 |
Model S
32 |
Model Y
33 |
34 | 35 | 36 |
37 | 38 | 39 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /To Do List/ToDoList1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

Monday

17 |

Jan 27,2019

18 |
19 | 20 |
    21 |
  • 22 | 26 |
    • 27 |
  • 28 | 32 |
    • 33 |
  • 34 | 38 |
    • 39 |
  • 40 | 44 |
    • 45 |
46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /Tooltip/cssTooltip.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #333; 3 | overflow: hidden; 4 | } 5 | form { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | position: relative; 10 | width: 100%; 11 | height: 100vh; 12 | } 13 | input { 14 | border: none; 15 | width: 175px; 16 | height: 30px; 17 | outline: none; 18 | padding-left: 10px; 19 | font-weight: bold; 20 | font-family: Verdana; 21 | color: #ae3535; 22 | border-radius: 15px 0px 0px 15px; 23 | box-shadow: 0px 0px 30px #000; 24 | } 25 | .tooltip { 26 | position: relative; 27 | background: #ae3535; 28 | padding: 9px 15px; 29 | margin: 5px; 30 | font-size: 15px; 31 | border-radius: 100%; 32 | color: #FFF; 33 | font-family: Verdana; 34 | } 35 | .tooltip:before, 36 | .tooltip:after { 37 | position: absolute; 38 | content: ''; 39 | opacity: 0; 40 | transition: all 0.4s ease; 41 | } 42 | .tooltip:before { 43 | border-width: 10px 8px 0 8px; 44 | border-style: solid; 45 | border-color: #ae3535 transparent transparent transparent; 46 | top: -15px; 47 | transform: translateY(20px); 48 | } 49 | .tooltip:after { 50 | content: attr(data-tooltip); 51 | background: #ae3535; 52 | width: 160px; 53 | height: 40px; 54 | font-size: 12px; 55 | top: -75px; 56 | left: -10px; 57 | padding: 10px; 58 | border-radius: 5px; 59 | letter-spacing: 1px; 60 | transform: translateY(20px); 61 | box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); 62 | } 63 | .tooltip:hover::before, 64 | .tooltip:hover::after { 65 | opacity: 1; 66 | transform: translateY(-2px); 67 | } 68 | #anim:hover { 69 | animation: shake 400ms ease-in-out forwards; 70 | } 71 | 72 | @keyframes shake { 73 | 0% { 74 | transform: rotate(5deg); 75 | } 76 | 50% { 77 | transform: rotate(-5deg); 78 | } 79 | 70% { 80 | transform: rotate(8deg); 81 | } 82 | 100% { 83 | transform: rotate(0deg); 84 | } 85 | } 86 | 87 | -------------------------------------------------------------------------------- /Line Menu Animation/lineMenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
    22 |
  • HOME
    • 23 |
  • INSTAGRAM
    • 24 |
  • WEBPAGE
    • 25 |
  • GITHUB
    • 26 |
27 |
28 |
29 |
30 | 31 | 32 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /Pomodora Timer/css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAcA,IAAI;EACA,gBAAgB,EAfF,UAAgB;EAgB9B,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EAEb,eAAU;IACN,QAAQ,EAAE,QAAQ;IAElB,0BAAU;MACN,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,IAAI;MACT,KAAK,EAAE,KAAK;MACZ,MAAM,EAAC,KAAK;MACZ,MAAM,EAAE,MAAM;MAEd,iCAAM;QACF,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,UAAU,EAAC,WAAW;QACtB,QAAQ,EAAE,QAAQ;QAClB,aAAa,EAAE,IAAI;QAEnB,8CAAY;UACR,KAAK,EAAE,KAAK;UACZ,MAAM,EAAE,KAAK;UACb,UAAU,EAAE,WAAW;UACvB,MAAM,EAAE,kBAA2B;UAhCnD,QAAQ,EAAE,QAAQ;UAClB,GAAG,EAgC+B,GAAG;UA/BrC,IAAI,EA+BkC,GAAG;UA9BzC,SAAS,EAAE,qBAAoB;UA+Bf,aAAa,EAAE,GAAG;UAClB,OAAO,EAAE,EAAE;QAGf,+CAAa;UACT,UAAU,EAAE,uBAAuB;UACnC,iBAAiB,EAAE,cAAc;UACzB,SAAS,EAAE,cAAc;UACjC,wBAAwB,EAAE,OAAO;UACzB,gBAAgB,EAAE,OAAO;QAGrC,6CAAW;UA9CvB,QAAQ,EAAE,QAAQ;UAClB,GAAG,EA8C+B,GAAG;UA7CrC,IAAI,EA6CkC,GAAG;UA5CzC,SAAS,EAAE,qBAAoB;UA6Cf,UAAU,EAAE,MAAM;UAClB,WAAW,EApDN,IAAI;UAqDT,KAAK,EAzDX,OAAO;UA2DD,4DAAc;YACV,SAAS,EA1Dd,IAAI;YA2DC,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE,IAAI;YACZ,UAAU,EAAE,MAAM;YAClB,KAAK,EAhEf,OAAO;YAiEG,OAAO,EAAE,IAAI;YACb,0EAAa;cACT,KAAK,EAnEnB,OAAO;UAuED,oDAAM;YACF,SAAS,EArElB,KAAK;MA0ER,wCAAa;QACT,QAAQ,EAAE,QAAQ;QAElB,qDAAY;UACR,KAAK,EAAE,IAAI;UACX,MAAM,EAAE,IAAI;UACZ,UAAU,EAAE,WAAW;UACvB,aAAa,EAAE,GAAG;UAClB,MAAM,EAAE,kCAAwB;UAChC,MAAM,EAAE,OAAO;UACf,uDAAC;YACG,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,GAAG;UAGf,6DAAC;YACG,SAAS,EAAE,IAAI;QAI3B,gDAAO;UACH,QAAQ,EAAE,QAAQ;UAClB,IAAI,EAAE,GAAG;UAET,sDAAO;YACH,MAAM,EAAE,iBAAsB;QAGtC,8CAAK;UACD,QAAQ,EAAE,QAAQ;UAClB,IAAI,EAAE,GAAG;QAEb,mDAAU;UACN,QAAQ,EAAE,QAAQ;UAClB,KAAK,EAAE,KAAK;UACZ,MAAM,EAAE,KAAK;UACb,GAAG,EAAE,IAAI;UACT,IAAI,EAAE,GAAG;UACT,SAAS,EAAE,gBAAgB;UAC3B,UAAU,EAAE,WAAW;UACvB,aAAa,EAAE,GAAG;UAClB,MAAM,EAAE,kCAAwB;UAChC,MAAM,EAAE,OAAO;UACf,qDAAC;YACG,WAAW,EAAE,GAAG;YAChB,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,GAAG;UAGf,2DAAC;YACG,SAAS,EAAE,IAAI;QAI3B,6CAAI;UACA,QAAQ,EAAE,QAAQ;UAClB,GAAG,EAAE,GAAG;UACR,IAAI,EAAE,GAAG;UACT,SAAS,EAAE,qBAAoB;UAC/B,KAAK,EAxIX,OAAO", 4 | "sources": ["style.scss"], 5 | "names": [], 6 | "file": "style.css" 7 | } 8 | -------------------------------------------------------------------------------- /Animation Button/animeBut.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
true
22 | 23 |
24 |
25 | 26 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /Animation Button 2/animationRadioButton.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | padding:0; 4 | box-sizing:border-box; 5 | background:#262626; 6 | padding-bottom:10%; 7 | } 8 | 9 | h1{ 10 | text-align: center; 11 | margin: 20% 0 5%; 12 | font-family: 'AR DARLING'; 13 | text-transform: uppercase; 14 | font-size: 50px; 15 | color: #e4e4e4; 16 | } 17 | 18 | #radio_buttons{ 19 | position:relative; 20 | width:50%; 21 | margin:0 auto; 22 | } 23 | 24 | input[type="radio"]{ 25 | position:absolute; 26 | right:1000%; 27 | } 28 | 29 | label { 30 | float: left; 31 | width: 15%; 32 | padding-bottom: 15%; 33 | margin: 0 2.5%; 34 | background: rgba(0,0,0,.3); 35 | border-radius:20%; 36 | cursor:pointer; 37 | } 38 | 39 | #slider { 40 | position: absolute; 41 | left: 0%; 42 | top: 0%; 43 | width: 10%; 44 | padding-bottom: 10%; 45 | margin: 2.5% 0 0 5%; 46 | background: #e4e4e4 ; 47 | transition: transform 1s; 48 | border-radius: 50%; 49 | animation: .3s forwards ease-in-out; 50 | transition: 0.2s left .05s ease-in-out; 51 | } 52 | 53 | 54 | #input1:checked ~ #slider { 55 | animation-name: input1; 56 | left: 0; 57 | } 58 | 59 | #input2:checked ~ #slider { 60 | animation-name: input2; 61 | left: 20%; 62 | } 63 | 64 | #input3:checked ~ #slider { 65 | animation-name: input3; 66 | left: 40%; 67 | } 68 | 69 | #input4:checked ~ #slider { 70 | animation-name: input4; 71 | left: 60%; 72 | } 73 | 74 | #input5:checked ~ #slider { 75 | animation-name: input5; 76 | left: 80%; 77 | } 78 | @keyframes input1 { 79 | 30%, 70% { 80 | transform: scale(0.5); 81 | } 82 | } 83 | 84 | 85 | @keyframes input2 { 86 | 30%, 70% { 87 | transform: scale(0.5); 88 | } 89 | } 90 | @keyframes input3 { 91 | 30%, 70% { 92 | transform: scale(0.5); 93 | } 94 | } 95 | @keyframes input4 { 96 | 30%, 70% { 97 | transform: scale(0.5); 98 | } 99 | } 100 | @keyframes input5 { 101 | 30%, 70% { 102 | transform: scale(0.5); 103 | } 104 | } -------------------------------------------------------------------------------- /Dna Animation/DnaAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML - CSS - JS Projects 2 | 3 | 4 | 5 | **Project examples and code repository for those who are new to html, css and js and want to improve themselves.** 6 | > Note: All projects belong to me. 7 | 8 | 9 | - 3D Box 10 | - 3D Hover Box - Alita Card 11 | - Accordion Menu 1 12 | - Accordion Menu 2 13 | - Accordion Menu 3 14 | - Accordion Menu 4 15 | - Array Accordion 16 | - Responsive Accordion Slider 17 | - Bootstrap Sidebar Menu 18 | - Dark Light Menu 19 | - Line Menu Animation 20 | - 21 | - 22 | - 23 | - 24 | - 25 | - 26 | - 27 | - 28 | - 29 | - 30 | - 31 | - 32 | - 33 | - 34 | - 35 | - 36 | - 37 | - 38 | - 39 | - 40 | - 41 | - 42 | - 43 | - 44 | -------------------------------------------------------------------------------- /Tabs Styled 2/JavaScript Tabs Style 2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Tabs Styled

15 |
16 |
JavaScript
17 |
Python
18 |
CSS
19 |
20 | 21 |
22 |
23 | JavaScript is one of the most popular and dynamic programming 24 | languages used for creating and developing websites. 25 |
26 |
27 | Python is a highly used and all-purpose programming 28 | language which is dynamic in nature. 29 |
30 |
31 | Some of the elements which CSS has an impact on include 32 | font size, font style, the overall layout. 33 |
34 |
35 |
36 | 37 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Name Animation/cssNameAnimation.css: -------------------------------------------------------------------------------- 1 | body{ 2 | height:100%; 3 | margin:0; 4 | background-color:#1a1a1a; 5 | } 6 | 7 | .menu-place { 8 | position: absolute; 9 | top: 50%; 10 | right: 0; 11 | left: 0; 12 | width:300px; 13 | margin: 0 auto; 14 | transform: translateY(-50%); 15 | } 16 | .menu-but{ 17 | width:300px; 18 | overflow:hidden; 19 | } 20 | #menu-check { 21 | display: none; 22 | } 23 | .menu-label{ 24 | position:relative; 25 | display:block; 26 | height:100px; 27 | cursor:pointer; 28 | } 29 | .menu-label:before, .menu-label:after, .menu-text{ 30 | position:absolute; 31 | left:0; 32 | width:100%; 33 | height:20px; 34 | background:#c95900 35 | } 36 | .menu-label:before, .menu-label:after{ 37 | content:""; 38 | transition: 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) left; 39 | } 40 | .menu-label:before{ 41 | top:0; 42 | } 43 | .menu-label:after{ 44 | top:40px 45 | } 46 | .menu-text{ 47 | top:80px 48 | } 49 | .menu-text:before{ 50 | content:"TRUE CODES"; 51 | position:absolute; 52 | top:20px; 53 | right:0; 54 | left:0; 55 | color:#c95900; 56 | font-size:40px; 57 | font-weight:bold; 58 | font-family:sans-serif; 59 | text-align:center; 60 | } 61 | #menu-check:checked + .menu-label:before { 62 | left: -300px; 63 | } 64 | #menu-check:checked + .menu-label:after { 65 | left: 300px; 66 | } 67 | #menu-check:checked + .menu-label .menu-text:before { 68 | animation: moveUpThenDown 0.8s ease 0.2s forwards, 69 | shakeWhileMovingUp 0.8s ease 0.2s forwards, 70 | shakeWhileMovingDown 0.2s ease 0.8s forwards; 71 | } 72 | 73 | @keyframes moveUpThenDown 74 | { 75 | 0%{ top:0; } 76 | 50%{ top:-65px;} 77 | 100%{ top:-45px; } 78 | } 79 | 80 | @keyframes shakeWhileMovingUp 81 | { 82 | 0%{ transform: rotateZ(0); } 83 | 25%{ transform:rotateZ(-16deg); } 84 | 50%{ transform:rotateZ(0deg); } 85 | 75%{ transform:rotateZ(16deg); } 86 | 100%{ transform:rotateZ(0); } 87 | } 88 | @keyframes shakeWhileMovingDown 89 | { 90 | 0%{ transform:rotateZ(0); } 91 | 80%{ transform:rotateZ(4deg); } 92 | 90%{ transform:rotateZ(-4deg); } 93 | 100%{ transform:rotateZ(0); } 94 | } -------------------------------------------------------------------------------- /3D Box/3Dbox.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #262626; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | margin: 0 auto; 7 | height: 100vh; 8 | min-height: 600px; 9 | } 10 | #top { 11 | position: absolute; 12 | top: 25%; 13 | padding-bottom: 20px; 14 | border-bottom-color:#f0f0f0; 15 | border-bottom: 1px solid #ccc; 16 | text-align: center; 17 | } 18 | h2{ 19 | font-family: Verdana; 20 | font-size: 2em; 21 | color: #f0f0f0; 22 | } 23 | h4 { 24 | font-family: sans-serif; 25 | margin-bottom: 0px; 26 | color: #f0f0f0 27 | } 28 | h4 i{ 29 | margin-right:5px; 30 | } 31 | #container { 32 | height: 100vh; 33 | width: 50vw; 34 | min-height: 600px; 35 | min-width: 300px; 36 | position: absolute; 37 | display: flex; 38 | flex-direction: column; 39 | align-items: center; 40 | justify-content: center; 41 | perspective: 500px; 42 | } 43 | #box * { 44 | width: 150px; 45 | height: 150px; 46 | backface-visibility:visible; 47 | position: absolute; 48 | margin: 0 auto; 49 | } 50 | 51 | #box { 52 | margin-top: 200px; 53 | transform-style: preserve-3d; 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | animation: skew 3s linear 0s infinite; 58 | } 59 | .face2 { 60 | transform: translateZ(-150px); 61 | } 62 | 63 | .face3 { 64 | transform: rotateX(90deg) translateZ(75px) translateY(-75px); 65 | } 66 | 67 | .face4 { 68 | transform: rotateX(90deg) translateZ(-75px) translateY(-75px); 69 | } 70 | 71 | .face5 { 72 | transform: rotateY(90deg) translateZ(-75px) translateX(75px); 73 | } 74 | 75 | .face6 { 76 | transform: rotateY(90deg) translateZ(75px) translateX(75px); 77 | } 78 | .color1 { 79 | background: linear-gradient(#ffffff, #f0f0f0, #eaeaea); 80 | opacity: 0.8; 81 | } 82 | .color2 { 83 | background: linear-gradient(#dbdbdb, #d2d2d2, #cecece); 84 | opacity: 0.8; 85 | } 86 | .color3 { 87 | background: linear-gradient(#d0d0d0, #c7c7c7, #c2c2c2); 88 | opacity: 0.8; 89 | } 90 | @keyframes skew { 91 | 0% { 92 | transform: rotateY(0deg) rotateZ(0deg); 93 | } 94 | 100% { 95 | transform: rotateY(360deg) rotateZ(360deg); 96 | } 97 | } -------------------------------------------------------------------------------- /Hover Effect 2/JShoverEffect.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | padding:0; 4 | } 5 | #container { 6 | display: block; 7 | position: fixed; 8 | width: 100%; 9 | height: 100%; 10 | background-color: #3c005b; 11 | background: -webkit-radial-gradient(center, ellipse cover, #4e4343 1%,#1a1a1a 100%); 12 | background: -moz-radial-gradient(center, ellipse cover, ##333333 1%,#0d0011 100%); 13 | } 14 | #bot-container { 15 | display: block; 16 | position: fixed; 17 | top: 50%; 18 | left: 50%; 19 | width: 34vh; 20 | height: 34vh; 21 | margin-left: -17vh; 22 | margin-top: -17vh; 23 | overflow: hidden; 24 | transition: background-color 500ms; 25 | cursor: pointer; 26 | } 27 | #text { 28 | position: absolute; 29 | left: 2vh; 30 | top: 2vh; 31 | width: 30vh; 32 | height: 30vh; 33 | background: linear-gradient(135deg, #333333 0%,#1a1a1a 100%); 34 | font-family: Trebuchet MS; 35 | font-size: 20vh; 36 | font-weight: bold; 37 | color: #aa9600; 38 | text-align: center; 39 | line-height: 30vh; 40 | } 41 | .loader { 42 | display: block; 43 | position: absolute; 44 | background-color: #aa9600; 45 | } 46 | .a1 { 47 | left: 2vh; 48 | top: 0; 49 | height: 2vh; 50 | width: 0; 51 | animation: ani1 1s linear forwards infinite; 52 | } 53 | .a2 { 54 | right: 0; 55 | top: 2vh; 56 | width: 2vh; 57 | height: 0; 58 | animation: ani2 1s linear forwards infinite; 59 | animation-delay: 0.5s; 60 | } 61 | .a3 { 62 | right: 2vh; 63 | bottom: 0; 64 | height: 2vh; 65 | width: 0; 66 | animation: ani3 1s linear forwards infinite; 67 | } 68 | .a4 { 69 | left: 0; 70 | bottom: 2vh; 71 | width: 2vh; 72 | height: 0; 73 | animation: ani4 1s linear forwards infinite; 74 | animation-delay: 0.5s; 75 | } 76 | @keyframes ani1{ 77 | 50%{width:32vh; margin-left:0;} 78 | 100%{margin-left:32vh;} 79 | } 80 | 81 | @keyframes ani2{ 82 | 50%{height:32vh; margin-top:0;} 83 | 100%{margin-top:32vh;} 84 | } 85 | 86 | @keyframes ani3{ 87 | 50%{width:32vh; margin-right:0;} 88 | 100%{margin-right:32vh;} 89 | } 90 | 91 | @keyframes ani4{ 92 | 50%{height:32vh; margin-bottom:0} 93 | 100%{margin-bottom:32vh;} 94 | } -------------------------------------------------------------------------------- /SCSS and JS Tabs/SCSS and JS Tabs.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato:400,700'); 2 | html{height: 100%;overflow: hidden;} 3 | body{ 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Lato', sans-serif; 7 | font-weight: 400; 8 | background: linear-gradient(to left top, #fff, #d9d9d9, #bfbfbf); 9 | } 10 | #container{ 11 | position: relative; 12 | margin: 50px auto; 13 | width: 600px; 14 | #top{ 15 | ul{ 16 | display: block; 17 | list-style: none; 18 | margin: 0; 19 | padding: 0; 20 | li{ 21 | display: inline; 22 | margin-right: 5px; 23 | padding: 10px; 24 | cursor: pointer; 25 | border-radius: 3px; 26 | color: #262626; 27 | font-weight: 700; 28 | transition: .5s; 29 | &:hover{ 30 | background: #262626; 31 | color: #ccc; 32 | } 33 | } 34 | } 35 | } 36 | #bottom{ 37 | perspective: 1000px; 38 | div{ 39 | position: absolute; 40 | margin-top: 5px; 41 | padding: 20px 50px; 42 | box-sizing: border-box; 43 | background: #262626; 44 | color: #ccc; 45 | opacity: 0; 46 | transition:1s transform; 47 | transform-origin: top center; 48 | transform: rotateX(-40deg); 49 | h2{ 50 | font-weight: 700; 51 | font-size: 23px; 52 | } 53 | p{ 54 | font-weight: 400; 55 | font-size: 15px; 56 | } 57 | &:after{ 58 | content: ""; 59 | position: absolute; 60 | top: 14px; 61 | left: 12px; 62 | width: 95%; 63 | height: 90%; 64 | border: 2px solid #ccc; 65 | border-radius: 3px; 66 | } 67 | } 68 | .active{ 69 | opacity: 1; 70 | transform-origin: top center; 71 | transform: rotateX(0deg); 72 | } 73 | } 74 | } 75 | 76 | -------------------------------------------------------------------------------- /Eyes Animation/cssEyesAnimation.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:#ff6600; 3 | } 4 | .wrapper{ 5 | position:absolute; 6 | top:50%; 7 | left:50%; 8 | transform: translate(-50%,-50%); 9 | width:600px; 10 | display:flex; 11 | justify-content:space-between; 12 | transform:translate3d(-50%,-70%,0); 13 | } 14 | .nose{ 15 | content:""; 16 | position:absolute; 17 | top:50%; 18 | left:50%; 19 | width:130px; 20 | height:130px; 21 | background: #000; 22 | border-radius:50%; 23 | transform:translate(-50%,-50%); 24 | } 25 | .eye{ 26 | position:relative; 27 | width:260px; 28 | height:260px; 29 | background:#fff; 30 | border-radius:50%; 31 | animation:eye 3.5s infinite; 32 | } 33 | .left span, 34 | .right span{ 35 | content:""; 36 | position:relative; 37 | top:-30%; 38 | left:10%; 39 | display:block; 40 | width:65%; 41 | height:2%; 42 | background:#000; 43 | border: 20px solid #000; 44 | border-radius:50%; 45 | } 46 | .left span:before, 47 | .right span:before{ 48 | content: ""; 49 | position:absolute; 50 | top:10px; 51 | left: -12px; 52 | width:210px; 53 | height:30px; 54 | background: #ff6600; 55 | border-radius:70% 70% 0 0; 56 | } 57 | .eye::after{ 58 | content:""; 59 | position:absolute; 60 | top:50%; 61 | left:50%; 62 | width:65%; 63 | height:65%; 64 | background:#000; 65 | border-radius:50%; 66 | transform:translate3d(-50%,-50%,0); 67 | animation: eyes 17.5s infinite; 68 | } 69 | @keyframes eye{ 70 | 0%, 71 | 5%, 72 | 30%, 73 | 37%, 74 | 100%{ 75 | height: 260px; 76 | transform:translate3d(0,0,0); 77 | } 78 | 3%, 79 | 33%{ 80 | height: 0; 81 | transform: translate3d(0, -50%, 0); 82 | } 83 | } 84 | @keyframes eyes{ 85 | 0%, 86 | 20%{ 87 | transform:translate3d(-100%,-50%,0) 88 | } 89 | 21%, 90 | 40%, 91 | 81%, 92 | 100%{ 93 | transform: translate3d(-50%,-50%,0); 94 | } 95 | 41%, 96 | 60%{ 97 | transform:translate3d(0,-50%,0); 98 | } 99 | 61%, 100 | 80%{ 101 | transform:translate3d(-50%,0,0) 102 | } 103 | } 104 | 105 | -------------------------------------------------------------------------------- /Tabs Styled 1/JavaScript Tabs Styled 1.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700'); 2 | @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700'); 3 | html { 4 | height: 100%; 5 | font-family: 'Open Sans Condensed', sans-serif; 6 | user-select: none; 7 | } 8 | body { 9 | background: linear-gradient(to bottom right, #3D4258, #6670A0, #9688B4); 10 | } 11 | .container{ 12 | position: absolute; 13 | top: 25%; 14 | left: 50%; 15 | transform: translate(-50%,-25%); 16 | width: 500px; 17 | height: auto; 18 | } 19 | h2{ 20 | text-align: center; 21 | color: #dedede; 22 | font-size: 40px; 23 | text-shadow: 0px 15px 15px #262626; 24 | } 25 | .main_box{ 26 | position: relative; 27 | margin-top: 50px; 28 | } 29 | #tabs { 30 | width: 100%; 31 | height: 30px; 32 | font-family: sans-serif; 33 | font-size: 15px; 34 | } 35 | .tab { 36 | text-align: center; 37 | padding: 8px 10px 8px 10px; 38 | margin-right: 10px; 39 | background: #444c6a; 40 | border: 1px solid #dedede; 41 | border-radius: 30px; 42 | float: left; 43 | color: #dedede; 44 | transition: .5s; 45 | cursor: pointer; 46 | box-sizing: border-box; 47 | } 48 | .tab:hover{ 49 | background: #3D4258; 50 | transform: scale(1.1); 51 | box-shadow: 0px 5px 25px rgba(0, 0, 0, 85); 52 | } 53 | #text_box{ 54 | margin-top: 25px; 55 | clear: both; 56 | width: 100%; 57 | } 58 | .text { 59 | position: absolute; 60 | width: 100%; 61 | background: linear-gradient(45deg,#dedede,#d8d8d8); 62 | border-radius: 1px; 63 | padding: 20px 30px; 64 | box-sizing: border-box; 65 | box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5); 66 | font-size: 16px; 67 | font-family: 'Open Sans Condensed', sans-serif; 68 | font-weight: bold; 69 | color: rgba(5, 0, 0, 0.65); 70 | transition: .5s ease-in-out; 71 | } 72 | #tab1{ opacity: 1; } 73 | #tab2, #tab3 { opacity: 0; } 74 | .tab_1.active { 75 | background: #3D4258; 76 | transform: scale(1.1); 77 | box-shadow: 0px 5px 25px rgba(0, 0, 0, 85); 78 | } 79 | .tab_2.active { 80 | background: #3D4258; 81 | transform: scale(1.1); 82 | box-shadow: 0px 5px 25px rgba(0, 0, 0, 85); 83 | } 84 | .tab_3.active { 85 | background: #3D4258; 86 | transform: scale(1.1); 87 | box-shadow: 0px 5px 25px rgba(0, 0, 0, 85); 88 | } -------------------------------------------------------------------------------- /Diffirent Animation/cssDiffirentAnimation.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin:0; 3 | padding:0; 4 | display:flex; 5 | justify-content:center; 6 | align-items:center; 7 | min-height:100vh; 8 | background:#262626; 9 | } 10 | .container{ 11 | width:400px; 12 | height:400px; 13 | position:relative; 14 | transform-style:preserve-3d; 15 | animation: ani 15s linear infinite; 16 | } 17 | .container .block { 18 | width: 100%; 19 | height: 100%; 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | transform-style: preserve-3d; 24 | } 25 | .container .block:nth-child(1) { 26 | transform: translate3d(0,0,-100px) rotateX(0deg); 27 | } 28 | .container .block:nth-child(2){ 29 | transform:translate3d(-100px,0,0) rotateX(90deg) 30 | } 31 | .container .block:nth-child(3){ 32 | transform:translate3d(0,-100px,0) rotateX(90deg) rotateZ(90deg) ; 33 | } 34 | .container .block:nth-child(4){ 35 | transform:translate3d(100px,100px,0) rotateX(-90deg) rotateZ(-90deg) ; 36 | } 37 | .box { 38 | position: absolute; 39 | background:#ffd800 40 | top: 50%; 41 | left: 0; 42 | transform-style: preserve-3d; 43 | } 44 | .box:nth-child(1){ 45 | transform: rotateY(0deg) translateX(0px) translateZ(0px); 46 | } 47 | .box:nth-child(2){ 48 | transform: rotateY(90deg) translateX(170px) translateZ(-170px) 49 | } 50 | .box:nth-child(3){ 51 | transform: rotateY(180deg) translateX(0px) translateZ(340px) 52 | } 53 | .box:nth-child(4){ 54 | transform: rotateY(270deg) translateX(-170px) translateZ(-170px) 55 | } 56 | .shape { 57 | width: 400px; 58 | height: 60px; 59 | } 60 | .side { 61 | position: absolute; 62 | top: 0; 63 | left: 0; 64 | width: 100%; 65 | height: 100%; 66 | background:rgba(255,255,255,.4); 67 | box-shadow: inset 0 0 100px rgba(0,0,0,.5); 68 | transition: .5s; 69 | } 70 | .side:nth-child(1){ 71 | transform:rotateX(0deg) translate3d(0,0,30px) ; 72 | } 73 | .side:nth-child(2){ 74 | transform:rotateX(90deg) translate3d(0,0,30px) ; 75 | } 76 | .side:nth-child(3){ 77 | transform:rotateX(180deg) translate3d(0,0,30px) ; 78 | } 79 | .side:nth-child(4){ 80 | transform:rotateX(270deg) translate3d(0,0,30px) ; 81 | } 82 | @keyframes ani{ 83 | 0% { 84 | transform: perspective(1000px) rotateX(15deg) rotateY(15deg); 85 | } 86 | 100% { 87 | transform: perspective(1000px) rotateX(375deg) rotateY(375deg); 88 | } 89 | } -------------------------------------------------------------------------------- /Responsive Accordion Slider/Responsive Accordion Slider.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Fjalla+One'); 2 | @import url('https://fonts.googleapis.com/css?family=Exo+2'); 3 | html { 4 | height: 100vh; 5 | } 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-family: 'Fjalla One', sans-serif; 10 | background: linear-gradient( #fff, #fefefe, #eaeaea); 11 | } 12 | .accordion { 13 | max-width: 990px; 14 | background: rgba(0, 0, 0, 0.10); 15 | height: 300px; 16 | margin: 20px auto; 17 | display: flex; 18 | box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47); 19 | flex-direction: row; 20 | cursor: pointer; 21 | margin-bottom: 100px; 22 | } 23 | .box { 24 | position: relative; 25 | height: 100%; 26 | flex: 1; 27 | background-position: left; 28 | background-size: cover; 29 | transition: .7s; 30 | box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47); 31 | } 32 | .box:hover{ 33 | flex: 7; 34 | height: 400px; 35 | } 36 | .a1 { 37 | background-image: url("https://images.pexels.com/photos/1516654/pexels-photo-1516654.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); 38 | } 39 | .a2 { 40 | background-image: url("https://images.pexels.com/photos/1056555/pexels-photo-1056555.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") 41 | } 42 | .a3 { 43 | background-image: url("https://images.pexels.com/photos/129207/pexels-photo-129207.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); 44 | color: #fff; 45 | } 46 | .a4 { 47 | background-image: url("https://images.pexels.com/photos/240038/pexels-photo-240038.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); 48 | color: #fff; 49 | } 50 | .a5 { 51 | background-image: url("https://images.pexels.com/photos/220994/pexels-photo-220994.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); 52 | } 53 | p { 54 | font-weight: normal; 55 | font-family: 'Exo 2', sans-serif; 56 | } 57 | .text { 58 | position: absolute; 59 | bottom: 0; 60 | opacity: 0; 61 | padding: 10px; 62 | } 63 | .box:hover .text{ 64 | opacity:1; 65 | } 66 | h1 { 67 | width: 250px; 68 | text-align: center; 69 | margin: 100px auto 20px auto; 70 | } 71 | @media screen and (max-width: 800px){ 72 | body{ 73 | margin: 0; 74 | } 75 | .accordion { 76 | flex-direction: column; 77 | height: 700px; 78 | box-shadow: none; 79 | } 80 | .box { 81 | box-shadow: none; 82 | } 83 | .box:hover { 84 | flex: 7; 85 | } 86 | } -------------------------------------------------------------------------------- /Animation Check/checkAnimation.css: -------------------------------------------------------------------------------- 1 | .inputGroup{ 2 | background:#fff; 3 | display:block; 4 | margin:10px 0px; 5 | position:relative 6 | } 7 | label{ 8 | padding:12px 30px; 9 | width:100%; 10 | display:block; 11 | text-align:center; 12 | color:#3c454c; 13 | cursor:pointer; 14 | position:relative; 15 | z-index:2; 16 | transition: color .2s ease-in; 17 | overflow:hidden; 18 | } 19 | label::before{ 20 | content:""; 21 | width:10px; 22 | height:10px; 23 | border-radius:50%; 24 | position:absolute; 25 | background:#5562eb; 26 | top:50%; 27 | left:50%; 28 | transform:translate(-50%,-50%) scale3d(1,1,1); 29 | transition:all .3s cubic-bezier(.4,0,.2,1); 30 | opacity:0; 31 | z-index:-1; 32 | } 33 | label::after{ 34 | content:""; 35 | width:32px; 36 | height:32px; 37 | border:2px solid #d1d7dc; 38 | background-color:#fff; 39 | background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E "); 40 | background-repeat:no-repeat; 41 | background-position:2px 3px; 42 | border-radius:50%; 43 | z-index:2; 44 | position:absolute; 45 | right:30px; 46 | top:50%; 47 | transform:translateY(-50%); 48 | cursor:pointer; 49 | transition:all .2s ease-in; 50 | } 51 | 52 | input:checked ~ label{ 53 | color:#fff; 54 | } 55 | 56 | input:checked ~ label::before{ 57 | transform:translate(-50%,-50%) scale3d(56,56,1); 58 | opacity:1; 59 | } 60 | 61 | input:checked ~ label::after{ 62 | background-color:#54e0c7; 63 | border-color:#53e0c7; 64 | } 65 | 66 | input{ 67 | width:32px; 68 | height:32px; 69 | order:1; 70 | z-index:2; 71 | position:absolute; 72 | right:30px; 73 | top:50%; 74 | transform:translateY(-50%); 75 | cursor:pointer; 76 | visibility:hidden 77 | } 78 | 79 | .form{ 80 | padding:0 16px; 81 | max-width:550px; 82 | margin:50px auto; 83 | font-size:18px; 84 | font-weight:600; 85 | line-height:36px; 86 | } 87 | body { 88 | background-color: #D1D7DC; 89 | font-family: 'Fira Sans', sans-serif; 90 | } 91 | *, 92 | *::before, 93 | *::after{ 94 | box-sizing:inherit; 95 | } 96 | 97 | html{ 98 | box-sizing:border-box; 99 | } 100 | -------------------------------------------------------------------------------- /Hypotenuse calculation/HypotenuseCalculation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 57 | 58 | 59 | 60 |
61 |

Hypotenuse calculation

62 |
63 |
64 | 65 |
66 | 67 | 68 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /Tab - Tesla Car Models/tesla-car.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 2 | body{ 3 | padding: 0; 4 | margin: 0; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | font-family: 'Roboto Condensed', sans-serif; 10 | 11 | 12 | .container{ 13 | width: 750px; 14 | height: 450px; 15 | position: relative; 16 | border-radius: 20px; 17 | overflow: hidden; 18 | box-shadow: 0px 40px 100px 3px black; 19 | } 20 | .model_x{ 21 | position: absolute; 22 | background: url("https://4-images.motorcar.com/portals/blog/motorcar/244/1024/1903.jpg"); 23 | background-size: cover; 24 | width: 100%; 25 | height: 90%; 26 | } 27 | .model_s{ 28 | position: absolute; 29 | background: url("https://www.tesla.com/tesla_theme/assets/img/models/v1.0/section-hero-background.jpg?20180111"); 30 | background-size: cover; 31 | width: 100%; 32 | height: 90%; 33 | background-position: center; 34 | } 35 | .model_y{ 36 | position: absolute; 37 | background: url("https://cdn.motor1.com/images/mgl/LEKjM/s3/tesla-model-y.jpg"); 38 | background-size: cover; 39 | width: 100%; 40 | height: 90%; 41 | } 42 | h2{ 43 | position: absolute; 44 | bottom: 30px; 45 | left: 30px; 46 | color: #fff; 47 | text-shadow: 0px 0px 5px black; 48 | } 49 | .bottom_tabs{ 50 | position: absolute; 51 | bottom: 0px; 52 | width: 100%; 53 | 54 | div{ 55 | position: relative; 56 | display: block; 57 | float: left; 58 | width: 33.333%; 59 | text-align: center; 60 | background: #fff; 61 | padding: 15px; 62 | box-sizing: border-box; 63 | color: #262626; 64 | font-weight: bold; 65 | cursor: pointer; 66 | transition: .5s; 67 | 68 | &:hover{ 69 | background: rgb(226, 226, 226); 70 | } 71 | &:before{ 72 | content: ""; 73 | position: absolute; 74 | top:0; 75 | left: 0; 76 | width: 100%; 77 | height: 0px; 78 | background:#262626; 79 | transition: .5s; 80 | } 81 | &.active:before{ 82 | height: 50px; 83 | opacity: .7; 84 | } 85 | } 86 | } 87 | } -------------------------------------------------------------------------------- /Radar/radar.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | background-image: url("http://wallpaper-gallery.net/images/hd-digital-wallpaper/hd-digital-wallpaper-17.jpg"); 5 | background-repeat: no-repeat; 6 | background-size: auto; 7 | background-position-y: -120px; 8 | background-color: #262626; 9 | } 10 | #container{ 11 | width: 500px; 12 | height:500px; 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | margin-left: -250px; 17 | margin-top: -250px; 18 | } 19 | #out { 20 | width: 400px; 21 | height: 400px; 22 | position: absolute; 23 | top: 50%; 24 | left: 50%; 25 | transform: translate(-50%,-50%); 26 | border: 10px solid #3cf92f; 27 | border-radius: 50%; 28 | box-shadow: 0px 0px 25px 20px #000; 29 | background: none; 30 | animation: a .3s screen infinite; 31 | } 32 | #in { 33 | width: 300px; 34 | height: 300px; 35 | position: absolute; 36 | top: 50%; 37 | left: 50%; 38 | transform: translate(-50%,-50%); 39 | border: 5px solid #3cf92f; 40 | border-radius: 50%; 41 | box-shadow: 0px 0px 25px 20px #000; 42 | } 43 | #radar { 44 | width: 350px; 45 | height: 0px; 46 | background: #3ed50f; 47 | position: absolute; 48 | top: 50%; 49 | left: 50%; 50 | margin-top: 0; 51 | margin-left: -175px; 52 | animation: ani 3s infinite; 53 | box-shadow: 20px 0px 15px 10px #3cf92f; 54 | z-index: -1; 55 | } 56 | @keyframes ani{ 57 | 0% { 58 | transform: rotate(0deg); 59 | } 60 | 10% { 61 | opacity: .2 62 | } 63 | 20% { 64 | opacity: .8 65 | } 66 | 30% { 67 | opacity: .2 68 | } 69 | 40% { 70 | opacity: .8 71 | } 72 | 50% { 73 | opacity: .2 74 | } 75 | 60% { 76 | opacity: .8 77 | } 78 | 70% { 79 | opacity: .2 80 | } 81 | 80% { 82 | opacity: .8 83 | } 84 | 30% { 85 | opacity: .2 86 | } 87 | 100% { 88 | transform: rotate(360deg); 89 | opacity: 1; 90 | } 91 | } 92 | @keyframes a { 93 | 0% { 94 | background: none; 95 | } 96 | 100% { 97 | background: #094d00; 98 | } 99 | } 100 | #coordinate { 101 | color: #ccc; 102 | position: absolute; 103 | bottom: -50px; 104 | left: 50%; 105 | transform: translateX(-50%); 106 | font-family: Consolas; 107 | font-size: 30px; 108 | padding: 5px; 109 | border: 10px solid #094d00; 110 | border-radius: 8px; 111 | background: rgba(0, 0, 0, 0.85); 112 | box-shadow: 0px 0px 50px #000; 113 | } -------------------------------------------------------------------------------- /Prime Number/primeNumber.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 61 | 62 | 63 | 64 |
65 |

prime number?

66 | 67 |
68 |
69 |
70 | 71 | 72 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu'); 2 | html{height: 100%;} 3 | body{ 4 | padding:0; 5 | margin: 0; 6 | background: linear-gradient(#262626,#b2ad7f ); 7 | font-family: 'Ubuntu', sans-serif; 8 | 9 | .image{ 10 | width: 500px; 11 | height: 280px; 12 | margin: 150px auto; 13 | perspective: 1000px; 14 | 15 | .box{ 16 | display: block; 17 | width: 100%; 18 | height: 100%; 19 | background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://images5.alphacoders.com/984/984310.jpg"); 20 | background-size: 0,cover; 21 | transform-style: preserve-3d; 22 | transition: all 0.5s; 23 | 24 | &:hover{ 25 | transform: rotateX(80deg); 26 | transform-origin: bottom; 27 | } 28 | 29 | &:after{ 30 | content: ""; 31 | position: absolute; 32 | left: 0; 33 | bottom: 0; 34 | width: 100%; 35 | height: 36px; 36 | background: inherit; 37 | background-size: cover, cover; 38 | background-position: bottom; 39 | transform: rotateX(90deg); 40 | transform-origin: bottom 41 | } 42 | 43 | &:before{ 44 | content: ""; 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | width: 100%; 49 | height: 100%; 50 | background: rgba(0, 0, 0, 0.5); 51 | box-shadow: 0px 0px 100px 50px rgba(0,0,0,.5); 52 | transition: all .5s; 53 | opacity: .15; 54 | transform: rotateX(95deg) translateZ(-80px) scale(0.75); 55 | transform-origin: bottom; 56 | 57 | } 58 | 59 | &:hover:before{ 60 | opacity: 1; 61 | box-shadow: 0px 0px 25px 25px rgba(0,0,0,.5); 62 | transform: rotateX(0) translateZ(-60px) scale(.85); 63 | } 64 | } 65 | 66 | .text{ 67 | position: absolute; 68 | width: 90%; 69 | height: 100%; 70 | top: 50%; 71 | left: 50%; 72 | 73 | transform: translate(-50%,-50%); 74 | text-align: center; 75 | color: #eee; 76 | h2{ 77 | color: #262626; 78 | text-decoration: underline; 79 | } 80 | } 81 | 82 | } 83 | } -------------------------------------------------------------------------------- /JavaScript To Do List/JavaScript To Do List.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 8 | 9 | 10 | 11 |
12 |

TO DO LIST

13 |
14 |
15 | 16 |
17 | 18 |
19 |
20 |
Örnek kutu
21 |
22 |
23 |
24 | 25 | 26 | 27 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /JS Promise Login System/JS Promise Login System.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

LOGIN SYSTEM

21 | 22 | 23 | 24 |
25 |
26 | 27 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Accordion Menu 2/Accordion Menu 2.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Hind:300,400'); 2 | 3 | html{ 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | margin: 0; 8 | padding: 0; 9 | font-family: "Hind" , sans-serif; 10 | background: #fff; 11 | color: #4d5974; 12 | display: flex; 13 | display: -webkit-box; 14 | display: -webkit-flex; 15 | display: -ms-flexbox; 16 | min-height: 100vh; 17 | } 18 | .container { 19 | margin: 0 auto; 20 | padding: 4rem; 21 | width: 48rem; 22 | } 23 | h3 { 24 | font-size: 1.75rem; 25 | color: #373d51; 26 | padding: 1.3rem; 27 | margin: 0; 28 | } 29 | .accordion a { 30 | position: relative; 31 | display: -webkit-box; 32 | display: -webkit-flex; 33 | display: -ms-flexbox; 34 | display: flex; 35 | -webkit-box-orient: vertical; 36 | -webkit-box-direction: normal; 37 | -webkit-flex-direction: column; 38 | -ms-flex-direction: column; 39 | flex-direction: column; 40 | width: 100%; 41 | padding: 1rem 3rem 1rem 1rem; 42 | color: #7288a2; 43 | font-size: 1.15rem; 44 | font-weight: 400; 45 | border-bottom: 1px solid #e5e5e5; 46 | } 47 | .accordion a::after { 48 | font-family: "Font Awesome 5 Free"; 49 | font-weight: 600; 50 | content: "\f067"; 51 | position: absolute; 52 | float: right; 53 | right: 1rem; 54 | font-size: 1rem; 55 | color: #7288a2; 56 | padding: 5px; 57 | width: 20px; 58 | height: 20px; 59 | -webkit-border-radius: 50%; 60 | -moz-border-radius: 50%; 61 | border-radius: 50%; 62 | border: 1px solid #7288a2; 63 | text-align: center; 64 | 65 | } 66 | .accordion a:hover, 67 | .accordion a:hover::after { 68 | cursor: pointer; 69 | color: #03b5d2; 70 | } 71 | .accordion a:hover::after { 72 | border: 1px solid #03b5d2; 73 | } 74 | .accordion a.active { 75 | color: #03b5d2; 76 | border-bottom: 1px solid #03b5d2; 77 | } 78 | .accordion a.active::after { 79 | font-family: "Font Awesome 5 Free"; 80 | font-weight: 600; 81 | content: "\f068"; 82 | color: #03b5d2; 83 | border: 1px solid #03b5d2; 84 | } 85 | .accordion .info { 86 | opacity: 0; 87 | padding: 0 1rem; 88 | max-height: 0; 89 | border-bottom: 1px solid #e5e5e5; 90 | overflow: hidden; 91 | clear: both; 92 | -webkit-transition: all 0.2s ease 0.15s; 93 | -o-transition: all 0.2s ease 0.15s; 94 | transition: all 0.2s ease 0.15s; 95 | } 96 | 97 | .accordion .info p { 98 | font-size: 1rem; 99 | font-weight: 300; 100 | } 101 | 102 | .accordion .info.active { 103 | opacity: 1; 104 | padding: 1rem; 105 | max-height: 100%; 106 | -webkit-transition: all 0.35s ease 0.15s; 107 | -o-transition: all 0.35s ease 0.15s; 108 | transition: all 0.35s ease 0.15s; 109 | } -------------------------------------------------------------------------------- /Find The Largest And Smallest Number/Find the largest and smallest number on an array.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | page 6 | 7 | 57 | 58 | 59 | 60 |
61 |

Find the largest and smallest number on an array

62 | 63 |
64 | 65 | 66 |
67 | 68 | 69 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /Accordion Menu 5/Accordion Menu 5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Accordion Menu 5

15 |
16 | 17 | 18 |
19 |
20 | What is HTML ? 21 |
22 |
23 | HTML is a computer language devised to allow 24 | website creation. These websites can then be viewed 25 | by anyone else connected to the Internet. It is relatively 26 | easy to learn, with the basics being accessible to most 27 | people in one sitting; and quite powerful in what it allows 28 | you to create. 29 |
30 |
31 | 32 | 33 |
34 |
35 | What is CSS ? 36 |
37 |
38 | CSS is the language for describing the presentation 39 | of Web pages, including colors, layout, and fonts. 40 | It allows one to adapt the presentation to different 41 | types of devices, such as large screens, small screens, 42 | or printers. 43 |
44 |
45 | 46 | 47 |
48 |
49 | What is JS ? 50 |
51 |
52 | JavaScript is a scripting language used to 53 | create and control dynamic website content—but 54 | that might not make a lot of sense if you’re new 55 | to tech. 56 |
57 |
58 | 59 |
60 |
61 | 62 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /Accordion Menu 4/Accordion Menu 4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
Accordion Menu 4
15 | 16 | 17 |
18 |
Read me
19 |
20 | Click on an item to open. Click on its header or the list header to close. 21 |
22 |
23 | 24 | 25 |
26 |
Read me too
27 |
28 | Add the class 'arrows' to nav.accordion to add dropdown arrows. 29 |
30 |
31 | 32 | 33 |
34 |
Item 3
35 |
36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, 37 | sed do eiusmod tempor incididunt ut labore et dolore magna 38 | aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor 39 | pretium viverra suspendisse potenti. 40 |
41 |
42 | 43 | 44 |
45 |
Item 4
46 |
47 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, 48 | sed do eiusmod tempor incididunt ut labore et dolore magna 49 | aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor 50 | pretium viverra suspendisse potenti. 51 |
52 |
53 | 54 | 55 |
56 |
Item 5
57 |
58 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, 59 | sed do eiusmod tempor incididunt ut labore et dolore magna 60 | aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor 61 | pretium viverra suspendisse potenti. 62 |
63 |
64 | 65 |
66 | 67 | 68 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /factorial calculation/factorial calculation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TrueCodes 6 | 7 | 64 | 65 | 66 | 67 |
68 |

factorial calculation

69 | 70 | 71 |
72 | 73 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /Responsive Accordion Slider/Responsive Accordion Slider.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Accordion Slider

14 | 15 |
16 | 17 | 18 |
19 |
20 |
21 |

Lorem Ipsum

22 |

23 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 24 | Vestibulum iaculis nisl sed dictum aliquam. 25 |

26 |
27 |
28 |
29 | 30 | 31 |
32 |
33 |
34 |

Lorem Ipsum

35 |

36 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 37 | Vestibulum iaculis nisl sed dictum aliquam. 38 |

39 |
40 |
41 |
42 | 43 | 44 |
45 |
46 |
47 |

Lorem Ipsum

48 |

49 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 50 | Vestibulum iaculis nisl sed dictum aliquam. 51 |

52 |
53 |
54 |
55 | 56 | 57 |
58 |
59 |
60 |

Lorem Ipsum

61 |

62 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 63 | Vestibulum iaculis nisl sed dictum aliquam. 64 |

65 |
66 |
67 |
68 | 69 | 70 |
71 |
72 |
73 |

Lorem Ipsum

74 |

75 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. 76 | Vestibulum iaculis nisl sed dictum aliquam. 77 |

78 |
79 |
80 |
81 | 82 |
83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /Array Card Flip/JavaScript Array Card Flip.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=ZCOOL+QingKe+HuangYou'); 2 | html,body{ 3 | margin: 0; 4 | } 5 | body { 6 | background: url("js.jpg"); 7 | background-size: cover; 8 | position:absolute; 9 | top: 50%; 10 | left: 40%; 11 | transform: translate(-40%,-50%); 12 | font-family: 'ZCOOL QingKe HuangYou', cursive; 13 | } 14 | .container{ 15 | position: relative; 16 | width: 250px; 17 | height: 525px; 18 | perspective:1000px; 19 | -webkit-perspective: 1000px; 20 | border-radius: 4px; 21 | overflow: hidden; 22 | } 23 | h2{ 24 | color: #ccc; 25 | font-weight: normal; 26 | text-align: center; 27 | font-size: 30px; 28 | word-spacing: 5px; 29 | line-height: 36px; 30 | } 31 | .card { 32 | width: 225px; 33 | height: 350px; 34 | position: absolute; 35 | -webkit-transform-style: preserve-3d; 36 | transform-style: preserve-3d; 37 | transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 38 | transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 39 | border-radius: 6px; 40 | box-shadow: 0 6px 16px rgba(0,0,0,.15); 41 | cursor: pointer; 42 | transform: translateX(12.5px) translateY(5px); 43 | } 44 | .card div { 45 | position: absolute; 46 | width: 100%; 47 | height: 100%; 48 | backface-visibility: hidden; 49 | -webkit-backface-visibility: hidden; 50 | border-radius: 6px; 51 | background: linear-gradient(to bottom right, #272e41, #15243b, #060d1d); 52 | display: flex; 53 | justify-content: center; 54 | align-items: center; 55 | font-family: Verdana; 56 | color: #ccc; 57 | } 58 | .card .back { 59 | -webkit-transform: rotateX(180deg); 60 | transform: rotateX(180deg); 61 | padding-left: 5px; 62 | padding-right: 5px; 63 | } 64 | .card.active { 65 | -webkit-transform: rotateX(180deg) translateX(12.5px) translateY(5px); 66 | transform: rotateX(180deg) translateX(12.5px) translateY(5px); 67 | } 68 | .fas{ 69 | position: absolute; 70 | z-index: 99; 71 | bottom: 10px; 72 | color: #ccc; 73 | font-size: 24px; 74 | } 75 | .front { 76 | font-size: 25px; 77 | } 78 | .back.word1_back{ 79 | font-family: Verdana 80 | } 81 | #back_arrow { 82 | left: 50px; 83 | cursor: pointer; 84 | transition: .5s; 85 | } 86 | #back_arrow:hover{ transform:scale(1.2)} 87 | #next_arrow { 88 | right: 50px; 89 | cursor: pointer; 90 | } 91 | #cardBox_2{ 92 | margin-left: 275px 93 | } 94 | #cardBox_3{ 95 | margin-left: 550px; 96 | } 97 | #cardBox_4{ 98 | margin-left: 825px; 99 | } 100 | #cardBox_5 { 101 | margin-left: 1100px; 102 | } 103 | #cardBox_6 { 104 | margin-left: 1375px; 105 | } 106 | #cardBox_7 { 107 | margin-left: 1650px; 108 | } 109 | -------------------------------------------------------------------------------- /Hover Effect/css_hover_effect.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | background: #333; 5 | height: 100vh; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | font-family: Verdana; 10 | } 11 | #leftBox, 12 | #midBox, 13 | #rightBox{ 14 | display:block; 15 | width:300px; 16 | height:400px; 17 | margin:10px; 18 | float:left; 19 | position:relative; 20 | padding:5px; 21 | overflow:hidden; 22 | box-shadow:0px 0px 35px 5px rgba(0, 0, 0, 0.72); 23 | } 24 | #date{ 25 | display:block; 26 | position:absolute; 27 | right:30px; 28 | line-height:0px; 29 | text-align:center; 30 | padding:5px; 31 | margin-top:-5px; 32 | background:#fff; 33 | color:#262626; 34 | font-weight:bold; 35 | transition:.5s; 36 | } 37 | #day{ 38 | margin-top:10px; 39 | font-size:20px; 40 | } 41 | #month{ 42 | font-size:12px; 43 | margin-top:-2px; 44 | } 45 | #text{ 46 | display:block; 47 | position:absolute; 48 | bottom:10px; 49 | width:85%; 50 | left:50%; 51 | transform:translateX(-50%); 52 | } 53 | #text h3{ 54 | font-size:18px; 55 | color:#fff; 56 | text-shadow:0px 0px 20px #000; 57 | } 58 | #text p{ 59 | font-size:14px; 60 | color:#fff; 61 | text-shadow:0px 0px 20px #000; 62 | } 63 | #leftBox::before, 64 | #midBox::before, 65 | #rightBox::before { 66 | content:""; 67 | background-size: cover; 68 | color: #fff; 69 | opacity: 0; 70 | width: 100%; 71 | height: 100%; 72 | background: rgba(156, 76, 0, 0.85); 73 | position: absolute; 74 | top: 0; 75 | left: 0; 76 | transition: .5s; 77 | } 78 | #leftBox:hover::before, 79 | #midBox:hover::before, 80 | #rightBox:hover::before{ 81 | opacity:100; 82 | transition:.5s; 83 | } 84 | #leftBox:hover > #date, 85 | #midBox:hover > #date, 86 | #rightBox:hover > #date{ 87 | transform:translateY(-50px); 88 | transition:.5s; 89 | } 90 | #leftBox:hover > #text h3, 91 | #leftBox:hover > #text p, 92 | #midBox:hover > #text h3, 93 | #midBox:hover > #text p, 94 | #rightBox:hover > #text h3, 95 | #rightBox:hover > #text p{ 96 | display: none; 97 | } 98 | #leftBox { 99 | background-image: url(https://images.unsplash.com/photo-1547586696-31bfb413bdf1?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); 100 | background-position: center; 101 | background-size: cover; 102 | } 103 | #midBox { 104 | background-image: url(https://images.unsplash.com/photo-1547596876-524cee55d611?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80); 105 | background-position: center; 106 | background-size: cover; 107 | } 108 | #rightBox { 109 | background-image: url(https://images.unsplash.com/photo-1547586717-7ac67acce008?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); 110 | background-position: center; 111 | background-size: cover; 112 | } 113 | -------------------------------------------------------------------------------- /Dark Light Menu/Dark Light Menu.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | height: 100vh; 8 | background: #202028; 9 | overflow: hidden; 10 | transition: .5s; 11 | } 12 | .container { 13 | color: #e7e7e7; 14 | width: 50px; 15 | height: 100px; 16 | background: #000; 17 | border-radius: 125px; 18 | position: absolute; 19 | top: 30%; 20 | left: 50%; 21 | transform: translateY(-50% ); 22 | } 23 | .container .button{ 24 | width: 40px; 25 | height: 40px; 26 | border-radius: 50%; 27 | position: absolute; 28 | top: 7px; 29 | left: 5.7px; 30 | background: #fff; 31 | transition: .5s; 32 | } 33 | .dark { 34 | position: relative; 35 | top: -25px; 36 | left: 1px; 37 | font-size: 16px; 38 | font-weight: bold; 39 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 40 | font-weight: bold; 41 | color: #e7e7e7; 42 | } 43 | .light { 44 | position: relative; 45 | top: 85px; 46 | left: 1px; 47 | font-size: 16px; 48 | font-weight: bold; 49 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 50 | font-weight: bold; 51 | color: #e7e7e7; 52 | } 53 | .menu { 54 | display: flex; 55 | justify-content: center; 56 | } 57 | ul{ 58 | display: flex; 59 | list-style: none; 60 | } 61 | a { 62 | text-decoration: none; 63 | text-transform: uppercase; 64 | color: #e7e7e7; 65 | position: relative; 66 | font-size: 18px; 67 | margin-left: 8px; 68 | margin-right: 8px; 69 | font-weight: bold; 70 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif 71 | } 72 | a:before{ 73 | content: ""; 74 | position: absolute; 75 | width: 100%; 76 | height: 100%; 77 | padding: 5px; 78 | top: -5px; 79 | left: -5px; 80 | transform: scale(0); 81 | background: #a43333; 82 | z-index: -1; 83 | border-radius: 10px; 84 | } 85 | a:hover:before { 86 | opacity: 1; 87 | transition: 0.5s transform cubic-bezier(0,.44,.3,1.47); 88 | transform: scale(1); 89 | } 90 | ul .active { 91 | color: #a43333; 92 | } 93 | ul .active:hover:before { 94 | opacity: 0; 95 | } 96 | .light-theme { 97 | background: #e7e7e7; 98 | color: #262626; 99 | } 100 | .light-theme .container { 101 | background: #a43333; 102 | } 103 | .light-theme .container .button { 104 | transform: translateY(46px); 105 | } 106 | .light-theme a { 107 | color: #262626; 108 | } 109 | .light-theme .dark, .light-theme .light{ 110 | color: #a43333; 111 | font-weight: bold; 112 | transition: .5s; 113 | } 114 | .light-theme ul .active{ 115 | background: #a43333; 116 | padding: 7px; 117 | border-radius: 8px; 118 | color: #e7e7e7; 119 | margin-top: -8px; 120 | transition: .5s; 121 | } -------------------------------------------------------------------------------- /Dna Animation/DnaAnimation.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #262626; 3 | } 4 | 5 | .all { 6 | display: flex; 7 | justify-content: space-between; 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%, -50%); 12 | } 13 | 14 | .container { 15 | height: 120px; 16 | margin: 0 20px; 17 | background-color: blue; 18 | position: relative; 19 | } 20 | 21 | .container .circle { 22 | width: 20px; 23 | height: 20px; 24 | border-radius: 50%; 25 | position: absolute; 26 | left: calc(50% - 5px); 27 | top: 0; 28 | } 29 | 30 | .container .circle:nth-child(1) { 31 | top: 0; 32 | animation: anim_a 2s infinite ease-in-out; 33 | background-color: #ff0000; 34 | } 35 | 36 | .container .circle:nth-child(2) { 37 | top: calc(100% - 5px); 38 | transform: scale(1.5); 39 | animation: anim_b 2s infinite ease-in-out; 40 | background-color: #e1e1e1; 41 | } 42 | 43 | @keyframes anim_a { 44 | 0% { 45 | top: 0; 46 | z-index: 50; 47 | } 48 | 49 | 20% { 50 | transform: scale(1.5); 51 | } 52 | 53 | 50% { 54 | top:100%; 55 | } 56 | 57 | 50.1% { 58 | z-index: 0; 59 | } 60 | 61 | 75% { 62 | transform: scale(0.8); 63 | z-index: 0; 64 | } 65 | 66 | 100% { 67 | top: 0; 68 | z-index: 2; 69 | } 70 | } 71 | 72 | @keyframes anim_b { 73 | 0% { 74 | top: calc(100% - 5px); 75 | z-index: 1; 76 | } 77 | 78 | 25% { 79 | transform: scale(0.8); 80 | } 81 | 82 | 50% { 83 | top: 0; 84 | } 85 | 86 | 50.1% { 87 | z-index: 2; 88 | } 89 | 90 | 80% { 91 | transform: scale(1.5); 92 | z-index: 2; 93 | } 94 | 95 | 100% { 96 | top: calc(100% - 5px); 97 | z-index: 0; 98 | } 99 | } 100 | 101 | .container:nth-child(2) .circle { 102 | animation-delay: -0.1s; 103 | } 104 | 105 | .container:nth-child(3) .circle { 106 | animation-delay: -0.2s; 107 | } 108 | 109 | .container:nth-child(4) .circle { 110 | animation-delay: -0.3s; 111 | } 112 | 113 | .container:nth-child(5) .circle { 114 | animation-delay: -0.4s; 115 | } 116 | 117 | .container:nth-child(6) .circle { 118 | animation-delay: -0.5s; 119 | } 120 | 121 | .container:nth-child(7) .circle { 122 | animation-delay: -0.6s; 123 | } 124 | 125 | .container:nth-child(8) .circle { 126 | animation-delay: -0.7s; 127 | } 128 | 129 | .container:nth-child(9) .circle { 130 | animation-delay: -0.8s; 131 | } 132 | 133 | .container:nth-child(10) .circle { 134 | animation-delay: -0.9s; 135 | } 136 | 137 | .container:nth-child(11) .circle { 138 | animation-delay: -1s; 139 | } 140 | 141 | .container:nth-child(12) .circle { 142 | animation-delay: -1.1s; 143 | } 144 | -------------------------------------------------------------------------------- /Users (Modal Box)/javascript/info.json: -------------------------------------------------------------------------------- 1 | { 2 | "furkan" : { 3 | "fullName" : "Furkan Gulsen", 4 | "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png", 5 | "id" : 1, 6 | "age" : 21, 7 | "from" : "TURKEY", 8 | "job" : "Software Engineer" 9 | }, 10 | "Jacob" : { 11 | "fullName" : "Jacob Allen", 12 | "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png", 13 | "id" : 2, 14 | "age" : 28, 15 | "from" : "FRANCE", 16 | "job" : "Math Engineer" 17 | }, 18 | "maria" : { 19 | "fullName" : "Maria Quenn", 20 | "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub", 21 | "id" : 3, 22 | "age" : 32, 23 | "from" : "ITALY", 24 | "job" : "Computer Engineer" 25 | }, 26 | "jack" : { 27 | "fullName" : "Jack Jones", 28 | "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png", 29 | "id" : 4, 30 | "age" : 26, 31 | "from" : "CANADA", 32 | "job" : "industrial engineer" 33 | }, 34 | "harry" : { 35 | "fullName" : "Harry Williams", 36 | "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png", 37 | "id" : 5, 38 | "age" : 34, 39 | "from" : "USA", 40 | "job" : "architect" 41 | }, 42 | "charlie" : { 43 | "fullName" : "Charlie Brown", 44 | "image" : "https://i.pinimg.com/originals/d1/1a/45/d11a452f5ce6ab534e083cdc11e8035e.png", 45 | "id" : 6, 46 | "age" : 23, 47 | "from" : "GERMANY", 48 | "job" : "designer" 49 | }, 50 | "emily" : { 51 | "fullName" : "Emily Taylor", 52 | "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub", 53 | "id" : 7, 54 | "age" : 36, 55 | "from" : "CHINA", 56 | "job" : "electrical engineer" 57 | }, 58 | "ava" : { 59 | "fullName" : "Ava Davies", 60 | "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub", 61 | "id" : 8, 62 | "age" : 25, 63 | "from" : "TURKEY", 64 | "job" : "construction engineer" 65 | }, 66 | "jessica" : { 67 | "fullName" : "Jessica Wilson", 68 | "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub", 69 | "id" : 9, 70 | "age" : 27, 71 | "from" : "FRANCE", 72 | "job" : "Cyber security expert" 73 | }, 74 | "isabella" : { 75 | "fullName" : "Isabella Evans", 76 | "image" : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMihDVsW4ZtPNVa-Ru5LHIPwUFLlDqpqPtgVwT4uXuZyTIH-ub", 77 | "id" : 10, 78 | "age" : 29, 79 | "from" : "RUSSIA", 80 | "job" : "designer" 81 | } 82 | } -------------------------------------------------------------------------------- /Accordion Menu 6/Accordion Menu 6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Accordion Menu

15 | 16 | 17 |
18 |
WRAP ONE
19 |
20 |

21 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 22 | Mollitia autem quasi inventore unde nobis voluptatibus 23 | illum quae rerum laudantium minima, excepturi quis maiores. 24 | Eaque quae, nam delectus explicabo, deserunt ipsum! 25 |

26 |
27 |
28 | 29 | 30 |
31 |
WRAP TWO
32 |
33 |

34 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 35 | Mollitia autem quasi inventore unde nobis voluptatibus 36 | illum quae rerum laudantium minima, excepturi quis maiores. 37 | Eaque quae, nam delectus explicabo, deserunt ipsum! 38 |

39 |
40 |
41 | 42 | 43 |
44 |
WRAP THREE
45 |
46 |

47 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 48 | Mollitia autem quasi inventore unde nobis voluptatibus 49 | illum quae rerum laudantium minima, excepturi quis maiores. 50 | Eaque quae, nam delectus explicabo, deserunt ipsum! 51 |

52 |
53 |
54 | 55 | 56 |
57 |
WRAP FOUR
58 |
59 |

60 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 61 | Mollitia autem quasi inventore unde nobis voluptatibus 62 | illum quae rerum laudantium minima, excepturi quis maiores. 63 | Eaque quae, nam delectus explicabo, deserunt ipsum! 64 |

65 |
66 |
67 | 68 |
69 | 70 | 71 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /Rock Paper Scissors/taskagıtmakas.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | background: #ededed; 5 | font-family: Verdana; 6 | width:100%; 7 | } 8 | #container { 9 | position: absolute; 10 | top: 50%; 11 | left: 50%; 12 | transform: translate(-50%,-50%); 13 | } 14 | #topBox{ 15 | width:425px; 16 | margin:0 auto; 17 | } 18 | #tas, #kagit, #makas { 19 | display: block; 20 | float: left; 21 | width: 120px; 22 | height: 150px; 23 | border: 2px solid #333; 24 | margin: 5px; 25 | } 26 | #image1 { 27 | width: 100%; 28 | height: 81%; 29 | background: url(tas.png); 30 | background-position: center; 31 | background-repeat: no-repeat; 32 | background-size: cover; 33 | } 34 | #image2 { 35 | width: 100%; 36 | height: 81%; 37 | background: url(kagit.png); 38 | background-position:center; 39 | background-repeat:no-repeat; 40 | background-size:cover; 41 | } 42 | #image3 { 43 | width: 100%; 44 | height: 81%; 45 | background: url(makas.png); 46 | background-position: center; 47 | background-repeat: no-repeat; 48 | background-size: cover; 49 | } 50 | #tas p, #kagit p, #makas p{ 51 | text-align:center; 52 | padding:0; 53 | margin:5px; 54 | } 55 | #botBox { 56 | width:800px; 57 | height: 300px; 58 | border: 2px solid #333; 59 | margin-top:170px; 60 | } 61 | #left { 62 | display: block; 63 | width: 395px; 64 | float: left; 65 | height: 100%; 66 | } 67 | #right { 68 | display: block; 69 | float: right; 70 | width: 395px; 71 | height: 100%; 72 | } 73 | .player{ 74 | font-family: Verdana; 75 | font-weight:bold; 76 | color:#ff7c2b; 77 | text-shadow:0px 0px 1px #000; 78 | margin-left:100px; 79 | } 80 | #leftPhoto { 81 | width: 200px; 82 | height: 200px; 83 | position:absolute; 84 | top:250px; 85 | background-position: center; 86 | background-repeat: no-repeat; 87 | background-size: cover; 88 | margin-left:50px; 89 | border:2px solid #262626; 90 | border-radius:20px; 91 | } 92 | #rightPhoto { 93 | width: 200px; 94 | height: 200px; 95 | position: absolute; 96 | top: 250px; 97 | background-position: center; 98 | background-repeat: no-repeat; 99 | background-size: cover; 100 | margin-left: 50px; 101 | border: 2px solid #262626; 102 | border-radius: 20px; 103 | } 104 | .result{ 105 | width:200px; 106 | height:50px; 107 | margin:0 auto; 108 | border:2px solid #262626; 109 | } 110 | .py1 { 111 | float: left; 112 | width: 50%; 113 | height: 100%; 114 | background: #116900; 115 | color: #fff; 116 | line-height: 45px; 117 | text-align: center; 118 | font-size:24px; 119 | } 120 | .py2 { 121 | float: right; 122 | width: 50%; 123 | height: 100%; 124 | background: #7c1200; 125 | color: #fff; 126 | line-height: 45px; 127 | text-align: center; 128 | font-size: 24px; 129 | } 130 | #secim1, #secim2{ 131 | margin-left:125px; 132 | font-family:sans-serif 133 | } -------------------------------------------------------------------------------- /To Do List/ToDoList1.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600); 2 | body,html{ 3 | padding: 0; 4 | margin: 0; 5 | background: #000000; 6 | } 7 | .container { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | width: 400px; 12 | height: 400px; 13 | margin-left: -200px; 14 | margin-top: -200px; 15 | border-radius: 10px; 16 | box-shadow: 4px 8px 20px rgba(0,0,0,0.1); 17 | overflow: hidden; 18 | color: #333; 19 | font-family: "Open Sans", sans-serif; 20 | background: #fda231; 21 | background: linear-gradient(45deg, #0074e8 0%, #009878 60%, #00dfd7 100%); 22 | } 23 | .center { 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate(-50%,-50%); 28 | -webkit-transform: translate(-50%,-50%); 29 | -moz-transform: translate(-50%,-50%); 30 | } 31 | .card{ 32 | background: white; 33 | color: #497081; 34 | padding: 10px 30px; 35 | border-radius: 5px; 36 | box-shadow: 2px 2px 14px rgba(0, 0, 0, .15); 37 | width: 180px; 38 | } 39 | .card-header{ 40 | text-align:center; 41 | padding: 10px 0px; 42 | border-bottom: 1px solid #ddd; 43 | } 44 | .card-header h2{ 45 | font-weight: 600; 46 | font-size: 1.2rem; 47 | margin: 4px auto; 48 | padding: 0; 49 | } 50 | .card-header p{ 51 | padding: 0 0 5px; 52 | margin: 4px auto; 53 | font-size: .8rem; 54 | } 55 | .card-list{ 56 | list-style: none; 57 | padding: 0; 58 | } 59 | .card li{ 60 | padding: 10px 0 15px; 61 | margin: 0; 62 | text-align: left; 63 | width: 100%; 64 | } 65 | .card-list li label{ 66 | cursor: pointer; 67 | font-size: 0.82rem; 68 | width: 100%; 69 | display: block 70 | } 71 | .card-list li label input{ 72 | float: right; 73 | opacity: 0; 74 | } 75 | .card-list li label span{ 76 | position: relative; 77 | display: block; 78 | transition: all 550ms ease-in-out; 79 | } 80 | .card-list li label input + span::after{ 81 | content: ""; 82 | display: block; 83 | border: 1px solid #497081; 84 | border-radius: 50%; 85 | width: 13px; 86 | height: 13px; 87 | position:absolute; 88 | right: 0; 89 | top: 1px; 90 | z-index: 10; 91 | transition: all 550ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 92 | transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); 93 | } 94 | .card-list li label input + span::before{ 95 | content: "✔"; 96 | display: block; 97 | font-size: 22px; 98 | height: 13px; 99 | width: 13px; 100 | position:absolute; 101 | right: -2px; 102 | top: -8px; 103 | z-index: 10; 104 | opacity: 0; 105 | } 106 | .card-list li label input:checked + span{ 107 | color: #ccc; 108 | transition: all 550ms ease-in-out; 109 | } 110 | .card-list li label input:checked + span::after{ 111 | opacity: 0; 112 | height: 17px; 113 | width: 17px; 114 | top: -2px; 115 | right: -2px; 116 | } 117 | .card-list li label input:checked + span::before { 118 | opacity: 1; 119 | transition: all 550ms ease-in-out; 120 | } -------------------------------------------------------------------------------- /Image Slider/Image Slider.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Fira+Sans'); 2 | body, html { 3 | padding: 0; 4 | margin: 0; 5 | background: #ececec; 6 | display: flex; 7 | height: 100vh; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | .picContainer { 12 | position: relative; 13 | width: 650px; 14 | height: 400px; 15 | border: 5px solid #262626; 16 | background: black; 17 | border-radius: 10px; 18 | box-shadow: 0px 50px 100px #262626; 19 | } 20 | img { 21 | width: 650px; 22 | height: 400px; 23 | transition: 1s; 24 | } 25 | .img { 26 | width: 650px; 27 | height: 400px; 28 | position: absolute; 29 | z-index: 0; 30 | transition: 1s; 31 | } 32 | .right { 33 | position: absolute; 34 | height: 100%; 35 | width: 60px; 36 | z-index: 99; 37 | cursor: pointer; 38 | color: #fff; 39 | transition: 1s; 40 | right:0; 41 | top:0; 42 | } 43 | .right:hover{ 44 | background: rgba(0, 0, 0, 0.25) 45 | } 46 | .right:before{ 47 | font-family: "Font Awesome 5 Free"; 48 | font-weight: 900; 49 | content: "\f105"; 50 | font-size: 50px; 51 | position: absolute; 52 | right: 0; 53 | top: 50%; 54 | transform: translateY(-50%) scale(0.75); 55 | margin-right: 10px; 56 | transition: .5s; 57 | } 58 | .right:hover:before{ 59 | transform: translateY(-50%) scale(1); 60 | } 61 | .left { 62 | position: relative; 63 | height: 100%; 64 | width: 60px; 65 | z-index: 99; 66 | cursor: pointer; 67 | color: #fff; 68 | transition: 1s; 69 | } 70 | .left:hover{ 71 | background: rgba(0, 0, 0, 0.25) 72 | } 73 | .left:before{ 74 | font-family: "Font Awesome 5 Free"; 75 | font-weight: 900; 76 | content: "\f104"; 77 | font-size: 50px; 78 | position: absolute; 79 | left: 0; 80 | top: 50%; 81 | transform: translateY(-50%) scale(0.75); 82 | margin-left: 10px; 83 | transition: .5s; 84 | } 85 | .left:hover:before{ 86 | transform: translateY(-50%) scale(1); 87 | } 88 | input{ 89 | position: absolute; 90 | top: 0; 91 | left: -200px; 92 | } 93 | h2 { 94 | position: absolute; 95 | color: rgba(0, 0, 0, 0.75); 96 | top: -160px; 97 | left: 55%; 98 | transform: translateX(-50%); 99 | font-family: 'Fira Sans', sans-serif; 100 | font-size: 36px; 101 | width: 70%; 102 | } 103 | .dot{ 104 | position: absolute; 105 | bottom: 10px; 106 | left: 50%; 107 | transform: translateX(-50%); 108 | width: 10px; 109 | height: 10px; 110 | z-index: 99; 111 | background: #333; 112 | border-radius: 50%; 113 | cursor: pointer; 114 | transition: .5s; 115 | box-shadow: 0px 0px 5px #fff; 116 | } 117 | .dot.a1{margin-left:-30px} 118 | .dot.a2{margin-left:-10px} 119 | .dot.a3{margin-left:10px} 120 | .dot.a4{margin-left:30px} 121 | .dot.a1:hover{background:#fff} 122 | .dot.a2:hover{background:#fff} 123 | .dot.a3:hover{background:#fff} 124 | .dot.a4:hover{background:#fff} 125 | 126 | #info { 127 | position: absolute; 128 | top: -65px; 129 | left: 50%; 130 | transform: translateX(-50%); 131 | font-family: 'Fira Sans', sans-serif; 132 | font-size: 25px; 133 | color: rgba(0, 0, 0, 0.75); 134 | } -------------------------------------------------------------------------------- /JavaScript To Do List/JavaScript To Do List.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | display: flex; 6 | height: 100vh; 7 | justify-content: center; 8 | align-items: center; 9 | background: #262626 10 | } 11 | .container{ 12 | position: relative; 13 | background: linear-gradient(45deg,#69d9e2, #003da2); 14 | width: 325px; 15 | height: 550px; 16 | border-radius: 7.5px; 17 | overflow: hidden; 18 | } 19 | h2 { 20 | display: block; 21 | width: 100%; 22 | height: 40px; 23 | padding: 0px; 24 | text-align: center; 25 | line-height: 40px; 26 | margin: 0px; 27 | box-shadow: 0px 3px 20px #262626; 28 | color: #fbfbfb; 29 | font-size: 20px; 30 | font-family: 'Roboto Condensed', sans-serif; 31 | } 32 | #addBox { 33 | position: relative; 34 | display: block; 35 | background: #003da2; 36 | width: 300px; 37 | height: 35px; 38 | margin: 15px auto; 39 | border-radius: 2px; 40 | } 41 | input { 42 | width: 250px; 43 | background: none; 44 | border: none; 45 | outline: none; 46 | font-family: 'Roboto Condensed', sans-serif; 47 | background: none; 48 | padding: 5px; 49 | margin-top: 3px; 50 | color: #fbfbfb; 51 | margin-left: 36px; 52 | font-size: 16px; 53 | } 54 | #txt::placeholder { 55 | color: #fbfbfb 56 | } 57 | 58 | #plus { 59 | position: absolute; 60 | width: 25px; 61 | height: 25px; 62 | cursor: pointer; 63 | margin: 5px 0px 5px 10px; 64 | } 65 | #plus::before{ 66 | position: absolute; 67 | font-family: "Font Awesome 5 Free"; 68 | font-weight: 900; 69 | content: "\f067"; 70 | color: #fbfbfb; 71 | font-size: 24px; 72 | transition: .4s; 73 | } 74 | #plus:hover::before{ 75 | margin-top: -3px; 76 | margin-left: -3px; 77 | font-size: 30px; 78 | } 79 | #list { 80 | width: 300px; 81 | height: 400px; 82 | margin: 10px auto; 83 | overflow: scroll; 84 | } 85 | .box { 86 | position: relative; 87 | display: block; 88 | width: 300px; 89 | overflow: scroll; 90 | height: 45px; 91 | margin: 5px 0px 5px 0px; 92 | background: #fbfbfb; 93 | opacity: .9;2; 94 | box-sizing: border-box; 95 | transition: .5s; 96 | max-height: 100%; 97 | border-radius: 3px; 98 | } 99 | .box::-webkit-scrollbar { 100 | display: none; 101 | } 102 | #list::-webkit-scrollbar { 103 | display: none; 104 | } 105 | .x{ 106 | position: absolute; 107 | top: 50%; 108 | transform: translateY(-50%); 109 | right: 10px; 110 | width: 20px; 111 | height: 20px; 112 | } 113 | .x:before{ 114 | font-family: "Font Awesome 5 Free"; 115 | font-weight: 900; 116 | content: "\f00d"; 117 | font-size: 20px; 118 | color: #262626; 119 | cursor: pointer; 120 | transition: .5s; 121 | } 122 | .x:hover:before{ 123 | color: #bc2626 124 | } 125 | .txtBox { 126 | font-family: 'Roboto Condensed', sans-serif; 127 | position: absolute; 128 | left: 20px; 129 | top: 12px; 130 | font-size: 17px; 131 | } 132 | .box.active { 133 | max-height: 0%; 134 | opacity: 0; 135 | margin: 0; 136 | } 137 | .box.checked { 138 | background: #b6ff00; 139 | } -------------------------------------------------------------------------------- /Library System/JS/main.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | // insertion_section 4 | $("input").focus(function() { 5 | $(this).css("opacity",1) 6 | }) 7 | $("input").blur(function() { 8 | $(this).css("opacity",.2) 9 | }) 10 | 11 | // close tr event 12 | $(".close").click(function(){ 13 | $(this).parents(".tab").hide(500) 14 | }) 15 | 16 | // add book info 17 | $("#add").click(function(){ 18 | let book_name = $("#bookName").val(), 19 | book_author = $("#authorName").val(), 20 | book_publisher = $("#publisherName").val(), 21 | book_number = $("#numberPage").val(), 22 | book_serial = $("#serialNumber").val(), 23 | new_tr = document.createElement("tr"), 24 | new_th_book_name = document.createElement("th"), 25 | new_th_book_author = document.createElement("td"), 26 | new_th_book_publisher = document.createElement("td"), 27 | new_th_book_page = document.createElement("td"), 28 | new_th_book_serial = document.createElement("td"), 29 | table_book_name = document.createTextNode(book_name), 30 | table_book_author = document.createTextNode(book_author), 31 | table_book_publisher = document.createTextNode(book_publisher), 32 | table_book_number = document.createTextNode(book_number), 33 | table_book_serial = document.createTextNode(book_serial); 34 | 35 | // add txt 36 | new_th_book_name.appendChild(table_book_name); 37 | new_th_book_author.appendChild(table_book_author); 38 | new_th_book_publisher.appendChild(table_book_publisher); 39 | new_th_book_page.appendChild(table_book_number); 40 | new_th_book_serial.appendChild(table_book_serial); 41 | 42 | 43 | // add new_tr --> td 44 | let name_tab = new_tr.appendChild(new_th_book_name); 45 | let author_tab = new_tr.appendChild(new_th_book_author); 46 | let publisher_tab = new_tr.appendChild(new_th_book_publisher); 47 | let page_tab = new_tr.appendChild(new_th_book_page); 48 | let serial_tab = new_tr.appendChild(new_th_book_serial); 49 | new_th_book_name.setAttribute("scope","row") 50 | 51 | // add new_tr --> table 52 | let new_table = document.getElementById("tabs"); 53 | new_table.appendChild(new_tr); 54 | new_tr.setAttribute("class","tab"); 55 | 56 | 57 | // close button 58 | let but_td = document.createElement("td"), 59 | but = document.createElement("button"), 60 | but_span = document.createElement("span"), 61 | span_txt = document.createTextNode("X"); 62 | 63 | but_td.appendChild(but); 64 | but.appendChild(but_span); 65 | but_span.appendChild(span_txt); 66 | new_tr.appendChild(but_td); 67 | 68 | but.setAttribute("type","button"); 69 | but.setAttribute("class","close"); 70 | but.setAttribute("aria-label","Close"); 71 | but_span.setAttribute("aria-hidden","true"); 72 | 73 | // click --> form reset 74 | this.form.reset(); 75 | 76 | // close form item 77 | $(".close").click(function(){ 78 | $(this).parents(".tab").hide(500) 79 | 80 | }) 81 | 82 | 83 | }) 84 | 85 | }) 86 | 87 | -------------------------------------------------------------------------------- /Calculator/calculator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 24 | 25 | 49 | 50 | 51 | 52 |
HTML Calculator
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | 88 | -------------------------------------------------------------------------------- /Pomodora Timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Pomodoro 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 | 26 | 30 | 39 | 40 | 41 |
42 |
43 | 44 |

45 |
46 | 47 |
48 |
49 |
50 | 51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 |
59 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /Array Slice Animation/ArraySliceAnimation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |

ARRAY SLICE

15 | 16 |
17 |
0
18 |
1
19 |
2
20 |
3
21 |
4
22 |
5
23 |
6
24 |
7
25 |
8
26 |
27 | 28 |
29 | 30 | start 31 | { 34 | 35 | } 38 |
39 | 40 | ,end 41 | { 44 | 45 | } 48 |
49 |
50 | 51 |
52 | 53 | 54 | 55 | 56 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /JS CLASS - Login System/JS CLASS - Login System.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CARD GAME 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 | 40 | 41 | 42 | 43 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /Pomodora Timer/js/main.js: -------------------------------------------------------------------------------- 1 | const reload = document.querySelector(".reload"); 2 | const play = document.getElementById("play"); 3 | const stop = document.getElementById("stop"); 4 | const info = document.querySelector(".info"); 5 | const timeText = document.querySelector(".timer"); 6 | const playStop = document.getElementById("play_stop"); 7 | 8 | 9 | class Pomodoro{ 10 | constructor(){ 11 | this.countdown = 0; 12 | this.seconds = 1500; 13 | this.workTime = 25; 14 | this.breakTime = 5; 15 | this.isBreak = true; 16 | this.isPaused = true; 17 | this.minutes = Math.floor(this.seconds / 60); 18 | this.remainderSeconds = this.seconds % 60; 19 | }; 20 | start(){ 21 | clearInterval(this.countdown); 22 | this.isPaused = !this.isPaused; 23 | if(!this.isPaused){ 24 | this.countdown = setInterval(this.timer.call(this),1000); 25 | this.minutes = Math.floor(this.seconds / 60); 26 | this.remainderSeconds = this.seconds % 60; 27 | }else{ 28 | clearInterval(this.countdown); 29 | } 30 | }; 31 | reset(){ 32 | clearInterval(this.countdown); 33 | this.seconds = this.workTime*60; 34 | this.countdown = 0; 35 | this.isBreak = true; 36 | this.isPaused = true; 37 | }; 38 | timer(){ 39 | console.log(this.seconds); 40 | this.seconds -= 1; 41 | if(this.seconds < 0){ 42 | clearInterval(this.countdown); 43 | this.seconds = (this.isBreak ? this.breakTime : this.workTime) * 60; 44 | } 45 | }; 46 | countdownDisplay(){ 47 | let minutes = Math.floor(this.seconds / 60); 48 | let remainderSeconds = this.seconds % 60; 49 | timeText.innerHTML = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; 50 | }; 51 | update(){ 52 | this.timer(); 53 | this.countdownDisplay(); 54 | } 55 | } 56 | 57 | let pomodoro = new Pomodoro(); 58 | let pause = true; 59 | let circleLength = 100; 60 | const staticWorkTime = pomodoro.seconds; 61 | const staticBreakTime = pomodoro.breakTime; 62 | function Update(){ 63 | pomodoro.update(); 64 | let timeLoopCircle = 100/pomodoro.seconds; 65 | circleLength -= (((timeLoopCircle*pomodoro.seconds)/staticWorkTime)); 66 | setProgress(circleLength); 67 | } 68 | function UpdateSmall(){ 69 | let timeLoopCircle = 100/(staticBreakTime*60); 70 | circleLength -= (((timeLoopCircle*(pomodoro.seconds*60))/staticBreakTime)); 71 | setProgress(circleLength); 72 | } 73 | 74 | 75 | let loop; 76 | playStop.addEventListener("click",function(){ 77 | if(pause == true){ 78 | loop = setInterval(Update, 1000); 79 | pause = false; 80 | play.style.display = "none"; 81 | stop.style.display = "block"; 82 | 83 | }else if(pause == false){ 84 | clearInterval(loop); 85 | pause = true; 86 | play.style.display = "block"; 87 | stop.style.display = "none"; 88 | } 89 | }) 90 | reload.addEventListener("click",function(){ 91 | pomodoro.reset(); 92 | circleLength = 100; 93 | }) 94 | 95 | var circle = document.querySelector('circle'); 96 | var radius = circle.r.baseVal.value; 97 | var circumference = radius * 2 * Math.PI; 98 | 99 | circle.style.strokeDasharray = `${circumference} ${circumference}`; 100 | circle.style.strokeDashoffset = `${circumference}`; 101 | 102 | function setProgress(percent) { 103 | const offset = circumference - percent / 100 * circumference; 104 | circle.style.strokeDashoffset = offset; 105 | } 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /Pomodora Timer/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: lightcoral; 3 | width: 100%; 4 | height: 100vh; } 5 | body .container { 6 | position: relative; } 7 | body .container .clock_box { 8 | position: relative; 9 | top: 5rem; 10 | width: 500px; 11 | height: 700px; 12 | margin: 0 auto; } 13 | body .container .clock_box .clock { 14 | width: 500px; 15 | height: 500px; 16 | background: transparent; 17 | position: relative; 18 | margin-bottom: 20px; } 19 | body .container .clock_box .clock .back_circle { 20 | width: 460px; 21 | height: 460px; 22 | background: transparent; 23 | border: 10px solid #e15151; 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate(-50%, -50%); 28 | border-radius: 50%; 29 | z-index: -1; } 30 | body .container .clock_box .clock .clock_circle { 31 | transition: 0.35s stroke-dashoffset; 32 | -webkit-transform: rotate(-90deg); 33 | transform: rotate(-90deg); 34 | -webkit-transform-origin: 50% 50%; 35 | transform-origin: 50% 50%; } 36 | body .container .clock_box .clock .clock_text { 37 | position: absolute; 38 | top: 50%; 39 | left: 50%; 40 | transform: translate(-50%, -50%); 41 | text-align: center; 42 | line-height: 60px; 43 | color: #efeaea; } 44 | body .container .clock_box .clock .clock_text .pomodoro_name { 45 | font-size: 30px; 46 | background: none; 47 | border: none; 48 | text-align: center; 49 | color: #efeaea; 50 | outline: none; } 51 | body .container .clock_box .clock .clock_text .pomodoro_name ::placeholder { 52 | color: #efeaea; } 53 | body .container .clock_box .clock .clock_text .timer { 54 | font-size: 100px; } 55 | body .container .clock_box .clock_button { 56 | position: relative; } 57 | body .container .clock_box .clock_button .smallCircle { 58 | width: 75px; 59 | height: 75px; 60 | background: transparent; 61 | border-radius: 50%; 62 | border: 5px solid rgba(239, 234, 234, 0.7); 63 | cursor: pointer; } 64 | body .container .clock_box .clock_button .smallCircle i { 65 | font-size: 25px; 66 | transition: .5s; } 67 | body .container .clock_box .clock_button .smallCircle:hover i { 68 | font-size: 30px; } 69 | body .container .clock_box .clock_button .reload { 70 | position: absolute; 71 | left: 15%; } 72 | body .container .clock_box .clock_button .reload:hover { 73 | border: 5px solid #efeaea; } 74 | body .container .clock_box .clock_button .info { 75 | position: absolute; 76 | left: 70%; } 77 | body .container .clock_box .clock_button .bigCircle { 78 | position: absolute; 79 | width: 100px; 80 | height: 100px; 81 | top: 30px; 82 | left: 50%; 83 | transform: translateX(-50%); 84 | background: transparent; 85 | border-radius: 50%; 86 | border: 5px solid rgba(239, 234, 234, 0.7); 87 | cursor: pointer; } 88 | body .container .clock_box .clock_button .bigCircle i { 89 | margin-left: 5px; 90 | font-size: 34px; 91 | transition: .5s; } 92 | body .container .clock_box .clock_button .bigCircle:hover i { 93 | font-size: 39px; } 94 | body .container .clock_box .clock_button .fas { 95 | position: relative; 96 | top: 50%; 97 | left: 50%; 98 | transform: translate(-50%, -50%); 99 | color: #efeaea; } 100 | 101 | /*# sourceMappingURL=style.css.map */ 102 | -------------------------------------------------------------------------------- /Information Card Slider/JS Information Card Slider.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Ubuntu:400,500'); 2 | @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'); 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Ubuntu', sans-serif; 7 | } 8 | #container { 9 | position: relative; 10 | width: 100%; 11 | height: 100vh; 12 | background: #de732d; 13 | overflow: hidden; 14 | transition: 1s; 15 | } 16 | .card{ 17 | position: absolute; 18 | left: 50%; 19 | top: 100px; 20 | transform: translateX(-50%); 21 | width: 300px; 22 | height: auto; 23 | border-radius: 15px; 24 | box-shadow: 0px 6px 15px #333; 25 | padding: 20px; 26 | } 27 | .image { 28 | width: 150px; 29 | height: 210px; 30 | background-size: contain; 31 | background-repeat: no-repeat; 32 | margin: 40px auto; 33 | } 34 | h2 { 35 | font-weight: 500; 36 | text-align: center; 37 | margin-bottom: 0; 38 | user-select: none; 39 | } 40 | p { 41 | margin-top: 0; 42 | font-weight: 400; 43 | font-family: 'Open Sans Condensed', sans-serif; 44 | font-weight: bold; 45 | color: rgba(0, 0, 0, 0.64); 46 | padding: 20px; 47 | text-align: center; 48 | margin-bottom: 100px; 49 | user-select: none; 50 | } 51 | .next { 52 | position: absolute; 53 | bottom: 50px; 54 | right: 40px; 55 | font-weight: 500; 56 | cursor: pointer; 57 | } 58 | .prev { 59 | position: absolute; 60 | bottom: 50px; 61 | left: 40px; 62 | font-weight: 500; 63 | cursor: pointer; 64 | } 65 | 66 | /* CARD 1 */ 67 | .card_1 { 68 | background: #f6f6f6; 69 | transition: 1s; 70 | } 71 | .card_1 .image{ 72 | background-image: url("https://png.pngtree.com/png_detail/18/09/10/pngtree-vector-deer-png-clipart_3296362.jpg"); 73 | } 74 | .card_1 h2 { 75 | color: #ac5422; 76 | } 77 | .card_1 .next{ 78 | color: #ac5422; 79 | } 80 | .card_1 .prev{ 81 | color: #ac5422; 82 | } 83 | /* CARD 2 */ 84 | .card_2 { 85 | background: #f6f6f6; 86 | transform: translateX(-50%) scale(2); 87 | margin: 1200px; 88 | opacity: 0; 89 | transition: 1.4s; 90 | } 91 | .card_2 .image{ 92 | background-image: url("https://png.pngtree.com/element_origin_min_pic/16/12/09/bebaea9d5a190e1a3aee6bebc3c50f23.jpg"); 93 | width: 200px; 94 | height: 175px; 95 | } 96 | .card_2 h2{ 97 | color: #7c4019 98 | } 99 | .card_2 .next{ 100 | color: #7c4019; 101 | } 102 | .card_2 .prev{ 103 | color: #7c4019; 104 | } 105 | .card_2.active{ 106 | opacity: 1; 107 | margin: 0; 108 | transform: translateX(-50%) scale(1) rotate(10deg); 109 | } 110 | 111 | 112 | /* CARD 3 */ 113 | .card_3 { 114 | background: #f6f6f6; 115 | transform: translateX(-50%) scale(2); 116 | margin: -1200px; 117 | transition: 1.4s; 118 | } 119 | .card_3 .image { 120 | background-image: url("https://png.pngtree.com/element_origin_min_pic/16/07/08/20577f9885dd0d3.jpg"); 121 | width: 200px; 122 | height: 175px; 123 | } 124 | .card_3 h2{ 125 | color: #8b8b8b 126 | } 127 | .card_3 .next{ 128 | color: #8b8b8b; 129 | } 130 | .card_3 .prev{ 131 | color: #8b8b8b; 132 | } 133 | .card_3.active{ 134 | margin: 0; 135 | transform: translateX(-60%) scale(1) rotate(-7deg); 136 | } 137 | 138 | /* CARD 4 */ 139 | .card_4 { 140 | background: #f6f6f6; 141 | transform: translateX(-50%) scale(2); 142 | margin: -1200px 1000px; 143 | transition: 1.4s; 144 | } 145 | .card_4 .image { 146 | background-image: url("https://png.pngtree.com/element_origin_min_pic/16/07/09/1457809f52cac1b.jpg"); 147 | width: 220px; 148 | margin-bottom: 0; 149 | background-size: 350px 350px; 150 | background-position: center; 151 | } 152 | .card_4 h2{ 153 | color: #e8672e 154 | } 155 | .card_4 .next{ 156 | color: #e8672e; 157 | } 158 | .card_4 .prev{ 159 | color: #e8672e; 160 | } 161 | .card_4.active{ 162 | margin: 0; 163 | transform: translateX(-50%) scale(1) rotate(4deg); 164 | } 165 | -------------------------------------------------------------------------------- /Accordion Menu 2/Accordion Menu 2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | page 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 |
17 |

Accordion Menu 2

18 | 19 |
20 | 21 | 22 |
23 | What is Angular JS? How to use? 24 |
25 |

26 | Lorem ipsum dolor sit amet, consectetur adipiscing 27 | elit, sed do eiusmod tempor incididunt ut labore et 28 | dolore magna aliqua. Elementum sagittis vitae et leo 29 | duis ut. Ut tortor pretium viverra suspendisse potenti. 30 |

31 |
32 |
33 | 34 | 35 |
36 | What is ReactJS? How to use? 37 |
38 |

39 | Lorem ipsum dolor sit amet, consectetur adipiscing 40 | elit, sed do eiusmod tempor incididunt ut labore et 41 | dolore magna aliqua. Elementum sagittis vitae et leo 42 | duis ut. Ut tortor pretium viverra suspendisse potenti. 43 |

44 |
45 |
46 | 47 | 48 |
49 | What is Node.js? How to use? 50 |
51 |

52 | Lorem ipsum dolor sit amet, consectetur adipiscing 53 | elit, sed do eiusmod tempor incididunt ut labore et 54 | dolore magna aliqua. Elementum sagittis vitae et leo 55 | duis ut. Ut tortor pretium viverra suspendisse potenti. 56 |

57 |
58 |
59 | 60 | 61 |
62 | What is Vue.js? How to use? 63 |
64 |

65 | Lorem ipsum dolor sit amet, consectetur adipiscing 66 | elit, sed do eiusmod tempor incididunt ut labore et 67 | dolore magna aliqua. Elementum sagittis vitae et leo 68 | duis ut. Ut tortor pretium viverra suspendisse potenti. 69 |

70 |
71 |
72 | 73 | 74 |
75 | What is jQuery? How to use? 76 |
77 |

78 | Lorem ipsum dolor sit amet, consectetur adipiscing 79 | elit, sed do eiusmod tempor incididunt ut labore et 80 | dolore magna aliqua. Elementum sagittis vitae et leo 81 | duis ut. Ut tortor pretium viverra suspendisse potenti. 82 |

83 |
84 |
85 | 86 |
87 |
88 | 89 | 90 | 91 | 101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /Array Slice Animation/ArraySliceAnimation.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | padding: 0; 3 | margin: 0; 4 | background: #262626; 5 | font-family: monospace; 6 | color: #fff; 7 | height: 100%; 8 | overflow: hidden; 9 | display: flex; 10 | } 11 | .container{ 12 | display: block; 13 | position: absolute; 14 | top: 50%; 15 | left: 50%; 16 | transform: translate(-50%,-50%); 17 | } 18 | .boxes{ 19 | width: 700px; 20 | height: 80px; 21 | display: flex; 22 | } 23 | .boxes > .box{ 24 | background: #975353; 25 | border: 1px solid rgba(0, 0, 0, 0.2); 26 | line-height: 80px; 27 | border-radius: 8px; 28 | flex: 1; 29 | margin: 0 10px; 30 | text-align: center; 31 | font-size: 20px; 32 | opacity:0; 33 | -webkit-transform: translateY(-100px); 34 | transform: translateY(-100px); 35 | } 36 | .boxes .box:nth-of-type(1) { 37 | -webkit-animation: in 0.5s forwards; 38 | animation: in 0.5s forwards; 39 | -webkit-animation-delay: 0.2s; 40 | animation-delay: 0.2s; 41 | } 42 | .boxes .box:nth-of-type(2) { 43 | -webkit-animation: in 0.5s forwards; 44 | animation: in 0.5s forwards; 45 | -webkit-animation-delay: 0.4s; 46 | animation-delay: 0.4s; 47 | } 48 | .boxes .box:nth-of-type(3) { 49 | -webkit-animation: in 0.5s forwards; 50 | animation: in 0.5s forwards; 51 | -webkit-animation-delay: 0.6s; 52 | animation-delay: 0.6s; 53 | } 54 | .boxes .box:nth-of-type(4) { 55 | -webkit-animation: in 0.5s forwards; 56 | animation: in 0.5s forwards; 57 | -webkit-animation-delay: 0.8s; 58 | animation-delay: 0.8s; 59 | } 60 | .boxes .box:nth-of-type(5) { 61 | -webkit-animation: in 0.5s forwards; 62 | animation: in 0.5s forwards; 63 | -webkit-animation-delay: 1s; 64 | animation-delay: 1s; 65 | } 66 | .boxes .box:nth-of-type(6) { 67 | -webkit-animation: in 0.5s forwards; 68 | animation: in 0.5s forwards; 69 | -webkit-animation-delay: 1.2s; 70 | animation-delay: 1.2s; 71 | } 72 | .boxes .box:nth-of-type(7) { 73 | -webkit-animation: in 0.5s forwards; 74 | animation: in 0.5s forwards; 75 | -webkit-animation-delay: 1.4s; 76 | animation-delay: 1.4s; 77 | } 78 | .boxes .box:nth-of-type(8) { 79 | -webkit-animation: in 0.5s forwards; 80 | animation: in 0.5s forwards; 81 | -webkit-animation-delay: 1.6s; 82 | animation-delay: 1.6s; 83 | } 84 | .boxes .box:nth-of-type(9) { 85 | -webkit-animation: in 0.5s forwards; 86 | animation: in 0.5s forwards; 87 | -webkit-animation-delay: 1.8s; 88 | animation-delay: 1.8s; 89 | } 90 | .boxes .box:nth-of-type(10) { 91 | -webkit-animation: in 0.5s forwards; 92 | animation: in 0.5s forwards; 93 | -webkit-animation-delay: 2s; 94 | animation-delay: 2s; 95 | } 96 | @keyframes in { 97 | to { 98 | -webkit-transform: translateY(0px); 99 | transform: translateY(0px); 100 | opacity: 1; 101 | } 102 | } 103 | h2{ 104 | width: auto; 105 | display: block; 106 | margin: 0 auto; 107 | text-align: center; 108 | font-size: 60px; 109 | margin-bottom: 5px; 110 | border: none; 111 | color: #e3dede; 112 | border-radius: 20px; 113 | border-bottom: 2px solid #975353; 114 | } 115 | .boxInput{ 116 | display: flex; 117 | justify-content: center; 118 | } 119 | .boxInp1{ 120 | position: relative; 121 | float: left; 122 | } 123 | #numtxt { 124 | font-size: 42px; 125 | color: #6da53d; 126 | } 127 | .numBox{ 128 | width: 30px; 129 | height: 45px; 130 | margin: 7px; 131 | background: none; 132 | border: none; 133 | font-size: 40px; 134 | text-align: center; 135 | line-height: 45px; 136 | outline: none; 137 | border-bottom: 1px solid rgba(157, 148, 61, 0.65); 138 | padding: 0; 139 | margin: 0; 140 | margin-top: 50px; 141 | font-family: monospace; 142 | font-weight: bold; 143 | color: #e3dede 144 | } 145 | .num2{ 146 | margin-left: 10px; 147 | } 148 | .boxes > .box.selected { 149 | background: #33b758; 150 | transition: .5s; 151 | } 152 | --------------------------------------------------------------------------------