From 1f3ae9b84d5537d235eba06b83aa5ba78703d735 Mon Sep 17 00:00:00 2001 From: Kelash <58991510+KumarKelashMeghwar@users.noreply.github.com> Date: Sat, 23 Oct 2021 13:19:21 +0500 Subject: [PATCH] Added CSS project --- css/index.html | 32 ++++++++++++++++++ css/script.js | 33 ++++++++++++++++++ css/style.css | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 155 insertions(+) create mode 100644 css/index.html create mode 100644 css/script.js create mode 100644 css/style.css diff --git a/css/index.html b/css/index.html new file mode 100644 index 0000000000..5ade35db7e --- /dev/null +++ b/css/index.html @@ -0,0 +1,32 @@ + + + + + + + Border Radius Generator + + + + +
+
+ + + + +
+ +

Border Radius Property

+ +
+
border-top-left-radius:     0%
+
border-top-right-radius:    0%
+
border-bottom-left-radius:    0%
+
border-bottom-right-radius:  0%
+
+
+ + + + \ No newline at end of file diff --git a/css/script.js b/css/script.js new file mode 100644 index 0000000000..0c284a662b --- /dev/null +++ b/css/script.js @@ -0,0 +1,33 @@ +const leftHandle = document.querySelector("#left"); +const rightHandle = document.querySelector("#right"); +const topHandle = document.querySelector("#top"); +const bottomHandle = document.querySelector("#bottom"); +const shape = document.querySelector(".shape"); + +// For css result + +const topLeft = document.querySelector("#topLeft"); +const topRight = document.querySelector("#topRight"); +const bottomLeft = document.querySelector("#bottomLeft"); +const bottomRight = document.querySelector("#bottomRight"); + +leftHandle.addEventListener("input", (e)=>{ + shape.style.borderTopLeftRadius = leftHandle.value+'%'; + topLeft.textContent = leftHandle.value + "%"; +}) + +topHandle.addEventListener("input", (e)=>{ + shape.style.borderTopRightRadius = topHandle.value+'%'; + topRight.textContent = topHandle.value+'%'; +}) + +rightHandle.addEventListener("input", (e)=>{ + shape.style.borderBottomRightRadius = rightHandle.value+'%'; + bottomRight.textContent = rightHandle.value+'%'; +}) + +bottomHandle.addEventListener("input", (e)=>{ + shape.style.borderBottomLeftRadius = bottomHandle.value+'%'; + bottomLeft.textContent = bottomHandle.value+'%'; +}) + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000000..946fc32eec --- /dev/null +++ b/css/style.css @@ -0,0 +1,90 @@ +@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap'; +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + margin: 0; + font-family: 'Montserrat', sans-serif; +} + +.container{ + width: 400px; + height: 550px; + background-color: #eee; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; +} + +.shape{ + width: 250px; + height: 250px; + background-color: deeppink; + position: relative; +} + +.handle{ + position: absolute; + width: 265px; + height: 5px; + background-color: black; +} + +#top{ + top: -7px; + left: -5.5px; +} + +#left{ + top: 120.5px; + transform: rotate(270deg); + left: -135px; +} + +#right{ + top: 120.5px; + transform: rotate(270deg); + left: 122px; + color: orange; +} + +#bottom{ + bottom: -5px; + left: -5.5px; +} + +input[type=range]::-webkit-slider-runnable-track{ + cursor: pointer; + background-color: pink; + border-radius: 5px; + height: 10px; +} + +input[type=range]::-webkit-slider-thumb { + background-color: orange; + color: aliceblue; + cursor: hand; + margin-top: -3px; +} + +/* Css Result */ +h4{ + text-shadow: 0.2px 0.2px 14px deeppink; +} +.css{ + background-color: pink; + padding: 20px 40px; + width: 350px; + height: 130px; +} + +