diff --git a/Day-16/index.html b/Day-16/index.html new file mode 100644 index 0000000..869db4a --- /dev/null +++ b/Day-16/index.html @@ -0,0 +1,38 @@ + + + + + + + Pop Up + + + + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/Day-16/style.css b/Day-16/style.css new file mode 100644 index 0000000..fdc2052 --- /dev/null +++ b/Day-16/style.css @@ -0,0 +1,67 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + width: 100%; + height: 100vh; + display: flex; + background-color: antiquewhite; + align-items: center; + justify-content: center; +} + +.btn { + padding: 12px 24px; + border-radius: 10px; + border: none; + outline: none; + font-size: 22px; + background-color: blue; + color: white; + cursor: pointer; +} + +.popup { + visibility: hidden; + width: 300px; + background-color: white; + border-radius: 5px; + position: absolute; + top: 0%; + left: 50%; + transform: translate(-50%, -50%) scale(0.1); + text-align: center; + padding: 0 30px 30px; + transition: transform 0.4s, top 0.4s; +} + +.open-popup { + visibility: visible; + top: 50%; + transform: translate(-50%, -50%) scale(1); +} + +i { + margin-top: -50px; +} + +h2 { + font-size: 38px; + margin: 30px 0 10px; +} + +.popup button { + width: 100%; + margin-top: 50px; + padding: 10px 0; + border: none; + outline: none; + border-radius: 4px; + cursor: pointer; + color: white; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 1); + background-color: rgb(110, 131, 247); +} \ No newline at end of file