Add files via upload

2023-04-03 01:23:37 +03:00 · 2023-04-03 01:23:37 +03:00 · fc0873a0b6
commit fc0873a0b6
parent 0ad6de459e
3 changed files with 112 additions and 0 deletions
--- a/100_projects/41-simple-animated-popup-box/css/style.css
+++ b/100_projects/41-simple-animated-popup-box/css/style.css
@ -0,0 +1,82 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  background: #778899;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.container{
+  position: relative;
+  width:0;
+  height:0;
+  background: linear-gradient(40deg, #ADD8E6 50%, #DDA0DD);
+  border-radius: 25px;
+  transition: .5s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container.active{
+  width: 350px;
+  height: 350px;
+  transition-delay: .3s;
+}
+.container::before{
+  content: '';
+  position: absolute;
+  bottom:-15px;
+  width: 40px;
+  height: 40px;
+  background: #ADD8E6;
+  border-radius: 5px;
+  transform: rotate(45deg);
+}
+.container.active::before{
+  transition-delay: .5s;
+}
+.container .content{
+  min-width: 400px;
+  padding: 40px;
+  color: #fff;
+  transition: .5s;
+  opacity: 0;
+  transform: scale(0);
+  text-align: center;
+  margin-bottom: 20px;
+}
+.container .content h2{
+  margin-bottom: 30px;
+}
+.container.active .content{
+  opacity: 1;
+  transform: scale(1);
+  transition-delay: .5s;
+}
+.toggle{
+  position: absolute;
+  bottom: -20px;
+  min-width:60px;
+  height:60px;
+  border-radius: 50%;
+  background: #90EE90;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: .3s;
+}
+.toggle::before{
+  content: '+';
+  font-size: 2.5em;
+  color: #fff;
+  cursor: pointer;
+}
+.container.active .toggle{
+  bottom: -85px;
+  transform: rotate(135deg);
+  background: #FA8072;
+}
--- a/100_projects/41-simple-animated-popup-box/index.html
+++ b/100_projects/41-simple-animated-popup-box/index.html
@ -0,0 +1,24 @@
+<!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">
+  <link rel="stylesheet" href="css/style.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="container">
+    <div class="content">
+      <h2>Hey Everyone</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero,
+        nihil dolorum soluta laboriosam unde maxime aspernatur laborum 
+        temporibus quibusdam repellendus consectetur at nam velit 
+        cupiditate, ut alias. Magni, qui optio.</p>
+    </div>
+    <div class="toggle"></div>
+  </div>
+  <script src="js/main.js">
+  </script>
+</body>
+</html>
--- a/100_projects/41-simple-animated-popup-box/js/main.js
+++ b/100_projects/41-simple-animated-popup-box/js/main.js
@ -0,0 +1,6 @@
+
+let toggle = document.querySelector('.toggle');
+let container = document.querySelector('.container');
+toggle.onclick = function(){
+  container.classList.toggle('active');
+}