├── 3D Box
    ├── 3Dbox.css
    ├── 3Dbox.html
    └── output.png
├── 3D Hover Effect - Alita Card
    ├── 3D Hover Effect - Alita Card.html
    ├── 3D Hover Effect - Alita Card.scss
    └── output.png
├── Accordion Menu 2
    ├── Accordion Menu 2.css
    ├── Accordion Menu 2.html
    ├── Thumbs.db
    └── output.png
├── Accordion Menu 4
    ├── Accordion Menu 4.css
    ├── Accordion Menu 4.html
    └── Accordion Menu 4.png
├── Accordion Menu 5
    ├── Accordion Menu 5.css
    ├── Accordion Menu 5.html
    └── accordion5.png
├── Accordion Menu 6
    ├── Accordion Menu 6.css
    ├── Accordion Menu 6.html
    └── Accordion Menu 6.png
├── Animation - Nice Weather
    ├── Screenshot_1.png
    ├── cssNiceWeather.css
    └── cssNiceWeather.html
├── Animation Button 2
    ├── Photo.png
    ├── animationRadioButton.css
    └── animationRadioButton.html
├── Animation Button
    ├── animeBut.css
    └── animeBut.html
├── Animation Check
    ├── checkAnimation.css
    └── checkAnimation.html
├── Array Accordion
    ├── Array Accordion.css
    ├── Array Accordion.html
    └── Array Accordion.png
├── Array Card Flip
    ├── JavaScript Array Card Flip.css
    ├── JavaScript Array Card Flip.html
    └── js.jpg
├── Array Slice Animation
    ├── ArraySliceAnimation.css
    ├── ArraySliceAnimation.html
    └── JavaScript Array Slice Animation.png
├── Array.from Animation
    ├── Array.from Animation.css
    ├── Array.from Animation.html
    └── Array.from Animation.png
├── Before & After Comparison
    ├── JavaScript Before & After Comparison.css
    ├── JavaScript Before & After Comparison.html
    └── JavaScript Before & After Comparison.png
├── Bootstrap Sidebar Menu
    ├── Bootstrap Sidebar Menu.png
    ├── bootstrap sidebar menu.html
    └── bootstrap sidebar menu.scss
├── Calculator
    └── calculator.html
├── Card Flip 1
    ├── JavaScript Card Flip.css
    ├── JavaScript Card Flip.html
    └── Screenshot_1.png
├── Card Slide In Hover
    ├── index.html
    └── style.css
├── Dark Light Menu
    ├── Dark Light Menu.css
    ├── Dark Light Menu.html
    └── Dark Light Menu.png
├── Diffirent Animation
    ├── Screenshot_1.png
    ├── cssDiffirentAnimation.css
    └── cssDiffirentAnimation.html
├── Dna Animation
    ├── DnaAnimation.css
    ├── DnaAnimation.html
    └── Screenshot_1.png
├── Eyes Animation
    ├── Screenshot_1.png
    ├── cssEyesAnimation.css
    └── cssEyesAnimation.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
├── Growing Card Flip
    ├── Growing Card Flip.css
    ├── Growing Card Flip.html
    └── Screenshot_2.png
├── Hover Effect 2
    ├── JShoverEffect.css
    ├── JShoverEffect.html
    └── Screenshot_1.png
├── Hover Effect
    ├── css_hover_effect.css
    └── css_hover_effect.html
├── Hypotenuse calculation
    ├── HypotenuseCalculation.html
    └── Screenshot_1.png
├── Image Slider
    ├── Image Slider.css
    ├── Image Slider.html
    └── slider css.png
├── Information Card Slider
    ├── JS Information Card Slider.css
    ├── JS Information Card Slider.html
    └── JS Information Card Slider.png
├── JS CLASS - Login System
    ├── JS CLASS - Login System.css
    └── JS CLASS - Login System.html
├── JS Promise Login System
    ├── JS Promise Login System.html
    └── Screenshot_3.png
├── JavaScript To Do List
    ├── JavaScript To Do List.css
    ├── JavaScript To Do List.html
    └── JavaScript To Do List.png
├── Library System
    ├── CSS
    │   ├── book_list.css
    │   ├── book_list.css.map
    │   ├── book_list.scss
    │   ├── insertion_section.css
    │   ├── insertion_section.css.map
    │   ├── insertion_section.scss
    │   └── main.css
    ├── JS
    │   └── main.js
    ├── LICENSE
    ├── images
    │   └── wallpaper.jpg
    └── index.html
├── Line Menu Animation
    ├── Screenshot_1.png
    ├── lineMenu.css
    └── lineMenu.html
├── Loding Animation
    ├── Screenshot_1.png
    ├── cssLodingAnimation.css
    └── cssLodingAnimation.html
├── Marvel Tabs
    ├── Marvel Tabs.html
    ├── Marvel Tabs.png
    └── Marvel Tabs.scss
├── Mouse Scroll
    ├── Screenshot_1.png
    ├── mouseScroller.css
    └── mouseScroller.html
├── Name Animation
    ├── cssNameAnimation.css
    └── cssNameAnimation.html
├── Only Css Menu
    ├── Screenshot_1.png
    ├── only css menu.html
    └── only css menu.scss
├── Pomodora Timer
    ├── License.md
    ├── css
    │   ├── style.css
    │   ├── style.css.map
    │   └── style.scss
    ├── index.html
    └── js
    │   └── main.js
├── Prime Number
    ├── Screenshot_1.png
    └── primeNumber.html
├── Quick Autocomplete
    ├── License.md
    ├── data
    │   └── states.json
    ├── index.html
    └── js
    │   └── main.js
├── README.md
├── Radar
    ├── JavaScript Animation Radar.png
    ├── radar.css
    └── radar.html
├── Rectangle Area and Circumference Calculation
    ├── Javascript Rectangle Area and Circumference Calculation.css
    ├── Javascript Rectangle Area and Circumference Calculation.html
    └── Screenshot_1.png
├── Responsive Accordion Slider
    ├── Responsive Accordion Slider.css
    ├── Responsive Accordion Slider.html
    └── Responsive Accordion Slider.png
├── Rock Paper Scissors
    ├── kagit.png
    ├── makas.png
    ├── tas.png
    ├── taskagıtmakas.css
    └── taskagıtmakas.html
├── SCSS and JS Tabs
    ├── SCSS and JS Tabs.html
    ├── SCSS and JS Tabs.scss
    └── Screenshot_1.png
├── TEAM CARDS
    ├── JavaScript TEAM CARDS.css
    ├── JavaScript TEAM CARDS.html
    └── Screenshot_1.png
├── Tab - Tesla Car Models
    ├── tesla-car.html
    ├── tesla-car.png
    └── tesla-car.scss
├── Tabs Styled 1
    ├── JavaScript Tabs Styled 1.css
    ├── JavaScript Tabs Styled 1.html
    └── JavaScript Tabs Styled 1.png
├── Tabs Styled 2
    ├── JavaScript Tabs Style 2.css
    ├── JavaScript Tabs Style 2.html
    └── JavaScript Tabs Style 2.png
├── Text Animation
    ├── Screenshot_1.png
    ├── cssTextAnimation.css
    └── cssTextAnimation.html
├── To Do List
    ├── ToDoList1.css
    ├── ToDoList1.html
    └── to do list 1.png
├── Tooltip
    ├── Screenshot_1.png
    ├── cssTooltip.css
    └── cssTooltip.html
├── Users (Modal Box)
    ├── css
    │   └── main.css
    ├── javascript
    │   ├── info.json
    │   └── main.js
    ├── main.html
    └── readme.md
├── factorial calculation
    ├── Screenshot_1.png
    └── factorial calculation.html
└── spam find
    ├── Screenshot_1.png
    └── spam_find.html


/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 | }


--------------------------------------------------------------------------------
/3D Box/3Dbox.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="3Dbox.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 |    
12 |     <div id="container">
13 |         <div id="top">
14 |             <h2>truecodes.org</h2>
15 |             <h4><i class="fab fa-instagram"></i>codeblogger</h4>
16 |         </div>
17 |         <div id="box">
18 |             <div class="face1 color1"></div>
19 |             <div class="face2 color1"></div>
20 |             <div class="face3 color2"></div>
21 |             <div class="face4 color2"></div>
22 |             <div class="face5 color3"></div>
23 |             <div class="face6 color3"></div>
24 |         </div>
25 |     </div>
26 | 
27 | 
28 | 
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/3D Box/output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/3D Box/output.png


--------------------------------------------------------------------------------
/3D Hover Effect - Alita Card/3D Hover Effect - Alita Card.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" type="text/css" href="3D Hover Effect - Alita Card.css">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="image">
13 |         <div class="text">
14 |             <h2>Alita: Battle Angel</h2>
15 |             <p>
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 |             </p>
24 |         </div>
25 |         <div class="box"></div>
26 |     </div>
27 |       
28 | 
29 | </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/3D Hover Effect - Alita Card/output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/3D Hover Effect - Alita Card/output.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Accordion Menu 2/Accordion Menu 2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8" />
  6 |     <title>page</title>
  7 |     <link rel="stylesheet" type="text/css" href="Accordion Menu 2.css">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
 10 |     <style>
 11 |     </style>
 12 | </head>
 13 | <body>
 14 | 
 15 |     
 16 |     <div class="container">
 17 |         <h3>Accordion Menu 2</h3>
 18 |         
 19 |         <div class="accordion">
 20 | 
 21 |             <!-- Menu 1 -->
 22 |             <div class="accordion-item">
 23 |                 <a>What is Angular JS? How to use?</a>
 24 |                 <div class="info">
 25 |                     <p>
 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 |                     </p>
 31 |                 </div>
 32 |             </div>
 33 | 
 34 |             <!-- Menu 2 -->
 35 |             <div class="accordion-item">
 36 |                 <a>What is ReactJS? How to use?</a>
 37 |                 <div class="info">
 38 |                     <p>
 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 |                     </p>
 44 |                 </div>
 45 |             </div>
 46 | 
 47 |             <!-- Menu 3 -->
 48 |             <div class="accordion-item">
 49 |                 <a>What is Node.js? How to use?</a>
 50 |                 <div class="info">
 51 |                     <p>
 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 |                     </p>
 57 |                 </div>
 58 |             </div>
 59 | 
 60 |             <!-- Menu 4 -->
 61 |             <div class="accordion-item">
 62 |                 <a>What is Vue.js? How to use?</a>
 63 |                 <div class="info">
 64 |                     <p>
 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 |                     </p>
 70 |                 </div>
 71 |             </div>
 72 | 
 73 |             <!-- Menu 5 -->
 74 |             <div class="accordion-item">
 75 |                 <a>What is jQuery? How to use?</a>
 76 |                 <div class="info">
 77 |                     <p>
 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 |                     </p>
 83 |                 </div>
 84 |             </div>
 85 | 
 86 |         </div>
 87 |     </div>
 88 | 
 89 | 
 90 | 
 91 |     <script>
 92 |         const items = document.querySelectorAll(".accordion a");
 93 |         items.forEach((item) => item.addEventListener('click', toggleAccordion));
 94 | 
 95 |         function toggleAccordion() {
 96 |             this.classList.toggle('active');
 97 |             this.nextElementSibling.classList.toggle('active');
 98 |         }
 99 | 
100 |     </script>
101 | 
102 | </body>
103 | </html>
104 | 


--------------------------------------------------------------------------------
/Accordion Menu 2/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Accordion Menu 2/Thumbs.db


--------------------------------------------------------------------------------
/Accordion Menu 2/output.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Accordion Menu 2/output.png


--------------------------------------------------------------------------------
/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 4/Accordion Menu 4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="Accordion Menu 4.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="accordion">Accordion Menu 4</div>
15 | 
16 |         <!-- Item 1 -->
17 |         <div class="item">
18 |             <div class="section">Read me</div>
19 |             <div class="info">
20 |                 Click on an item to open. Click on its header or the list header to close.
21 |             </div>
22 |         </div>
23 | 
24 |         <!-- Item 2 -->
25 |         <div class="item">
26 |             <div class="section">Read me too</div>
27 |             <div class="info">
28 |                 Add the class 'arrows' to nav.accordion to add dropdown arrows.
29 |             </div>
30 |         </div>
31 | 
32 |         <!-- Item 3 -->
33 |         <div class="item">
34 |             <div class="section">Item 3</div>
35 |             <div class="info">
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 |             </div>
41 |         </div>
42 | 
43 |         <!-- Item 4 -->
44 |         <div class="item">
45 |             <div class="section">Item 4</div>
46 |             <div class="info">
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 |             </div>
52 |         </div>
53 | 
54 |         <!-- Item 5 -->
55 |         <div class="item">
56 |             <div class="section">Item 5</div>
57 |             <div class="info">
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 |             </div>
63 |         </div>
64 | 
65 |     </div>
66 | 
67 |     
68 |     <script>
69 | 
70 |         let item = document.querySelectorAll(".item");
71 | 
72 |         item.forEach((x) => x.addEventListener("click", itemFunction))
73 | 
74 |         function itemFunction() {
75 |             this.classList.toggle("active")
76 |         }
77 | 
78 |     </script>
79 | 
80 | </body>
81 | </html>
82 | 


--------------------------------------------------------------------------------
/Accordion Menu 4/Accordion Menu 4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Accordion Menu 4/Accordion Menu 4.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Accordion Menu 5/Accordion Menu 5.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="Accordion Menu 5">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h2>Accordion Menu 5</h2>
15 |         <div class="accordion_Boxes">
16 | 
17 |             <!-- Accordion Box 1 -->
18 |             <div class="accordionBox">
19 |                 <div id="top" class="top">
20 |                     <span>What is HTML ?</span>
21 |                 </div>
22 |                 <div class="bottom">
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 |                 </div>
30 |             </div>
31 | 
32 |             <!-- Accordion Box 2 -->
33 |             <div class="accordionBox">
34 |                 <div id="top" class="top">
35 |                     <span>What is CSS ?</span>
36 |                 </div>
37 |                 <div class="bottom">
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 |                 </div>
44 |             </div>
45 | 
46 |             <!-- Accordion Box 3 -->
47 |             <div class="accordionBox">
48 |                 <div id="top" class="top">
49 |                     <span>What is JS ?</span>
50 |                 </div>
51 |                 <div class="bottom">
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 |                 </div>
57 |             </div>
58 | 
59 |         </div>
60 |     </div>
61 | 
62 |     <script>
63 | 
64 |         let topBox = document.querySelectorAll(".top");
65 | 
66 |         topBox.forEach((x) => x.addEventListener("click", dropFunction));
67 | 
68 |         function dropFunction() {
69 |             this.classList.toggle("active");
70 |             
71 |         }
72 | 
73 | 
74 |     </script>
75 | 
76 | </body>
77 | </html>
78 | 


--------------------------------------------------------------------------------
/Accordion Menu 5/accordion5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Accordion Menu 5/accordion5.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Accordion Menu 6/Accordion Menu 6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="Accordion Menu 6.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="wrapper">
14 |         <h2>Accordion Menu</h2>
15 | 
16 |         <!-- wrap 1 -->
17 |         <div class="wrap">
18 |             <div class="wrap_title">WRAP ONE</div>
19 |             <div class="wrap-text">
20 |                 <p>
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 |                 </p>
26 |             </div>
27 |         </div>
28 | 
29 |         <!-- wrap 2 -->
30 |         <div class="wrap">
31 |             <div class="wrap_title">WRAP TWO</div>
32 |             <div class="wrap-text">
33 |                 <p>
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 |                 </p>
39 |             </div>
40 |         </div>
41 | 
42 |         <!-- wrap 3 -->
43 |         <div class="wrap">
44 |             <div class="wrap_title">WRAP THREE</div>
45 |             <div class="wrap-text">
46 |                 <p>
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 |                 </p>
52 |             </div>
53 |         </div>
54 | 
55 |         <!-- wrap 4 -->
56 |         <div class="wrap">
57 |             <div class="wrap_title">WRAP FOUR</div>
58 |             <div class="wrap-text">
59 |                 <p>
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 |                 </p>
65 |             </div>
66 |         </div>
67 | 
68 |     </div>
69 | 
70 | 
71 |     <script>
72 | 
73 |         let wrap = document.querySelectorAll(".wrap");
74 |         
75 |         wrap.forEach((x) => x.addEventListener("click", function () {
76 |             this.classList.toggle("active");
77 |         }))
78 | 
79 |     </script>
80 | 
81 | </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/Accordion Menu 6/Accordion Menu 6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Accordion Menu 6/Accordion Menu 6.png


--------------------------------------------------------------------------------
/Animation - Nice Weather/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Animation - Nice Weather/Screenshot_1.png


--------------------------------------------------------------------------------
/Animation - Nice Weather/cssNiceWeather.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="cssNiceWeather.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="card">
14 | 
15 |             <span class="sun"></span>
16 | 
17 |             <div class="clouds smaller">
18 |                 <span class="cloud c1"></span>
19 |                 <span class="cloud c2"></span>
20 |                 <span class="cloud c3"></span>
21 |                 <span class="cloud c4"></span>
22 |                 <span class="cloud c5"></span>
23 |             </div>
24 | 
25 |             <div class="clouds medium">
26 |                 <span class="cloud c1"></span>
27 |                 <span class="cloud c2"></span>
28 |                 <span class="cloud c3"></span>
29 |                 <span class="cloud c4"></span>
30 |                 <span class="cloud c5"></span>
31 |                 <span class="cloud c6"></span>
32 |             </div>
33 | 
34 |             <div class="clouds bigger">
35 |                 <span class="cloud c1"></span>
36 |                 <span class="cloud c2"></span>
37 |                 <span class="cloud c3"></span>
38 |                 <span class="cloud c4"></span>
39 |                 <span class="cloud c5"></span>
40 |             </div>
41 | 
42 |         </div>
43 |     </div>
44 | 
45 | 
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Animation Button 2/Photo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Animation Button 2/Photo.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Animation Button 2/animationRadioButton.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="animationRadioButton.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <h1>animation radio button</h1>
13 |     <div id="radio_buttons">
14 |         <input type="radio" name="sec" id="input1" />
15 |         <label for="input1"></label>
16 |         <input type="radio" name="sec" id="input2" />
17 |         <label for="input2"></label>
18 |         <input type="radio" name="sec" id="input3" />
19 |         <label for="input3"></label>
20 |         <input type="radio" name="sec" id="input4" />
21 |         <label for="input4"></label>
22 |         <input type="radio" name="sec" id="input5" />
23 |         <label for="input5"></label>
24 |         <span id="slider"></span>
25 |     </div>
26 | 
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Animation Button/animeBut.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="animeBut.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 | 
13 |         <form class="toggle">
14 | 
15 |             <input type="radio" id="but1" name="but" />
16 |             <label for="but1">True</label>
17 | 
18 |             <input type="radio" id="but2" name="but" />
19 |             <label for="but2">Codes</label>
20 | 
21 |             <div id="flap"><span class="content">true</span></div>
22 | 
23 |         </form>
24 |     </div>
25 | 
26 |     <script>
27 | 
28 |         let st = {};
29 | 
30 |         st.flap = document.querySelector("#flap");
31 |         st.toggle = document.querySelector(".toggle");
32 | 
33 |         st.but1 = document.querySelector("#but1");
34 |         st.but2 = document.querySelector("#but2"); 
35 | 
36 |         st.flap.addEventListener("transitionend", () => {
37 | 
38 |             if (st.but1.checked) {
39 |                 st.toggle.style.transform = "rotateY(-15deg)";
40 |                 setTimeout(() => st.toggle.style.transform = "", 400);
41 |             } else {
42 |                 st.toggle.style.transform = "rotateY(15deg)";
43 |                 setTimeout(() => st.toggle.style.transform = "", 400)
44 |             }
45 | 
46 |         })
47 | 
48 |         st.clickHandler = (e) => {
49 |             if (e.target.tagName === "LABEL") {
50 |                 setTimeout(() => {
51 |                     st.flap.children[0].textContent = e.target.textContent;},250);
52 |                 }
53 |             }
54 | 
55 |         document.addEventListener("DOMContentLoaded", () => {
56 |             st.flap.children[0].textContent = st.but2.nextElementSibling.textContent;
57 |         });
58 |         document.addEventListener("click",(e)=>st.clickHandler(e))
59 | 
60 |     </script>
61 | 
62 | 
63 | </body>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Animation Check/checkAnimation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="checkAnimation.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 9 | </head>
10 | <body>
11 | 
12 |     <form class="form">
13 |         <h2>Checkboxes</h2>
14 |         <div class="inputGroup">
15 |             <input id="option1" name="option1" type="checkbox" />
16 |             <label for="option1">Option One</label>
17 |         </div>
18 | 
19 |         <div class="inputGroup">
20 |             <input id="option2" name="option2" type="checkbox" />
21 |             <label for="option2">Option Two</label>
22 |         </div>
23 | 
24 |         
25 |         <h2>Radio Buttons</h2>
26 |         <div class="inputGroup">
27 |             <input id="radio1" name="radio" type="radio" />
28 |             <label for="radio1">Yes</label>
29 |         </div>
30 |         <div class="inputGroup">
31 |             <input id="radio2" name="radio" type="radio" />
32 |             <label for="radio2">No</label>
33 |         </div>
34 |     </form>
35 | 
36 |     <script></script>
37 | 
38 | 
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Array Accordion/Array Accordion.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Array Accordion/Array Accordion.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Array Card Flip/js.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Array Card Flip/js.jpg


--------------------------------------------------------------------------------
/Array Slice Animation/ArraySliceAnimation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html>
  4 | <head>
  5 |     <meta charset="utf-8" />
  6 |     <title>page</title>
  7 |     <link rel="stylesheet" type="text/css" href="ArraySliceAnimation.css">
  8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  9 | </head>
 10 | <body onload="message()">
 11 | 
 12 |     <div class="container">
 13 | 
 14 |         <h2>ARRAY SLICE</h2>
 15 | 
 16 |         <div class="boxes">
 17 |             <div class="box">0</div>
 18 |             <div class="box">1</div>
 19 |             <div class="box">2</div>
 20 |             <div class="box">3</div>
 21 |             <div class="box">4</div>
 22 |             <div class="box">5</div>
 23 |             <div class="box">6</div>
 24 |             <div class="box">7</div>
 25 |             <div class="box">8</div>
 26 |         </div>
 27 | 
 28 |         <div class="boxInput">
 29 |             <span class="boxInp1">
 30 |                 <span class="num1" id="numtxt">start</span>
 31 |                 <span style=
 32 |                       "color:#a88e32; font-size: 30px; padding: 0;margin:0;" 
 33 |                       >{</span>
 34 |                 <input class="numBox" id="inputBegin" value="0" maxlength="1"/>
 35 |                 <span style=
 36 |                       "color:#a88e32; font-size: 30px" 
 37 |                       >}</span>
 38 |             </span><br />
 39 |             <span class="boxInp2">
 40 |                 <span class="num2" id="numtxt">,end</span>
 41 |                 <span style=
 42 |                       "color:#a88e32; font-size: 30px; padding: 0;margin:0;" 
 43 |                       >{</span>
 44 |                 <input class="numBox" id="inputEnd" value="0" maxlength="1"/>
 45 |                 <span style=
 46 |                       "color:#a88e32; font-size: 30px" 
 47 |                       >}</span>
 48 |             </span><br />
 49 |         </div>
 50 | 
 51 |     </div>
 52 |     
 53 | 
 54 | 
 55 | 
 56 |     <script>
 57 | 
 58 |         function message() {
 59 |             alert("truecodes.org")
 60 |         }
 61 | 
 62 |         for(var event of ['input', 'keyup', 'wheel']) {
 63 |             inputBegin.addEventListener(event, keyProcess)
 64 |             inputEnd.addEventListener(event, keyProcess)
 65 |         }
 66 | 
 67 |         var say = 0;
 68 |         function keyProcess(e) {
 69 |             if(e.deltaY && Date.now() - say > 200){
 70 |                 say = Date.now();
 71 |                 let change = Math.sign(e.deltaY);
 72 |                 this.value = Math.min(9, Math.max(0, Number(this.value) + change));
 73 |             }
 74 | 
 75 |             if (e.keyCode == 38) {
 76 |                 var value = Math.min(Number(this.value) + 1, 9);
 77 |                 this.value = value;
 78 |             }
 79 |             if (e.keyCode == 40) {
 80 |                 var value = Math.max(Number(this.value) - 1, 0);
 81 |                 this.value = value;
 82 |             }
 83 | 
 84 |             var begin = Number(inputBegin.value)
 85 |             var end = Number(inputEnd.value)
 86 | 
 87 |             var arr = []
 88 |             var arrayElements = document.querySelectorAll('.boxes .box')
 89 |             for(var ele of arrayElements) {
 90 |                 ele.classList.remove('selected')
 91 |                 arr.push(ele)
 92 |             }
 93 | 
 94 |             var slicedElements = arr.slice(begin, end)
 95 |             for(var ele of slicedElements) {
 96 |                 ele.classList.add('selected')
 97 |             }
 98 | 
 99 |         }
100 | 
101 | 
102 |     </script>
103 | 
104 | </body>
105 | </html>


--------------------------------------------------------------------------------
/Array Slice Animation/JavaScript Array Slice Animation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Array Slice Animation/JavaScript Array Slice Animation.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Array.from Animation/Array.from Animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="Array.from Animation.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 | 
14 |     <div class="container">
15 |         <h2>Array.from</h2>
16 |         <input type="text" id="text" placeholder="text...."/>
17 |         <button onclick="myFunction()">CLICK</button>
18 |         <div class="boxes"></div>
19 |     </div>
20 | 
21 |     <script>
22 | 
23 | 
24 | 
25 |         function myFunction() {
26 |             let text = document.getElementById("text").value;
27 |             let boxes = document.querySelector(".boxes");
28 |             let list = Array.from(text);
29 | 
30 |                 list.forEach(function (x) {
31 |                     let box = document.createElement("div");
32 |                     box.setAttribute("class", "box");
33 |                     let txt = document.createTextNode(x);
34 |                     box.appendChild(txt)
35 |                     document.querySelector(".boxes").appendChild(box);
36 |                 })
37 | 
38 |                 for (let i = 0; i < 3; i++) {
39 |                     let line = document.createElement("br");
40 | 
41 |                     boxes.appendChild(line);
42 |                 }
43 |         }
44 | 
45 | 
46 |     </script>
47 | 
48 | 
49 | 
50 | 
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/Array.from Animation/Array.from Animation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Array.from Animation/Array.from Animation.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Before & After Comparison/JavaScript Before & After Comparison.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="JavaScript Before & After Comparison.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="image"></div>
15 |         <div class="image"></div>
16 |     </div>
17 | 
18 |     <script>
19 | 
20 |         document.querySelectorAll('.container').forEach((elem) => {
21 |             let x, width
22 |             elem.onmouseenter = () => {
23 |                 const size = elem.getBoundingClientRect()
24 |                 x = size.x
25 |                 width = size.width
26 |             }
27 | 
28 |             elem.onmousemove = (e) => {
29 |                 const horizontal = ((e.clientX - x) / width) * 100
30 |                 elem.style.setProperty('--x', horizontal + '%')
31 |             }
32 |         })
33 | 
34 |     </script>
35 |    
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/Before & After Comparison/JavaScript Before & After Comparison.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Before & After Comparison/JavaScript Before & After Comparison.png


--------------------------------------------------------------------------------
/Bootstrap Sidebar Menu/Bootstrap Sidebar Menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Bootstrap Sidebar Menu/Bootstrap Sidebar Menu.png


--------------------------------------------------------------------------------
/Calculator/calculator.html:
--------------------------------------------------------------------------------
 1 | <html> 
 2 |    <head> 
 3 |       <script> 
 4 |          //function that display value 
 5 |          function dis(val) 
 6 |          { 
 7 |              document.getElementById("result").value+=val 
 8 |          } 
 9 |            
10 |          //function that evaluates the digit and return result 
11 |          function solve() 
12 |          { 
13 |              let x = document.getElementById("result").value 
14 |              let y = eval(x) 
15 |              document.getElementById("result").value = y 
16 |          } 
17 |            
18 |          //function that clear the display 
19 |          function clr() 
20 |          { 
21 |              document.getElementById("result").value = "" 
22 |          } 
23 |       </script> 
24 |       <!-- for styling -->
25 |       <style> 
26 |          .title{ 
27 |          margin-bottom: 10px; 
28 |          text-align:center; 
29 |          width: 210px; 
30 |          color:green; 
31 |          border: solid black 2px; 
32 |          } 
33 |   
34 |          input[type="button"] 
35 |          { 
36 |          background-color:green; 
37 |          color: black; 
38 |          border: solid black 2px; 
39 |          width:100% 
40 |          } 
41 |   
42 |          input[type="text"] 
43 |          { 
44 |          background-color:white; 
45 |          border: solid black 2px; 
46 |          width:100% 
47 |          } 
48 |       </style> 
49 |    </head> 
50 |    <!-- create table -->
51 |    <body> 
52 |       <div class = title >HTML Calculator</div> 
53 |       <table border="1"> 
54 |          <tr> 
55 |             <td colspan="3"><input type="text" id="result"/></td> 
56 |             <!-- clr() function will call clr to clear all value -->
57 |             <td><input type="button" value="c" onclick="clr()"/> </td> 
58 |          </tr> 
59 |          <tr> 
60 |             <!-- create button and assign value to each button -->
61 |             <!-- dis("1") will call function dis to display value -->
62 |             <td><input type="button" value="1" onclick="dis('1')"/> </td> 
63 |             <td><input type="button" value="2" onclick="dis('2')"/> </td> 
64 |             <td><input type="button" value="3" onclick="dis('3')"/> </td> 
65 |             <td><input type="button" value="/" onclick="dis('/')"/> </td> 
66 |          </tr> 
67 |          <tr> 
68 |             <td><input type="button" value="4" onclick="dis('4')"/> </td> 
69 |             <td><input type="button" value="5" onclick="dis('5')"/> </td> 
70 |             <td><input type="button" value="6" onclick="dis('6')"/> </td> 
71 |             <td><input type="button" value="-" onclick="dis('-')"/> </td> 
72 |          </tr> 
73 |          <tr> 
74 |             <td><input type="button" value="7" onclick="dis('7')"/> </td> 
75 |             <td><input type="button" value="8" onclick="dis('8')"/> </td> 
76 |             <td><input type="button" value="9" onclick="dis('9')"/> </td> 
77 |             <td><input type="button" value="+" onclick="dis('+')"/> </td> 
78 |          </tr> 
79 |          <tr> 
80 |             <td><input type="button" value="." onclick="dis('.')"/> </td> 
81 |             <td><input type="button" value="0" onclick="dis('0')"/> </td> 
82 |             <!-- solve function call function solve to evaluate value -->
83 |             <td><input type="button" value="=" onclick="solve()"/> </td> 
84 |             <td><input type="button" value="*" onclick="dis('*')"/> </td> 
85 |          </tr> 
86 |       </table> 
87 |    </body> 
88 | </html>    


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Card Flip 1/JavaScript Card Flip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="JavaScript Card Flip.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body onkeydown="keyFunction(event)">
12 | 
13 |     <div class="container">
14 | 
15 |         <div class="card">
16 |             <div class="front word1_front">TRUECODES</div>
17 |         </div>
18 | 
19 |         <div class="card">
20 |             <div class="back word1_back">CODEBLOGGER</div>
21 |         </div>
22 |     </div>
23 | 
24 |     <script>
25 | 
26 |         let box = document.querySelector(".container");
27 |         box.addEventListener("click", function () {
28 |             box.classList.toggle("active");
29 |         });
30 | 
31 |         function keyFunction(e) {
32 |             if (e.keyCode == 38) {
33 |                 box.classList.add("active");
34 |             };
35 |             if (e.keyCode == 40) {
36 |                 box.classList.remove("active");
37 |             };
38 |         };
39 | 
40 |     </script>
41 | 
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/Card Flip 1/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Card Flip 1/Screenshot_1.png


--------------------------------------------------------------------------------
/Card Slide In Hover/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <link rel="stylesheet" type="text/css" href="style.css">
 5 | </head>
 6 | <body>
 7 | 
 8 | <div class="card">
 9 |   <div class="card-in">
10 |     <div class="card-text">
11 |       Codeblogger
12 |     </div>
13 |     <div class="card-background"></div>
14 |   </div>
15 | </div>
16 | 
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Dark Light Menu/Dark Light Menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="1.page.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <span class="dark">DARK</span>
14 |         <div class="button"></div>
15 |         <span class="light">LIGHT</span>
16 |     </div>
17 |     <div class="menu">
18 |         <ul>
19 |             <a class="active" href="#" >HOME</a>
20 |             <a href="https://www.instagram.com/codeblogger/?hl=tr"  target="_blank">INSTAGRAM</a>
21 |             <a href="https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT"  target="_blank">GITHUB</a>
22 |             <a href="https://truecodes.org"  target="_blank">WEBPAGE</a>
23 |             <a href="#">ABOUT</a>
24 |         </ul>
25 |     </div>
26 | 
27 |     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
28 |     <script type="text/javascript">
29 |         $(".container").on("click", () => {
30 |             $("body").toggleClass("light-theme");
31 |         });
32 |     </script>
33 | 
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/Dark Light Menu/Dark Light Menu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Dark Light Menu/Dark Light Menu.png


--------------------------------------------------------------------------------
/Diffirent Animation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Diffirent Animation/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Dna Animation/DnaAnimation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="DnaAnimation.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="all">
13 |         <div class="container">
14 |             <div class="circle"></div>
15 |             <div class="circle"></div>
16 |         </div>
17 |         <div class="container">
18 |             <div class="circle"></div>
19 |             <div class="circle"></div>
20 |         </div>
21 |         <div class="container">
22 |             <div class="circle"></div>
23 |             <div class="circle"></div>
24 |         </div>
25 |         <div class="container">
26 |             <div class="circle"></div>
27 |             <div class="circle"></div>
28 |         </div>
29 |         <div class="container">
30 |             <div class="circle"></div>
31 |             <div class="circle"></div>
32 |         </div>
33 |         <div class="container">
34 |             <div class="circle"></div>
35 |             <div class="circle"></div>
36 |         </div>
37 |         <div class="container">
38 |             <div class="circle"></div>
39 |             <div class="circle"></div>
40 |         </div>
41 |         <div class="container">
42 |             <div class="circle"></div>
43 |             <div class="circle"></div>
44 |         </div>
45 |         <div class="container">
46 |             <div class="circle"></div>
47 |             <div class="circle"></div>
48 |         </div>
49 |         <div class="container">
50 |             <div class="circle"></div>
51 |             <div class="circle"></div>
52 |         </div>
53 |         <div class="container">
54 |             <div class="circle"></div>
55 |             <div class="circle"></div>
56 |         </div>
57 |         <div class="container">
58 |             <div class="circle"></div>
59 |             <div class="circle"></div>
60 |         </div>
61 |     </div>
62 | 
63 | 
64 | 
65 | </body>
66 | </html>
67 | 


--------------------------------------------------------------------------------
/Dna Animation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Dna Animation/Screenshot_1.png


--------------------------------------------------------------------------------
/Eyes Animation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Eyes Animation/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Eyes Animation/cssEyesAnimation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="cssEyesAnimation.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="wrapper">
13 |         <div class="eye left"><span></span></div>
14 |         <div class="eye right"><span></span></div>
15 |     </div>
16 |     <div class="nose"></div>
17 | 
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/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/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Find The Largest And Smallest Number/Find The Largest And Smallest Number On An Array.png


--------------------------------------------------------------------------------
/Find The Largest And Smallest Number/Find the largest and smallest number on an array.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 7 |     <style>
 8 |         body, html {
 9 |             padding: 0;
10 |             margin: 20px;
11 |             background: #333;
12 |             color: #e53f3f;
13 |             font-family: Verdana;
14 |             display: flex;
15 |             height: 100vh;
16 |             justify-content: center;
17 |             align-items: center
18 |         }
19 |         input {
20 |             width: 265px;
21 |             display: inline-block;
22 |             border: none;
23 |             border-radius: 20px 0px 0px 20px;
24 |             padding: 5px;
25 |             padding-left: 10px;
26 |             outline: none;
27 |             font-family: Verdana;
28 |         }
29 |         #add {
30 |             width: 50px;
31 |             position: relative;
32 |             display: inline-block;
33 |             border: none;
34 |             border-radius: 0px 20px 20px 0px;
35 |             padding: 4px;
36 |             margin-left: -5px;
37 |             top: -1.5px;
38 |             background: #e53f3f;
39 |             color: #fff;
40 |             font-size: 14px;
41 |             outline: none;
42 |         }
43 |         button {
44 |             width: 160px;
45 |             padding: 5px;
46 |             background: #e53f3f;
47 |             color: #fff;
48 |             border: none;
49 |             margin-top: 10px;
50 |             margin-left: 5px;
51 |         }
52 |         h2{
53 |             font-size: 16px;
54 |         }
55 |     
56 |     </style>
57 | </head>
58 | <body>
59 | 
60 |     <div class="container">
61 |         <h2>Find the largest and smallest number on an array</h2>
62 |         <input type="number" id="numbers" placeholder="Enter as many numbers as you want." />
63 |         <button onclick="add()" id="add">ADD</button><br />
64 |         <button onclick="small()">Smallest number</button>
65 |         <button onclick="bigger()">Biggest number</button>
66 |     </div>
67 | 
68 | 
69 |     <script>
70 | 
71 |         
72 |         let NumValues = [];
73 | 
74 |         function add() {
75 |             let numbers = document.getElementById("numbers").value;
76 |             NumValues.push(numbers);
77 |             console.log(NumValues)
78 |         }
79 | 
80 |         function small() {
81 |             let min = Math.min.apply(Math, NumValues);
82 |             alert(min)
83 |         }
84 | 
85 |         function bigger() {
86 |             let max = Math.max.apply(Math, NumValues);
87 |             alert(max)
88 |         }
89 | 
90 | 
91 |     </script>
92 | 
93 | 
94 | </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Growing Card Flip/Growing Card Flip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="Growing Card Flip.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="container">
14 |         <div class="card">
15 |             <div class="front">
16 |                 Front
17 |             </div>
18 |             <div class="back">
19 |                 Back
20 |             </div>
21 |         </div>
22 |     </div>
23 | 
24 |     <script>
25 | 
26 |         let card = document.querySelector(".card");
27 |         card.addEventListener("click", function () {
28 |             card.classList.toggle("active");
29 |         });
30 | 
31 |     </script>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Growing Card Flip/Screenshot_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Growing Card Flip/Screenshot_2.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Hover Effect 2/JShoverEffect.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="JShoverEffect.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 | 
13 |     <div id="container">
14 |         <div id="bot-container" onclick="show();">
15 | 
16 |             <div id="text">JS</div>
17 |                 <div class="loader a1"></div>
18 |                 <div class="loader a2"></div>
19 |                 <div class="loader a3"></div>
20 |                 <div class="loader a4"></div>
21 |         </div>
22 |     </div>
23 | 
24 | 
25 |     <script>
26 | 
27 |         var full = false;
28 | 
29 |         function show() {
30 |             full = !full;
31 |             document.getElementById("bot-container").style.backgroundColor = full ? "#aa9600" : "transparent";
32 |         }
33 | 
34 |     </script>
35 | 
36 | 
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/Hover Effect 2/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Hover Effect 2/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Hover Effect/css_hover_effect.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="css_hover_effect.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div id="container">
13 |         <div id="leftBox">
14 |             <div id="date">
15 |                 <p id="day">12</p>
16 |                 <p id="month">JUN</p>
17 |             </div>
18 |             <div id="text">
19 |                 <h3>An Abstract Post Heading</h3>
20 |                 <p>Which is worse, that everyone has his price, or that the price is always so low.</p>
21 |             </div>
22 |         </div>
23 |         <div id="midBox">
24 |             <div id="date">
25 |                 <p id="day">16</p>
26 |                 <p id="month">JUN</p>
27 |             </div>
28 |             <div id="text">
29 |                 <h3>Down with this sort of thing</h3>
30 |                 <p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
31 |             </div>
32 |         </div>
33 |         <div id="rightBox">
34 |             <div id="date">
35 |                 <p id="day">20</p>
36 |                 <p id="month">JUN</p>
37 |             </div>
38 |             <div id="text">
39 |                 <h3>The World Ended Yesterday</h3>
40 |                 <p>The only skills I have the patience to learn are those that have no real application in life.</p>
41 |             </div>
42 |         </div>
43 |     </div>
44 | 
45 | 
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/Hypotenuse calculation/HypotenuseCalculation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 7 |     <style>
 8 |         body, html {
 9 |             padding: 0;
10 |             margin: 0;
11 |             background: #333
12 |         }
13 |         .container{
14 |             position: absolute;
15 |             top: 50%;
16 |             left: 50%;
17 |             transform: translate(-50%,-50%);
18 |             width: 300px;
19 |             height: 250px;
20 |             border: 10px solid #e53f3f;
21 |             border-radius: 20px;
22 |             box-shadow: 0px 0px 20px 10px #262626;
23 |         }
24 |         input{
25 |             display: block;
26 |             width: 150px;
27 |             padding: 5px;
28 |             padding-left: 15px;
29 |             margin: 0 auto;
30 |             border: none;
31 |             background: rgba(236, 236, 236, .9);
32 |             border-radius: 20px;
33 |             outline: none;
34 |             font-family: Verdana;
35 |             font-weight: bold;
36 |         }
37 |         button {
38 |             display: block;
39 |             width: 170px;
40 |             margin: 0 auto;
41 |             padding: 5px;
42 |             border: none;
43 |             background: #e53f3f;
44 |             border-radius: 20px;
45 |             outline: none;
46 |             font-family: Verdana;
47 |             font-weight: bold;
48 |         }
49 |         h2{
50 |             text-align: center;
51 |             font-family: Verdana;
52 |             color: #e53f3f;
53 |             text-shadow: 0px 0px 2px #262626;
54 |             text-transform: uppercase;
55 |         }
56 |     </style>
57 | </head>
58 | <body>
59 | 
60 |     <div class="container">
61 |         <h2>Hypotenuse calculation</h2>
62 |         <input type="number" id="edge1" placeholder="1.Edge"/><br />
63 |         <input type="number" id="edge2" placeholder="2.Edge" /><br />
64 |         <button onclick="calc()">Calculate</button>
65 |     </div>
66 | 
67 | 
68 |     <script>
69 | 
70 |         function calc() {
71 |             var edge1 = Number(document.getElementById("edge1").value),
72 |                 edge2 = Number(document.getElementById("edge2").value);
73 | 
74 |             let edge1sqr = edge1 * edge1,
75 |                 edge2sqr = edge2 * edge2;
76 | 
77 |             let clc = Math.sqrt(edge1sqr + edge2sqr);
78 |             alert(clc)
79 |         }
80 |         
81 | 
82 |     </script>
83 | 
84 | 
85 | </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/Hypotenuse calculation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Hypotenuse calculation/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Image Slider/slider css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Image Slider/slider css.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Information Card Slider/JS Information Card Slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Information Card Slider/JS Information Card Slider.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/JS CLASS - Login System/JS CLASS - Login System.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>CARD GAME</title>
 6 |     <link rel="stylesheet" type="text/css" href="JS CLASS - Login System.css">
 7 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
 8 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 9 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
11 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
12 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
13 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
14 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
15 | </head>
16 | <body>
17 | 
18 |     <div id="login_table">
19 |         <div class="input-group mb-3">
20 |           <div class="input-group-prepend">
21 |             <span class="input-group-text"><i class="fas fa-user"></i></span>
22 |           </div>
23 |           <input type="text" class="form-control" id="username" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
24 |         </div>
25 |         <div class="input-group mb-3">
26 |           <div class="input-group-prepend">
27 |             <span class="input-group-text"><i class="fas fa-lock-open"></i></span>
28 |           </div>
29 |           <input type="password" class="form-control" id="password" placeholder="Password" aria-label="Username" aria-describedby="basic-addon1">
30 |         </div>
31 |       <button id="login" class="btn btn-dark btn-lg btn-block">LOGIN</button>
32 |     </div>
33 | 
34 |     <div id="myModal" class="modal">
35 |         <div class="modal-content">
36 |           <span class="close">&times;</span>
37 |           <p class="message"></p>
38 |         </div>
39 |     </div>
40 | 
41 | 
42 | 
43 | <script>
44 | 
45 |   class Users{
46 |     constructor(username,password){
47 |       this.username = username;
48 |       this.password = password;
49 |     }
50 |     control_variable(control_username,control_password){
51 |       this.control_username = control_username;
52 |       this.control_password = control_password;
53 |     }
54 |     control(){
55 |       if(this.control_username == this.username && this.control_password == this.password){
56 |         $(".message").text(`WELCOME ${$('#username').val()}`)
57 |       }else{
58 |         $(".message").text('You have entered incorrectly.')
59 |       }
60 |     }
61 |   };
62 | 
63 |   let User_variables = {
64 |     // username : password
65 |     "furkan" : 'gulsen',
66 |     "maria"  : "allen",
67 |     "bob"    : "quenn",
68 |     'rick'   : 'rick123'
69 |   }
70 | 
71 |   var modal = document.getElementById('myModal');
72 |   var btn = document.getElementById("myBtn");
73 |   var span = document.getElementsByClassName("close")[0];
74 | 
75 |   $("#login").click(function(){
76 |     let user = new Users($('#username').val(), $('#password').val());
77 |     var password = User_variables[$('#username').val()]
78 |     user.control_variable($('#username').val(),password);
79 |     user.control();
80 |     modal.style.display = "block";
81 |   });
82 | 
83 |   span.onclick = function() {
84 |     modal.style.display = "none";
85 |   };
86 | 
87 |   window.onclick = function(event) {
88 |     if (event.target == modal) {
89 |       modal.style.display = "none";
90 |     }
91 |   }
92 | 
93 | </script>
94 | </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/JS Promise Login System/JS Promise Login System.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" type="text/css" href="main.css">
 7 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
 8 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 9 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
10 |     <meta name="viewport" content="width=device-width, initial-scale=1">
11 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
12 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
13 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
14 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
15 | 
16 | </head>
17 | <body>
18 | 
19 |     <div class="container mt-5 border p-3">
20 |         <h2 class="title text-center">LOGIN SYSTEM</h2>
21 |         <input type="text" id="username" class=" my-2 form-control text-center" placeholder="USERNAME">
22 |         <input type="password" id="password" class=" my-2 form-control text-center" placeholder="PASSWORD">
23 |         <button id="but" class="btn btn-danger btn-block">LOGIN</button>
24 |         <div id="result" class="form-block text-center mt-4"></div>
25 |     </div>
26 | 
27 |   <script>
28 | 
29 |         $(document).ready(function(){
30 | 
31 |         $("#but").click(function(){
32 | 
33 |             let username = $("#username").val(),
34 |             password = $("#password").val();
35 | 
36 |             const setPromise = new Promise(function(resolve,reject){
37 |                 if(username == "truecodes" && password == "codeblogger"){
38 |                     resolve("Welcome " + username );
39 |                 }else{
40 |                     if(username == "truecodes" && password != "codeblogger"){
41 |                         reject("You entered the password incorrectly.")
42 |                     }
43 |                     else if(username != "truecodes" && password == "codeblogger"){
44 |                         reject("You entered the username incorrectly.")
45 |                     }else{
46 |                         reject("Please check your username and password again.")
47 |                     }
48 |                     
49 |                 }
50 |             })
51 | 
52 |             setPromise.then(function(message){
53 |                 alert(message);
54 |             }).catch(function(a){
55 |                 alert(a)
56 |             })
57 |         })
58 | 
59 |     })
60 |     
61 | 
62 |   </script>
63 | 
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/JS Promise Login System/Screenshot_3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/JS Promise Login System/Screenshot_3.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/JavaScript To Do List/JavaScript To Do List.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" type="text/css" href="JavaScript To Do List.css">
 7 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 8 | </head>
 9 | <body>
10 | 
11 |     <div class="container">
12 |         <h2>TO DO LIST</h2>
13 |         <div id="addBox">
14 |             <div id="plus" onclick="addBox()"></div>
15 |             <input type="text" id="txt" class="txt" placeholder="Add to-do..."/>
16 |         </div>
17 | 
18 |         <div id="list">
19 |             <div class="box" id="box">
20 |                 <div class="txtBox">Örnek kutu</div>
21 |             </div>
22 |         </div>
23 |     </div>
24 | 
25 | 
26 | 
27 |     <script>
28 | 
29 | 
30 |         let box = document.getElementsByClassName("box");
31 |         var i;
32 | 
33 |         for (i = 0; i < box.length; i++) {
34 |             let x = document.createElement("DIV");
35 |             x.setAttribute("class", "x");
36 |             box[i].appendChild(x);
37 |         }
38 |         
39 | 
40 |         let Xbox = document.getElementsByClassName("x");
41 | 
42 | 
43 |         function addBox() {
44 |             let div = document.createElement("div");
45 |             div.setAttribute("class", "box");
46 |             div.setAttribute("id", "box");
47 |             let txt = document.getElementById("txt").value;
48 |             let txtNode = document.createTextNode(txt);
49 |             let txtBox = document.createElement("div");
50 |             txtBox.setAttribute("class", "txtBox");
51 |             txtBox.appendChild(txtNode);
52 |             div.appendChild(txtBox);
53 |             
54 | 
55 |             if (txt === "") {
56 |                 alert("You can't do an empty job");
57 |             }
58 |             else {
59 |                 document.getElementById("list").appendChild(div);
60 |             }
61 |             document.getElementById("txt").value = "";
62 | 
63 |             let x = document.createElement("DIV");
64 |             x.setAttribute("class", "x");
65 |             box[i].appendChild(x);
66 |             for (i = 0; i < Xbox.length; i++) {
67 |                 Xbox[i].onclick = function () {
68 |                     this.parentElement.classList.add("active")
69 |                 }
70 |             }
71 | 
72 |         }
73 | 
74 |         let list = document.getElementById("list");
75 |         list.addEventListener("click", function (e) {
76 |             if (e.target.getAttribute("class") === "box") {
77 |                 e.target.classList.toggle("checked");
78 |             }
79 |         },false)
80 | 
81 |     </script>
82 | 
83 | </body>
84 | </html>


--------------------------------------------------------------------------------
/JavaScript To Do List/JavaScript To Do List.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/JavaScript To Do List/JavaScript To Do List.png


--------------------------------------------------------------------------------
/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.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/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 | }


--------------------------------------------------------------------------------
/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/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/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/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 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Library System/images/wallpaper.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Library System/images/wallpaper.jpg


--------------------------------------------------------------------------------
/Line Menu Animation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Line Menu Animation/Screenshot_1.png


--------------------------------------------------------------------------------
/Line Menu Animation/lineMenu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="lineMenu.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="center">
14 |             <div class="menu paused">
15 |                 <div class="menu-top"></div>
16 |                 <div class="top-line"></div>
17 |                 <div class="menu-bottom"></div>
18 |                 <div class="bottom-line"></div>
19 |             </div>
20 |             <div class="menu-items">
21 |                 <ul>
22 |                     <li class="a">HOME</li>
23 |                     <li>INSTAGRAM</li>
24 |                     <li>WEBPAGE</li>
25 |                     <li>GITHUB</li>
26 |                 </ul>
27 |             </div>
28 |         </div>
29 |     </div>
30 | 
31 | 
32 |     <script>
33 | 
34 |         line = document.querySelector(".menu");
35 |         menu = document.querySelector(".menu-items");
36 | 
37 |         line.addEventListener("click", function () {
38 |             setTimeout(lineFunction, 200);
39 |             menuToggle();
40 |         })
41 | 
42 |         function lineFunction() {
43 |             if (line.classList.contains("paused") === true) {
44 |                 line.classList.replace("paused", "active");
45 |             }
46 |             else if (line.classList.contains("active") === true) {
47 |                 line.classList.remove("active");
48 |                 line.classList.add("inactive");
49 |             }
50 |             else {
51 |                 line.classList.remove("inactive");
52 |                 line.classList.add("active");
53 |             }
54 |         }
55 | 
56 |         function menuToggle() {
57 |             menu.classList.toggle("active")
58 |         }
59 | 
60 |     </script>
61 | </body>
62 | </html>
63 | 


--------------------------------------------------------------------------------
/Loding Animation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Loding Animation/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Loding Animation/cssLodingAnimation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="cssLodingAnimation.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="top a1"></div>
13 |     <div class="top a2"></div>
14 |     <div class="top a3"></div>
15 |     <div class="top a4"></div>
16 | 
17 | 
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/Marvel Tabs/Marvel Tabs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Marvel Tabs/Marvel Tabs.png


--------------------------------------------------------------------------------
/Mouse Scroll/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Mouse Scroll/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Mouse Scroll/mouseScroller.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="mouseScroller.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 | 
13 |     <div id="container">
14 |         <div id="scroll-down">
15 |             <div id="mouse">
16 |                 <div id="scroller"></div>
17 |             </div>
18 |         </div>
19 |     </div>
20 | 
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Name Animation/cssNameAnimation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="cssNameAnimation.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="menu-place">
13 |         <div class="menu-but">
14 |             <input type="checkbox" id="menu-check" />
15 |             <label for="menu-check" class="menu-label">
16 |                 <div class="menu-text"></div>
17 |             </label>
18 |         </div>
19 |     </div>
20 | 
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Only Css Menu/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Only Css Menu/Screenshot_1.png


--------------------------------------------------------------------------------
/Only Css Menu/only css menu.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" type="text/css" href="only css menu.css">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="link">
14 |           <div class="text">Home</div>
15 |         </div>
16 |         <div class="link">
17 |           <div class="text">Projects</div>
18 |         </div>
19 |         <div class="link">
20 |           <div class="text">Art</div>
21 |         </div>
22 |         <div class="link">
23 |           <div class="text">Social</div>
24 |         </div>
25 |         <div class="link">
26 |           <div class="text">Setup</div>
27 |         </div>
28 |         <div class="link">
29 |           <div class="text">Help</div>
30 |         </div>
31 |     </div>
32 | 
33 |     <script>
34 | 
35 |    
36 |     </script>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/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 | 


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


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Pomodora Timer/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta name="author" content="codeblogger">
 7 |     <meta name="keywords" content="pomodoro timer,pomodoro,work timer">
 8 |     <meta name="description" content="Free Pomodoro Timer">
 9 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
10 |     <title>Pomodoro</title>
11 | 
12 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <!-- Fontawesome -->
13 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
14 |     <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <!-- JQuery -->
15 | 
16 |     <link rel="stylesheet" href="./css/style.css">
17 |     
18 |     
19 | </head>
20 | <body>
21 | 
22 |     <div class="container">
23 |         <div class="clock_box">
24 |             <div class="clock">
25 |                 
26 |                     <svg
27 |                         class="progress-ring"
28 |                         width="500"
29 |                         height="500">
30 |                         <circle
31 |                         class="clock_circle"
32 |                         stroke="#EFEAEA"
33 |                         stroke-width="10"
34 |                         fill="transparent"
35 |                         r="225"
36 |                         cx="250"
37 |                         cy="250"
38 |                         />
39 |                         <circle  />
40 |                     </svg>
41 |                     <div class="back_circle"></div>
42 |                 <div class="clock_text" >
43 |                     <input class="pomodoro_name" placeholder="pomodoro name"/>
44 |                     <p class="timer"></p>
45 |                 </div>
46 | 
47 |             </div>
48 |             <div class="clock_button">
49 |                 <div class="smallCircle reload">
50 |                     <i class="fas fa-redo-alt"></i>
51 |                 </div>
52 |                 <div id="play_stop" class="bigCircle play_stop">
53 |                     <i style="display:block; margin-left: 22px" id="play" class="fas fa-play"></i>
54 |                     <i style="display:none; margin-left: 20px" id="stop" class="fas fa-pause"></i>
55 |                 </div>
56 |                 <div class="smallCircle info" data-toggle="modal" data-target=".bd-example-modal-sm">
57 |                     <i class="fas fa-info info "></i>
58 |                 </div>
59 |                 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
60 |                     <div class="modal-dialog modal-sm">
61 |                       <div class="modal-content p-3 text-center">
62 |                         This application is under development. <br>
63 |                         You can improve it by going to github at truecodes.org.<br>
64 |                         ©codeblogger 
65 |                       </div>
66 |                     </div>
67 |                   </div>
68 |             </div>
69 |         </div>
70 |     </div>
71 |       
72 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
73 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
74 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
75 |     <script src="./js/main.js"></script>
76 | 
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Prime Number/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Prime Number/Screenshot_1.png


--------------------------------------------------------------------------------
/Prime Number/primeNumber.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 7 |     <style>
 8 |         body, html {
 9 |             padding: 0;
10 |             margin: 20px;
11 |             background: #333;
12 |             color: #e53f3f;
13 |             font-family: Verdana;
14 |             display: flex;
15 |             height: 100vh;
16 |             justify-content: center;
17 |             align-items: center;
18 |         }
19 |         #container{
20 |             width: 250px;
21 |         }
22 |         input {
23 |             border: none;
24 |             border-radius: 20px 0px 0px 20px;
25 |             padding: 7px;
26 |             padding-left: 20px;
27 |             width: 100px;
28 |             outline: none;
29 |         }
30 |         button {
31 |             float: right;
32 |             width: 120px;
33 |             padding: 7px;
34 |             border: none;
35 |             border-radius: 0px 20px 20px 0px;
36 |             background: #e53f3f;
37 |             outline: none;
38 |             cursor: pointer;
39 |             color: #fff;
40 |             font-family: Arial;
41 |             font-weight: bold;
42 |             transition: .5s;
43 |         }
44 |         button:hover{
45 |             background: #cf274c;
46 |         }
47 |         #result{
48 |             margin-top: 20px;
49 |             width: 200px;
50 |             text-align:center;
51 |             margin-left: 30px;
52 |             font-size: 20px;
53 |             color: #fff;
54 |             font-family: Verdana;
55 |         }
56 |         h2{
57 |             text-transform: uppercase;
58 |             margin-left: 16px;
59 |         }
60 |     </style>
61 | </head>
62 | <body>
63 | 
64 |     <div id="container">
65 |         <h2>prime number?</h2>
66 |         <input type="number" id="num" />
67 |         <button onclick="control()">CONTROL</button><br />
68 |         <div id="result"></div>
69 |     </div>
70 | 
71 | 
72 |     <script>
73 | 
74 |         function control() {
75 |             let num = document.getElementById("num").value,
76 |                 res = document.getElementById("result");
77 |             var cntrl = 0;
78 |             for (var i = 2; i < num; i++) {
79 |                 if (num % i == 0) {
80 |                     cntrl++;
81 |                 }
82 |             }
83 |             if (cntrl == 0) {
84 |                 res.innerHTML = ("prime number")
85 |             }
86 |             else {
87 |                 res.innerHTML = ("not prime number")
88 |             }
89 |         }
90 | 
91 | 
92 |     </script>
93 | </body>
94 | </html>
95 | 


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


--------------------------------------------------------------------------------
/Quick Autocomplete/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
 8 |     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
 9 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
10 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
11 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
12 |     <link rel="stylesheet" href="./css/style.css">
13 |     
14 |     
15 |     <title>Quick Autocomplete</title>
16 | </head>
17 | <body>
18 |     
19 |     <div class="container mt-5">
20 |         <div class="row">
21 |             <div class="col-md-6 m-auto">
22 |                 <h3 class="text-center mb-3">
23 |                     <i class="fas fa-flag-usa"></i>State Capital Lookp
24 |                 </h3>
25 |                 <div class="form-group">
26 |                     <input type="text" id="search" class="form-control form-control-lg"
27 |                     placeholder="Enter state name or abbreviation"/>
28 |                 </div>
29 |                 <div id="match-list"></div>
30 |             </div>
31 |         </div>
32 |     </div>
33 |     <script src="./js/main.js"></script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/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 |             ` <div class="card card-body mb-1">
25 |                 <h4>${match.name} (${match.abbr})
26 |                     <span class="text-prim">${match.capital}</span>
27 |                     <small>Lat: ${match.lat} \ Long: ${match.long}</small>                    
28 |                 </h4>
29 |             </div>`
30 |             ).join("")
31 |         matchList.innerHTML = html;
32 |     }
33 | }
34 | 
35 | search.addEventListener("input", () => searchStates(search.value));


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HTML - CSS - JS Projects
 2 | 
 3 | <img src="https://dessaskod.files.wordpress.com/2018/05/1_l4xicbiiylz1otymwcoutw.jpeg?w=816" width="100%" />
 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 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/3D%20Box">3D Box</a>
10 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/3D%20Hover%20Effect%20-%20Alita%20Card">3D Hover Box - Alita Card</a>
11 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Accordion%20Menu%202">Accordion Menu 1</a>
12 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Accordion%20Menu%204">Accordion Menu 2</a>
13 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Accordion%20Menu%205">Accordion Menu 3</a>
14 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Accordion%20Menu%206">Accordion Menu 4</a>
15 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Array%20Accordion">Array Accordion</a>
16 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Responsive%20Accordion%20Slider">Responsive Accordion Slider</a>
17 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Bootstrap%20Sidebar%20Menu">Bootstrap Sidebar Menu</a>
18 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Dark%20Light%20Menu">Dark Light Menu</a>
19 | - <a href="https://github.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/tree/master/Line%20Menu%20Animation">Line Menu Animation</a>
20 | - <a href=""></a>
21 | - <a href=""></a>
22 | - <a href=""></a>
23 | - <a href=""></a>
24 | - <a href=""></a>
25 | - <a href=""></a>
26 | - <a href=""></a>
27 | - <a href=""></a>
28 | - <a href=""></a>
29 | - <a href=""></a>
30 | - <a href=""></a>
31 | - <a href=""></a>
32 | - <a href=""></a>
33 | - <a href=""></a>
34 | - <a href=""></a>
35 | - <a href=""></a>
36 | - <a href=""></a>
37 | - <a href=""></a>
38 | - <a href=""></a>
39 | - <a href=""></a>
40 | - <a href=""></a>
41 | - <a href=""></a>
42 | - <a href=""></a>
43 | - <a href=""></a>
44 | 


--------------------------------------------------------------------------------
/Radar/JavaScript Animation Radar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Radar/JavaScript Animation Radar.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Radar/radar.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="radar.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
 9 | </head>
10 | <body>
11 | 
12 |     <div id="container">   
13 |         <div onmousemove="myRadar(event)" id="out">
14 |             <div id="in"></div>
15 |             <div id="radar"></div>
16 |         </div>
17 |         <div id="coordinate"></div>
18 |     </div>
19 | 
20 |     <script>
21 | 
22 |         function myRadar(event) {
23 |             let x = event.clientX;
24 |             let y = event.clientY;
25 |             let show = document.getElementById("coordinate");
26 |             show.innerHTML = "X:" + x + "&emsp;&emsp;" + "Y:" + y;
27 |                
28 |         }
29 | 
30 |     </script>
31 | 
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Rectangle Area and Circumference Calculation/Javascript Rectangle Area and Circumference Calculation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="1.page.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div id="container">
13 |         <h2>Calculating Rectangle Area and Circumference</h2>
14 |         <div class="box1">
15 |             <p id="short">
16 |                 Short Edge
17 |                 <input type="number" id="shortEdge" />
18 |             </p>
19 |         </div>
20 |         <div class="box2">
21 |             <p id="long">
22 |                 Long Edge
23 |                 <input type="number" id="longEdge" />
24 |             </p>
25 |         </div>
26 |         <button id="res" onclick="res()">RESET</button>
27 |         <button id="calc" onclick="calc()" >CALCULATE</button>
28 |     </div>
29 | 
30 |     <script>
31 | 
32 |         function res() {
33 |             let shortEdge = document.getElementById("shortEdge"),
34 |                  longEdge = document.getElementById("longEdge");
35 |             shortEdge.value = "";
36 |             longEdge.value = "";
37 |         }
38 | 
39 |         function calc() {
40 |             let shortEdge = document.getElementById("shortEdge").value,
41 |                  longEdge = document.getElementById("longEdge").value;
42 |             let area = shortEdge * longEdge;
43 |             let circumference = (2 * shortEdge) + (2 * longEdge);
44 |             alert("area: " + area + "  /  " + "circumference: " + circumference);
45 |         }
46 | 
47 | 
48 |     </script>
49 | 
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/Rectangle Area and Circumference Calculation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Rectangle Area and Circumference Calculation/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Responsive Accordion Slider/Responsive Accordion Slider.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="Responsive Accordion Slider.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <h1>Accordion Slider</h1>
14 | 
15 |     <div class="accordion">
16 | 
17 |         <!-- BOX 1 -->
18 |         <div class="box a1">
19 |             <div class="image_1">
20 |                 <div class="text">
21 |                     <h2>Lorem Ipsum</h2>
22 |                     <p>
23 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
24 |                         Vestibulum iaculis nisl sed dictum aliquam.
25 |                     </p>
26 |                 </div>
27 |             </div>
28 |         </div>
29 | 
30 |         <!-- BOX 2 -->
31 |         <div class="box a2">
32 |             <div class="image_2">
33 |                 <div class="text">
34 |                     <h2>Lorem Ipsum</h2>
35 |                     <p>
36 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
37 |                         Vestibulum iaculis nisl sed dictum aliquam.
38 |                     </p>
39 |                 </div>
40 |             </div>
41 |         </div>
42 | 
43 |         <!-- BOX 3 -->
44 |         <div class="box a3">
45 |             <div class="image_3">
46 |                 <div class="text">
47 |                     <h2>Lorem Ipsum</h2>
48 |                     <p>
49 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
50 |                         Vestibulum iaculis nisl sed dictum aliquam.
51 |                     </p>
52 |                 </div>
53 |             </div>
54 |         </div>
55 | 
56 |         <!-- BOX 1 -->
57 |         <div class="box a4">
58 |             <div class="image_4">
59 |                 <div class="text">
60 |                     <h2>Lorem Ipsum</h2>
61 |                     <p>
62 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
63 |                         Vestibulum iaculis nisl sed dictum aliquam.
64 |                     </p>
65 |                 </div>
66 |             </div>
67 |         </div>
68 | 
69 |         <!-- BOX 5 -->
70 |         <div class="box a5">
71 |             <div class="image_5">
72 |                 <div class="text">
73 |                     <h2>Lorem Ipsum</h2>
74 |                     <p>
75 |                         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
76 |                         Vestibulum iaculis nisl sed dictum aliquam.
77 |                     </p>
78 |                 </div>
79 |             </div>
80 |         </div>
81 | 
82 |     </div>
83 | 
84 | 
85 | 
86 | </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------
/Responsive Accordion Slider/Responsive Accordion Slider.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Responsive Accordion Slider/Responsive Accordion Slider.png


--------------------------------------------------------------------------------
/Rock Paper Scissors/kagit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Rock Paper Scissors/kagit.png


--------------------------------------------------------------------------------
/Rock Paper Scissors/makas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Rock Paper Scissors/makas.png


--------------------------------------------------------------------------------
/Rock Paper Scissors/tas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Rock Paper Scissors/tas.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/SCSS and JS Tabs/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/SCSS and JS Tabs/Screenshot_1.png


--------------------------------------------------------------------------------
/TEAM CARDS/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/TEAM CARDS/Screenshot_1.png


--------------------------------------------------------------------------------
/Tab - Tesla Car Models/tesla-car.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>page</title>
 6 |     <link rel="stylesheet" type="text/css" href="tesla-car.css">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
 9 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10 | 
11 | </head>
12 | <body>
13 |   
14 | 
15 |     <div class="container">
16 |         <h2></h2>
17 |         <div class="model model_x"  id="model_x">
18 |           <h2>Tesla Model X</h2>
19 |         </div>
20 |         
21 |         <div class="model model_s" id="model_s" >
22 |             <h2>Tesla Model S</h2>
23 |         </div>
24 | 
25 |         <div class="model model_y" id="model_y">
26 |             <h2>Tesla Model Y</h2>
27 |         </div>
28 | 
29 |         <div class="bottom_tabs">
30 |             <div class="tab" onclick="tesla_car(event,'model_x')">Model X</div>
31 |             <div class="tab" onclick="tesla_car(event,'model_s')">Model S</div>
32 |             <div class="tab" onclick="tesla_car(event,'model_y')">Model Y</div>
33 |         </div>
34 | 
35 | 
36 |     </div>
37 | 
38 | 
39 | <script>
40 | 
41 |     function tesla_car(evt,car){
42 | 
43 |       let model = document.getElementsByClassName("model");
44 |       for(let i=0; i < model.length; i++){
45 |          model[i].style.display = "none";
46 |       }
47 |       
48 |       let tab = document.getElementsByClassName("tab");
49 |       for(let i=0; i < tab.length; i++){
50 |          tab[i].className = tab[i].className.replace(" active","");
51 |       }
52 |       document.getElementById(car).style.display = "block";
53 |       evt.currentTarget.className += " active";
54 | 
55 |     }
56 | 
57 | </script>
58 | 
59 | 
60 | </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/Tab - Tesla Car Models/tesla-car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Tab - Tesla Car Models/tesla-car.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Tabs Styled 1/JavaScript Tabs Styled 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Tabs Styled 1/JavaScript Tabs Styled 1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Tabs Styled 2/JavaScript Tabs Style 2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="JavaScript Tabs Style 2.css">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10 | </head>
11 | <body>
12 | 
13 |     <div class="container">
14 |         <h2>Tabs Styled</h2>
15 |         <div class="tabs">
16 |             <div class="tab tab1 " onclick="clickFunction(event,'js')">JavaScript</div>
17 |             <div class="tab tab2 " onclick="clickFunction(event,'py')">Python</div>
18 |             <div class="tab tab3 " onclick="clickFunction(event,'css')">CSS</div>
19 |         </div>
20 | 
21 |         <div class="text_box">
22 |             <div class="text tab_box1" id="js">
23 |                 JavaScript is one of the most popular and dynamic programming
24 |                 languages used for creating and developing websites.
25 |             </div>
26 |             <div class="text tab_box2" id="py">
27 |                 Python is a highly used and all-purpose programming
28 |                 language which is dynamic in nature.
29 |             </div>
30 |             <div class="text tab_box3" id="css">
31 |                 Some of the elements which CSS has an impact on include
32 |                 font size, font style, the overall layout.
33 |             </div>
34 |         </div>
35 |     </div>
36 | 
37 |     <script>
38 | 
39 |         function clickFunction(eve, section) {
40 |             let i, text, tabs;
41 |             text = document.getElementsByClassName("text");
42 |             tabs = document.getElementsByClassName("tab");
43 |             for (i = 0; i < text.length; i++) {
44 |                 text[i].style.display = "none";
45 |             }
46 |             for (i = 0; i < tabs.length; i++) {
47 |                 tabs[i].className = tabs[i].className.replace("active","");
48 |             }
49 |             document.getElementById(section).style.display = "block";
50 |             eve.currentTarget.className += "active";
51 |         }
52 | 
53 |     </script>
54 | 
55 | </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/Tabs Styled 2/JavaScript Tabs Style 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Tabs Styled 2/JavaScript Tabs Style 2.png


--------------------------------------------------------------------------------
/Text Animation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Text Animation/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/Text Animation/cssTextAnimation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="cssTextAnimation.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 | 
13 |     <h1 class="start">
14 |         <span class="end1">c</span><span class="middle1">odeblogge</span>
15 |         <span class="middle2"><i class="fas fa-code"></i></span><span class="end2">r</span>
16 |     </h1>
17 | 
18 | 
19 | 
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/To Do List/ToDoList1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="ToDoList1.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="center">
14 |             <section class="card">
15 |                 <header class="card-header">
16 |                     <h2>Monday</h2>
17 |                     <p>Jan 27,2019</p>
18 |                 </header>
19 | 
20 |                 <ul class="card-list">
21 |                     <li>
22 |                         <label for="card-01">
23 |                             <input type="checkbox" id="card-01" />
24 |                             <span>Read Book</span>
25 |                         </label>
26 |                     </li>
27 |                     <li>
28 |                         <label for="card-02">
29 |                             <input type="checkbox" id="card-02" />
30 |                             <span>Write article</span>
31 |                         </label>
32 |                     </li>
33 |                     <li>
34 |                         <label for="card-03">
35 |                             <input type="checkbox" id="card-03" />
36 |                             <span>Join the conference</span>
37 |                         </label>
38 |                     </li>
39 |                     <li>
40 |                         <label for="card-04">
41 |                             <input type="checkbox" id="card-04" />
42 |                             <span>Do homework</span>
43 |                         </label>
44 |                     </li>
45 |                 </ul>
46 |             </section>
47 |         </div>
48 |     </div>
49 | 
50 | 
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/To Do List/to do list 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/To Do List/to do list 1.png


--------------------------------------------------------------------------------
/Tooltip/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/Tooltip/Screenshot_1.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/Tooltip/cssTooltip.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | <head>
 5 |     <meta charset="utf-8" />
 6 |     <title>page</title>
 7 |     <link rel="stylesheet" type="text/css" href="cssTooltip.css">
 8 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 9 | </head>
10 | <body>
11 | 
12 |     <form>
13 |         <input type="text" placeholder="username" />
14 |         <div id="anim">
15 |             <span class="tooltip" data-tooltip="username must consist of 29 symbols.">?</span>
16 |         </div>
17 |     </form>
18 | 
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/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 | }


--------------------------------------------------------------------------------
/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 |   }))


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


--------------------------------------------------------------------------------
/factorial calculation/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/factorial calculation/Screenshot_1.png


--------------------------------------------------------------------------------
/factorial calculation/factorial calculation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>TrueCodes</title>
 6 |     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 7 |     <style>
 8 |         body {
 9 |             padding: 0;
10 |             margin: 0;
11 |             background-color: #333;
12 |             font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
13 |         }
14 |         .container {
15 |             position: absolute;
16 |             top: 50%;
17 |             left: 50%;
18 |             transform: translate(-50%,-50%);
19 |             background: #b72626;
20 |             width: 400px;
21 |             height: 200px;
22 |             border-radius: 20px;
23 |             box-shadow: 0px 0px 40px #000;
24 |         }
25 |         h2 {
26 |             text-transform: uppercase;
27 |             color: #dedede;
28 |             text-align: center;
29 |             text-shadow: 0px 0px 10px rgba(0, 0, 0, 1)
30 |         }
31 |         input {
32 |             display: block;
33 |             width: 75px;
34 |             height: 75px;
35 |             border: none;
36 |             background: #dedede;
37 |             border-radius: 50%;
38 |             box-shadow: 0px 0px 20px #262626;
39 |             margin: 0 auto;
40 |             outline: none;
41 |             font-size: 20px;
42 |             font-weight: bold;
43 |             font-family: 'Lucida Sans';
44 |             text-align: center;
45 |         }
46 |         button {
47 |             background: #000;
48 |             padding: 8px;
49 |             border: none;
50 |             color: #fff;
51 |             font-family: 'Lucida Sans';
52 |             font-weight: bold;
53 |             border-radius: 20px;
54 |             margin-left: 150px;
55 |             margin-top: 15px;
56 |             outline: none;
57 |             cursor: pointer;
58 |             transition: .5s;
59 |         }
60 |         button:hover{
61 |             background: #333;
62 |         }
63 |     </style>
64 | </head>
65 | <body>
66 |     
67 |     <div class="container">
68 |         <h2>factorial calculation</h2>
69 |         <input id="number" type="number" />
70 |         <button id="calc">CALCULATE</button>
71 |     </div>
72 |     
73 |     <script>
74 | 
75 |         let calc = document.getElementById("calc");
76 | 
77 |         calc.onclick = () => {
78 |             const num = document.querySelector("#number").value;
79 |             var arr = 1;
80 |             for (var i = num; i > 0; i--) {
81 |                 arr *= i 
82 |             }
83 |             if (num < 0) {
84 |                 alert("negative numbers do not have a factorial")
85 |             }
86 |             alert(arr);
87 |         }
88 | 
89 | 
90 |     </script>
91 | 
92 | 
93 | </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/spam find/Screenshot_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Furkan-Gulsen/HTML-CSS-JAVASCRIPT/f95272decd74d6fe38bf79fb7bc2f61a08874b2b/spam find/Screenshot_1.png


--------------------------------------------------------------------------------