msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Create index.html

Browse Source
pull/897/head
Sasanka 3 years ago committed by GitHub
parent 120204995f
commit 874664d7b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 84 additions and 0 deletions
Show Stats Download Patch File Download Diff File

84
1.5-PlayWithCss/index.html
Unescape View File

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Load Css File-->
<link rel="stylesheet" href="css/index.css" />
<title>Custom Switch</title>
</head>
<body>
<div class="container">
<div class="word1">Button</div>
<div class="word2">Design</div>
<!-- Pattern Design -->
<div class="rec">
<div class="rec2"></div>
<div class="polyposi1">
<div class="poly1">
<svg height="200" width="300">
<polygon points="150,10 250,150 50,150" class="polyStyle" />
</svg>
</div>
<div class="poly2">
<svg height="200" width="300">
<polygon points="150,10 250,150 50,150" class="polyStyle" />
</svg>
</div>
<div class="poly3">
<svg height="200" width="300">
<polygon points="150,10 250,150 50,150" class="polyStyle" />
</svg>
</div>
</div>
<div class="polyposi2">
<div class="poly1">
<svg height="200" width="300">
<polygon points="150,10 250,150 50,150" class="polyStyle" />
</svg>
</div>
<div class="poly2">
<svg height="200" width="300">
<polygon points="150,10 250,150 50,150" class="polyStyle" />
</svg>
</div>
<div class="poly3">
<svg height="200" width="300">
<polygon points="150,10 250,150 50,150 " class="polyStyle" />
</svg>
</div>
</div>
</div>
<!-- button dev -->
<div class="switchpos">
<label class="switch">
<input type="checkbox" onClick="changeMode()" />
<span class="slider"></span>
<div class="happy">
<div class="eyes"></div>
<div class="eyes2"></div>
<div class="halfCircle"></div>
<div class="eyesAfter"></div>
<div class="eyes2After"></div>
</div>
<div class="aftermouth" id="aftermouthV"></div>
</label>
</div>
<!-- Js Script -->
<script>
function changeMode() {
var elem = document.body;
elem.classList.toggle("greenMode");
}
</script>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save