diff --git a/HTML+CSS+JS/Checklist/Checklist/README.md b/HTML+CSS+JS/Checklist/Checklist/README.md new file mode 100644 index 0000000..d8596e7 --- /dev/null +++ b/HTML+CSS+JS/Checklist/Checklist/README.md @@ -0,0 +1,10 @@ +# Checklist +Checklist to check which things are done. + +## Demo +![image](https://user-images.githubusercontent.com/94389020/161442108-dec96754-0534-49b8-8b51-10892b8d85f8.png) +## Setup +Just download and open index.html. + +## Author +[Sanskruti Palekar](https://github.com/SanskrutiPalekar/) diff --git a/HTML+CSS+JS/Checklist/Checklist/index.html b/HTML+CSS+JS/Checklist/Checklist/index.html new file mode 100644 index 0000000..879c809 --- /dev/null +++ b/HTML+CSS+JS/Checklist/Checklist/index.html @@ -0,0 +1,38 @@ + + + + + + + + + Checklist + + + +
+ +
+
+ +
+
+ +
+ + + diff --git a/HTML+CSS+JS/Checklist/Checklist/style.css b/HTML+CSS+JS/Checklist/Checklist/style.css new file mode 100644 index 0000000..ae00af0 --- /dev/null +++ b/HTML+CSS+JS/Checklist/Checklist/style.css @@ -0,0 +1,76 @@ +*{ + padding: 0; + margin: 0; +} +body{ +min-height: 100vh; +align-items: center; +display: flex; +justify-content: center; +} +.list{ +padding: 40px; +position: relative; +background: #042b3e; +border-top: 50px solid #03a9f4; +} +.list label{ + position: relative; + display: block; + margin: 40px 0; + color: #fff; + font-size: 24px; + cursor: pointer; +} +.list input[type="checkbox"]{ + -webkit-appearance: none; +} +.list i{ + position: absolute; + top: 0; + display: inline-block; + width: 25px; + height: 25px; + border: 2px solid #fff; +} +.list input[type="checkbox"]:checked ~ i{ + top: 1px; + border-top: none; + border-right: none; + height: 15px; + width: 25px; + transform: rotate(-45deg); +} +.list span{ + position: relative; + left: 40px; + transition: 0.5s; +} +.list input[type="checkbox"]{ + top: 1px; + border-top: none; + border-right: none; +height: 25px; +width: 25px; +} +.list span:before{ + content: ''; + position: absolute; + top: 50%; + left: 0; + width: 100%; + height: 1px; + background: #fff; + transform: translateY(-50%) scaleX(0); + transform-origin: right; + transition: transform 0.5s; + +} +.list input[type="checkbox"]:checked ~span:before{ + transform: translateY(-50%) scaleX(1); + transform-origin: right; + transition: transform 0.5s; +} +.list input[type="checkbox"]:checked ~span:before{ + color: #154e6b; +}