├── .DS_Store
├── .github
    └── FUNDING.yml
├── 4.css
├── Aditya973.css
├── Afwan_Jumbotron.css
├── AmitSahoo45-Woman
    └── AmitSahoo45.html
├── AmitSahoo45Style.css
├── Asian Paints
    ├── index.html
    ├── script.js
    └── style.css
├── Astronaut-animation
    ├── index.html
    └── style.css
├── Blinking-eye
    ├── eye.css
    ├── eye.css.map
    ├── eye.html
    └── eye.scss
├── Bubble-Animation
    ├── bubble.css
    └── index.html
├── Busetdah.css
├── C++ Program to Print an Integer
├── CODE_OF_CONDUCT.md
├── CSS Text Effects
├── CSS Triple Loader
    ├── loader.css
    └── loader.html
├── CSS align-content Property
├── CSS and HTML project
    ├── Program-to-evaluate-postfix-expression-using-stack-cpp.cpp
    ├── client.jpg
    ├── client2.jpg
    ├── client3.jpg
    ├── client4.jpg
    ├── client5.png
    ├── contact-us.jpg
    ├── contact.jpg
    ├── deliveryboy.webp
    ├── img1.jpg
    ├── img2.jpeg
    ├── img3.jpg
    ├── img4.jpg
    ├── index.html
    ├── logo.png
    ├── logo2.webp
    ├── phone.css
    └── style.css
├── CSS font Property
├── CSS-Loader-Amination.html
├── CSS_Loader
    ├── loader.css
    └── loader.html
├── CalculatorJS
    ├── index.html
    ├── index.js
    └── style.css
├── Calendar(dark&light)
    ├── Readme.md
    ├── calendar.css
    ├── calendar.html
    └── calendar.js
├── Candle Animation
    ├── index.html
    └── style.css
├── CarGame
    ├── bg.jpg
    ├── blue.png
    ├── index.html
    ├── jumpsound.mp3
    ├── main.js
    ├── race.png
    └── style.css
├── Chart Generator App
    ├── index.html
    ├── script.js
    └── style.css
├── ChristmasTree
    ├── christmas_tree.html
    └── main.css
├── Colour Guess Game
    ├── colorGame.css
    ├── colorGame.js
    └── index.html
├── Custom-Cursor
    ├── app.js
    ├── index.html
    └── style.css
├── DMuhammad
├── Digital clock
    ├── Readme.md
    ├── index.html
    └── style.css
├── Dummy Website Project
    ├── gym 2.webp
    ├── gym1.webp
    ├── index.html
    ├── people-2604149_1920.jpg
    └── settings.json
├── Explicit_Implicit_Grid.css
├── FalahJr.css
├── Food-menu-form-mitalrs
    ├── img
    │   └── background-food-img.webp
    ├── intex.html
    └── style.css
├── GUESS MY NO. GAME
    ├── index.html
    ├── script.js
    ├── style.css
    └── style2.css
├── Homepage
    ├── css
    │   └── stylesheet.css
    ├── images
    │   ├── .DS_Store
    │   ├── background.jpg
    │   ├── facebook.png
    │   ├── insta.jpg
    │   ├── insta.png
    │   ├── ocean.jpeg
    │   └── twitter.jpg
    └── index.html
├── Jumbotron.css
├── Many-Clicks
    ├── ManyClicks.html
    └── ManyClicks.js
├── Menghitung Berat Badan Ideal
├── MuseumCandy
    └── MuseumOfCandy.html
├── Music-Order-Summary
    ├── .gitignore
    ├── .vscode
    │   └── settings.json
    ├── README-template.md
    ├── README.md
    ├── design
    │   ├── active-states.jpg
    │   ├── desktop-design.jpg
    │   ├── desktop-preview.jpg
    │   └── mobile-design.jpg
    ├── images
    │   ├── favicon-32x32.png
    │   ├── icon-music.svg
    │   ├── illustration-hero.svg
    │   ├── pattern-background-desktop.svg
    │   └── pattern-background-mobile.svg
    ├── index.html
    ├── style-guide.md
    └── stylesheet.css
├── Musical Instrument
    ├── 1.html
    ├── index.html
    ├── notes
    │   ├── notes_A.mp3
    │   ├── notes_Ab.mp3
    │   ├── notes_B.mp3
    │   ├── notes_Bb.mp3
    │   ├── notes_C.mp3
    │   ├── notes_D.mp3
    │   ├── notes_E.mp3
    │   ├── notes_Eb.mp3
    │   ├── notes_F.mp3
    │   ├── notes_G.mp3
    │   └── notes_Gb.mp3
    ├── script.js
    └── style.css
├── Navbar
    ├── nav.css
    └── nav.html
├── NewsPaper-Theme
    ├── Readme.md
    ├── assets
    │   └── working-demo.png
    ├── index.html
    └── styles.css
├── Paymentform_Chinmayk2002
    ├── index.html
    └── style.css
├── Pranit.css
├── Prime number
├── Program Kalkulator Sederhana C++
├── Program for Tower of Hanoi
├── Program to Find Sum of Digits of a Number
├── Program to Find and Print Sum of First n Natural Numbers
├── Program to Make Simple Calculator
├── Program to Perform Addition Subtraction Multiplication Division
├── README.md
├── RGB Color Guessing Game
    ├── README.md
    ├── colorGameProject.css
    ├── colorGameProject.js
    └── index.html
├── Responsive_Navbar
    ├── trial.css
    └── trial.html
├── Rotate_Animation.css
├── Sandi L. Putra
├── ShivamAgarwal-code.css
├── SimpleFrontend
    ├── Images
    │   └── apj.jpg
    ├── index.html
    └── style.css
├── Simple_TicTacToe_Isall
    └── Simple Multiplayer Game
    │   ├── index.html
    │   └── style.css
├── Stone-Paper-Scissor-Game-main
    ├── INDEX.html
    ├── LICENSE
    ├── script.js
    ├── spsdemo.png
    └── style.css
├── TextTrackInAnimation.css
├── Tic Tac Toe Game
    ├── README.md
    ├── index.html
    ├── tic-tac-toe.css
    └── tic-tac-toe.js
├── To-Do-List-Web-Dev-Project-main.zip
├── To-do list(light&dark)
    ├── Readme.md
    ├── todo(dark).js
    ├── todo.css
    ├── todo.html
    └── todo.js
├── Todolist-hjain
    ├── ToDoList.css
    ├── ToDoList.html
    └── ToDoList.js
├── Tribute-Sachin-Tendulkar
    ├── css
    │   └── style.css
    ├── images
    │   └── favicon.png
    └── index.html
├── Tribute_Page
    ├── Dhyan_Chand_.jpg
    ├── index.html
    └── styles.css
├── advancedtemplatepdf.scss
├── agetta.css
├── aldimarcho.css
├── alfin.css
├── alvandhi.css
├── alvanochi.css
├── amirultxid.css
├── andarualwan.css
├── anfasa.html
├── apisvrs.css
├── aryarriady.css
├── arytarigan.css
├── ascending array
├── asset
    └── js
    │   └── quote.js
├── athcode.css
├── awee.css
├── aziztampan.css
├── background
├── bellayana.css
├── betaine.css
├── bg.jpg
├── bibitgreget.css
├── bimaexz.css
├── bolbText
    ├── index.html
    └── styles.css
├── bounching-text.css
├── bounching-text.html
├── brave.css
├── button_hover.html
├── calc.html
├── calculadora.html
├── change_color_animation.css
├── chevanru.css
├── cianjur.css
├── classic_tic-tac-toe
    ├── app.js
    ├── index.html
    └── style.css
├── contact-form.css
├── content-layout.css
├── cp2940.css
├── create jsd.css
├── css-variable.html
├── css_selector.html
├── cssnowaf.css
├── custome.css
├── cyriak.css
├── data.css
├── default.css
├── deniriswana.css
├── dice roll
    ├── dicee.html
    ├── images
    │   ├── dice1.png
    │   ├── dice2.png
    │   ├── dice3.png
    │   ├── dice4.png
    │   ├── dice5.png
    │   ├── dice6.png
    │   └── readme
    ├── index.js
    ├── readme
    └── styles.css
├── dickykumay.css
├── dickyprase.css
├── digital_Clock
    ├── css
    │   └── style.css
    ├── img
    │   ├── bg.png
    │   └── bg2.png
    ├── index.html
    └── javaScript
    │   └── app.js
├── dinogame-hjain
    ├── dinogame.css
    ├── dinogame.js
    ├── index.html
    └── tree_image.jpg
├── dropdown-ui
├── egitaufik.css
├── fachrul.css
├── falih.css
├── fanst.css
├── farhanbili.css
├── fatik07_login.html
├── fauzi.css
├── fazasyahfatwa.css
├── ferdinandanggris.css
├── fiqrinugroho.css
├── flex.css
├── flip-card
    ├── index.html
    └── styles.css
├── frllzwr.css
├── gabrielwsgr.css
├── generate-style.css
├── gunawandeny.css
├── habicrb.css
├── hafizkun.css
├── harryy.css
├── health_web
    ├── index.html
    └── style.css
├── heart_beating
    ├── index.html
    └── style.css
├── hero-interface
    ├── Font
    │   └── AbrilFatface-Regular.ttf
    ├── img
    │   └── img1.jpg
    ├── index.html
    ├── pricing.html
    └── style.css
├── hilmialmuhtadeb.css
├── hizawadai.css
├── hover_button
    ├── hover-button.css
    └── index.html
├── htb1
    └── cartoon.html
├── ilhamchandra.css
├── img
    ├── avatar.png
    ├── console.png
    ├── p1.png
    ├── player1.png
    └── player2.png
├── index.css
├── index.html
├── index3.html
├── indrarzky.css
├── introduction.css
├── itsnaufal.css
├── ivanfaat.css
├── ivanoverlay.css
├── iwandrf.css
├── jarkomxx.css
├── jnckcode.css
├── joenyse.css
├── jujurku.css
├── kastem.css
├── kesetndalan.css
├── kurisutoper.css
├── laiteux.css
├── lana.css
├── list.html
├── loading-style-animation.css
├── loading-style-animation.html
├── login.css
├── login.html
├── login
    ├── images
    │   ├── image1.png
    │   └── login-bg.jpg
    ├── index.html
    └── style.css
├── looqify-clean.css
├── mc.png
├── membuat piramida bintang
├── model-index.js
├── moving_head
    ├── index.html
    └── style.css
├── myrealme.css
├── naufal.css
├── neverplan.css
├── obedd.css
├── oktavianto.css
├── perlxhi.css
├── phonebook.html
├── pp.png
├── quote.js
├── rafaelrxn.css
├── registration_css
├── relatedPost.css
├── resumecss.html
├── rezarexx.css
├── riskii.css
├── rizkiagungid.css
├── robbyr.css
├── robot_game
    ├── robot.css
    └── robot.html
├── roziq.css
├── ruszee2.css
├── ryuu.css
├── samudra.css
├── satcoz.css
├── scroll-effect
    ├── index.html
    └── style.css
├── scrolling-text-animation.css
├── scrolling-text-animation.html
├── searchBar-nexi9
    ├── index.html
    └── searchBar.css
├── seenks.css
├── segi3.css
├── shiroxsora.css
├── shofi.css
├── silenteyes.css
├── simon game
    ├── fr.cpp
    ├── fr.exe
    ├── index.html
    ├── index.js
    ├── index1.html
    ├── script.js
    ├── sounds
    │   ├── blue.mp3
    │   ├── green.mp3
    │   ├── red.mp3
    │   ├── wrong.mp3
    │   └── yellow.mp3
    ├── style.css
    └── style1.css
├── style.css
├── submit_style.css
├── text-3D
    ├── index.html
    └── text-3D.css
├── text-color-animation.css
├── text-color-animation.html
├── thatsangg.css
├── todoJS
    ├── .vscode
    │   └── settings.json
    ├── index.html
    ├── main.css
    └── main.js
├── transparant_condrok.css
├── triangle.css
├── ts.html
├── tuanlana.css
├── update jasu.css
├── vi.png
├── w3css.css
├── wansyah.css
├── wave-css.html
├── weather
    ├── bg.jpg
    ├── index.html
    ├── script.js
    └── style.css
├── web template.css
├── wisata-main
    ├── css
    │   └── sytle.css
    └── index.html
├── yasniko.css
├── yohanes.css
├── yusnanadiK.css
├── yuukinaesa.css
├── zakkaulwan.css
└── zuubii.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/.DS_Store


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: kokonior
 4 | patreon: kokonior
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: # Replace with a single Ko-fi username
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
14 | 


--------------------------------------------------------------------------------
/4.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <title>W3.CSS</title>
 4 | <meta name="viewport" content="width=device-width, initial-scale=1">
 5 | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 6 | <body>
 7 | 
 8 | <div class="w3-container w3-teal">
 9 |   <h1>My Car</h1>
10 | </div>
11 | 
12 | <img src="img_car.jpg" alt="Car" style="width:100%">
13 | 
14 | <div class="w3-container">
15 |   <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
16 | </div>
17 | 
18 | <div class="w3-container w3-teal">
19 |   <p>My footer information</p>
20 | </div>
21 | 
22 | </body>
23 | </html> 
24 | 


--------------------------------------------------------------------------------
/Aditya973.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |             box-sizing: border-box;
 3 |         }
 4 | 
 5 |         header{
 6 |             border: 2px solid red;
 7 |             margin: auto;
 8 |             width: 1000px;
 9 |             background-color: lightblue;
10 |         }
11 | 
12 |         img{
13 |             margin: auto;
14 |             display: block;
15 |             width: 75px; 
16 |         }
17 | 
18 |         h3{
19 |             margin: 0px;
20 |             text-align: center;
21 |             font-family: Georgia, 'Times New Roman', Times, serif;
22 |             
23 |         }
24 | 
25 |         .box{
26 |             border: 2px solid green;
27 |             margin: auto;
28 |             padding: 20px;
29 |             display: inline-block;
30 |             width: 33%;
31 |             background-color: beige;
32 |             
33 |         }
34 | 
35 |         .container{
36 |             border: 2px solid red;
37 |             margin: auto;
38 |             width:1200px;
39 |         }
40 | 


--------------------------------------------------------------------------------
/Afwan_Jumbotron.css:
--------------------------------------------------------------------------------
 1 | .jumbotron {
 2 |     font-size: 20px;
 3 |     padding: 60px;
 4 |     background-color: blue;
 5 |     text-align: center;
 6 |     color: white;
 7 | }
 8 | nav {
 9 |     background-color:greenyellow;
10 |     padding: 5px;
11 | }
12 | nav li {
13 |     display: inline;
14 |     list-style-type: none;
15 |     margin-right: 20px;
16 | }
17 | nav a {
18 |     font-size: 18px;
19 |     font-weight: 400;
20 |     text-decoration: none;
21 |     color: white;
22 | }
23 | body {
24 |     font-family: 'Quicksand', sans-serif;
25 |     margin: 0;
26 |     padding: 0;
27 | }
28 | main {
29 |     padding: 20px;
30 | }
31 | 


--------------------------------------------------------------------------------
/Asian Paints/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Asian Paints</title>
 9 | </head>
10 | <body>
11 |     <div id="box">
12 |         <input placeholder="wall ID" id="wall_id">
13 |         <input placeholder="Color" id="wall_color">
14 |     </div>
15 |     
16 |     <div id="walls"> 
17 |     <div id="1" value='1' class="wall"></div>
18 |     <div id="2" value='2' class="wall"></div>
19 |     <div id="3" value='3' class="wall"></div>
20 |     <div id="4" value='4' class="wall"></div>
21 |     <div id="5" value='5' class="wall"></div>
22 |     <div id="6" value='6' class="wall"></div>
23 |     <div id="7" value='7' class="wall"></div>
24 |     <div id="8" value='8' class="wall"></div>
25 |     <div id="9" value='9' class="wall"></div>
26 |     </div>
27 |     
28 |     <div id="button_content">
29 |         <button id="apply" type="submit">Apply</button>
30 |         <button id="reset" type="submit">Reset</button>
31 |     </div>
32 | 
33 |     <script src="script.js"></script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/Asian Paints/script.js:
--------------------------------------------------------------------------------
 1 | let reset=document.getElementById('reset');
 2 | reset.addEventListener('click',()=>{
 3 |     let wall=document.getElementsByClassName('wall');
 4 |     for(let index =0;index<wall.length;index++){
 5 |         wall[index].style.setProperty("background-color","transparent");
 6 |     } 
 7 | });
 8 | 
 9 | let apply=document.getElementById('apply');
10 | apply.addEventListener('click',()=>{
11 | 
12 | var wall_id=document.getElementById('wall_id').value;
13 | var color=document.getElementById('wall_color').value;
14 | var walls=document.getElementsByClassName('wall');
15 | 
16 |   for(let index=0;index<walls.length;index++){
17 |     if(index+1==wall_id){
18 |    document.getElementById(wall_id).style.backgroundColor=`${color}`
19 |     }
20 |     else{
21 |         walls[index].style.setProperty("color","transparent");
22 | 
23 |     }
24 |   }
25 | 
26 | })


--------------------------------------------------------------------------------
/Asian Paints/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: aliceblue;
 3 |     position: absolute;
 4 |     left: 50%;
 5 |     top: 50%;
 6 |     transform: translate(-50%, -50%);
 7 |     padding: 10px;
 8 |     text-align: center;
 9 |   }
10 |   .wall {
11 |     height: 10vh;
12 |     width: 20vh;
13 |     border: 2px solid black;
14 |     background-color: transparent;
15 |   }
16 |   #button_content {
17 |     padding-top: 20px;
18 |   }
19 |   
20 |   #walls {
21 |     display: grid;
22 |     grid-template-columns: auto auto auto;
23 |     margin: 20px;
24 |   }
25 |   
26 |   #wall_id,
27 |   #wall_color {
28 |     border: none;
29 |     font-size: inherit;
30 |     transition: width 200ms;
31 |     padding-top: 5px;
32 |     padding-left: 5px;
33 |     padding-bottom: 5px;
34 |     width: 100px;
35 |     color: white;
36 |     border-bottom: 1px solid #eee;
37 |     background-color: black;
38 |     border-radius: 10px;
39 |   }
40 |   #wall_id:focus {
41 |     width: 200px;
42 |   }
43 |   #wall_color:focus {
44 |     width: 200px;
45 |   }
46 |   button {
47 |     background-color: black; /* Green */
48 |     border: none;
49 |     color: white;
50 |     padding: 7px 20px;
51 |     text-align: center;
52 |     text-decoration: none;
53 |     display: inline-block;
54 |     font-size: 16px;
55 |     border-radius: 10px;
56 |     cursor: pointer;
57 |   }
58 |   


--------------------------------------------------------------------------------
/Astronaut-animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 5 |     <title>Astronaut Animation</title>
 6 |     <!-- Stylesheet -->
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <div class="stars"></div>
12 |       <div class="planet">
13 |         <div class="shadow"></div>
14 |       </div>
15 |       <div class="astronaut">
16 |         <div class="tank center"></div>
17 |         <div class="suit center">
18 |           <div class="helmet center"></div>
19 |           <div class="buttons center"></div>
20 |           <div class="hand-l"></div>
21 |           <div class="hand-r"></div>
22 |           <div class="leg-l"></div>
23 |           <div class="leg-r"></div>
24 |           <div class="pipe"></div>
25 |         </div>
26 |       </div>
27 |     </div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/Blinking-eye/eye.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Blinking Eye</title>
 8 |     <link rel="stylesheet" href="eye.css">
 9 | </head>
10 | <body>
11 |     <div class="eye">
12 |         <div class="shut">
13 |             <span></span>
14 |         </div>     
15 |         <div class="eye-ball">
16 |             <div class="iris saddlebrown">
17 |                 <div class="pupil"></div>
18 |                 <div class="reflection"></div>
19 |             </div>
20 |         </div>
21 |     </div>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Bubble-Animation/bubble.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background: #000000;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     align-items: center;
 6 |     justify-content: center;
 7 |     height: 100vh;
 8 |     overflow: hidden;
 9 | }
10 | 
11 | .ball {
12 |     animation: float 3.5s ease-in-out infinite;
13 |     height: 200px;
14 |     width: 200px;
15 |     border-radius: 50%;
16 |     position: relative;
17 |     background: radial-gradient( circle at 75% 30%, white 5px, #ffd500 8%, #dfbe9e 60%, #ff8c00 100%);
18 |     box-shadow: inset 0 0 20px #ede3d7, inset 10px 0 46px #ff9100, inset 88px 0px 60px #e6ddd5, inset -20px -60px 100px #fdf2e9, inset 0 50px 140px #fdf3e9, 0 0 90px #fff;
19 | }
20 | 
21 | @keyframes float {
22 |     0% {
23 |         transform: translatey(0px);
24 |     }
25 |     50% {
26 |         transform: translatey(-80px);
27 |     }
28 |     100% {
29 |         transform: translatey(0px);
30 |     }
31 | }
32 | 
33 | .shadow {
34 |     background: #e0a269;
35 |     width: 150px;
36 |     height: 40px;
37 |     top: 70%;
38 |     animation: expand 4s infinite;
39 |     position: absolute;
40 |     border-radius: 50%;
41 | }
42 | 
43 | @keyframes expand {
44 |     0%,
45 |     100% {
46 |         transform: scale(0.5);
47 |     }
48 |     50% {
49 |         transform: scale(1);
50 |     }
51 | }


--------------------------------------------------------------------------------
/Bubble-Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta charset="utf-8" />
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 8 |     <title>Bubble Animation</title>
 9 |     <meta name="description" content="" />
10 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
11 |     <link rel="stylesheet" href="bubble.css" />
12 | </head>
13 | 
14 | <body>
15 |     <div class="ball"></div>
16 |     <div class="shadow"></div>
17 | </body>
18 | 
19 | </html>


--------------------------------------------------------------------------------
/Busetdah.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/C++ Program to Print an Integer:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | int main()
 4 | {
 5 |     int num;
 6 |     cout<<"Enter the Number: ";
 7 |     cin>>num;
 8 |     cout<<"\nYou've entered: "<<num;
 9 |     cout<<endl;
10 |     return 0;
11 | }
12 | 


--------------------------------------------------------------------------------
/CSS Text Effects:
--------------------------------------------------------------------------------
 1 | p.test1 {
 2 |   white-space: nowrap;
 3 |   width: 200px;
 4 |   border: 1px solid #000000;
 5 |   overflow: hidden;
 6 |   text-overflow: clip;
 7 | }
 8 | 
 9 | p.test2 {
10 |   white-space: nowrap;
11 |   width: 200px;
12 |   border: 1px solid #000000;
13 |   overflow: hidden;
14 |   text-overflow: ellipsis;
15 | }
16 | 


--------------------------------------------------------------------------------
/CSS Triple Loader/loader.css:
--------------------------------------------------------------------------------
 1 | #loading-page {
 2 |     width: 100vw;
 3 |     height: 100vh;
 4 |     background: #111;
 5 |     display: flex;
 6 |     justify-content: center;
 7 |     align-items: center;
 8 |     flex-direction: column;
 9 |   }
10 |   #loading-page svg {
11 |     width: 100px;
12 |     height: 100px;
13 |     margin: 20px;
14 |     display: inline-block;
15 |   }
16 |   
17 |   body {
18 |     overflow: hidden;
19 |   }
20 |   


--------------------------------------------------------------------------------
/CSS align-content Property:
--------------------------------------------------------------------------------
1 | div {
2 |   width: 70px;
3 |   height: 300px;
4 |   border: 1px solid #c3c3c3;
5 |   display: flex;
6 |   flex-wrap: wrap;
7 |   align-content: center;
8 | }
9 | 


--------------------------------------------------------------------------------
/CSS and HTML project/client.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/client.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/client2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/client2.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/client3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/client3.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/client4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/client4.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/client5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/client5.png


--------------------------------------------------------------------------------
/CSS and HTML project/contact-us.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/contact-us.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/contact.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/contact.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/deliveryboy.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/deliveryboy.webp


--------------------------------------------------------------------------------
/CSS and HTML project/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/img1.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/img2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/img2.jpeg


--------------------------------------------------------------------------------
/CSS and HTML project/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/img3.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/img4.jpg


--------------------------------------------------------------------------------
/CSS and HTML project/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/logo.png


--------------------------------------------------------------------------------
/CSS and HTML project/logo2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CSS and HTML project/logo2.webp


--------------------------------------------------------------------------------
/CSS and HTML project/phone.css:
--------------------------------------------------------------------------------
 1 | /* navigation */
 2 | #navbar{
 3 |     flex-direction: column;
 4 | }
 5 | /* home section */
 6 |  #home{ 
 7 |     height: 250px;
 8 |     
 9 | }
10 |  #home::before{ 
11 |     height: 400px;
12 |     
13 | }
14 | #home p{
15 |     font-size: 13px;
16 | }
17 | /* services section */
18 | #services{
19 |     flex-direction: column;
20 | }
21 | #services .box{
22 | 
23 | 
24 | }
25 | /* clients section */
26 | #clients{
27 |     overflow: hidden;
28 | }
29 | 
30 | /* contact section  */
31 | 
32 | /* footer section  */
33 | 
34 | /* utility class */
35 | .h-primary {
36 |     font-size: 45px;
37 | }
38 | 
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/CSS font Property:
--------------------------------------------------------------------------------
1 | p.a {
2 |   font: 15px Arial, sans-serif;
3 | }
4 | 
5 | p.b {
6 |   font: italic small-caps bold 12px/30px Georgia, serif;
7 | }
8 | 


--------------------------------------------------------------------------------
/CSS-Loader-Amination.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>CSS Loader</title>
 9 | </head>
10 | 
11 | <body>
12 |     <div class="lds-hourglass"></div>
13 | 
14 | 
15 | 
16 |     <style>
17 |         .lds-hourglass {
18 |             display: inline-block;
19 |             position: relative;
20 |             width: 80px;
21 |             height: 80px;
22 |         }
23 | 
24 |         .lds-hourglass:after {
25 |             content: " ";
26 |             display: block;
27 |             border-radius: 50%;
28 |             width: 0;
29 |             height: 0;
30 |             margin: 8px;
31 |             box-sizing: border-box;
32 |             border: 32px solid rgb(247, 1, 1);
33 |             border-color: rgb(247, 1, 1) transparent rgb(247, 1, 1) transparent;
34 |             animation: lds-hourglass 1.2s infinite;
35 |         }
36 | 
37 |         @keyframes lds-hourglass {
38 |             0% {
39 |                 transform: rotate(0);
40 |                 animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
41 |             }
42 | 
43 |             50% {
44 |                 transform: rotate(900deg);
45 |                 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
46 |             }
47 | 
48 |             100% {
49 |                 transform: rotate(1800deg);
50 |             }
51 |         }
52 |     </style>
53 | </body>
54 | 
55 | </html>
56 | 


--------------------------------------------------------------------------------
/CSS_Loader/loader.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="loader.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="loader">
12 |       <div class="duo duo1">
13 |         <div class="dot dot1 dot-a"></div>
14 |         <div class="dot dot1 dot-b"></div>
15 |       </div>
16 |       <div class="duo duo2">
17 |         <div class="dot dot2 dot-a"></div>
18 |         <div class="dot dot2 dot-b"></div>
19 |       </div>
20 |       <div class="duo duo3">
21 |         <div class="dot dot3 dot-a"></div>
22 |         <div class="dot dot3 dot-b"></div>
23 |       </div>
24 |       <div class="duo duo4">
25 |         <div class="dot dot4 dot-a"></div>
26 |         <div class="dot dot4 dot-b"></div>
27 |       </div>
28 |       <div class="duo duo5">
29 |         <div class="dot dot5 dot-a"></div>
30 |         <div class="dot dot5 dot-b"></div>
31 |       </div>
32 |     </div>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/CalculatorJS/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <div id="display"></div>
13 |       <div class="buttons">
14 |         <div class="button">C</div>
15 |         <div class="button">/</div>
16 |         <div class="button">*</div>
17 |         <div class="button">&larr;</div>
18 |         <div class="button">7</div>
19 |         <div class="button">8</div>
20 |         <div class="button">9</div>
21 |         <div class="button">-</div>
22 |         <div class="button">4</div>
23 |         <div class="button">5</div>
24 |         <div class="button">6</div>
25 |         <div class="button">+</div>
26 |         <div class="button">1</div>
27 |         <div class="button">2</div>
28 |         <div class="button">3</div>
29 |         <div class="button">.</div>
30 |         <div class="button">(</div>
31 |         <div class="button">0</div>
32 |         <div class="button">)</div>
33 |         <div id="equal" class="button">=</div>
34 |       </div>
35 |     </div>
36 |     <script src="index.js"></script>
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/CalculatorJS/index.js:
--------------------------------------------------------------------------------
 1 | let display = document.getElementById("display");
 2 | /*converting it into array using array.from*/
 3 | let buttons = Array.from(document.getElementsByClassName("button"));
 4 | console.log(buttons);
 5 | 
 6 | buttons.map((button) => {
 7 |   button.addEventListener("click", (e) => {
 8 |     switch (e.target.innerText) {
 9 |       case "C":
10 |         display.innerText = " ";
11 |         break;
12 | 
13 |       case "←":
14 |         if (display.innerText) {
15 |           display.innerText = display.innerText.slice(0, -1);
16 |         }
17 |         break;
18 |       case "=":
19 |         try {
20 |           display.innerText = eval(display.innerText);
21 |         } catch {
22 |           display.innerText = "error!!";
23 |         }
24 | 
25 |         break;
26 |       default:
27 |         display.innerText = display.innerText + e.target.innerText;
28 |     }
29 |   });
30 | });
31 | 


--------------------------------------------------------------------------------
/CalculatorJS/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   max-width: 400px;
 3 |   margin: 10vh auto 0 auto;
 4 |   box-shadow: 0px 0px 45px 18px rgba(153, 153, 153, 1);
 5 | }
 6 | 
 7 | #display {
 8 |   text-align: right;
 9 |   height: 70px;
10 |   line-height: 70px;
11 |   padding: 16px 8px;
12 |   font-size: 25px;
13 | }
14 | 
15 | .buttons {
16 |   display: grid;
17 |   grid-template-columns: 1fr 1fr 1fr 1fr;
18 |   border-bottom: 1px solid #999;
19 |   border-left: 1px solid #999;
20 | }
21 | .buttons > div {
22 |   border-top: 1px solid #999;
23 |   border-right: 1px solid #999;
24 | }
25 | 
26 | .button {
27 |   line-height: 100px;
28 |   text-align: center;
29 |   font-size: 25px;
30 |   border: 0.5px solid #999;
31 |   cursor: pointer;
32 |   user-select: none;
33 | }
34 | 
35 | #equal {
36 |   background-color: aqua;
37 |   color: white;
38 | }
39 | 
40 | .button:hover {
41 |   background-color: #323330;
42 |   color: white;
43 |   transition: 0.3s ease-in-out;
44 | }
45 | 


--------------------------------------------------------------------------------
/Calendar(dark&light)/Readme.md:
--------------------------------------------------------------------------------
1 | Contributed by:-Ankita Dolai (https://github.com/Ankita1827)
2 | 
3 | This is a simple calendar made using html,js and css. It has both light and dark mode.
4 | 
5 | ![image](https://user-images.githubusercontent.com/78500268/195926872-ac9d798e-db68-4ed7-8f93-44ef94170859.png)
6 | ![image](https://user-images.githubusercontent.com/78500268/195926935-a2368e6e-d8d8-4e1a-953c-a388346c934c.png)
7 | 
8 | 


--------------------------------------------------------------------------------
/Candle Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Candle Fun (Pure CSS Animation)</title>
 7 |   <link rel="stylesheet" href="./style.css">
 8 | 
 9 | </head>
10 | 
11 | <body>
12 |   <div class="wrapper">
13 |     <div class="candles">
14 |       <div class="light__wave"></div>
15 |       <div class="candle1">
16 |         <div class="candle1__body">
17 |           <div class="candle1__eyes">
18 |             <span class="candle1__eyes-one"></span>
19 |             <span class="candle1__eyes-two"></span>
20 |           </div>
21 |           <div class="candle1__mouth"></div>
22 |         </div>
23 |         <div class="candle1__stick"></div>
24 |       </div>
25 | 
26 |       <div class="candle2">
27 |         <div class="candle2__body">
28 |           <div class="candle2__eyes">
29 |             <div class="candle2__eyes-one"></div>
30 |             <div class="candle2__eyes-two"></div>
31 |           </div>
32 |         </div>
33 |         <div class="candle2__stick"></div>
34 |       </div>
35 |       <div class="candle2__fire"></div>
36 |       <div class="sparkles-one"></div>
37 |       <div class="sparkles-two"></div>
38 |       <div class="candle__smoke-one">
39 | 
40 |       </div>
41 |       <div class="candle__smoke-two">
42 | 
43 |       </div>
44 | 
45 |     </div>
46 |     <div class="floor">
47 |     </div>
48 | 
49 | 
50 |   </div>
51 | 
52 | 
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/CarGame/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CarGame/bg.jpg


--------------------------------------------------------------------------------
/CarGame/blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CarGame/blue.png


--------------------------------------------------------------------------------
/CarGame/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Racing moto</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |     <div id="game">
12 |         <div id="bluecar"><img src="blue.png" alt=""></div>
13 |         <div id="racecar"><img src="race.png" alt=""></div>
14 |     </div>
15 |     <div id="result">
16 |         <h1>Game Over</h1>
17 |         <p id="score"></p>
18 |         <button id="btn" onclick="location.reload()">Restart</button>
19 |     </div>
20 | 
21 |     
22 |     <script src="main.js"></script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/CarGame/jumpsound.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CarGame/jumpsound.mp3


--------------------------------------------------------------------------------
/CarGame/race.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/CarGame/race.png


--------------------------------------------------------------------------------
/CarGame/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | #game{
 6 |     height: 500px;
 7 |     width: 390px;
 8 |     border: 1px solid black;
 9 |     margin: 1rem auto;
10 |     background:url(bg.jpg) ;
11 |     background-size: contain;
12 |     overflow: hidden;
13 | }
14 | #bluecar{
15 |     height: 100px;
16 |     width: 130px;
17 |     
18 |     position: relative;
19 |     top: 0px;
20 |     left: 0px;
21 |     text-align: center;
22 |     animation: move 1s linear  infinite  ;
23 | 
24 | }
25 | #bluecar img{
26 |     height: 100px;
27 | }
28 | @keyframes move {
29 |     0%{
30 |         top: 0px;
31 |     }
32 |     100%{
33 |         top: 501px;
34 |     }
35 |     
36 | }
37 | #racecar{
38 |     height: 100px;
39 |     width: 130px;
40 |     
41 |     position: relative;
42 |     top: 250px;
43 |     left: 130px;
44 |     text-align: center;
45 | }
46 | #racecar img{
47 |     height: 100px;
48 | }
49 | 
50 | #result{
51 |     height: 200px;
52 |     width: 400px;
53 |     background-color: cornflowerblue;
54 |     margin:  1rem auto;
55 |     border-radius: 20px;
56 |     font-size: 30px;
57 |     text-align: center;
58 |     color: white;
59 |     display:none ;
60 | }
61 | #score{
62 |     font-size: 2.2rem;
63 |     color: brown;
64 | }
65 | #btn{
66 |     padding: 0.5rem 1rem;
67 |     border-radius: 20px;
68 |     border: none;
69 |     background-color: black;
70 |     color: cyan;
71 |     font-size: 25px;
72 |     margin-top: 10px;
73 |     cursor: pointer;
74 |     text-transform: uppercase;
75 | }


--------------------------------------------------------------------------------
/Chart Generator App/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <meta charset="UTF-8">
 4 |     <head>
 5 |     <title>Chart Generator App</title>
 6 |     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 7 |     <link rel="stylesheet" href="style.css">
 8 | </head>
 9 | <body>
10 |     <canvas id="myChart"></canvas>
11 |     <div>
12 |       <input id="data" type="number" placeholder="Data">
13 |       <input id="label" type="text" placeholder="Data's Label">
14 | 
15 |       <button onclick="addData(myChart)">Add Data</button>
16 |       <button onclick="removeData(myChart)">Remove Data</button>
17 |       <button onclick="saveCanvas()">Save Chart</button>
18 |     </div>
19 | <script src="script.js"></script>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Chart Generator App/style.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   display: flex;
 3 |   justify-content: center;
 4 | }
 5 | 
 6 | button {
 7 |   background-color: #ffe0e6;
 8 |   border: 2px solid #fbabbb;
 9 |   border-radius: 5px;
10 |   padding: 7px 16px;
11 |   margin:0 2px 0 0;
12 |   color: #7b7a7a;
13 |   cursor: pointer;
14 | }
15 | 
16 | input{
17 |   background-color: #ffe0e6;
18 |   border: 2px solid #fbabbb;
19 |   border-radius: 5px;
20 |   padding: 5px;
21 |   margin:0 2px 0 0;
22 | }
23 | 


--------------------------------------------------------------------------------
/ChristmasTree/christmas_tree.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |   <title>Chrsitmas Tree</title>
 7 |   <link rel="stylesheet" type="text/css" href="main.css">
 8 | </head>
 9 | <body>
10 |   <div class="container">
11 |     <div class="tree">
12 |       <div class="tree-tri1"></div>
13 |       <div class="tree-tri2"></div>
14 |       <div class="tree-tri3"></div>
15 |       <div class="orn or1">
16 |       <div class="shine"></div>
17 |     </div>
18 |     <div class="orn or2">
19 |       <div class="shine"></div>
20 |     </div>
21 |     <div class="orn or3">
22 |       <div class="shine"></div>
23 |     </div>
24 |     <div class="orn or4">
25 |       <div class="shine"></div>
26 |     </div>
27 |       <div class="orn or5">
28 |       <div class="shine"></div>
29 |     </div>
30 |     <div class="orn or6">
31 |       <div class="shine"></div>
32 |     </div>
33 |     </div>
34 |     
35 |     <div class="trunk"></div>
36 |     <div class="star-light"></div>
37 |     <div class="star"></div>
38 |     <div class="star-highlight"></div>
39 |   </div>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/Colour Guess Game/colorGame.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	background-color: #232323;
 3 | 	margin: 0;
 4 | 	font-family: "Montserrat", "Avenir";
 5 | }
 6 | 
 7 | .square {
 8 | 	width: 30%;
 9 | 	background: purple;
10 | 	padding-bottom: 30%;
11 | 	float: left;
12 | 	margin: 1.66%;
13 | 	border-radius: 15%;
14 | 	transition: background 0.6s;
15 | 	-webkit-transition: background 0.6s;
16 | 	-moz-transition: background 0.6s;
17 | }
18 | 
19 | #container {
20 | 	margin: 20px auto;
21 | 	max-width: 600px;
22 | }
23 | 
24 | h1 {
25 | 	text-align: center;
26 | 	line-height: 1.1;
27 | 	font-weight: normal;
28 | 	color: white;
29 | 	background: steelblue;
30 | 	margin: 0;
31 | 	text-transform: uppercase;
32 | 	padding: 20px 0;
33 | }
34 | 
35 | #colorDisplay {
36 | 	font-size: 200%;
37 | }
38 | 
39 | #message {
40 | 	display: inline-block;
41 | 	width: 20%;
42 | }
43 | 
44 | #stripe {
45 | 	background: white;
46 | 	height: 30px;
47 | 	text-align: center;
48 | 	color: black;
49 | }
50 | 
51 | .selected {
52 | 	color: white;
53 | 	background: steelblue;
54 | }
55 | 
56 | button {
57 | 	border: none;
58 | 	background: none;
59 | 	text-transform: uppercase;
60 | 	height: 100%;
61 | 	font-weight: 700;
62 | 	color: steelblue;
63 | 	letter-spacing: 1px;
64 | 	font-size: inherit;
65 | 	transition: all 0.3s;
66 | 	-webkit-transition: all 0.3s;
67 | 	-moz-transition: all 0.3s;
68 | 	outline: none;
69 | }
70 | 
71 | button:hover {
72 | 	color: white;
73 | 	background: steelblue;
74 | }
75 | 


--------------------------------------------------------------------------------
/Colour Guess Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Color Game</title>
 5 | 	<link rel="stylesheet" type="text/css" href="colorGame.css">
 6 | </head>
 7 | <body>
 8 | <h1>
 9 | 	The Great 
10 | 	<br>
11 | 	<span id="colorDisplay">RGB</span> 
12 | 	<br>
13 | 	Color Game
14 | </h1>
15 | 
16 | <div id="stripe">
17 | 	<button id="reset">New Colors</button>
18 | 	<span id="message"></span>
19 | 	<button class="mode">Easy</button>
20 | 	<button class="mode selected">Hard</button>
21 | </div>
22 | 
23 | 	<div id="container">
24 | 		<div class="square"></div>
25 | 		<div class="square"></div>
26 | 		<div class="square"></div>
27 | 		<div class="square"></div>
28 | 		<div class="square"></div>
29 | 		<div class="square"></div>
30 | 	</div>
31 | 
32 | <script type="text/javascript" src="colorGame.js"></script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/Custom-Cursor/app.js:
--------------------------------------------------------------------------------
 1 | let mouse = document.querySelector(".cursor")
 2 | 
 3 | let navLinks = document.querySelectorAll(".navLinks li")
 4 | 
 5 | window.addEventListener("mousemove", cursor)
 6 | 
 7 | function cursor(e) {
 8 |     mouse.style.top = e.pageY + "px"
 9 |     mouse.style.left = e.pageX + "px"
10 | }
11 | 
12 | navLinks.forEach((link) => {
13 |     link.addEventListener("mouseover", () => {
14 |         mouse.classList.add("scale")
15 |         link.classList.add("hoverLink")
16 |     })
17 |     link.addEventListener("mouseleave", () => {
18 |         mouse.classList.remove("scale")
19 |         link.classList.remove("hoverLink")
20 |     })
21 | })


--------------------------------------------------------------------------------
/Custom-Cursor/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 9 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 |     <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
11 |     <title>Cursor Animation</title>
12 |     <link rel="stylesheet" href="style.css">
13 | </head>
14 | 
15 | <body>
16 | 
17 |     <div class="cursor"></div>
18 |     <nav>
19 |         <h1>Animator</h1>
20 | 
21 |         <ul class="navLinks">
22 |             <li>Home</li>
23 |             <li>Contact</li>
24 |             <li>Services</li>
25 |         </ul>
26 |     </nav>
27 | 
28 |     <section>
29 |         <div class="front-cover">
30 |             <img src="https://images.unsplash.com/photo-1617398743726-13ddc41772b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80"
31 |                 alt="Image">
32 |         </div>
33 |     </section>
34 |     <script src="app.js"></script>
35 | </body>
36 | 
37 | </html>


--------------------------------------------------------------------------------
/Custom-Cursor/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   font-family: "Lato", sans-serif;
 9 | }
10 | 
11 | nav {
12 |   display: flex;
13 |   width: 90%;
14 |   justify-content: space-between;
15 |   margin: auto;
16 |   min-height: 10vh;
17 |   align-items: center;
18 | }
19 | 
20 | .navLinks {
21 |   display: flex;
22 |   justify-content: space-between;
23 |   list-style-type: none;
24 | }
25 | 
26 | .navLinks li {
27 |   font-weight: bold;
28 |   padding: 16px;
29 | }
30 | 
31 | .navLinks,
32 | h1 {
33 |   flex: 1;
34 | }
35 | 
36 | .cursor {
37 |   width: 50px;
38 |   height: 50px;
39 |   border: 2px solid black;
40 |   border-radius: 50%;
41 |   position: absolute;
42 |   transform: translate(-50%, -50%);
43 |   pointer-events: none;
44 |   transition: all 0.2s ease-in-out;
45 |   transition-property: background, transform;
46 |   transform-origin: 100% 100%;
47 |   z-index: -1;
48 |   backdrop-filter: blur(3px);
49 | }
50 | 
51 | .scale {
52 |   background-color: #000;
53 |   transform: scale(3);
54 | }
55 | 
56 | .hoverLink {
57 |   color: #f6f6f6;
58 | }
59 | 
60 | .front-cover img {
61 |   position: relative;
62 |   z-index: -3;
63 | }
64 | 


--------------------------------------------------------------------------------
/DMuhammad:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400&display=swap');
 2 | *{
 3 |   box-sizing: border-box;
 4 | }
 5 | body{
 6 |   font-family: 'Comic Neue';
 7 |   margin: 0;
 8 |   padding: 0;
 9 | }
10 | h2, h3{
11 |   color: #004445;
12 | }
13 | header{
14 |   display: inline;
15 | }
16 | nav{
17 |   background-color: #66A5AD;
18 |   padding: 5px;
19 |   position: sticky;
20 |   top: 0;
21 | }
22 | nav li{
23 |   list-style-type: none;
24 |   display: inline;
25 |   margin: 1%;
26 | }
27 | nav a:hover{
28 |   font-weight: bolder;
29 | }
30 | main{
31 |   padding: 2%;
32 |   overflow: auto;
33 |   text-align: justify;
34 | }
35 | aside{
36 |   float: right;
37 |   width: 29%;
38 | }
39 | footer{
40 |   padding: 20px;
41 |   color: black;
42 |   background-color: #98DBC6;
43 |   font-weight: bold;
44 |   text-align: center;
45 | }
46 | article{
47 |   text-align: justify;
48 | }
49 | a{
50 |   font-size: 1.2em;
51 |   font-weight: 400;
52 |   text-decoration: none;
53 |   color: black;
54 | }
55 | img {
56 |   width: 60%;
57 |   border-radius: 10px;
58 | }
59 | #content{
60 |   float: left;
61 |   width: 70%;
62 | }
63 | .jumbotron{
64 |   font-size: 20px;
65 |   padding: 5%;
66 |   background-color: #98DBC6;
67 |   text-align: center;
68 |   color: black;
69 |   position: relative;
70 | }
71 | .card{
72 |   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
73 |   border-radius: 10px;
74 |   padding: 20px;
75 |   margin-top: 15px;
76 |   background-color: white;
77 | }
78 | .profile img{
79 |   width: 65%;
80 | }
81 | .profile header{
82 |   text-align: center;
83 | }
84 | @media screen and (max-width: 920px) {
85 |   #content, aside{
86 |     width: 100%;
87 |     padding: 0;
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/Digital clock/Readme.md:
--------------------------------------------------------------------------------
1 | Contributed by - Vishal Singh (https://github.com/Vishal35679)
2 | 
3 | This is a digital clock using html, css and js
4 | 
5 | ![image](https://user-images.githubusercontent.com/104795331/193984405-cd834e0d-2cbd-4b48-b76c-7573002bb67c.png)
6 | ![image](https://user-images.githubusercontent.com/104795331/193984457-796ddbaf-505c-4bd3-a667-7b157bbec3ae.png)
7 | 
8 | here are the sample images of the website
9 | 


--------------------------------------------------------------------------------
/Dummy Website Project/gym 2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Dummy Website Project/gym 2.webp


--------------------------------------------------------------------------------
/Dummy Website Project/gym1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Dummy Website Project/gym1.webp


--------------------------------------------------------------------------------
/Dummy Website Project/people-2604149_1920.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Dummy Website Project/people-2604149_1920.jpg


--------------------------------------------------------------------------------
/Dummy Website Project/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Explicit_Implicit_Grid.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 40px;
 3 | }
 4 | .wrapper {
 5 |     display: grid;
 6 |     grid-gap: 10px;
 7 |     grid-template-columns: 100px 100px 100px;
 8 |     grid-auto-columns: 100px;
 9 |     background-color: #fff;
10 |     color: #444;
11 |   }
12 | 
13 |   .box {
14 |     background-color: #444;
15 |     color: #fff;
16 |     border-radius: 5px;
17 |     padding: 20px;
18 |     font-size: 150%;
19 | 
20 |   }
21 | 
22 |   .a {
23 |     grid-column: 1 / 3;
24 |     grid-row: 1;
25 |   }
26 |   .b {
27 |     grid-column: 3 ;
28 |     grid-row: 1 / 3;
29 |   }
30 |   .c {
31 |     grid-column: 1 ;
32 |     grid-row: 2 ;
33 |   }
34 |   .d {
35 |     grid-column: 2;
36 |     grid-row: 2;
37 |   }
38 | 
39 |   .e {
40 |     grid-column: 4 / 5;
41 |     grid-row: 1 / 4;
42 |   }
43 | 


--------------------------------------------------------------------------------
/FalahJr.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background: aqua;
 3 | }
 4 | 
 5 | .form-login{
 6 |     margin-top: 13%;
 7 | }
 8 | .outter-form-login {
 9 |     padding: 20px;
10 |     background: #EEEEEE;
11 |     position: relative;
12 |     border-radius: 5px;
13 | }
14 | .logo-login {
15 |     position: absolute;
16 |     font-size: 35px;
17 |     background: #21A957;
18 |     color: #FFFFFF;
19 |     padding: 10px 18px;
20 |     top: -40px;
21 |     border-radius: 50%;
22 |     left: 40%;
23 | }
24 | .inner-login .form-control {
25 |     background: #D3D3D3;
26 | }
27 | h3.title-login {
28 |     font-size: 20px;
29 |     margin-bottom: 20px;
30 | }
31 | 
32 | .forget {
33 |     margin-top: 20px;
34 |     color: #ADADAD;
35 | }
36 | .btn-custom-green {
37 |     background: #21A957;
38 |     color: #fff;
39 | }
40 | 


--------------------------------------------------------------------------------
/Food-menu-form-mitalrs/img/background-food-img.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Food-menu-form-mitalrs/img/background-food-img.webp


--------------------------------------------------------------------------------
/Food-menu-form-mitalrs/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 |     color: white;
 6 | }
 7 | 
 8 | .main-div{
 9 |     height: 100vh;
10 |     width: 100vw;
11 |     background-image: url(img/background-food-img.webp);
12 |     background-size: cover;
13 |     /* display: flex; */
14 |     /* justify-content: center; */
15 |     /* align-items: center; */
16 |     position: relative;
17 |     font-family: Arial, Helvetica, sans-serif;
18 | }
19 |  
20 | .form-div{
21 |     height: 90vh;
22 |     width: 700px;
23 |     /* background-color: black; */
24 |     /* border: 1px solid red; */
25 |     /* filter: blur(8px);
26 |     -webkit-filter: blur(8px); */
27 |     background-color: rgba(0,0,0, 0.5); 
28 |     border-radius: 20px;
29 |     display: flex;
30 |     justify-content: center;
31 |     align-items: center;
32 |     position: absolute;
33 |     left: 15%;
34 |     top: 5%;
35 | 
36 | }
37 | 
38 | .fieldset{
39 |     height: 80vh;
40 |     width: 80%;
41 |     text-align: center;
42 | }
43 | 
44 | .name{
45 |     background-color: transparent;
46 |     height: 35px;
47 |     font-size: 18px;
48 | }
49 | 
50 | .selection{
51 |     background-color: transparent;
52 |     margin: 10px;
53 | }
54 | .option{
55 |     color: white;
56 | }
57 | .text-desc{
58 |     border: none;
59 |     background-color: transparent;
60 |     padding: 11px;
61 |     margin: 10px;
62 | }
63 | 
64 | .text-desc:hover{
65 |     border: 1px solid white;
66 |     border-radius: 5px;
67 |     padding: 10px;
68 |     
69 | }
70 | .submit{
71 |     font-size: 25px;
72 |     font-weight: bold;
73 |     background-color: transparent;
74 |     border: none;
75 | }
76 | .submit:hover{
77 |     border: 2px solid white;
78 |     border-radius: 5px;
79 | }


--------------------------------------------------------------------------------
/GUESS MY NO. GAME/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 |   margin: 0px;
 4 |   text-align: center;
 5 | }
 6 | body {
 7 |   font-family: "Silkscreen", cursive;
 8 |   background-color: black;
 9 |   color: white;
10 | }
11 | .guess {
12 |   font-size: 70px;
13 |   display: flex;
14 |   align-self: center;
15 |   gap: 20px;
16 | }
17 | 
18 | button {
19 |   font-family: "Silkscreen", cursive;
20 |   font-size: 24px;
21 |   font-weight: bold;
22 |   padding: 16px 16px;
23 | }
24 | 
25 | .range {
26 |   font-size: 28px;
27 | }
28 | 
29 | .header {
30 |   position: relative;
31 |   padding: 30px;
32 |   display: flex;
33 |   justify-content: space-between;
34 | }
35 | 
36 | .input {
37 |   font-family: "Silkscreen", cursive;
38 |   font-size: 24px;
39 |   color: white;
40 |   background-color: black;
41 |   width: 200px;
42 |   padding: 16px 16px;
43 |   border: 2px solid white;
44 |   margin: 0px 0px 30px;
45 | }
46 | 
47 | .hero {
48 |   display: flex;
49 |   justify-content: space-around;
50 |   align-items: center;
51 | }
52 | 
53 | .right p {
54 |   text-align: left;
55 |   line-height: 2;
56 |   font-size: 32px;
57 | }
58 | 
59 | .main-screen {
60 |   padding: 20px;
61 |   display: flex;
62 |   flex-direction: column;
63 |   gap: 60px;
64 |   margin-bottom: 30px;
65 | }
66 | 
67 | .checks {
68 |   text-align: left;
69 | }
70 | 
71 | .number {
72 |   margin: auto;
73 |   /* change 2  */
74 |   font-size: 50px;
75 |   position: absolute;
76 |   top: 80px;
77 |   left: 45%;
78 |   /* change - 1 */
79 |   border: 2px solid white;
80 |   padding: 16px;
81 | }
82 | 
83 | .made {
84 |   margin-top: 30px;
85 |   /* change3  */
86 |   font-size: 24px;
87 | }
88 | 


--------------------------------------------------------------------------------
/Homepage/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/.DS_Store


--------------------------------------------------------------------------------
/Homepage/images/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/background.jpg


--------------------------------------------------------------------------------
/Homepage/images/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/facebook.png


--------------------------------------------------------------------------------
/Homepage/images/insta.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/insta.jpg


--------------------------------------------------------------------------------
/Homepage/images/insta.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/insta.png


--------------------------------------------------------------------------------
/Homepage/images/ocean.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/ocean.jpeg


--------------------------------------------------------------------------------
/Homepage/images/twitter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Homepage/images/twitter.jpg


--------------------------------------------------------------------------------
/Jumbotron.css:
--------------------------------------------------------------------------------
 1 | .jumbotron {
 2 |     font-size: 20px;
 3 |     padding: 60px;
 4 |     background-color: blue;
 5 |     text-align: center;
 6 |     color: white;
 7 | }
 8 | nav {
 9 |     background-color:greenyellow;
10 |     padding: 5px;
11 | }
12 | nav li {
13 |     display: inline;
14 |     list-style-type: none;
15 |     margin-right: 20px;
16 | }
17 | nav a {
18 |     font-size: 18px;
19 |     font-weight: 400;
20 |     text-decoration: none;
21 |     color: white;
22 | }
23 | body {
24 |     font-family: 'Quicksand', sans-serif;
25 |     margin: 0;
26 |     padding: 0;
27 | }
28 | main {
29 |     padding: 20px;
30 | }
31 | 


--------------------------------------------------------------------------------
/Many-Clicks/ManyClicks.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>Many Clicks</title>
 9 |     <link rel="stylesheet" href="ManyClicks.css">
10 | 
11 |     <style>
12 |         button {
13 |             width: 100px;
14 |             height: 100px;
15 |             margin: 20px;
16 |         }
17 |     </style>
18 | </head>
19 | 
20 | <body>
21 | 
22 |     <button>CLICK</button>
23 |     <button>CLICK</button>
24 |     <button>CLICK</button>
25 |     <button>CLICK</button>
26 |     <button>CLICK</button>
27 |     <button>CLICK</button>
28 |     <button>CLICK</button>
29 |     <button>CLICK</button>
30 |     <button>CLICK</button>
31 |     <button>CLICK</button>
32 |     <button>CLICK</button>
33 |     <button>CLICK</button>
34 |     <button>CLICK</button>
35 |     <button>CLICK</button>
36 |     <button>CLICK</button>
37 |     <button>CLICK</button>
38 |     <button>CLICK</button>
39 |     <button>CLICK</button>
40 |     <button>CLICK</button>
41 |     <button>CLICK</button>
42 |     <button>CLICK</button>
43 |     <button>CLICK</button>
44 |     <button>CLICK</button>
45 |     <button>CLICK</button>
46 |     <button>CLICK</button>
47 |     <button>CLICK</button>
48 |     <button>CLICK</button>
49 |     <button>CLICK</button>
50 |     <button>CLICK</button>
51 |     <button>CLICK</button>
52 | 
53 |     <script src="ManyClicks.js"></script>
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/Many-Clicks/ManyClicks.js:
--------------------------------------------------------------------------------
 1 | function makeRandomColor() {
 2 |     const r = Math.floor(Math.random() * 255) + 1
 3 |     const g = Math.floor(Math.random() * 255) + 1
 4 |     const b = Math.floor(Math.random() * 255) + 1
 5 |     return `rgb(${r},${g},${b})`
 6 | }
 7 | 
 8 | const buttons = document.querySelectorAll('button');
 9 | for (let button of buttons) {
10 |     button.addEventListener('click', function () {
11 |         button.style.backgroundColor = makeRandomColor();
12 |     })
13 | }


--------------------------------------------------------------------------------
/Menghitung Berat Badan Ideal:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | int main(){
 4 | float tinggi;
 5 | cout<<“Program Penghitung berat badan Ideal\n”;
 6 | cout<<“————————————\n”;
 7 | cout<<“Tinggi anda (m) : “;
 8 | cin>>tinggi;
 9 | ideal = (tinggi-100) – (0.1*(tinggi-100));
10 | cout<<“Hasil : “<<ideal<<endl;
11 | return 0;
12 | }
13 | 


--------------------------------------------------------------------------------
/Music-Order-Summary/.gitignore:
--------------------------------------------------------------------------------
 1 | # Avoid accidental upload of the Sketch and Figma design files
 2 | #####################################################
 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ##
 4 | #####################################################
 5 | *.sketch
 6 | *.fig
 7 | 
 8 | # Avoid accidental XD upload if you convert the design file
 9 | ###############################################
10 | ## Please do not remove line 12 - thanks! 🙂 ##
11 | ###############################################
12 | *.xd
13 | 
14 | # Avoid your project being littered with annoying .DS_Store files!
15 | .DS_Store
16 | .prettierignore


--------------------------------------------------------------------------------
/Music-Order-Summary/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/Music-Order-Summary/design/active-states.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Music-Order-Summary/design/active-states.jpg


--------------------------------------------------------------------------------
/Music-Order-Summary/design/desktop-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Music-Order-Summary/design/desktop-design.jpg


--------------------------------------------------------------------------------
/Music-Order-Summary/design/desktop-preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Music-Order-Summary/design/desktop-preview.jpg


--------------------------------------------------------------------------------
/Music-Order-Summary/design/mobile-design.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Music-Order-Summary/design/mobile-design.jpg


--------------------------------------------------------------------------------
/Music-Order-Summary/images/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Music-Order-Summary/images/favicon-32x32.png


--------------------------------------------------------------------------------
/Music-Order-Summary/images/icon-music.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="none" fill-rule="evenodd"><circle cx="24" cy="24" r="24" fill="#DFE6FB"/><path fill="#717FA6" fill-rule="nonzero" d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"/></g></svg>


--------------------------------------------------------------------------------
/Music-Order-Summary/images/pattern-background-desktop.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="437"><path fill="#D6E1FF" fill-rule="evenodd" d="M0 349.974c218.558 116.035 460.05 116.035 724.475 0s502.933-116.035 715.525 0V0H0v349.974z"/></svg>


--------------------------------------------------------------------------------
/Music-Order-Summary/images/pattern-background-mobile.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="375" height="194"><path fill="#D6E1FF" fill-rule="evenodd" d="M-131.808 155.366c97.026 51.512 204.233 51.512 321.62 0 117.388-51.512 223.27-51.512 317.648 0V0h-639.268v155.366z"/></svg>


--------------------------------------------------------------------------------
/Music-Order-Summary/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Front-end Style Guide
 2 | 
 3 | ## Layout
 4 | 
 5 | The designs were created to the following widths:
 6 | 
 7 | - Mobile: 375px
 8 | - Desktop: 1440px
 9 | 
10 | ## Colors
11 | 
12 | ### Primary
13 | 
14 | - Pale blue: hsl(225, 100%, 94%)
15 | - Bright blue: hsl(245, 75%, 52%)
16 | 
17 | ### Neutral
18 | 
19 | - Very pale blue: hsl(225, 100%, 98%)
20 | - Desaturated blue: hsl(224, 23%, 55%)
21 | - Dark blue: hsl(223, 47%, 23%)
22 | 
23 | ## Typography
24 | 
25 | ### Body Copy
26 | 
27 | - Font size (paragraph): 16px
28 | 
29 | ### Font
30 | 
31 | - Family: [Red Hat Display](https://fonts.google.com/specimen/Red+Hat+Display)
32 | - Weights: 500, 700, 900
33 | 


--------------------------------------------------------------------------------
/Musical Instrument/1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <h1>hey there</h1>
11 |   <main>
12 |       <section>
13 |           <div>
14 |             <iframe width="560" height="315" src="https://www.youtube.com/embed/DB3D-mtWR0c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
15 |           </div>
16 |       </section>
17 |   </main>
18 | 
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_A.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_A.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_Ab.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_Ab.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_B.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_B.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_Bb.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_Bb.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_C.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_C.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_D.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_D.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_E.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_E.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_Eb.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_Eb.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_F.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_F.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_G.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_G.mp3


--------------------------------------------------------------------------------
/Musical Instrument/notes/notes_Gb.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Musical Instrument/notes/notes_Gb.mp3


--------------------------------------------------------------------------------
/Musical Instrument/script.js:
--------------------------------------------------------------------------------
 1 | const White_Keys=['z','x','c','v','b','n','m'];
 2 | const Black_Keys=['s','d','g','h','j'];
 3 | const keys=document.querySelectorAll('.key');
 4 | const whiteKeys=document.querySelectorAll('.key.white');
 5 | const blackKeys=document.querySelectorAll('.key.black');
 6 | 
 7 | keys.forEach(key => {
 8 | key.addEventListener('click',() => playNote(key))
 9 | })
10 | 
11 | document.addEventListener('keydown',e=>{
12 |     const key=e.key;
13 |     const whiteKeyIndex=White_Keys.indexOf(key);
14 |     const blackKeyIndex=Black_Keys.indexOf(key);
15 |     
16 |     if (e.repeat) {
17 |         return;
18 |     }
19 |     if (whiteKeyIndex>-1) {
20 |         playNote(whiteKeys[whiteKeyIndex])
21 |     }
22 |     if (blackKeyIndex>-1) {
23 |         playNote(blackKeys[blackKeyIndex])
24 |     }
25 | 
26 | })
27 | 
28 | function playNote(key){
29 |     const noteAudio=document.getElementById(key.dataset.note)
30 |    noteAudio.currentTime=0;
31 |     noteAudio.play()
32 |     key.classList.add('active');
33 |     noteAudio.addEventListener('ended',()=>{
34 |         key.classList.remove('active');
35 |         
36 |     })
37 | 
38 | 
39 | }
40 | 


--------------------------------------------------------------------------------
/Musical Instrument/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | body{
 5 |     background-color: chocolate;
 6 |     display: flex;
 7 |     flex-direction: column;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     min-height: 100vh;
11 |     margin: 0px;
12 | }
13 | 
14 | footer{
15 |     background-color: black;
16 |     color: white;
17 |     text-align: center;
18 | }
19 | 
20 | .piano{
21 |     display: flex;
22 | 
23 | }
24 | 
25 | .key{
26 |     width: 100px;
27 |     height: 400px;
28 | }
29 | 
30 | .white{
31 | width: 100px;
32 | height: 300px;
33 | background-color: white;
34 | border: 1px solid black;
35 | }
36 | .white.active{
37 | width: 100px;
38 | height: 300px;
39 | background-color: rgb(240, 239, 239);
40 | border: 1px solid black;
41 | }
42 | 
43 | .black{
44 |     width: 60px;
45 |     height: 200px;
46 |     background-color: black;
47 |     margin-left:-30px;
48 |     margin-right:-30px;
49 |     z-index: 2;
50 |     
51 |     
52 | }
53 | .black.active{
54 |     width: 60px;
55 |     height: 200px;
56 |     background-color: rgb(82, 75, 75);
57 |     margin-left:-30px;
58 |     margin-right:-30px;
59 |     z-index: 2;
60 |     
61 |     
62 | }
63 | 
64 | 
65 | 


--------------------------------------------------------------------------------
/NewsPaper-Theme/Readme.md:
--------------------------------------------------------------------------------
 1 | # Newspaper Theme
 2 | 
 3 | HTML and CSS responsive code following the UI theme of a newspaper
 4 | 
 5 | ## Description
 6 | 
 7 | Built using HTML and CSS
 8 | 
 9 | ## Authors
10 | 
11 | Daim
12 | Twitter - [@i_am_daim](https://twitter.com/i_am_daim)
13 | Github - [@daim-nickel-penny](https://github.com/Daim-Nickel-Penny)
14 | 
15 | ## Demo
16 | 
17 | ![Working Demo](https://github.com/Daim-Nickel-Penny/CSS-Projects/blob/main/NewsPaper-Theme/assets/working-demo.png)
18 | 


--------------------------------------------------------------------------------
/NewsPaper-Theme/assets/working-demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/NewsPaper-Theme/assets/working-demo.png


--------------------------------------------------------------------------------
/Pranit.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #010413;
 3 | }
 4 | 
 5 | .box {
 6 |     display: flex;
 7 |     width: 400px;
 8 |     --angle: 0deg;
 9 |     background-color: black;
10 |     height: 400px;
11 |     border: 7px solid;
12 |     border-image:linear-gradient(var(--angle) , #ffd800, #ff5520, #750cf2, #0cbcf2)  1;
13 | 
14 |     animation: 2s rotate linear infinite;
15 | }
16 | 
17 | @property --angle {
18 |     syntax : '<angle>';
19 |     initial-value:0deg;
20 |     inherits: false;
21 | }
22 | 
23 | @keyframes rotate{
24 |     to{
25 |         --angle:360deg
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/Prime number:
--------------------------------------------------------------------------------
 1 | #include <iostream>  
 2 | using namespace std;  
 3 | int main()  
 4 | {  
 5 |   int n, i, m=0, flag=0;  
 6 |   cout << "Enter the Number to check Prime: ";  
 7 |   cin >> n;  
 8 |   m=n/2;  
 9 |   for(i = 2; i <= m; i++)  
10 |   {  
11 |       if(n % i == 0)  
12 |       {  
13 |           cout<<"Number is not Prime."<<endl;  
14 |           flag=1;  
15 |           break;  
16 |       }  
17 |   }  
18 |   if (flag==0)  
19 |       cout << "Number is Prime."<<endl;  
20 |   return 0;  
21 | }  
22 | 


--------------------------------------------------------------------------------
/Program Kalkulator Sederhana C++:
--------------------------------------------------------------------------------
 1 | #include <conio.h>
 2 | #include <iostream>
 3 | #include <string>
 4 | 
 5 | using namespace std;
 6 | 
 7 | int main(){
 8 | 	
 9 | 	int bil1,bil2, pil;
10 | 	float hasil;
11 | 	string operasi;
12 | 	
13 | 	cout<<"PILIH OPERATOR ARITMATIKA"<<endl;
14 | 	cout<<"1. Penjumlahan"<<endl;
15 | 	cout<<"2. Pengurangan"<<endl;
16 | 	cout<<"3. Perkalian"<<endl;
17 | 	cout<<"4. Pembagian"<<endl;
18 | 	cout<<"5. Modulus"<<endl;
19 | 	cout<<endl;
20 | 	
21 | 	cout<<"Masukan Pilihan : ";
22 | 	cin>>pil;
23 | 	cout<<"Masukan Bilangan pertama : ";
24 | 	cin>>bil1;
25 | 	cout<<"Masukan Bilangan kedua : ";
26 | 	cin>>bil2;	
27 | 	
28 | 	switch(pil){
29 | 	        case 1 : hasil=bil1+bil2;
30 | 			operasi='+';
31 | 			break;
32 | 		case 2 : hasil=bil1-bil2;
33 | 			operasi='-';
34 | 			break;
35 | 		case 3 : hasil=bil1*bil2;
36 | 			operasi='*';
37 | 			break;
38 | 		case 4 : hasil=bil1/bil2;
39 | 			operasi='/';
40 | 			break;
41 | 		case 5 : hasil=bil1%bil2;
42 | 			 operasi='%';
43 | 			break;
44 | 		default :
45 | 			cout<<"Salah Masukan Operator"<<endl;
46 | 	}
47 | 	cout<<"-----------------------------"<<endl;
48 | 	cout<<"    "<<bil1<<operasi<<bil2<<"="<<hasil<<endl;
49 | 	cout<<"-----------------------------"<<endl;
50 | 	
51 | 	getch();
52 | }
53 | 


--------------------------------------------------------------------------------
/Program for Tower of Hanoi:
--------------------------------------------------------------------------------
 1 | // C++ recursive function to
 2 | // solve tower of hanoi puzzle
 3 | #include <bits/stdc++.h>
 4 | using namespace std;
 5 | 
 6 | void towerOfHanoi(int n, char from_rod,
 7 | 					char to_rod, char aux_rod)
 8 | {
 9 | 	if (n == 1)
10 | 	{
11 | 		cout << "Move disk 1 from rod " << from_rod <<
12 | 							" to rod " << to_rod<<endl;
13 | 		return;
14 | 	}
15 | 	towerOfHanoi(n - 1, from_rod, aux_rod, to_rod);
16 | 	cout << "Move disk " << n << " from rod " << from_rod <<
17 | 								" to rod " << to_rod << endl;
18 | 	towerOfHanoi(n - 1, aux_rod, to_rod, from_rod);
19 | }
20 | 
21 | // Driver code
22 | int main()
23 | {
24 | 	int n = 4; // Number of disks
25 | 	towerOfHanoi(n, 'A', 'C', 'B'); // A, B and C are names of rods
26 | 	return 0;
27 | }
28 | 
29 | // This is code is contributed by rathbhupendra
30 | 


--------------------------------------------------------------------------------
/Program to Find Sum of Digits of a Number:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | int main()
 4 | {
 5 |     int num, rem, sum=0;
 6 |     cout<<"Enter the Number: ";
 7 |     cin>>num;
 8 |     while(num>0)
 9 |     {
10 |         rem = num%10;
11 |         sum = sum+rem;
12 |         num = num/10;
13 |     }
14 |     cout<<"\nSum of Digits = "<<sum;
15 |     cout<<endl;
16 |     return 0;
17 | }
18 | 


--------------------------------------------------------------------------------
/Program to Find and Print Sum of First n Natural Numbers:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | 
 4 | int main()
 5 | {
 6 |    int n, natural=1, sum=0;
 7 |    cout<<"Enter the Value of n: ";
 8 |    cin>>n;
 9 |    while(natural<=n)
10 |    {
11 |       sum = sum+natural;
12 |       natural++;
13 |    }
14 |    cout<<"\nSum of First "<<n<<" Natural Numbers = "<<sum;
15 |    cout<<endl;
16 |    return 0;
17 | }
18 | 


--------------------------------------------------------------------------------
/Program to Make Simple Calculator:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | int main()
 4 | {
 5 |     float numOne, numTwo, res;
 6 |     int choice;
 7 |     do
 8 |     {
 9 |         cout<<"1. Addition\n";
10 |         cout<<"2. Subtraction\n";
11 |         cout<<"3. Multiplication\n";
12 |         cout<<"4. Division\n";
13 |         cout<<"5. Exit\n\n";
14 |         cout<<"Enter Your Choice(1-5): ";
15 |         cin>>choice;
16 |         if(choice>=1 && choice<=4)
17 |         {
18 |             cout<<"\nEnter any two Numbers: ";
19 |             cin>>numOne>>numTwo;
20 |         }
21 |         switch(choice)
22 |         {
23 |             case 1:
24 |                 res = numOne+numTwo;
25 |                 cout<<"\nResult = "<<res;
26 |                 break;
27 |             case 2:
28 |                 res = numOne-numTwo;
29 |                 cout<<"\nResult = "<<res;
30 |                 break;
31 |             case 3:
32 |                 res = numOne*numTwo;
33 |                 cout<<"\nResult = "<<res;
34 |                 break;
35 |             case 4:
36 |                 res = numOne/numTwo;
37 |                 cout<<"\nResult = "<<res;
38 |                 break;
39 |             case 5:
40 |                 return 0;
41 |             default:
42 |                 cout<<"\nWrong Choice!";
43 |                 break;
44 |         }
45 |         cout<<"\n------------------------\n";
46 |     }while(choice!=5);
47 |     cout<<endl;
48 |     return 0;
49 | }
50 | 


--------------------------------------------------------------------------------
/Program to Perform Addition Subtraction Multiplication Division:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | int main()
 4 | {
 5 |     int num1, num2, res;
 6 |     cout<<"Enter Two Numbers: ";
 7 |     cin>>num1>>num2;
 8 |     res = num1+num2;
 9 |     cout<<endl<<"Addition Result = "<<res<<endl;
10 |     res = num1-num2;
11 |     cout<<endl<<"Subtraction Result = "<<res<<endl;
12 |     res = num1*num2;
13 |     cout<<endl<<"Multiplication Result = "<<res<<endl;
14 |     res = num1/num2;
15 |     cout<<endl<<"Division Result = "<<res<<endl;
16 |     return 0;
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS-Projects
 2 | Feel free to create new file, don't hesitate to pull your code, the most important thing is that the file name here must match your nickname so that file does not conflict with other people.
 3 | 
 4 | ## Contributing
 5 | Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 6 | 
 7 | If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
 8 | Don't forget to give the project a star! Thanks again!
 9 | 
10 | 1. Fork the Project
11 | 2. Clone your Repo `(git clone https://github.com/exampleRepo/example.git)`
12 | 3. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
13 | 4. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
14 | 5. Push to the Branch (`git push origin feature/AmazingFeature`)
15 | 6. Open a Pull Request
16 | 
17 | ## License
18 | [MIT](https://choosealicense.com/licenses/mit/)
19 | 
20 | #HACKTOBERFEST
21 | 


--------------------------------------------------------------------------------
/RGB Color Guessing Game/README.md:
--------------------------------------------------------------------------------
1 | # RGB color guessing game
2 | 
3 | 
4 | A RGB Color guessing game in which you need to guess right color.
5 | 
6 | ![image](https://user-images.githubusercontent.com/41536903/119881808-5685e500-bf4b-11eb-869c-e6cdea96aadc.png)
7 | 
8 | 


--------------------------------------------------------------------------------
/RGB Color Guessing Game/colorGameProject.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	background-color: #232323;
 3 | 	margin: 0;
 4 | 	font-family: "Montserrat", "Avenir";
 5 | }
 6 | 
 7 | .square {
 8 | 	width: 30%;
 9 | 	background: purple;
10 | 	padding-bottom: 30%;
11 | 	float: left;
12 | 	margin: 1.66%;
13 | 	border-radius: 15%;
14 | 	transition: background 0.6s;
15 | 	-webkit-transition: background 0.6s;
16 | 	-moz-transition: background 0.6s;
17 | }
18 | 
19 | #container {
20 | 	margin: 20px auto;
21 | 	max-width: 600px;
22 | }
23 | 
24 | h1 {
25 | 	text-align: center;
26 | 	line-height: 1.1;
27 | 	font-weight: normal;
28 | 	color: white;
29 | 	background: steelblue;
30 | 	margin: 0;
31 | 	text-transform: uppercase;
32 | 	padding: 20px 0;
33 | }
34 | 
35 | #colorDisplay {
36 | 	font-size: 200%;
37 | }
38 | 
39 | #message {
40 | 	display: inline-block;
41 | 	width: 20%;
42 | }
43 | 
44 | #stripe {
45 | 	background: white;
46 | 	height: 30px;
47 | 	text-align: center;
48 | 	color: black;
49 | }
50 | 
51 | .selected {
52 | 	color: white;
53 | 	background: steelblue;
54 | }
55 | 
56 | button {
57 | 	border: none;
58 | 	background: none;
59 | 	text-transform: uppercase;
60 | 	height: 100%;
61 | 	font-weight: 700;
62 | 	color: steelblue;
63 | 	letter-spacing: 1px;
64 | 	font-size: inherit;
65 | 	transition: all 0.3s;
66 | 	-webkit-transition: all 0.3s;
67 | 	-moz-transition: all 0.3s;
68 | 	outline: none;
69 | }
70 | 
71 | button:hover {
72 | 	color: white;
73 | 	background: steelblue;
74 | }


--------------------------------------------------------------------------------
/RGB Color Guessing Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Color Game</title>
 5 | 	<link rel="stylesheet" type="text/css" href="colorGameProject.css">
 6 | </head>
 7 | <body>
 8 | <h1>
 9 | 	The Great 
10 | 	<br>
11 | 	<span id="colorDisplay">RGB</span> 
12 | 	<br>
13 | 	Color Game
14 | </h1>
15 | 
16 | <div id="stripe">
17 | 	<button id="reset">New Colors</button>
18 | 	<span id="message"></span>
19 | 	<button class="mode">Easy</button>
20 | 	<button class="mode selected">Hard</button>
21 | </div>
22 | 
23 | 	<div id="container">
24 | 		<div class="square"></div>
25 | 		<div class="square"></div>
26 | 		<div class="square"></div>
27 | 		<div class="square"></div>
28 | 		<div class="square"></div>
29 | 		<div class="square"></div>
30 | 	</div>
31 | 
32 | <script type="text/javascript" src="colorGameProject.js"></script>
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/Rotate_Animation.css:
--------------------------------------------------------------------------------
 1 | @keyframes myAnim {
 2 | 	0% {
 3 | 		transform: rotate(0);
 4 | 	}
 5 | 
 6 | 	100% {
 7 | 		transform: rotate(360deg);
 8 | 	}
 9 | }
10 | 


--------------------------------------------------------------------------------
/SimpleFrontend/Images/apj.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/SimpleFrontend/Images/apj.jpg


--------------------------------------------------------------------------------
/Stone-Paper-Scissor-Game-main/spsdemo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Stone-Paper-Scissor-Game-main/spsdemo.png


--------------------------------------------------------------------------------
/Stone-Paper-Scissor-Game-main/style.css:
--------------------------------------------------------------------------------
 1 | .fa-hand-rock,
 2 | .fa-hand-paper,
 3 | .fa-hand-scissors {
 4 |   font-size: 4rem;
 5 |   font-weight: bolder;
 6 |   cursor: pointer;
 7 | }
 8 | 
 9 | .modal-body ul li i {
10 |   font-size: 1.5rem;
11 |   font-weight: 500;
12 | }
13 | 
14 | .boards,
15 | .select {
16 |   display: none;
17 | }
18 | 
19 | #playerSide,
20 | #computerSide {
21 |   height: 225px;
22 | }
23 | 
24 | html, body {
25 |   height: 100%;
26 | }
27 | 
28 | footer {
29 |   clear: both;
30 |   border: 1px groove #aaaaaa;
31 |   background: blue;
32 |   color: White;
33 |   padding: 0;
34 |   text-align: center;
35 |   vertical-align: middle;
36 |   line-height: normal;
37 |   margin: 0;
38 |   position: fixed;
39 |   bottom: 0px;
40 |   width: 100%;
41 | }


--------------------------------------------------------------------------------
/TextTrackInAnimation.css:
--------------------------------------------------------------------------------
 1 | .tracking-in-expand {
 2 | 	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 3 | 	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
 4 | }
 5 | 
 6 | @-webkit-keyframes tracking-in-expand {
 7 |   0% {
 8 |     letter-spacing: -0.5em;
 9 |     opacity: 0;
10 |   }
11 |   40% {
12 |     opacity: 0.6;
13 |   }
14 |   100% {
15 |     opacity: 1;
16 |   }
17 | }
18 | @keyframes tracking-in-expand {
19 |   0% {
20 |     letter-spacing: -0.5em;
21 |     opacity: 0;
22 |   }
23 |   40% {
24 |     opacity: 0.6;
25 |   }
26 |   100% {
27 |     opacity: 1;
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/Tic Tac Toe Game/README.md:
--------------------------------------------------------------------------------
1 | ## Tic Tac Toe Game using HTML, CSS, Javascript
2 | 
3 | ---
4 | Its a simple two player traditional tic tac toe game
5 | 
6 | ![image](https://user-images.githubusercontent.com/41536903/119881538-0575f100-bf4b-11eb-91c9-7d68291ed84b.png)
7 | 
8 | 
9 | 


--------------------------------------------------------------------------------
/Tic Tac Toe Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 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 | 	<title>Tic Tac Toe Game</title>
 8 | 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 9 | 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10 | 	<link rel="stylesheet" type="text/css" href="tic-tac-toe.css">
11 | </head>
12 | <body>
13 | 	<h1>Tic Tac Toe Game</h1>
14 | 	<p class="winner">Player 1 : X <span></span> Player 2 : O</p>
15 | 	<div class="container">
16 | 		<div class="col-sm-1"></div>
17 | 		<div class="col-sm-1 vertical"></div>
18 | 		<div class="col-sm-1"></div>
19 | 		<div class="col-sm-1 horizontal"></div>
20 | 		<div class="col-sm-1 horizontal vertical"></div>
21 | 		<div class="col-sm-1 horizontal"></div>
22 | 		<div class="col-sm-1"></div>
23 | 		<div class="col-sm-1 vertical"></div>
24 | 		<div class="col-sm-1"></div>
25 | 	</div>
26 | 	<p class="won"></p>
27 | 	<div>
28 | 		<button class="btn btn-default">RESTART GAME</button>
29 | 	</div>
30 | 
31 | 	<script type="text/javascript" src="tic-tac-toe.js"></script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/Tic Tac Toe Game/tic-tac-toe.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	background-color: #6bdfc8;
 3 | 	font-family: 'Open Sans', sans-serif;
 4 | }
 5 | 
 6 | h1 {
 7 | 	text-align: center;
 8 | 	padding-top: 10px;
 9 | 	color: #125149;
10 | 	font-size: 3.0em;
11 | 	letter-spacing: 2px;
12 | 	font-weight: 700;
13 | }
14 | 
15 | button, .btn, .btn-default {
16 | 	margin: auto;
17 | 	display: block;
18 | 	letter-spacing: 1px;
19 | }
20 | 
21 | button:focus {
22 | 	outline:0 !important;
23 | }
24 | 
25 | p {
26 | 	color: #125149;
27 | 	font-weight: 700;
28 | 	font-size: 1.5em;
29 | 	text-align: center;
30 | 	/*padding-right: 10px;*/
31 | 	margin: 20px 0 0 0;
32 | 	margin: auto;
33 | }
34 | 
35 | span {
36 | 	width: 30%;
37 | 	display: inline-block;
38 | }
39 | 
40 | .col-sm-1 {
41 | 	width: 100px;
42 | 	height: 100px;
43 | 	padding-top: 10px;
44 | 	float: left;
45 | }
46 | 
47 | .container {
48 | 	margin: 40px auto;
49 | 	margin-top: 20px;
50 | 	width: 330px;
51 | 	/*padding-left: 40px;*/
52 | 	font-size: 50px;
53 | 	text-align: center;
54 | 	color: white;
55 | }
56 | 
57 | .vertical {
58 | 	border-right: 5px solid #25917c;
59 | 	border-left: 5px solid #25917c; 
60 | }
61 | 
62 | .horizontal {
63 | 	border-top: 5px solid #25917c;
64 | 	border-bottom: 5px solid #25917c;
65 | }
66 | 
67 | .won {
68 | 	margin: 0 0 10px 0;
69 | }
70 | 
71 | .winner {
72 | 	margin-top: 35px;
73 | }
74 | 


--------------------------------------------------------------------------------
/To-Do-List-Web-Dev-Project-main.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/To-Do-List-Web-Dev-Project-main.zip


--------------------------------------------------------------------------------
/To-do list(light&dark)/Readme.md:
--------------------------------------------------------------------------------
1 | Contributed by:- Ankita Dolai(https://github.com/Ankita1827)
2 | 
3 | This is Todo-list with light and dark mode having delete functionality and good interface. It also has an attractive background.
4 | 
5 | ![image](https://user-images.githubusercontent.com/78500268/195928336-f03cbb93-c8cf-4815-87b9-605dd6dae293.png)
6 | ![image](https://user-images.githubusercontent.com/78500268/195928424-9437d128-8c2f-4555-a179-7af0c8616ebc.png)
7 | 


--------------------------------------------------------------------------------
/To-do list(light&dark)/todo(dark).js:
--------------------------------------------------------------------------------
1 | let dark_mode_toggle = document.querySelector('.dark-mode-switch')
2 | 
3 | dark_mode_toggle.onclick = () => {
4 |     document.querySelector('body').classList.toggle('light')
5 |     document.querySelector('body').classList.toggle('dark')
6 | }


--------------------------------------------------------------------------------
/To-do list(light&dark)/todo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>To-Do List</title>
 8 |     <link rel="stylesheet" href="todo.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
10 | </head>
11 | 
12 | <body>
13 |     <div class="wrapper">
14 |         <header><i>To-Do List</i></header>
15 |         <div class="inputField">
16 |             <input type="text" placeholder="Add your new to-do">
17 |             <button><i class="fas fa-pencil-alt"></i></button>
18 |         </div>
19 |         <ul class="todoList">
20 |         </ul>
21 |         <div class="footer">
22 |             <span>There are <span class="pendingTasks"></span> pending tasks</span>
23 |             <button>Clear All</button>
24 |         </div>
25 |     </div>
26 |     <div class="toggle">
27 |         <span>Dark Mode</span>
28 |         <div class="dark-mode-switch">
29 |             <div class="dark-mode-switch-ident"></div>
30 |         </div>
31 |     </div>
32 |     <script src="todo(dark).js"></script>
33 |     <script src="todo.js"></script>
34 | </body>
35 | 
36 | </html>


--------------------------------------------------------------------------------
/Todolist-hjain/ToDoList.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>To-Do-List</title>
 9 |     <link rel="stylesheet" href="ToDoList.css">
10 | </head>
11 | 
12 | <body>
13 |     <h1>To-Do-List</h1>
14 | 
15 |     <div class="container">
16 |         <div class="input">
17 |             <input type="text" id="textentry" placeholder="Enter your to-do task here">&nbsp;
18 |             <button id="add" onclick="divadd()">+</button>
19 |         </div>
20 | 
21 |         <div class="tasks"></div>
22 |     </div>
23 | 
24 |     <script src="ToDoList.js"></script>
25 | 
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/Todolist-hjain/ToDoList.js:
--------------------------------------------------------------------------------
 1 | function divadd()
 2 | {
 3 |     let gettext=document.getElementById('textentry');
 4 |     document.querySelector('.tasks').innerHTML+=`<div class="displaytask">
 5 |     ${gettext.value}
 6 |     <div id="buttoncontainer">
 7 |     <button id="taskbutton" onclick="remove()">X</button>
 8 |     </div>
 9 |     </div>`;
10 |     gettext.value="";
11 | }
12 | 
13 | function remove()
14 | {
15 |     document.querySelector('.displaytask').remove();
16 | }


--------------------------------------------------------------------------------
/Tribute-Sachin-Tendulkar/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: 'Roboto', sans-serif;
 3 | }
 4 | 
 5 | #main {
 6 |     background-color: #EEEEEE;
 7 |     margin: 2% 2%;
 8 |     padding: 1% 0;
 9 |     border-radius: 0.5%;
10 |     text-align: center;
11 | }
12 | 
13 | #title {
14 |     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
15 |     font-size: 3rem;
16 |     font-weight: 400;
17 |     margin: 10px 0 10px 0;
18 | }
19 | 
20 | #sub-title {
21 |     font-family: 'Roboto Mono', monospace;
22 |     margin: 10px 0 20px 0;
23 | }
24 | 
25 | #img-div {
26 |     display: flex;
27 |     flex-direction: column;
28 |     align-items: center;
29 |     background-color: #FFFFFF;
30 |     border: 4px solid #FFFFFF;
31 |     border-radius: 0.5%;
32 |     margin: 0 auto;
33 |     max-width: 80%;
34 | }
35 | 
36 | #image {
37 |     max-width: 100%;
38 |     display: block;
39 |     height: auto;
40 | }
41 | 
42 | #img-caption {
43 |     margin-top: 1%;
44 |     text-decoration: none;
45 |     color: black;
46 | }
47 | 
48 | #tribute-info {
49 |     /*text-align: center;*/
50 | }
51 | 
52 | #timeline {
53 |     padding: 0 10%;
54 |     text-align: left;
55 |     line-height: 1.7;
56 | }
57 | 
58 | #quote {
59 |     padding-top: 0.8%;
60 | }
61 | 
62 | #quote-by {
63 |     display: block;
64 |     padding-top: 1.5%;
65 | }
66 | 
67 | #tribute-link {
68 |     text-decoration: none;
69 |     font-size: 1.2rem;
70 |     padding: 1% 0 3% 0;
71 | }
72 | 
73 | 
74 | /* Media Query */
75 | 
76 | @media screen and (max-width: 768px) {
77 |     body {
78 |         font-family: 'Open Sans', sans-serif;
79 |     }
80 |     #tribute-link {
81 |         font-size: 1rem;
82 |     }
83 |     #img-div {
84 |         max-width: 90%;
85 |     }
86 | }


--------------------------------------------------------------------------------
/Tribute-Sachin-Tendulkar/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Tribute-Sachin-Tendulkar/images/favicon.png


--------------------------------------------------------------------------------
/Tribute_Page/Dhyan_Chand_.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/Tribute_Page/Dhyan_Chand_.jpg


--------------------------------------------------------------------------------
/Tribute_Page/styles.css:
--------------------------------------------------------------------------------
 1 | #main {
 2 |     background-color: #EEEEEE;
 3 |     padding: 50px;
 4 |     margin: 30px;
 5 |     text-align: center;
 6 |     border-radius: 20px;
 7 | }
 8 | 
 9 | #title {
10 |     font-size: 34px;
11 | }
12 | 
13 | h2 {
14 |     font-size: 20px;
15 | }
16 | 
17 | #img-div {
18 |     background-color: white;
19 |     padding: 20px 0;
20 |     border-radius: 4px;
21 | }
22 | 
23 | .image {
24 |     max-width: 90%;
25 |     margin: 0 auto;
26 |     display: block;
27 | }
28 | 
29 | #img-caption{
30 |     padding :10px;
31 | }
32 | 
33 | .timeline {
34 |     text-align: left;
35 |     margin: 10px auto;
36 |     width: 600px;
37 | }
38 | 
39 | @media screen and (max-width: 480px) {
40 |     #main {
41 |         padding: 10px;
42 |         margin: 10px;
43 |     }
44 | 
45 |     .timeline {
46 |         width: unset;
47 |     }
48 | }


--------------------------------------------------------------------------------
/agetta.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/aldimarcho.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/alfin.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 1;
31 | }
32 | 


--------------------------------------------------------------------------------
/alvandhi.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/alvanochi.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/amirultxid.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/andarualwan.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/apisvrs.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/aryarriady.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body { 
 6 |   background: lightblue url("img_tree.gif") no-repeat fixed center; 
 7 | }
 8 | </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>The background Property</h1>
13 | 
14 | <p>This is some text</p>
15 | <p>This is some text</p>
16 | <p>This is some text</p>
17 | <p>This is some text</p>
18 | <p>This is some text</p>
19 | <p>This is some text</p>
20 | <p>This is some text</p>
21 | <p>This is some text</p>
22 | 
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/arytarigan.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/ascending array:
--------------------------------------------------------------------------------
 1 | #include <iostream>
 2 | using namespace std;
 3 | int main(){
 4 |     int i, j, size, temp;
 5 |     int arr[25];
 6 |     
 7 |     // Asking for input
 8 |     cout << "Enter the total no. of elements: ";
 9 |     cin >> size;
10 |     
11 |     // Enter the elements
12 |     cout << "Enter the elements of the array: " << endl;
13 |     for (i = 0; i < size; i++){
14 |         cin >> arr[i];
15 |     }
16 |     
17 |     // Sorting elements in ascending order
18 |     for (i = 0; i < size; i++){
19 |         for (j = i; j < size; j++){
20 |             if (arr[i] > arr[j+1]){
21 |                 temp = arr[i];
22 |                 arr[i] = arr[j+1];
23 |                 arr[j+1] = temp;
24 |             }
25 |         }
26 |     }
27 |     
28 |     // Displaying output
29 |     cout << "Elements sorted in the ascending order are: " << endl;
30 |     for (i = 1; i <= size; i++){
31 |      cout << arr[i] << endl;   
32 |     }
33 |     return 0;
34 | }
35 | 


--------------------------------------------------------------------------------
/asset/js/quote.js:
--------------------------------------------------------------------------------
 1 | function randomQuote() {
 2 |     $.ajax({
 3 |         url: "https://api.forismatic.com/api/1.0/?",
 4 |         dataType: "jsonp",
 5 |         data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
 6 |         success: function( response ) {
 7 |           $("#random_quote").html("<p id='random_quote' class='lead text-center'>" +
 8 |             response.quoteText + "<br/>&dash; " + response.quoteAuthor + " &dash;</p>");
 9 |           $("#tweet").attr("href", "https://twitter.com/home/?status=" + response.quoteText +
10 |             ' (' + response.quoteAuthor + ')');
11 |         }
12 |     });
13 |   }
14 |   
15 |   $(function() {
16 |     randomQuote();
17 |   });
18 |   
19 |   $("button").click(function(){
20 |     randomQuote();
21 |   });


--------------------------------------------------------------------------------
/awee.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/aziztampan.css:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title> Membuat Login </title>
 4 |     <meta charset="UTF-8">
 5 |     <style>
 6 |       body{
 7 |         background-color: aqua;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <link rel="shortcut icon" href="gambar/seputar pemograman.jpg">
13 |       <p><marquee scrollamount="20" behavior="alternate"><pre> &#174;Sela&#771;ma&#771;t Da&#771;ta&#771;ng di Seputar Pemogra&#771;ma&#771;n&#174; <hr color="blue"></pre></marquee></p><hr color="red" size="10">
14 | 
15 |       <div class="header">
16 | 
17 |         <div class="header_isi">
18 | 
19 |           <div class="gambar">
20 | 
21 |             <form action="login.php" method="POST">
22 | 
23 |               <input type="text" name="username" placeholder="Username" class="login_regis">     <br />
24 |               <input type="password" name="password" placeholder="Password" class="login_regis"> <br />
25 | 
26 |             <div class="chexbox">
27 |               <input type="checkbox" name="chek" > Remember me <br />
28 |             </div>
29 | 
30 |               <input type="Submit" name="login" value="LOGIN" class="tombol_login">
31 |             </form>
32 | 
33 |         </div>
34 | 
35 |       </div>
36 | 
37 |       <div class="copyright">
38 |         CopyRight&copy 2016 | Design By: FatikZ
39 |       </div>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/background:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body { 
 6 |   background: lightblue url("img_tree.gif") no-repeat fixed center; 
 7 | }
 8 | </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>The background Property</h1>
13 | 
14 | <p>This is some text</p>
15 | <p>This is some text</p>
16 | <p>This is some text</p>
17 | <p>This is some text</p>
18 | <p>This is some text</p>
19 | <p>This is some text</p>
20 | <p>This is some text</p>
21 | <p>This is some text</p>
22 | 
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/bellayana.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/betaine.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body { 
 6 |   background: lightblue url("img_tree.gif") no-repeat fixed center; 
 7 | }
 8 | </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>The background Property</h1>
13 | 
14 | <p>This is some text</p>
15 | <p>This is some text</p>
16 | <p>This is some text</p>
17 | <p>This is some text</p>
18 | <p>This is some text</p>
19 | <p>This is some text</p>
20 | <p>This is some text</p>
21 | <p>This is some text</p>
22 | 
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/bg.jpg


--------------------------------------------------------------------------------
/bibitgreget.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body { 
 6 |   background: lightblue url("img_tree.gif") no-repeat fixed center; 
 7 | }
 8 | </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>The background Property</h1>
13 | 
14 | <p>This is some text</p>
15 | <p>This is some text</p>
16 | <p>This is some text</p>
17 | <p>This is some text</p>
18 | <p>This is some text</p>
19 | <p>This is some text</p>
20 | <p>This is some text</p>
21 | <p>This is some text</p>
22 | 
23 | </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/bolbText/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Bolb Text</title>
 8 |     <link rel="stylesheet" href="./styles.css">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <h1><span>THE<br>BLOBS</span></h1>
13 |     
14 |         <div class="blobs_1"></div>
15 |         <div class="blobs_2"></div>
16 |         <div class="blobs_3"></div>
17 |         <div class="blobs_4"></div>
18 |         <div class="blobs_5"></div>
19 |         <div class="blobs_6"></div>
20 |         <div class="blobs_7"></div>
21 |     </div>
22 |     
23 |     <!-- This is not part of Pen -->
24 |     <a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#000"></a>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/bounching-text.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
 2 | * {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | body {
 9 |   background-color:  #151719;
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 |   min-height: 100vh;
14 | }
15 | .waviy {
16 |   position: relative;
17 |   -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
18 |   font-size: 60px;
19 | }
20 | .waviy span {
21 |   font-family: 'Alfa Slab One', cursive;
22 |   position: relative;
23 |   display: inline-block;
24 |   color: #fff;
25 |   text-transform: uppercase;
26 |   animation: waviy 1s infinite;
27 |   animation-delay: calc(.1s * var(--i));
28 |   
29 | }
30 | @keyframes waviy {
31 |   0%,40%,100% {
32 |     transform: translateY(0)
33 |   }
34 |   20% {
35 |     transform: translateY(-20px)
36 |   }
37 | }


--------------------------------------------------------------------------------
/bounching-text.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="./bounching-text.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |         <div class="waviy">
12 |           <span style="--i:1">Z</span>
13 |           <span style="--i:2">I</span>
14 |           <span style="--i:3">Y</span>
15 |           <span style="--i:4">O</span>
16 |           <span style="--i:5">V</span>
17 |           <span style="--i:6">U</span>
18 |           <span style="--i:7">D</span>
19 |           <span style="--i:8">D</span>
20 |           <span style="--i:9">I</span>
21 |           <span style="--i:10">N</span>
22 |        
23 |          </div>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/brave.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/change_color_animation.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/cianjur.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 | #Hacktoberfest2022
26 |     <p>Hello World!</p>
27 |   </div>
28 | </div>
29 | 


--------------------------------------------------------------------------------
/classic_tic-tac-toe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Tic Tac Toe Game</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |     <div id="main">
12 |         <h1>TIC TAC TOE</h1>
13 | 
14 |         <p class="new"><i>Game starts by just Tap on box</i></p>
15 |            <p id="ins"> <br><br>First Player starts as <b>Player X</b>
16 |             <br>And<br>Second Player as <b>Player O</b>
17 |         </p>
18 | 
19 |         <br><br>
20 | 
21 |         <input type="text" id="b1" onclick="myfunc_3(); myfunc();" readonly>
22 |         <input type="text" id="b2" onclick="myfunc_4(); myfunc();" readonly>
23 |         <input type="text" id="b3" onclick="myfunc_5(); myfunc();" readonly>
24 |         <br><br>
25 |         <input type="text" id="b4" onclick="myfunc_6(); myfunc();" readonly>
26 |         <input type="text" id="b5" onclick="myfunc_7(); myfunc();" readonly>
27 |         <input type="text" id="b6" onclick="myfunc_8(); myfunc();" readonly>
28 |         <br><br>
29 |         <input type="text" id="b7" onclick="myfunc_9(); myfunc();" readonly>
30 |         <input type="text" id="b8" onclick="myfunc_10(); myfunc();" readonly>
31 |         <input type="text" id="b9" onclick="myfunc_11(); myfunc();" readonly>
32 | 
33 |         <br><br><br>
34 | 
35 |         <button id="but" onclick="myfunc_2()">RESET</button>
36 | 
37 |         <br><br>
38 | 
39 |         <p id="print"></p>
40 |     </div>
41 |     
42 |     <script src="app.js"></script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/cp2940.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body {
 6 |   background-color: pink;
 7 | }
 8 | </style>
 9 | </head>
10 | <body>
11 | 
12 | <h1>The background-color Property</h1>
13 | 
14 | <p>The background color can be specified with a color name.</p>
15 | 
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/create jsd.css:
--------------------------------------------------------------------------------
1 | .center {
2 |   margin: auto;
3 |   width: 50%;
4 |   border: 3px solid green;
5 |   // text to align centre
6 |   padding: 10px;
7 | }
8 | 


--------------------------------------------------------------------------------
/cssnowaf.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	padding: 2px 180px;
 3 | }
 4 | 
 5 | /* Bagian HEADER*/
 6 | .header {
 7 | 	background-color: green;
 8 | 	padding: 5px 10px;
 9 | 	text-align: left;
10 | }
11 | 
12 | /* Bagian NAVIGASI MENU*/
13 | .navmenu {
14 | 	background-color: yellow;
15 | 	padding: 15px 15px; 
16 | 	text-align: left;
17 | }
18 | 
19 | .navmenu a {
20 | 	color: red;
21 | 	padding: 10px 10px;
22 | }
23 | 
24 | /* ketika mmouse cursor di atas tulisan menu, maka akan merubah background, size, dan warna font */
25 | .navmenu a:hover{
26 | 	background-color: #CECE0A;
27 | 	font-size: 110%;
28 | 	color: black;
29 | }
30 | 
31 | /*Bagian Content dan Side Bar*/
32 | .kolom {
33 | 	float: left;
34 | }
35 | 
36 | .kolom.kiri a:hover{ /*ketika kursor di atas tulisan link, maka ada shadow pada text*/
37 | 	text-shadow: 5px 5px 3px blue;
38 | }
39 | 
40 | .kolom.kiri {
41 | 	width: 25%;
42 | 	height: 500px;
43 | 	background-color: orange;
44 | }
45 | 
46 | .kolom.kanan {
47 | 	width: 75%;
48 | 	height: 500px;
49 | 	background-color: red;
50 | }
51 | 
52 | .baris:after {
53 | 	content: "";
54 | 	display: table;
55 | 	clear: both;
56 | }
57 | 
58 | .footer{
59 | 	padding: 15px;
60 | 	text-align: left;
61 | 	background-color: blue;
62 | 
63 | }
64 | 
65 | /* untuk mode mobile */
66 | @media screen and (max-width: 600px) {
67 | 	.kolom.kiri, .kolom.kanan {
68 | 		width: 100%;
69 | 	}
70 | }
71 | 


--------------------------------------------------------------------------------
/cyriak.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/default.css:
--------------------------------------------------------------------------------
1 | * { 
2 |   padding: 0;
3 |   margin:0;
4 |   line-height:1.2rem;
5 | }
6 | 


--------------------------------------------------------------------------------
/deniriswana.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/dice roll/dicee.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Dicee</title>
 6 |     <link rel="stylesheet" href="styles.css">
 7 |     <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet">
 8 | 
 9 |   </head>
10 |   <body>
11 | 
12 |     <div class="container">
13 |       <h1>Refresh Me</h1>
14 | 
15 |       <div class="dice">
16 |         <p>Player 1</p>
17 |         <img class="img1" src="images/dice6.png">
18 |       </div>
19 | 
20 |       <div class="dice">
21 |         <p>Player 2</p>
22 |         <img class="img2" src="images/dice6.png">
23 |       </div>
24 | 
25 |     </div>
26 | 
27 |     <script src="index.js" charset="utf-8"></script>
28 | 
29 |       </body>
30 | 
31 |       <footer>
32 |        🎲 Dementor 🎲 
33 |       </footer>
34 |     </html>
35 | 


--------------------------------------------------------------------------------
/dice roll/images/dice1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dice roll/images/dice1.png


--------------------------------------------------------------------------------
/dice roll/images/dice2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dice roll/images/dice2.png


--------------------------------------------------------------------------------
/dice roll/images/dice3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dice roll/images/dice3.png


--------------------------------------------------------------------------------
/dice roll/images/dice4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dice roll/images/dice4.png


--------------------------------------------------------------------------------
/dice roll/images/dice5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dice roll/images/dice5.png


--------------------------------------------------------------------------------
/dice roll/images/dice6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dice roll/images/dice6.png


--------------------------------------------------------------------------------
/dice roll/images/readme:
--------------------------------------------------------------------------------
1 | dice images
2 | 


--------------------------------------------------------------------------------
/dice roll/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var randomNumber1 = Math.floor(Math.random() * 6) + 1; //1-6
 3 | 
 4 | var randomDiceImage = "dice" + randomNumber1 + ".png"; //dice1.png - dice6.png
 5 | 
 6 | var randomImageSource = "images/" + randomDiceImage; //images/dice1.png - images/dice6.png
 7 | 
 8 | var image1 = document.querySelectorAll("img")[0];
 9 | 
10 | image1.setAttribute("src", randomImageSource);
11 | 
12 | 
13 | var randomNumber2 = Math.floor(Math.random() * 6) + 1;
14 | 
15 | var randomImageSource2 = "images/dice" + randomNumber2 + ".png";
16 | 
17 | document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);
18 | 
19 | 
20 | //If player 1 wins
21 | if (randomNumber1 > randomNumber2) {
22 |   document.querySelector("h1").innerHTML = "🚩 Play 1 Wins!";
23 | }
24 | else if (randomNumber2 > randomNumber1) {
25 |   document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩";
26 | }
27 | else {
28 |   document.querySelector("h1").innerHTML = "Draw!";
29 | }
30 | 


--------------------------------------------------------------------------------
/dice roll/readme:
--------------------------------------------------------------------------------
1 | refresh page to roll
2 | 


--------------------------------------------------------------------------------
/dice roll/styles.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 70%;
 3 |   margin: auto;
 4 |   text-align: center;
 5 | }
 6 | 
 7 | .dice {
 8 |   text-align: center;
 9 |   display: inline-block;
10 | 
11 | }
12 | 
13 | body {
14 |   background-color: #393E46;
15 | }
16 | 
17 | h1 {
18 |   margin: 30px;
19 |   font-family: 'Lobster', cursive;
20 |   text-shadow: 5px 0 #232931;
21 |   font-size: 8rem;
22 |   color: #4ECCA3;
23 | }
24 | 
25 | p {
26 |   font-size: 2rem;
27 |   color: #4ECCA3;
28 |   font-family: 'Indie Flower', cursive;
29 | }
30 | 
31 | img {
32 |   width: 80%;
33 | }
34 | 
35 | footer {
36 |   margin-top: 5%;
37 |   color: #EEEEEE;
38 |   text-align: center;
39 |   font-family: 'Indie Flower', cursive;
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/dickykumay.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/dickyprase.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/digital_Clock/css/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | .container {
 8 |   background: url(../img/bg2.png);
 9 |   height: 100vh;
10 |   background-position: center;
11 |   background-size: cover;
12 |   background-repeat: no-repeat;
13 |   display: flex;
14 |   justify-content: center;
15 |   padding-top: 12%;
16 | }
17 | .container-box {
18 |   position: absolute;
19 |   background-color: rgba(255, 255, 255, 0.788);
20 |   padding: 70px 100px;
21 | }
22 | 
23 | .box {
24 |   display: inline-block;
25 |   text-align: center;
26 |   background-color: rgba(63, 63, 63, 0.855);
27 |   padding: 40px 30px;
28 |   margin: 0px 20px;
29 | }
30 | 
31 | .box div {
32 |   font-size: 5em;
33 |   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
34 |   color: #ffffff;
35 |   font-style: normal;
36 | }
37 | 
38 | .box p {
39 |   font-size: 1em;
40 |   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
41 |   background-color: #000000;
42 |   color: #ffffff;
43 |   top: 71%;
44 |   text-transform: uppercase;
45 |   opacity: 0.8;
46 |   padding: 2px 40px;
47 | }
48 | 


--------------------------------------------------------------------------------
/digital_Clock/img/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/digital_Clock/img/bg.png


--------------------------------------------------------------------------------
/digital_Clock/img/bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/digital_Clock/img/bg2.png


--------------------------------------------------------------------------------
/digital_Clock/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Digital Watch</title>
 8 |     <link rel="stylesheet" href="css/style.css">
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="container-box">
13 |             <div class="box">
14 |                 <div class="hours" id="hours">00</div>
15 |                 <p>Hours</p>
16 |             </div>
17 |             <div class="box">
18 |                 <div class="minutes" id="minutes">00</div>
19 |                 <p>Minutes</p>
20 |             </div>
21 |             <div class="box">
22 |                 <div class="seconds" id="seconds">00</div>
23 |                 <p>Seconds</p>
24 |             </div>
25 |             <div class="box">
26 |                 <div class="session" id="session">AM</div>
27 |                 <p>Session</p>
28 |             </div>
29 |         </div>
30 |     </div>
31 |     <script src="javaScript/app.js"></script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/digital_Clock/javaScript/app.js:
--------------------------------------------------------------------------------
 1 | function showTime() {
 2 |   var time = new Date();
 3 |   var hours = time.getHours();
 4 |   var minutes = time.getMinutes();
 5 |   var seconds = time.getSeconds();
 6 |   var updateHours = document.getElementById("hours");
 7 |   var updateMinutes = document.getElementById("minutes");
 8 |   var updateSeconds = document.getElementById("seconds");
 9 |   var updateSession = document.getElementById("session");
10 |   var session = "AM";
11 | 
12 |   if (hours == 0) {
13 |     hours = 12;
14 |   }
15 |   if (hours > 12) {
16 |     hours = hours - 12;
17 |     session = "PM";
18 |   }
19 | 
20 |   updateHours.innerHTML = hours;
21 |   updateMinutes.innerHTML = minutes;
22 |   updateSeconds.innerHTML = seconds;
23 |   updateSession.innerHTML = session;
24 | 
25 |   setTimeout(showTime, 1000);
26 | }
27 | showTime();
28 | 


--------------------------------------------------------------------------------
/dinogame-hjain/dinogame.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0px;
 3 |     padding: 0px;
 4 | }
 5 | 
 6 | 
 7 | #dinoimage
 8 | {
 9 |     height:100px;
10 |     width:100px;
11 |     top:150px;
12 |     left:150px;
13 |     position: relative;
14 | }
15 | 
16 | .jump
17 | {
18 |     animation:jump 0.4s linear;
19 | }
20 | 
21 | @keyframes jump
22 | {
23 |     25%{top: 100px;}
24 |     50%{top: 80px;}
25 |     75%{top: 100px;}
26 | }
27 | 
28 | .ground
29 | {
30 |     top: 100px;
31 |     width:100%;
32 |     height:250px;
33 | }
34 | 
35 | #treeimage
36 | {
37 |     height:50px;
38 |     width:30px;
39 |     position: relative;
40 |     left: 2000px;
41 |     top:150px;
42 |     animation: move 2s infinite linear;
43 | }
44 | @keyframes move
45 | {
46 |     100%{left:-90px;}
47 | }
48 | 
49 | .realground
50 | {
51 |     width:100%;
52 |     height:0;
53 |     border:1px solid gray;
54 | }
55 | 


--------------------------------------------------------------------------------
/dinogame-hjain/dinogame.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let dino = document.getElementById('dinoimage');
 3 | let tree=document.getElementById('treeimage');
 4 | 
 5 | function jumpit() {
 6 |     if (dino.classList != "jump") {
 7 |         dino.classList.add("jump");
 8 | 
 9 |         setTimeout(function () {
10 |             dino.classList.remove("jump");
11 |         }, 400)
12 |     }
13 | }
14 | 
15 | document.addEventListener("keydown", function (Event) {
16 |     jumpit();
17 | })
18 | 
19 | let collision =setInterval(function(){
20 |     let dinotop=parseInt(window.getComputedStyle(dino).getPropertyValue("top"));
21 |     let greentree=parseInt(window.getComputedStyle(tree).getPropertyValue("left"));
22 | 
23 |     if(greentree>0 && greentree<10 && dinotop>=92)
24 |     {
25 |         console.log("crashed");
26 |         alert("game over");
27 |     }
28 |     
29 | })


--------------------------------------------------------------------------------
/dinogame-hjain/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Document</title>
 8 |     <link rel="stylesheet" href="dinogame.css">
 9 | </head>
10 | <body>
11 |     
12 |     <div class="ground">
13 |         <img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=600/uploads/users/1112/posts/25730/image/animate-run-progress-03.gif" id="dinoimage" alt="">
14 |         <img src="tree_image.jpg"  id="treeimage" alt="">
15 |     </div>
16 |     <div class="realground"></div>
17 | 
18 |     <script src="dinogame.js"></script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/dinogame-hjain/tree_image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/dinogame-hjain/tree_image.jpg


--------------------------------------------------------------------------------
/dropdown-ui:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/egitaufik.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/falih.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/fanst.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/farhanbili.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/fatik07_login.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title> Membuat Login </title>
 4 |     <meta charset="UTF-8">
 5 |     <style>
 6 |       body{
 7 |         background-color: aqua;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <link rel="shortcut icon" href="gambar/seputar pemograman.jpg">
13 |       <p><marquee scrollamount="20" behavior="alternate"><pre> &#174;Sela&#771;ma&#771;t Da&#771;ta&#771;ng di Seputar Pemogra&#771;ma&#771;n&#174; <hr color="blue"></pre></marquee></p><hr color="red" size="10">
14 | 
15 |       <div class="header">
16 | 
17 |         <div class="header_isi">
18 | 
19 |           <div class="gambar">
20 | 
21 |             <form action="login.php" method="POST">
22 | 
23 |               <input type="text" name="username" placeholder="Username" class="login_regis">     <br />
24 |               <input type="password" name="password" placeholder="Password" class="login_regis"> <br />
25 | 
26 |             <div class="chexbox">
27 |               <input type="checkbox" name="chek" > Remember me <br />
28 |             </div>
29 | 
30 |               <input type="Submit" name="login" value="LOGIN" class="tombol_login">
31 |             </form>
32 | 
33 |         </div>
34 | 
35 |       </div>
36 | 
37 |       <div class="copyright">
38 |         CopyRight&copy 2016 | Design By: FatikZ
39 |       </div>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/fazasyahfatwa.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: serif;
 3 | 
 4 | }
 5 | 
 6 | li {
 7 |     list-style: none;
 8 |     float: left;
 9 |     padding: 33px 20px;
10 | }
11 | 
12 | .header{
13 |     background-color: rgb(10, 25, 58);
14 |     height: 90px;
15 |     color: #fff;
16 | 
17 | }
18 | 
19 | .header-logo {
20 |     font-size: 36px;
21 |     float: left;
22 |     padding: 20px 40px;
23 | }
24 | 
25 | main{
26 |     padding: 100px 80px;
27 | 
28 | }
29 | 
30 | .copy-container h1 {
31 |     font-size: 140px;
32 | }
33 | 
34 | .copy-container h2 {
35 |     font-size: 60px;
36 | }
37 | 
38 | .copy-container span {
39 |     color: red;
40 | }
41 | 


--------------------------------------------------------------------------------
/fiqrinugroho.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/flex.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }


--------------------------------------------------------------------------------
/flip-card/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Flip Card</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 | </head>
10 | <body>
11 |   
12 |         
13 | 
14 |         <div class="cards">
15 |             <div class="card">
16 |                 <div class="front">
17 |                     
18 |                         <h1>Front Side</h1> 
19 |                         
20 |                 </div>
21 |                 <div class="back">
22 |                     <center>
23 |                         <h1>Back Side</h1> 
24 |                     </center>
25 |                 </div>
26 |             </div>
27 |      
28 |     
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/flip-card/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | body {
 5 |     display: flex;
 6 |     align-items: center;
 7 |     justify-content: center;
 8 |     height: 100vh;
 9 |     background-color: #1cbfd4;
10 |   }
11 | 
12 | 
13 | 
14 | 
15 | .card{
16 |     height: 250px;
17 |     width: 200px;
18 |     position: relative;
19 |     transition: all 1s linear;
20 |     transform-style: preserve-3d;
21 |     margin: 25px 75px 0 75px;
22 |     float:left;
23 |     box-shadow: 10px 20px 50px rgba(0, 0, 0, 0.3);
24 |     background-color: rgba(255, 255, 255, 0.1);
25 |     border-radius: 15px;
26 |     border-top:1px solid rgba(255, 255, 255, 0.5);
27 |     border-left:1px solid rgba(255, 255, 255, 0.5);
28 | }
29 | 
30 | .card:hover{
31 |     transform: rotateY(180deg);
32 |     box-shadow: -10px 20px 50px rgba(0, 0, 0, 0.2);
33 | }
34 | 
35 | .front, .back{
36 |     width: 100%;
37 |     height: 100%;
38 |     border-radius: 10px;
39 |     position: absolute;
40 | }
41 | 
42 | .front{
43 |     padding: 10px;
44 |     z-index: 2;
45 |     backface-visibility: hidden;
46 |     display: flex;
47 |     align-items: center;
48 | 
49 | }
50 | .back{
51 |     padding: 10px;
52 |     z-index: 1;
53 |     transform: rotateY(180deg);
54 |     backface-visibility: hidden;
55 |     display: flex;
56 |     align-items: center;
57 | }
58 | 
59 | 
60 | 
61 | 


--------------------------------------------------------------------------------
/frllzwr.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/gabrielwsgr.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/gunawandeny.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: serif;
 3 | 
 4 | }
 5 | 
 6 | li {
 7 |     list-style: none;
 8 |     float: left;
 9 |     padding: 33px 20px;
10 | }
11 | 
12 | .header{
13 |     background-color: rgb(10, 25, 58);
14 |     height: 90px;
15 |     color: #fff;
16 | 
17 | }
18 | 
19 | .header-logo {
20 |     font-size: 36px;
21 |     float: left;
22 |     padding: 20px 40px;
23 | }
24 | 
25 | main{
26 |     padding: 100px 80px;
27 | 
28 | }
29 | 
30 | .copy-container h1 {
31 |     font-size: 140px;
32 | }
33 | 
34 | .copy-container h2 {
35 |     font-size: 60px;
36 | }
37 | 
38 | .copy-container span {
39 |     color: red;
40 | }
41 | 


--------------------------------------------------------------------------------
/hafizkun.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>


--------------------------------------------------------------------------------
/harryy.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: serif;
 3 | 
 4 | }
 5 | 
 6 | li {
 7 |     list-style: none;
 8 |     float: left;
 9 |     padding: 33px 20px;
10 | }
11 | 
12 | .header{
13 |     background-color: rgb(10, 25, 58);
14 |     height: 90px;
15 |     color: #fff;
16 | 
17 | }
18 | 
19 | .header-logo {
20 |     font-size: 36px;
21 |     float: left;
22 |     padding: 20px 40px;
23 | }
24 | 
25 | main{
26 |     padding: 100px 80px;
27 | 
28 | }
29 | 
30 | .copy-container h1 {
31 |     font-size: 140px;
32 | }
33 | 
34 | .copy-container h2 {
35 |     font-size: 60px;
36 | }
37 | 
38 | .copy-container span {
39 |     color: red;
40 | }
41 | 


--------------------------------------------------------------------------------
/health_web/style.css:
--------------------------------------------------------------------------------
 1 | @import 
 2 | url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
 3 | 
 4 | *{
 5 |     box-sizing: border-box;
 6 |     margin: 0;
 7 |     padding: 0;
 8 | }
 9 | body{
10 |     background-color: #333;
11 |     color: #fff;
12 |     font-family: 'Roboto', sans-serif;
13 | }
14 | h2{
15 |     font-size: 45px;
16 |     font-weight: 300;
17 |     margin: 10px;
18 | }
19 | h2 span{
20 |     font-size: 30px;
21 | }
22 | p{
23 |     font-size: 20px;
24 | }
25 | .container{
26 |     display: grid;
27 |     grid-template-columns: repeat(4, 1fr);
28 |     grid-gap: 10px;
29 | }
30 | .container > div{
31 |     cursor: pointer;
32 |     height: 200px;
33 |     background-size: cover;
34 |     background-attachment: fixed;
35 | 
36 |     display: flex;
37 |     flex-direction: column;
38 |     justify-content: center;
39 |     align-items: center;
40 | 
41 |     transition: all 0.5s ease-in;
42 | }
43 | .container > div:hover{
44 |     opacity: 0.7;
45 |     transform: scale(0.98);
46 | }
47 | .container > div:nth-of-type(1){
48 |     grid-column: 1 / 3;
49 | }
50 | .container > div:nth-of-type(6){
51 |     grid-column: 3 / 5;
52 | }
53 | .container > div:nth-of-type(9){
54 |     grid-column: 3 / 5;
55 | }
56 | .container > div:nth-of-type(10){
57 |     grid-column: 1 / 3;
58 | }
59 | .bg1 {
60 |     background: url('https://i.ibb.co/dBLbrRV/bg1.jpg');
61 |   }
62 |   
63 |   .bg2 {
64 |     background: url('https://i.ibb.co/Fb5jb3J/bg2.jpg');
65 |     color: #333;
66 |   }


--------------------------------------------------------------------------------
/heart_beating/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Heart Beating</title>
 9 | </head>
10 | <body>
11 |     <div class="back"></div>
12 |     <div class="heart"></div> 
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/heart_beating/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .back {
 3 |     position: fixed;
 4 |     padding: 0;
 5 |     margin: 0;
 6 |     top: 0;
 7 |     left: 0;
 8 |     width: 100%;
 9 |     height: 100%;
10 |     background: white;
11 |     animation-name: backdiv;
12 |     animation-duration: 1s;
13 |     animation-iteration-count: infinite;
14 | 
15 | }
16 | 
17 | .heart {
18 |     animation-iteration-count: infinite;
19 |     position: absolute;
20 |     margin: auto;
21 |     top: 0;
22 |     right: 0;
23 |     bottom: 0;
24 |     left: 0;
25 |     background-color: pink;
26 |     height: 50px;
27 |     width: 50px;
28 |     transform: rotate(-45deg);
29 |     animation-name: beat;
30 |     animation-duration: 1s;
31 | 
32 | }
33 | .heart:after {
34 |     background-color: pink;
35 |     content: "";
36 |     border-radius: 50%;
37 |     position: absolute;
38 |     width: 50px;
39 |     height: 50px;
40 |     top: 0px;
41 |     left: 25px;
42 | }
43 | .heart:before {
44 |     background-color: pink;
45 |     content: "";
46 |     border-radius: 50%;
47 |     position: absolute;
48 |     width: 50px;
49 |     height: 50px;
50 |     top: -25px;
51 |     left: 0px;
52 | }
53 | 
54 | @keyframes backdiv {
55 |     50% {
56 |       background: #ffe6f2;
57 |     }
58 | }
59 | 
60 | @keyframes beat {
61 |     0% {
62 |       transform: scale(1) rotate(-45deg);
63 |     }
64 |     50% {
65 |       transform: scale(0.6) rotate(-45deg);
66 |     }
67 | }
68 | 
69 | 


--------------------------------------------------------------------------------
/hero-interface/Font/AbrilFatface-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/hero-interface/Font/AbrilFatface-Regular.ttf


--------------------------------------------------------------------------------
/hero-interface/img/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/hero-interface/img/img1.jpg


--------------------------------------------------------------------------------
/hero-interface/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=	, initial-scale=1.0">
 6 | 	<title>Document</title>
 7 | 	<link rel="stylesheet" href="style.css">
 8 | 	<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
 9 | </head>
10 | <body>
11 | 	<nav class="header">
12 | 		<div class="container">
13 | 			<h1 class="logo">Hermes Medical</h1>
14 | 			<ul class="navigation">
15 | 				<li><a href="">Login</a></li>
16 | 				<li><a href="">Features</a></li>
17 | 				<li><a href="pricing.html">Pricing</a></li>
18 | 				<li><a href="">Home</a></li>
19 | 			</ul>
20 | 		</div>
21 | 	</nav>
22 | 	<!-- <section>
23 | 		<div>
24 | 			<h1>Kelas Popular</h1>
25 | 			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque dolor delectus rerum eaque ipsa! Tenetur, explicabo harum. Officiis labore impedit voluptatem ipsam deserunt alias, sunt amet aut necessitatibus voluptas odit expedita minus excepturi consectetur iste quas perspiciatis nesciunt repudiandae! Praesentium id officia, magnam hic tempora rerum amet obcaecati ipsa laborum!</p>
26 | 		</div>
27 | 	</section>
28 | 	<section>
29 | 		<h1>Fitur Unggulan</h1>
30 | 		<div>
31 | 			<h3>Offline Mode</h3>
32 | 			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perferendis in deleniti nostrum, nam! Amet dolorum dicta exercitationem itaque architecto unde.</p>
33 | 		</div>
34 | 	</section> -->
35 | 	<!-- <div class="parent">
36 | 		<div class="container">
37 | 			<div class="icon-kelas">
38 | 		
39 | 			</div>
40 | 		</div>
41 | 	</div> -->
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/hero-interface/pricing.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/hero-interface/pricing.html


--------------------------------------------------------------------------------
/hero-interface/style.css:
--------------------------------------------------------------------------------
 1 | /*install fonts*/
 2 | @font-face {
 3 | 	font-family: abrilFat;
 4 | 	src: url('./font/AbrilFatface-Regular.ttf');
 5 | }
 6 | 
 7 | body {
 8 | 	margin: 0;
 9 | }
10 | 
11 | .container {
12 | 	width: 70%;
13 | 	overflow: hidden;
14 | 	margin: auto;
15 | }
16 | 
17 | .header {
18 | 	width: 100%;
19 | 	overflow: hidden;
20 | 	/*background: linear-gradient(red, blue);*/
21 | 	/*background: linear-gradient(to left, red, blue);*/
22 | 	/*background: linear-gradient(to right, red, blue);*/
23 | 	background: linear-gradient(to bottom, rgb(32, 9, 88), rgb(8, 59, 84));
24 | 	/*background: radial-gradient(red, blue);*/
25 | 	height: 550px;
26 | }
27 | 
28 | .header .logo {
29 | 	font-size: 32px;
30 | 	float: left;
31 | 	font-family: 'Lobster';
32 | 	color: #fff;
33 | }
34 | 
35 | .header .navigation {
36 | 	float: right;
37 | 	margin-top: 40px;
38 | }
39 | 
40 | .header .navigation li {
41 | 	float: right;
42 | 	margin-left: 20px;
43 | 	font-size: 18px;
44 | 	display: block;	
45 | }
46 | 
47 | .header .navigation li a {
48 | 	color: #fff;
49 | 	text-decoration: none;
50 | 	font-family: Arial, Helvetica, sans-serif;
51 | }
52 | 
53 | .header .navigation li a:hover {
54 | 	color: red;
55 | 	text-decoration: underline;
56 | }
57 | 
58 | 
59 | .icon-kelas {
60 | 	width: 300px;
61 | 	height: 300px;
62 | 	background-image: url('img/img1.jpg');
63 | 	background-size: cover;
64 | 	border-radius: 50%;
65 | }
66 | 
67 | .parent {
68 | 	margin-top: 100px;
69 | }


--------------------------------------------------------------------------------
/hilmialmuhtadeb.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background-color: indigo;
3 | }
4 | 


--------------------------------------------------------------------------------
/hizawadai.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/hover_button/hover-button.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: "Newsreader", serif;
 3 |   display: flex;
 4 |   align-items: center;
 5 |   justify-content: center;
 6 |   height: 100vh;
 7 |   background-color: #151b29;
 8 | }
 9 | 
10 | button {
11 |   background: none;
12 |   color: #ffa260;
13 |   border: 2px solid;
14 |   padding: 1em 2em;
15 |   font-size: 1em;
16 |   transition: all 0.2s;
17 | }
18 | 
19 | button:hover {
20 |   border-color: #f1ff5c;
21 |   color: white;
22 |   box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
23 |   transform: translateY(-0.25em); /* Psitive nums move down */
24 |   cursor: pointer;
25 | }
26 | 


--------------------------------------------------------------------------------
/hover_button/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Hover me!</title>
 8 |     <link href="https://fonts.google.com/share?selection.family=Newsreader:wght@300">
 9 |     <link rel="stylesheet" href="hover-button.css">
10 | </head>
11 | <body>
12 |     <button>Hover me</button>
13 | </body>
14 | </html>


--------------------------------------------------------------------------------
/htb1/cartoon.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |     <meta charset="utf-8">
 3 |     <title>Shin-chan :)</title>
 4 |     </head>
 5 |     
 6 |     <body>
 7 |     HEY There :)
 8 |     Wanna go back to your childhood Aaaaa........... then just have a look :)
 9 |     <h1>:)Shinchan:)</h1>
10 |     <img src="https://1.bp.blogspot.com/-nJxwIXPHXnc/YJyQMy2vLgI/AAAAAAAABBg/EnKNgz1t-QILoj8frteMx3QcoWX0uKUYwCPcBGAYYCw/s518/643596-v.jpg" jsaction="load:XAeZkd;" jsname="HiaYvf" class="n3VNCb KAlRDb" alt="Shinchan Last Episode - Shinchan Cartoon" data-noaft="1" style="width: 383px; height: 508.703px; margin: 0px;">
11 |     <h1>Wanna know more :) hey then go ahead & watch all these</h1>
12 |     <img src="https://gogocdn.net/cover/crayon-shin-chan-dub.png" jsaction="load:XAeZkd;" jsname="HiaYvf" class="n3VNCb KAlRDb" alt="Crayon Shin Chan - Gogoanime.news" data-noaft="1" style="width: 225px; height: 350px; margin: 0px;">
13 |     <img src="https://i.ebayimg.com/images/g/qIwAAOSwyBRcPbiK/s-l400.jpg" jsaction="load:XAeZkd;" jsname="HiaYvf" class="n3VNCb KAlRDb" alt="DVD ANIME Crayon Shinchan The Movie 26: Bakumori! Kung Fu Boys English  Subtitle | eBay" data-noaft="1" style="width: 313px; height: 400px; margin: 0px;">
14 |     </body>
15 |     
16 |     </html>


--------------------------------------------------------------------------------
/ilhamchandra.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/img/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/img/avatar.png


--------------------------------------------------------------------------------
/img/console.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/img/console.png


--------------------------------------------------------------------------------
/img/p1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/img/p1.png


--------------------------------------------------------------------------------
/img/player1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/img/player1.png


--------------------------------------------------------------------------------
/img/player2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/img/player2.png


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |  margin: 0;
 3 |  padding: 0;
 4 | }
 5 | body{
 6 |     background: url(bg.jpg) no-repeat center center fixed;
 7 |     background-size: cover;
 8 |     
 9 | }
10 | .container{
11 |     
12 |     position:absolute;
13 |     top:25%;
14 |     left:60%;
15 | }
16 | .container h1{
17 |     font-size: 30px;
18 |     border-bottom: 5px solid rgb(138, 101, 14);
19 |     margin-bottom:33px ;
20 |     padding: 5px 0px;
21 | }
22 | 
23 | .box{
24 |     border-bottom: 2px solid rgb(139, 108, 78);
25 |     width: 100%;
26 |     margin: 15px 0px;
27 | }
28 | .box i{
29 |     width:29px;
30 |         text-align:center;
31 |     
32 | 
33 | }
34 | 
35 | .box input{
36 |     background: none;
37 |     width:75%;
38 |     border: none;
39 |     outline:none;
40 |     color:palegoldenrod;
41 |     margin:12px 0px ;
42 |     font-size: 20px;
43 |     padding: 5px 10px;
44 | 
45 | }
46 | 
47 | .btn{
48 |     cursor:pointer;
49 |     outline:none;
50 |     width:25%;
51 |     font-size:20px ;
52 |     margin:12px 0 ;
53 |     padding:14px 10px;
54 |     border-radius:15px ;
55 |     border: 2px solid rgb(129, 88, 49);
56 |     font-size: 18px;
57 |     background: none;
58 |     font-weight: bold;
59 | }
60 | .btn:hover{
61 |     color: rgb(27, 15, 3);
62 |     background: rgb(224, 195, 136);
63 | }
64 | 
65 | 
66 | 
67 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <!-- Place your kit's code here -->
 6 |   <script src="https://kit.fontawesome.com/f9254fec07.js" crossorigin="anonymous"></script>
 7 |   <title>LogIn Page</title>
 8 |   <link rel="stylesheet" href="index.css">
 9 | </head>
10 | 
11 | <!--................-->
12 | 
13 | <body>
14 |   <div class="container">
15 |     <h1>MOVIE RECOMMENDATION SYSTEM </h1>
16 |     <div class="box">
17 |       <i class="fa fa-envelope-o"></i>
18 |       <input type="email" name="email" id="email" placeholder="ENTER USER-ID">
19 |     </div>
20 | 
21 |     <div class="box">
22 |       <i class="fa fa-unlock-alt"></i>
23 |       <input type="password" name="password" id="password" placeholder="ENTER YOUR PASSWORD">
24 |     </div>
25 |     <button class="btn">SigIn</button>
26 |   </div>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/indrarzky.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/itsnaufal.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/ivanfaat.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/jnckcode.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: serif;
 3 | 
 4 | }
 5 | 
 6 | li {
 7 |     list-style: none;
 8 |     float: left;
 9 |     padding: 33px 20px;
10 | }
11 | 
12 | .header{
13 |     background-color: rgb(10, 25, 58);
14 |     height: 90px;
15 |     color: #fff;
16 | 
17 | }
18 | 
19 | .header-logo {
20 |     font-size: 36px;
21 |     float: left;
22 |     padding: 20px 40px;
23 | }
24 | 
25 | main{
26 |     padding: 100px 80px;
27 | 
28 | }
29 | 
30 | .copy-container h1 {
31 |     font-size: 140px;
32 | }
33 | 
34 | .copy-container h2 {
35 |     font-size: 60px;
36 | }
37 | 
38 | .copy-container span {
39 |     color: red;
40 | }
41 | 


--------------------------------------------------------------------------------
/joenyse.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/jujurku.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/kastem.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #00ffff;
 3 |     background-image: linear-gradient(90deg, #FF69B4 0%, #faa6bb 65%, #00ffff 200%); 
 4 | }
 5 | 
 6 | .container{
 7 |     padding-left: 4vw;
 8 | }
 9 | 
10 | .container .timeline{
11 |     border-left: 4px solid #FF00BF;
12 |     padding: 0.5EM 2em;
13 |     cursor: pointer;
14 |     position: relative;
15 | }
16 | 
17 | .container .timeline .timeline-content{
18 |     margin: 1.5em;
19 |     box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.2);
20 |     max-width: 40vw;
21 |     padding: 0.5em;
22 | }
23 | 
24 | .container .timeline .timeline-content h1{
25 |     border-bottom: 1px solid #FF00BF;
26 |     font-size: 2rem;
27 |     color: rgb(3, 44, 121);
28 | }
29 | 
30 | .container .timeline::before{
31 |     content: " ";
32 |     height: 1em;
33 |     width: 1em;
34 |     border: 2px solid #FF00BF;
35 |     position: absolute;
36 |     left: -0.6em;
37 |     border-radius: 50%;
38 |     top: 50%;
39 |     /* transform: translateY(50%); */
40 |     background: #FF69B4;
41 |     transition: all 0.5s;
42 | }
43 | 
44 | .container .timeline .timeline-content:hover{
45 |     box-shadow: 0 3px 16px 1px rgba(0, 0, 0, 0.1);
46 | }
47 | 
48 | .container .timeline:hover::before{
49 |     background: aquamarine;
50 | }
51 | 
52 | .container .timeline .timeline-date{
53 |     position: absolute;
54 |     left: -4em;
55 |     top: 48%;
56 |     /* transform: translateY(50%); */
57 | }
58 | 
59 | @media(max-width:900px){
60 |     body{
61 |         background-color: #00ffff;
62 |         background-image: linear-gradient(90deg, #FF69B4 0%, #FF69B4 65%, #FF69B4 200%); 
63 |     }
64 |     .container .timeline .timeline-content{
65 |         max-width: 100%;
66 |     }
67 | }


--------------------------------------------------------------------------------
/kesetndalan.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/laiteux.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/lana.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/list.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <body>
 4 | 
 5 | <h2>A Description List</h2>
 6 | 
 7 | <dl>
 8 |   <dt>Coffee</dt>
 9 |   <dd>- black hot drink</dd>
10 |   <dt>Milk</dt>
11 |   <dd>- white cold drink</dd>
12 | </dl>
13 | 
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/loading-style-animation.css:
--------------------------------------------------------------------------------
 1 | @import url(https://fonts.googleapis.com/css?family=Montserrat);
 2 | 
 3 | html, body{
 4 |   height: 100%;
 5 |   font-weight: 800;
 6 | }
 7 | 
 8 | body{
 9 |   background: yellow;
10 |   font-family: Arial;
11 | }
12 | 
13 | svg {
14 |     display: block;
15 |     font: 10.5em 'Montserrat';
16 |     width: 960px;
17 |     height: 300px;
18 |     margin: 0 auto;
19 | }
20 | 
21 | .text-copy {
22 |     fill: none;
23 |     stroke: white;
24 |     stroke-dasharray: 6% 29%;
25 |     stroke-width: 5px;
26 |     stroke-dashoffset: 0%;
27 |     animation: stroke-offset 5.5s infinite linear;
28 | }
29 | 
30 | .text-copy:nth-child(1){
31 |   stroke: #4D163D;
32 |   animation-delay: -1;
33 | }
34 | 
35 | .text-copy:nth-child(2){
36 |   stroke: #840037;
37 |   animation-delay: -2s;
38 | }
39 | 
40 | .text-copy:nth-child(3){
41 |   stroke: #BD0034;
42 |   animation-delay: -3s;
43 | }
44 | 
45 | .text-copy:nth-child(4){
46 |   stroke: #BD0034;
47 |   animation-delay: -4s;
48 | }
49 | 
50 | .text-copy:nth-child(5){
51 |   stroke: #FDB731;
52 |   animation-delay: -5s;
53 | }
54 | 
55 | @keyframes stroke-offset{
56 |   100% {stroke-dashoffset: -35%;}
57 | }


--------------------------------------------------------------------------------
/loading-style-animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="./loading-style-animation.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <svg viewBox="0 0 960 300">
12 |         <symbol id="s-text">
13 |           <text text-anchor="middle" x="50%" y="80%">AUYK. </text>
14 |           <text text-anchor="middle" x="52%" y="80%">AUYK. </text>
15 |           
16 |         </symbol>
17 |       
18 |         <g class = "g-ants">
19 |           <use xlink:href="#s-text" class="text-copy"></use>
20 |           <use xlink:href="#s-text" class="text-copy"></use>
21 |           <use xlink:href="#s-text" class="text-copy"></use>
22 |           <use xlink:href="#s-text" class="text-copy"></use>
23 |           <use xlink:href="#s-text" class="text-copy"></use>
24 |         </g>
25 |       </svg>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/login/images/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/login/images/image1.png


--------------------------------------------------------------------------------
/login/images/login-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/login/images/login-bg.jpg


--------------------------------------------------------------------------------
/mc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/mc.png


--------------------------------------------------------------------------------
/membuat piramida bintang:
--------------------------------------------------------------------------------
 1 | #include <iostream>
 2 | using namespace std;
 3 | int main ()
 4 | {
 5 | int n,i,j,k,l;
 6 | cout<<“Masukkan “;
 7 | cin>>n;
 8 | for (i=1; i<=n; i++) {
 9 | for (j=i; j<=n-1; j++)
10 | cout<<“_ “;
11 | for (k=1; k<=i; k++)
12 | cout<<“* “;
13 | for (l=2; l<=i; l++)
14 | //for (l=1; l<=i-1; l++)
15 | cout<<“* “;
16 | cout<<endl;}
17 | return 0;
18 | }
19 | 


--------------------------------------------------------------------------------
/model-index.js:
--------------------------------------------------------------------------------
 1 | if (process.env.NODE_ENV !== 'production') require('dotenv').config();
 2 | const express = require("express"); 
 3 | const PORT = 3000; 
 4 | const app = express();  
 5 | const router = require('./routes/routes');
 6 |  
 7 | app.use(express.json()); 
 8 | app.use(router);
 9 |  
10 | 
11 | app.listen(PORT, (req,res)=>{ 
12 |     console.log(`Server run in PORT :`,PORT);
13 | }) 
14 |  
15 | module.exports = app;
16 | 


--------------------------------------------------------------------------------
/moving_head/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>moving eyes</title>
 8 |     <link href="style.css" rel="stylesheet" /> 
 9 | </head>
10 | 
11 | <body>
12 |     <h1>bring pointer near face !</h1>
13 |     <div role="main" id="content">
14 |         <div class="hair"></div>
15 |         <div class="face_down">
16 |           <div class="ear_left"></div>
17 |           <div class="ear_right"></div>
18 |           <div class="mouth"></div>
19 |           <div class="left_eye"></div>
20 |           <div class="right_eye"></div>
21 |           <div class="eyebrow_left"></div>
22 |           <div class="eyebrow_right"></div>
23 |           <div class="nose"></div>
24 |         </div>
25 |     </div>
26 | </body>
27 | 
28 | </html>


--------------------------------------------------------------------------------
/myrealme.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/naufal.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/neverplan.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/obedd.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: serif;
 3 | 
 4 | }
 5 | 
 6 | li {
 7 |     list-style: none;
 8 |     float: left;
 9 |     padding: 33px 20px;
10 | }
11 | 
12 | .header{
13 |     background-color: rgb(10, 25, 58);
14 |     height: 90px;
15 |     color: #fff;
16 | 
17 | }
18 | 
19 | .header-logo {
20 |     font-size: 36px;
21 |     float: left;
22 |     padding: 20px 40px;
23 | }
24 | 
25 | main{
26 |     padding: 100px 80px;
27 | 
28 | }
29 | 
30 | .copy-container h1 {
31 |     font-size: 140px;
32 | }
33 | 
34 | .copy-container h2 {
35 |     font-size: 60px;
36 | }
37 | 
38 | .copy-container span {
39 |     color: red;
40 | }
41 | 


--------------------------------------------------------------------------------
/perlxhi.css:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title> Membuat Login </title>
 4 |     <meta charset="UTF-8">
 5 |     <style>
 6 |       body{
 7 |         background-color: aqua;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <link rel="shortcut icon" href="gambar/seputar pemograman.jpg">
13 |       <p><marquee scrollamount="20" behavior="alternate"><pre> &#174;Sela&#771;ma&#771;t Da&#771;ta&#771;ng di Seputar Pemogra&#771;ma&#771;n&#174; <hr color="blue"></pre></marquee></p><hr color="red" size="10">
14 | 
15 |       <div class="header">
16 | 
17 |         <div class="header_isi">
18 | 
19 |           <div class="gambar">
20 | 
21 |             <form action="login.php" method="POST">
22 | 
23 |               <input type="text" name="username" placeholder="Username" class="login_regis">     <br />
24 |               <input type="password" name="password" placeholder="Password" class="login_regis"> <br />
25 | 
26 |             <div class="chexbox">
27 |               <input type="checkbox" name="chek" > Remember me <br />
28 |             </div>
29 | 
30 |               <input type="Submit" name="login" value="LOGIN" class="tombol_login">
31 |             </form>
32 | 
33 |         </div>
34 | 
35 |       </div>
36 | 
37 |       <div class="copyright">
38 |         CopyRight&copy 2016 | Design By: FatikZ
39 |       </div>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/pp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/pp.png


--------------------------------------------------------------------------------
/quote.js:
--------------------------------------------------------------------------------
 1 | function randomQuote() {
 2 |     $.ajax({
 3 |         url: "https://api.forismatic.com/api/1.0/?",
 4 |         dataType: "jsonp",
 5 |         data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
 6 |         success: function( response ) {
 7 |           $("#random_quote").html("<p id='random_quote' class='lead text-center'>" +
 8 |             response.quoteText + "<br/>&dash; " + response.quoteAuthor + " &dash;</p>");
 9 |           $("#tweet").attr("href", "https://twitter.com/home/?status=" + response.quoteText +
10 |             ' (' + response.quoteAuthor + ')');
11 |         }
12 |     });
13 |   }
14 |   
15 |   $(function() {
16 |     randomQuote();
17 |   });
18 |   
19 |   $("button").click(function(){
20 |     randomQuote();
21 |   });


--------------------------------------------------------------------------------
/rafaelrxn.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/relatedPost.css:
--------------------------------------------------------------------------------
 1 | /* Related Post */
 2 | .related-simplify{
 3 |     background: #2ecc71 ;
 4 |     color: #ecf0f1;
 5 |     padding: 10px;
 6 |     border: 2px dashed #27ae60;
 7 |     border-radius: 4px;
 8 |     font-size: 12pt;
 9 | margin: 15px 0 15px 0;
10 | }
11 | .related-simplify a{
12 |     color: #ecf0f1;
13 | }
14 | related-simplify a:hover{
15 | color:#bdc3c7;
16 | text-decoration:underline;
17 | }
18 | 


--------------------------------------------------------------------------------
/rezarexx.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/riskii.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }
32 | 


--------------------------------------------------------------------------------
/rizkiagungid.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/robbyr.css:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title> Membuat Login </title>
 4 |     <meta charset="UTF-8">
 5 |     <style>
 6 |       body{
 7 |         background-color: aqua;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     <link rel="shortcut icon" href="gambar/seputar pemograman.jpg">
13 |       <p><marquee scrollamount="20" behavior="alternate"><pre> &#174;Sela&#771;ma&#771;t Da&#771;ta&#771;ng di Seputar Pemogra&#771;ma&#771;n&#174; <hr color="blue"></pre></marquee></p><hr color="red" size="10">
14 | 
15 |       <div class="header">
16 | 
17 |         <div class="header_isi">
18 | 
19 |           <div class="gambar">
20 | 
21 |             <form action="login.php" method="POST">
22 | 
23 |               <input type="text" name="username" placeholder="Username" class="login_regis">     <br />
24 |               <input type="password" name="password" placeholder="Password" class="login_regis"> <br />
25 | 
26 |             <div class="chexbox">
27 |               <input type="checkbox" name="chek" > Remember me <br />
28 |             </div>
29 | 
30 |               <input type="Submit" name="login" value="LOGIN" class="tombol_login">
31 |             </form>
32 | 
33 |         </div>
34 | 
35 |       </div>
36 | 
37 |       <div class="copyright">
38 |         CopyRight&copy 2016 | Design By: FatikZ
39 |       </div>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/robot_game/robot.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Your Robot Friend</title>
 5 | 	<link rel="stylesheet" type="text/css" href="style.css">
 6 | 	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 7 | </head>
 8 | <body>
 9 | 	<h1>Robot Friend</h1>
10 | 	<h2>Click on the head and leg and see it dance!!</h2>
11 | 	<div class="robots">
12 | 		<div class="android"> 
13 | 			<div class="head"> 
14 | 				<div class="eyes"> 
15 | 					<div class="left_eye"></div> 
16 | 					<div class="right_eye"></div>
17 | 				</div> 
18 | 			</div> 
19 | 			<div class="upper_body"> 
20 | 				<div class="left_arm"></div> 
21 | 				<div class="torso"></div> 
22 | 				<div class="right_arm"></div> 
23 | 			</div> 
24 | 			<div class="lower_body"> 
25 | 				<div class="left_leg"></div> 
26 | 				<div class="right_leg"></div> 
27 | 			</div> 
28 | 		</div>
29 | 	</div>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/roziq.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/ruszee2.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: lightgrey;
 3 |   color: blue;
 4 | }
 5 | 
 6 | h1 {
 7 |   background-color: black;
 8 |   color: white;
 9 | }
10 | 
11 | div {
12 |   background-color: blue;
13 |   color: white;
14 | }
15 | 


--------------------------------------------------------------------------------
/ryuu.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/samudra.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/scroll-effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <link rel="stylesheet" href="style.css">
 9 | </head>
10 | <body>
11 |   <div class="container">
12 |     <section class="one">
13 |       <h1>Page 1</h1>
14 |     </section>
15 |     <section class="two">
16 |       <h1>Page 2</h1>
17 |     </section>
18 |     <section class="three">
19 |       <h1>Page 3</h1>
20 |     </section>
21 |     <section class="four">
22 |       <h1>Page 4</h1>
23 |     </section>
24 |   </div>
25 | </body>
26 | </html>
27 | 


--------------------------------------------------------------------------------
/scroll-effect/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 |   font-family: sans-serif;
 6 | }
 7 | 
 8 | section {
 9 |   height: 100vh;
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 |   color: white;
14 |   scroll-snap-align: start;
15 | }
16 | 
17 | .container {
18 |   scroll-snap-type: y mandatory;
19 |   overflow-y: scroll;
20 |   height: 100vh;
21 | }
22 | 
23 | .one {
24 |   background: rgb(36, 164, 138);
25 | }
26 | .two {
27 |   background: rgb(211, 79, 79);
28 | }
29 | .three {
30 |   background: rgb(67, 91, 175);
31 | }
32 | .four {
33 |   background: lightsalmon;
34 | }
35 | 


--------------------------------------------------------------------------------
/scrolling-text-animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 8 |     <link rel="stylesheet" href="./scrolling-text-animation.css">
 9 |     <title>Scrolling Text Animation</title>
10 | </head>
11 | <body>
12 | <div class="content">
13 |   <div class="content__container">
14 |     <p class="content__container__text">
15 |       Hello
16 |     </p>
17 |     
18 |     <ul class="content__container__list">
19 |       <li class="content__container__list__item">world !</li>
20 |       <li class="content__container__list__item">bob !</li>
21 |       <li class="content__container__list__item">users !</li>
22 |       <li class="content__container__list__item">everybody !</li>
23 |     </ul>
24 |   </div>
25 | </div>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/searchBar-nexi9/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |         <title></title>
 7 |         <meta name="description" content="">
 8 |         <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |         <link rel="stylesheet" href="searchBar.css">
10 |     </head>
11 |     <body>
12 |         <div class="searsh">
13 |             <input type="text" placeholder="Search . . ." required>
14 |         </div>
15 |        
16 |     </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/searchBar-nexi9/searchBar.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     padding: 0;
 3 |     margin: 0;
 4 | }
 5 | 
 6 | @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap');
 7 |  :root {
 8 |     --font-style: 'Nunito Sans', sans-serif;
 9 | }
10 | 
11 | html,
12 | body {
13 |     font-family: var(--font-style);
14 |     width: 100%;
15 |     height: 100%;
16 |     background-color: #2A2734;
17 | }
18 | 
19 | input {
20 |     position: absolute;
21 |     top: 50%;
22 |     left: 50%;
23 |     transform: translate(-50%, -50%);
24 |     color: white;
25 |     font-size: 16px;
26 |     background: transparent;
27 |     width: 25px;
28 |     height: 25px;
29 |     padding: 10px;
30 |     border: solid 3px #9A86FD;
31 |     outline: none;
32 |     border-radius: 35px;
33 |     transition: all 0.5s;
34 |     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #9A86FD;
35 | }
36 | 
37 | input::placeholder {
38 |     color: #efefef;
39 |     opacity: 0;
40 |     transition: opacity 150ms ease-out;
41 | }
42 | 
43 | input:focus::placeholder {
44 |     opacity: 1;
45 | }
46 | 
47 | input:hover {
48 |     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #FFB870;
49 | }
50 | 
51 | input:focus,
52 | input:not(:placeholder-shown) {
53 |     width: 250px;
54 |     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 #FFB870;
55 | }


--------------------------------------------------------------------------------
/seenks.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/segi3.css:
--------------------------------------------------------------------------------
1 | #triangle-up {
2 |       width: auto;
3 |       height: auto;
4 |       border-left: 50px solid transparent;
5 |       border-right: 50px solid transparent;
6 |       border-top: 100px solid red;
7 |       border-bottom: 100px solid red;
8 |     }
9 | 


--------------------------------------------------------------------------------
/shofi.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/simon game/fr.cpp:
--------------------------------------------------------------------------------
 1 | #include<iostream>
 2 | using namespace std;
 3 | int main(){
 4 | 
 5 | char name[20]= "Abhishek bahukhandi";
 6 | cout<<name;
 7 | char passion[30]="Coding";
 8 | cout<<passion;
 9 |  bool live=true; 
10 |  int alive=0;
11 |  while(live)
12 |  {
13 |  string docode =(alive>0)?"DO CODE":"Die";
14 |  cout<<docode<<endl;
15 |  alive++;
16 |  }
17 | return 0;
18 | }


--------------------------------------------------------------------------------
/simon game/fr.exe:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/simon game/fr.exe


--------------------------------------------------------------------------------
/simon game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Abhi game</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link href="https://fonts.googleapis.com/css2?family=Changa:wght@800&family=Hubballi&family=Open+Sans:wght@700&family=Silkscreen&display=swap" rel="stylesheet">
10 | </head>
11 | <body>
12 | 
13 |    <h2 id="texta"> Press A key to start </h2>
14 |    <div class="container">
15 |     <div class="row">
16 |     <div type="button" id="green" class="btn green"></div>
17 |     <div type="button" id="red" class="btn red"></div>
18 |     </div>
19 |     <div class="row">
20 |     <div type="button" id="yellow" class="btn yellow"></div>
21 |     <div type="button" id="blue" class="btn blue"></div>
22 |    </div>
23 |    </div>
24 |    
25 |    
26 |    
27 |    
28 |    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
29 |      <script src="script.js" charset="utf-8"></script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/simon game/index1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Simon</title>
 7 |   <link rel="stylesheet" href="style1.css">
 8 |   <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
 9 |   <link rel="shortcut icon" href="#"> 
10 | </head>
11 | 
12 | <body>
13 |   <h1 id="level-title">Press Any Key to Start</h1>
14 |   <div class="container">
15 |     <div lass="row">
16 | 
17 |       <div type="button" id="green" class="btn green">
18 | 
19 |       </div>
20 | 
21 |       <div type="button" id="red" class="btn red">
22 | 
23 |       </div>
24 |     </div>
25 | 
26 |     <div class="row">
27 | 
28 |       <div type="button" id="yellow" class="btn yellow">
29 | 
30 |       </div>
31 |       <div type="button" id="blue" class="btn blue">
32 | 
33 |       </div>
34 | 
35 |     </div>
36 | 
37 |   </div>
38 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
39 | <script src="index.js" charset="utf-8"></script>
40 | </body>
41 | 
42 | </html>


--------------------------------------------------------------------------------
/simon game/sounds/blue.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/simon game/sounds/blue.mp3


--------------------------------------------------------------------------------
/simon game/sounds/green.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/simon game/sounds/green.mp3


--------------------------------------------------------------------------------
/simon game/sounds/red.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/simon game/sounds/red.mp3


--------------------------------------------------------------------------------
/simon game/sounds/wrong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/simon game/sounds/wrong.mp3


--------------------------------------------------------------------------------
/simon game/sounds/yellow.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/simon game/sounds/yellow.mp3


--------------------------------------------------------------------------------
/simon game/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0px;
 3 |     padding: 0px;
 4 | }
 5 | body{
 6 |     background-color: #011F3F;
 7 | }
 8 | .container{
 9 |     margin: 50px;
10 | }
11 | 
12 | .row{
13 |     display: flex;
14 |     justify-content: space-evenly;
15 |    /* margin: 100px 120px 12px; */
16 | }
17 | 
18 | #texta{
19 |     font-family: "silkscreen",cursive;;
20 |     color: white;
21 |     font-size: 34px;
22 |     margin: 50px 500px 0px;
23 | 
24 | }
25 | .green{
26 |      
27 |     margin: 24px 0px;
28 |     padding: 100px;
29 |     background-color: green;
30 |     border: 9px solid black;
31 |     border-radius: 20px;
32 |     /* display: none; */
33 | }
34 | .red{
35 |     margin: 24px 0px;
36 |     padding: 100px;
37 |     background-color: red;
38 |     border: 9px solid black;
39 |     border-radius: 20px;
40 | }
41 | .yellow{
42 |     margin: 24px 0px;
43 |     padding: 100px;
44 |     background-color: yellow;
45 |     border: 9px solid black;
46 |     border-radius: 20px;
47 | }
48 | .blue{
49 |     margin: 24px 0px;
50 |     padding: 100px;
51 |     background-color: blue;
52 |     border: 9px solid black;
53 |     border-radius: 20px;
54 | }


--------------------------------------------------------------------------------
/simon game/style1.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     text-align: center;
 3 |     background-color: #143f6dec;
 4 |   }
 5 |   
 6 |   #level-title {
 7 |     font-family: 'Press Start 2P', cursive;
 8 |     font-size: 3rem;
 9 |     margin:  5%;
10 |     color: #FEF2BF;
11 |   }
12 |   
13 |   .container {
14 |     display: block;
15 |     width: 50%;
16 |     margin: auto;
17 |   
18 |   }
19 |   
20 |   .btn {
21 |     margin: 25px;
22 |     display: inline-block;
23 |     height: 200px;
24 |     width: 200px;
25 |     border: 5px solid black;
26 |     border-radius: 20%;
27 |   }
28 |   .btn:hover,.btn:focus{
29 |       cursor: pointer;
30 |   }
31 |   .game-over {
32 |     background-color: red;
33 |     opacity: 0.8;
34 |   }
35 |   
36 |   .red {
37 |     background-color: red;
38 |   }
39 |   
40 |   .green {
41 |     background-color: green;
42 |   }
43 |   
44 |   .blue {
45 |     background-color: blue;
46 |   }
47 |   
48 |   .yellow {
49 |     background-color: yellow;
50 |   }
51 |   
52 |   .pressed {
53 |     box-shadow: 0 0 20px white;
54 |     background-color: grey;
55 |   }


--------------------------------------------------------------------------------
/text-3D/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html>
 4 | 
 5 | <head>
 6 |     <meta charset="utf-8" />
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 8 |     <title>Text 3D Animation</title>
 9 |     <meta name="description" content="" />
10 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
11 |     <link rel="stylesheet" href="text-3D.css" />
12 | </head>
13 | 
14 | <body>
15 |     <div class="content">
16 |         <h2 class="text_shadows">Hacktoberfest 2022</h2>
17 |     </div>
18 | </body>
19 | 
20 | </html>


--------------------------------------------------------------------------------
/text-color-animation.css:
--------------------------------------------------------------------------------
 1 | .animate-charcter
 2 | {
 3 |    text-transform: uppercase;
 4 |   background-image: linear-gradient(
 5 |     -225deg,
 6 |     #231557 0%,
 7 |     #44107a 29%,
 8 |     #ff1361 67%,
 9 |     #fff800 100%
10 |   );
11 |   background-size: auto auto;
12 |   background-clip: border-box;
13 |   background-size: 200% auto;
14 |   color: #fff;
15 |   background-clip: text;
16 |   text-fill-color: transparent;
17 |   -webkit-background-clip: text;
18 |   -webkit-text-fill-color: transparent;
19 |   animation: textclip 2s linear infinite;
20 |   display: inline-block;
21 |       font-size: 190px;
22 | }
23 | 


--------------------------------------------------------------------------------
/text-color-animation.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="./text-color-animation.css">
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <div class="container">
12 |         <div class="row">
13 |           <div class="col-md-12 text-center">
14 |             <h3 class="animate-charcter">HELLO</h3>
15 |           </div>
16 |         </div>
17 |       </div>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/thatsangg.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .dropdown {
 3 |   position: relative;
 4 |   display: inline-block;
 5 | }
 6 | 
 7 | .dropdown-content {
 8 |   display: none;
 9 |   position: absolute;
10 |   background-color: #f9f9f9;
11 |   min-width: 160px;
12 |   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13 |   padding: 12px 16px;
14 |   z-index: 1;
15 | }
16 | 
17 | .dropdown:hover .dropdown-content {
18 |   display: block;
19 | }
20 | </style>
21 | 
22 | <div class="dropdown">
23 |   <span>Mouse over me</span>
24 |   <div class="dropdown-content">
25 |     <p>Hello World!</p>
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/todoJS/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/todoJS/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Todo App</title>
 8 |     <link rel="stylesheet" href="main.css" />
 9 |   </head>
10 |   <body>
11 |     <header>
12 |       <h1>Task List</h1>
13 |       <form id="new-task-form">
14 |         <input
15 |           type="text"
16 |           id="new-task-input"
17 |           placeholder="What have you planned"
18 |         />
19 |         <input type="submit" value="Add task" id="new-task-submit" />
20 |       </form>
21 |     </header>
22 | 
23 |     <div>
24 |       <section class="task-list">
25 |         <h2>Tasks</h2>
26 |         <div id="tasks">
27 |           
28 |       </section>
29 |     </div>
30 |     <script src="main.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/transparant_condrok.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/triangle.css:
--------------------------------------------------------------------------------
1 | #triangle-up {
2 |       width: auto;
3 |       height: auto;
4 |       border-left: 50px solid transparent;
5 |       border-right: 50px solid transparent;
6 |       border-top: 100px solid red;
7 |       border-bottom: 100px solid red;
8 |     }
9 | 


--------------------------------------------------------------------------------
/ts.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | table, td, th {
 6 |   border: 1px solid;
 7 | }
 8 | 
 9 | table {
10 |   width: 100%;
11 |   border-collapse: collapse;
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | 
17 | <h2>Let the table borders collapse</h2>
18 | 
19 | <table>
20 |   <tr>
21 |     <th>Firstname</th>
22 |     <th>Lastname</th>
23 |   </tr>
24 |   <tr>
25 |     <td>Peter</td>
26 |     <td>Griffin</td>
27 |   </tr>
28 |   <tr>
29 |     <td>Lois</td>
30 |     <td>Griffin</td>
31 |   </tr>
32 | </table>
33 | 
34 | </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/tuanlana.css:
--------------------------------------------------------------------------------
 1 | div {
 2 |   width: 100px;
 3 |   height: 100px;
 4 |   background-color: red;
 5 |   position: relative;
 6 |   animation-name: example;
 7 |   animation-duration: 4s;
 8 |   animation-iteration-count: infinite;
 9 | }
10 | 
11 | @keyframes example {
12 |   0%   {background-color:red; left:0px; top:0px;}
13 |   25%  {background-color:yellow; left:200px; top:0px;}
14 |   50%  {background-color:blue; left:200px; top:200px;}
15 |   75%  {background-color:green; left:0px; top:200px;}
16 |   100% {background-color:red; left:0px; top:0px;}
17 | }
18 | 


--------------------------------------------------------------------------------
/update jasu.css:
--------------------------------------------------------------------------------
1 | .center {
2 |   text-align: center;
3 |   border: 3px solid green;// Text align 
4 | }
5 | 


--------------------------------------------------------------------------------
/vi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/vi.png


--------------------------------------------------------------------------------
/w3css.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/weather/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kokonior/CSS-Projects/d557243c0b6257171f2db6d4ce5cde77ef5978a0/weather/bg.jpg


--------------------------------------------------------------------------------
/weather/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Weather Forecast</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <nav>
13 |         <section class="top-section">
14 |           <h1 class="heading">🌞Weather.io</h1>
15 |           <form class="search">
16 |             <input type="text" placeholder="City Name" size="30" autofocus />
17 |             <button type="submit">GO</button>
18 |           </form>
19 |         </section>
20 |       </nav>
21 |       <main>
22 |         <div class="card">
23 |           <img src="bg.jpg" class="background" />
24 |           <h2 class="city"></h2>
25 |           <div class="info">
26 |             <span>
27 |               <h2 class="temp">12°</h2>
28 |             </span>
29 |             <span>
30 |               <p class="humidity">Humidity: 87%</p>
31 |             </span>
32 |             <span>
33 |               <p class="max">MAX 21°/9°</p>
34 |               <p class="min">MIN 23°/10°</p>
35 |             </span>
36 |           </div>
37 |         </div>
38 |       </main>
39 |       <script src="script.js"></script>
40 |     </div>
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/weather/script.js:
--------------------------------------------------------------------------------
 1 | const form = document.querySelector(".top-section form");
 2 | const input = document.querySelector(".top-section input");
 3 | const temp = document.querySelector(".temp");
 4 | const max = document.querySelector(".max");
 5 | const min = document.querySelector(".min");
 6 | const humidity = document.querySelector(".humidity");
 7 | const city = document.querySelector(".city");
 8 | const background = document.querySelector(".background");
 9 | 
10 | const apiKey = "YourApiKey";
11 | 
12 | form.addEventListener("submit", (e) => {
13 |   e.preventDefault();
14 |   let inputVal = input.value;
15 |   inputVal = inputVal.toUpperCase();
16 | 
17 |   //ajax
18 | 
19 |   const url = `https://api.openweathermap.org/data/2.5/weather?q=${inputVal}&appid=${apiKey}&units=metric`;
20 |   const data = fetch(url)
21 |     .then((response) => response.json())
22 |     .then((data) => {
23 |       const { main, sys } = data;
24 |       console.log(data);
25 |       city.textContent = `${inputVal}`;
26 |       temp.textContent = `${main.temp}°C`;
27 |       max.textContent = `Max:${main.temp_max}°C`;
28 |       min.textContent = `Min:${main.temp_min}°C`;
29 |       humidity.textContent = `Humidity:${main.humidity}%`;
30 |     });
31 | 
32 |   max.classList.add("visible");
33 |   min.classList.add("visible");
34 |   temp.classList.add("visible");
35 |   humidity.classList.add("visible");
36 |   background.classList.add("visible");
37 | });
38 | 


--------------------------------------------------------------------------------
/yasniko.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/yohanes.css:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | div.background {
 6 |   background: url(https://images6.alphacoders.com/644/thumb-1920-644887.png) repeat;
 7 |   border: 2px solid black;
 8 | }
 9 | 
10 | div.transbox {
11 |   margin: 30px;
12 |   background-color: #ffffff;
13 |   border: 1px solid black;
14 |   opacity: 0.6;
15 |   filter: alpha(opacity=60); /* For IE8 and earlier */
16 | }
17 | 
18 | div.transbox p {
19 |   margin: 5%;
20 |   font-weight: bold;
21 |   color: #000000;
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | 
27 | <div class="background">
28 |   <div class="transbox">
29 |     <p>HALO HALO HALO HALO YAHALO.</p>
30 |   </div>
31 | </div>
32 | 
33 | </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/yuukinaesa.css:
--------------------------------------------------------------------------------
 1 | .display-flex{
 2 |   display: flex;
 3 | }
 4 | 
 5 | .flexDirection-column{
 6 |   flex-direction: column;
 7 | }
 8 | 
 9 | .flexDirection-row{
10 |   flex-direction: row;
11 | }
12 | 
13 | .justifyContent-center{
14 |   justify-content: center;
15 | }
16 | 
17 | .justifyContent-flexStart{
18 |   justify-content: flex-start;
19 | }
20 | 
21 | .alignItems-flexStart{
22 |   align-items: flex-start;
23 | }
24 | 
25 | .alignItems-center{
26 |   align-items: center;
27 | }
28 | 
29 | .flexShrink-0{
30 |   flex-shrink: 0;
31 | }


--------------------------------------------------------------------------------
/zakkaulwan.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/zuubii.css:
--------------------------------------------------------------------------------
 1 | <style>
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | input[type=text], select, textarea {
 7 |   width: 100%;
 8 |   padding: 12px;
 9 |   border: 1px solid #ccc;
10 |   border-radius: 4px;
11 |   resize: vertical;
12 | }
13 | 
14 | label {
15 |   padding: 12px 12px 12px 0;
16 |   display: inline-block;
17 | }
18 | 
19 | input[type=submit] {
20 |   background-color: #4CAF50;
21 |   color: white;
22 |   padding: 12px 20px;
23 |   border: none;
24 |   border-radius: 4px;
25 |   cursor: pointer;
26 |   float: right;
27 | }
28 | 
29 | input[type=submit]:hover {
30 |   background-color: #45a049;
31 | }
32 | 
33 | .container {
34 |   border-radius: 5px;
35 |   background-color: #f2f2f2;
36 |   padding: 20px;
37 | }
38 | 
39 | .col-25 {
40 |   float: left;
41 |   width: 25%;
42 |   margin-top: 6px;
43 | }
44 | 
45 | .col-75 {
46 |   float: left;
47 |   width: 75%;
48 |   margin-top: 6px;
49 | }
50 | 
51 | /* Clear floats after the columns */
52 | .row:after {
53 |   content: "";
54 |   display: table;
55 |   clear: both;
56 | }
57 | 
58 | /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
59 | @media screen and (max-width: 600px) {
60 |   .col-25, .col-75, input[type=submit] {
61 |     width: 100%;
62 |     margin-top: 0;
63 |   }
64 | }
65 | </style>
66 | 


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