diff --git a/100_projects/88-animated-website-bubble/images/Thumbs.db b/100_projects/88-animated-website-bubble/images/Thumbs.db new file mode 100644 index 0000000..828c22e Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/Thumbs.db differ diff --git a/100_projects/88-animated-website-bubble/images/background.png b/100_projects/88-animated-website-bubble/images/background.png new file mode 100644 index 0000000..a97f0d2 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/background.png differ diff --git a/100_projects/88-animated-website-bubble/images/bubble.png b/100_projects/88-animated-website-bubble/images/bubble.png new file mode 100644 index 0000000..122b4d4 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/bubble.png differ diff --git a/100_projects/88-animated-website-bubble/images/fb.png b/100_projects/88-animated-website-bubble/images/fb.png new file mode 100644 index 0000000..28acb31 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/fb.png differ diff --git a/100_projects/88-animated-website-bubble/images/ig.png b/100_projects/88-animated-website-bubble/images/ig.png new file mode 100644 index 0000000..4859c07 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/ig.png differ diff --git a/100_projects/88-animated-website-bubble/images/info.png b/100_projects/88-animated-website-bubble/images/info.png new file mode 100644 index 0000000..8a18572 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/info.png differ diff --git a/100_projects/88-animated-website-bubble/images/logo.png b/100_projects/88-animated-website-bubble/images/logo.png new file mode 100644 index 0000000..f196cde Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/logo.png differ diff --git a/100_projects/88-animated-website-bubble/images/menu.png b/100_projects/88-animated-website-bubble/images/menu.png new file mode 100644 index 0000000..26f75e2 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/menu.png differ diff --git a/100_projects/88-animated-website-bubble/images/share.png b/100_projects/88-animated-website-bubble/images/share.png new file mode 100644 index 0000000..1fdee71 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/share.png differ diff --git a/100_projects/88-animated-website-bubble/images/tw.png b/100_projects/88-animated-website-bubble/images/tw.png new file mode 100644 index 0000000..9e8b143 Binary files /dev/null and b/100_projects/88-animated-website-bubble/images/tw.png differ diff --git a/100_projects/88-animated-website-bubble/index.html b/100_projects/88-animated-website-bubble/index.html new file mode 100644 index 0000000..95a98db --- /dev/null +++ b/100_projects/88-animated-website-bubble/index.html @@ -0,0 +1,52 @@ + + + + + + + Document + + + +
+
+
+
+ + Water +
+ +
+
+

Welcome to our

+

World's
Creative Studio

+ +
+
+ + +
+ + +
+
+
+ + + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/100_projects/88-animated-website-bubble/style.css b/100_projects/88-animated-website-bubble/style.css new file mode 100644 index 0000000..fb73c9a --- /dev/null +++ b/100_projects/88-animated-website-bubble/style.css @@ -0,0 +1,211 @@ +@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap'); +*{ + margin:0; + padding:0; + box-sizing: border-box; +} +.container { + padding-left: 15px; + padding-right: 15px; + margin-left: auto; + margin-right: auto; + margin-top: 10px; +} +/* Small */ +@media (min-width: 768px) { + .container { + width: 750px; + } +} +/* Medium */ +@media (min-width: 992px) { + .container { + width: 970px; + } +} +/* Large */ +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} +.hero{ + width:100%; + height: 100vh; + background-image: url("images/background.png"); + background-size: cover; + background-position: center; + position: relative; + overflow: hidden; +} +.logo{ + width: 100px; + cursor: pointer; +} +.navbar{ + width: 85%; + height: 15%; + display:flex; + align-items:center; + justify-content:space-between; +} +.hero .navbar div{ + display: flex; + align-items: center; + cursor: pointer; +} +.hero .navbar div img{ + width: 60px; + margin-left: 15px; +} +.hero .navbar div span{ + color: #fbfcfd; + font-size: 25px; + font-weight: 600; + margin-left: -30px; + font-family: 'Shadows Into Light', cursive; +} +button{ + color: #fbfcfd; + padding: 10px 25px; + font-size: 16px; + background: transparent; + border: 3px double #fff; + border-radius: 20px; + outline: none; + transition: .3s; + cursor: pointer; +} +button:hover{ + background-color:rgba(255, 255, 255, .5) +} +.content{ + color: #fbfcfd; + position: absolute; + top:50%; + left:8%; + transform: translateY(-50%); + z-index: 2; +} +h1{ + font-size: 80px; + margin: 10px 0 30px; + line-height: 80px; +} +/*@media*/ +@media(max-width:767px){ + h1{ + font-size: 34px; + line-height: 40px; + } +} +.side-bar{ + width: 50px; + height: 100vh; + background: linear-gradient(#00545d, #000729); + position: absolute; + right: 0; + top: 0; + z-index: 9; +} +.menu{ + display: block; + width:25px; + margin: 40px auto 0; + cursor: pointer; + transition: .3s; +} +.menu:hover{ + border-radius: 50%; + background-color:rgba(255, 255, 255, .3); +} +.social-links img, .useful-links img{ + width:35px; + margin: 5px auto; + transition: .3s; + cursor: pointer; +} +.social-links img:hover, .useful-links img:hover{ + background-color:rgba(255, 255, 255, .3); + border-radius: 50%; +} +.social-links{ + width: 50px; + text-align: center; + position: absolute; + top:50%; + transform: translateY(-50%); +} +.useful-links{ + width: 50px; + text-align: center; + position: absolute; + bottom: 30px; +} +.bubbles{ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + position: absolute; + bottom: 0; + left: 0; + z-index: 1; +} +.bubbles img{ + width: 50px; + opacity: 0; + animation: bubble 7s linear infinite; +} +.bubbles img:nth-child(1){ + animation-delay: 2s; +} +.bubbles img:nth-child(2){ + animation-delay: 1s; + width: 25px; +} +.bubbles img:nth-child(3){ + animation-delay: 3s; +} +.bubbles img:nth-child(4){ + animation-delay: 4.5s; + width: 40px +} +.bubbles img:nth-child(5){ + animation-delay: 3s; +} +.bubbles img:nth-child(6){ + animation-delay: 6s; + width: 30px; +} +.bubbles img:nth-child(7){ + animation-delay: 7s; +} +.bubbles img:nth-child(8){ + animation-delay: 10s; + width: 25px; +} +.bubbles img:nth-child(9){ + animation-delay: 1s; + width: 80px; +} +.bubbles img:nth-child(10){ + animation-delay: 5s; + width: 20px +} +@keyframes bubble{ + 0%{ + transform: translateY(0); + opacity: 0; + } + 50%{ + opacity: 1; + } + 70%{ + opacity: 1; + } + 100%{ + transform: translateY(-80vh); + opacity: 0; + } +} \ No newline at end of file