From 9a00c7e04d1184fd5f71944f5afb3f997f6166cc Mon Sep 17 00:00:00 2001 From: Sanskruti02 <94389020+SanskrutiPalekar@users.noreply.github.com> Date: Sun, 3 Apr 2022 23:38:02 +0530 Subject: [PATCH 1/3] Create index.html --- HTML+CSS+JS/Checklist/Checklist/index.html | 38 ++++++++++++++++++++++ 1 file changed, 38 insertions(+) create mode 100644 HTML+CSS+JS/Checklist/Checklist/index.html 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 + + + +
+ +
+
+ +
+
+ +
+ + + From d93140a225fa2a49c3257b151fdef1188ccf4cef Mon Sep 17 00:00:00 2001 From: Sanskruti02 <94389020+SanskrutiPalekar@users.noreply.github.com> Date: Sun, 3 Apr 2022 23:38:40 +0530 Subject: [PATCH 2/3] Create style.css --- HTML+CSS+JS/Checklist/Checklist/style.css | 76 +++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 HTML+CSS+JS/Checklist/Checklist/style.css 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; +} From fe5b84b76d38ad72341352e857fdc4fc1d56fd16 Mon Sep 17 00:00:00 2001 From: Sanskruti02 <94389020+SanskrutiPalekar@users.noreply.github.com> Date: Sun, 3 Apr 2022 23:44:37 +0530 Subject: [PATCH 3/3] Create README.md --- HTML+CSS+JS/Checklist/Checklist/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 HTML+CSS+JS/Checklist/Checklist/README.md 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/)