diff --git a/Components/Footers/Icons/index.html b/Components/Footers/Icons/index.html new file mode 100644 index 00000000..bec36f83 --- /dev/null +++ b/Components/Footers/Icons/index.html @@ -0,0 +1,38 @@ + + + + + + + + + + Icons + + + + +
+
+
+
+ + + + + +
+ +
+ +
+ +
+ + + + + + diff --git a/Components/Footers/Icons/script.js b/Components/Footers/Icons/script.js new file mode 100644 index 00000000..c7460f4f --- /dev/null +++ b/Components/Footers/Icons/script.js @@ -0,0 +1,28 @@ +$(function () { + + var wrapper = $('.wrapper'); + var windowObj = $(window); + + function decreaseWrapper() { + wrapper.addClass('small'); + } + + function increaseWrapper() { + wrapper.removeClass('small'); + } + + windowObj.scroll(function () { + if ($(this).scrollTop() + $(this).height() > wrapper.outerHeight()) { + decreaseWrapper(); + } else { + increaseWrapper(); + } + }); + + $('html').on('click', '.small', function () { + $('html, body').animate({ + scrollTop: wrapper.outerHeight() - windowObj.height() + }, 500); + }); + +}); diff --git a/Components/Footers/Icons/style.css b/Components/Footers/Icons/style.css new file mode 100644 index 00000000..9c854fbe --- /dev/null +++ b/Components/Footers/Icons/style.css @@ -0,0 +1,127 @@ +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*:focus { + outline: none; +} + +body { + font-family: 'Roboto Slab', serif; + font-size: 16px; + font-weight: 400; + line-height: 1.4; + background-color: #2c2a2a; + color: #fff; +} + +.wrapper { + min-height: 100vh; + background-repeat: no-repeat; + background-position: 50%; + -webkit-background-size: cover; + background-size: cover; + background-image: url(https://i.imgur.com/YCSYk8J.jpg); + -webkit-transition: all .5s; + -o-transition: all .5s; + transition: all .5s; + -webkit-transform-origin: center top; + -moz-transform-origin: center top; + -ms-transform-origin: center top; + -o-transform-origin: center top; + transform-origin: center top; + box-shadow: 0 22px 54px rgba(0, 0, 0, .5); +} + +.small { + -webkit-transform: scale(.9); + -ms-transform: scale(.9); + -o-transform: scale(.9); + transform: scale(.9); + cursor: pointer; +} + +.footer { + padding: 20px 0; + text-align: center; + font-size: 20px; +} + + +.socialIcons { + display: flex; + justify-content: center; +} + +.socialIcons a { + text-decoration: none; + padding: 10px; + background-color: white; + margin: 10px; + border-radius: 50%; + +} + +.socialIcons a i { + font-size: 2em; + color: black; + opacity: 0.9; +} + +.socialIcons a:hover { + background-color: black; + transition: 0.5s; + +} + +.socialIcons a:hover i { + color: white; + transition: 0.5s; +} + +.footerNav { + margin: 30px 0; +} + +.footerNav ul { + display: flex; + justify-content: center; +} + +.footerNav ul li a { + color: white; + margin: 20px; + text-decoration: none; + font-size: 1.3rem; + opacity: 0.7; + transition: 0.5s; +} + +.footerNav ul li a:hover { + opacity: 1; + +} + +.footerBottom { + background-color: black; + padding: 20px; + text-align: center; +} + +.footerBottom p { + color: white; + +} + +.design { + opacity: 0.7; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 400; + margin: 0px 5px' + +} \ No newline at end of file diff --git a/Components/Icons/index.html b/Components/Icons/index.html new file mode 100644 index 00000000..72261599 --- /dev/null +++ b/Components/Icons/index.html @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + +
+ +

Social Media Icons

+
+

Download these images to use it to beautify web pages

+
+
+ Image 1 +

Meta

+
+
+
+ Image 2 +

Linkedin

+
+
+
+ Image 3 +

Twitter

+
+
+
+ +

Direction Arrow Icons

+
+

Download these images to use it to beautify web pages

+
+
+ Image 1 +

Upward arrow

+
+
+
+ Image 2 +

Downward arrow

+
+
+
+ Image 3 +

Left arrow

+
+
+
+ Image 2 +

Right arrow

+
+
+
+
+ + + + + + + diff --git a/Components/Icons/script.js b/Components/Icons/script.js new file mode 100644 index 00000000..c7460f4f --- /dev/null +++ b/Components/Icons/script.js @@ -0,0 +1,28 @@ +$(function () { + + var wrapper = $('.wrapper'); + var windowObj = $(window); + + function decreaseWrapper() { + wrapper.addClass('small'); + } + + function increaseWrapper() { + wrapper.removeClass('small'); + } + + windowObj.scroll(function () { + if ($(this).scrollTop() + $(this).height() > wrapper.outerHeight()) { + decreaseWrapper(); + } else { + increaseWrapper(); + } + }); + + $('html').on('click', '.small', function () { + $('html, body').animate({ + scrollTop: wrapper.outerHeight() - windowObj.height() + }, 500); + }); + +}); diff --git a/Components/Icons/style.css b/Components/Icons/style.css new file mode 100644 index 00000000..9c854fbe --- /dev/null +++ b/Components/Icons/style.css @@ -0,0 +1,127 @@ +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +*:focus { + outline: none; +} + +body { + font-family: 'Roboto Slab', serif; + font-size: 16px; + font-weight: 400; + line-height: 1.4; + background-color: #2c2a2a; + color: #fff; +} + +.wrapper { + min-height: 100vh; + background-repeat: no-repeat; + background-position: 50%; + -webkit-background-size: cover; + background-size: cover; + background-image: url(https://i.imgur.com/YCSYk8J.jpg); + -webkit-transition: all .5s; + -o-transition: all .5s; + transition: all .5s; + -webkit-transform-origin: center top; + -moz-transform-origin: center top; + -ms-transform-origin: center top; + -o-transform-origin: center top; + transform-origin: center top; + box-shadow: 0 22px 54px rgba(0, 0, 0, .5); +} + +.small { + -webkit-transform: scale(.9); + -ms-transform: scale(.9); + -o-transform: scale(.9); + transform: scale(.9); + cursor: pointer; +} + +.footer { + padding: 20px 0; + text-align: center; + font-size: 20px; +} + + +.socialIcons { + display: flex; + justify-content: center; +} + +.socialIcons a { + text-decoration: none; + padding: 10px; + background-color: white; + margin: 10px; + border-radius: 50%; + +} + +.socialIcons a i { + font-size: 2em; + color: black; + opacity: 0.9; +} + +.socialIcons a:hover { + background-color: black; + transition: 0.5s; + +} + +.socialIcons a:hover i { + color: white; + transition: 0.5s; +} + +.footerNav { + margin: 30px 0; +} + +.footerNav ul { + display: flex; + justify-content: center; +} + +.footerNav ul li a { + color: white; + margin: 20px; + text-decoration: none; + font-size: 1.3rem; + opacity: 0.7; + transition: 0.5s; +} + +.footerNav ul li a:hover { + opacity: 1; + +} + +.footerBottom { + background-color: black; + padding: 20px; + text-align: center; +} + +.footerBottom p { + color: white; + +} + +.design { + opacity: 0.7; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 400; + margin: 0px 5px' + +} \ No newline at end of file diff --git a/assets/css_files/icons.css b/assets/css_files/icons.css new file mode 100644 index 00000000..d0ee9bd8 --- /dev/null +++ b/assets/css_files/icons.css @@ -0,0 +1,130 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + +:root { + --primary: #f4eff0; + --secondary: #ff1b82; + --ternary: #1327ff; + --light: #f7f26c; + --dark: pink; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; + scroll-behavior: smooth; +} + +/* Scrollbar */ + +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(white); +} + +::-webkit-scrollbar-thumb { + background: rgba(152, 151, 151, 0.883); +} + +body { + justify-content: center; + align-items: center; + min-height: 100vh; + line-height: 1.4; + margin: 4%; + font-size: 1.4rem; + background-image: url(../images/bg2.png); + background-repeat: no repeat; + background-attachment: fixed; + background-size: cover; + background-position: 50% 50%; +} + +section { + z-index: 100; +} + +.heading { + font-size: 4em; + font-weight: bolder; + color: white; + text-align: center; + margin: 75px 0 80px; + text-shadow: 2px 2px 2px black, 1px 1px 1px white; +} + +.contain { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 32px; +} + +.box { + box-sizing: border-box; + border: 3px solid rgb(255, 255, 255); + border-radius: 14px; + box-shadow: 3px 3px 6px 1px white; + margin: 20px 50px; + padding: 20px 40px; + width: 370px; + color: black; + background-color: #f0dee9b5; + transition: all 0.2s ease-in-out; + position: relative; +} + +.box:hover { + transform: scale(1.05); + transition: all 0.2s ease-in-out; +} + +h1 { + color: black; + text-align: center; + text-shadow: 1px 1px 1px black, 1px 1px 1px white; + font-size: 1.8em; +} + +body.dark-mode .SearchForm { + color: #FFFFFF; +} + +.preview { + margin-top: 45px; + float: left; +} + +.preview img { + height: 41px; + width: 41px; + transition: all 0.2s ease-in-out; +} + +.source { + margin-top: 45px; + float: right; +} + +.source img { + height: 41px; + width: 41px; + transition: all 0.2s ease-in-out; +} + +.source img:hover { + transform: scale(1.2); + transition: all 0.2s ease-in-out; +} + +.preview img:hover { + transform: scale(1.2); + transition: all 0.2s ease-in-out; +} diff --git a/assets/html_files/icons.html b/assets/html_files/icons.html new file mode 100644 index 00000000..803107c5 --- /dev/null +++ b/assets/html_files/icons.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + Beautiify | Icons + + + +
+
+
+
+
+ +
+ +
+ +
+
Icons
+ + + +
+ +

Hmmm, we are not getting any result.
Our bad - Please try another search!

+
+
+
+

Social Media and Arrow Icons

+
+ + + +
+
+ + + +
+
+ +
+
+ + + + + + +
+ +
+ + + + + + + diff --git a/assets/images/d.png b/assets/images/d.png new file mode 100644 index 00000000..5c396fa5 Binary files /dev/null and b/assets/images/d.png differ diff --git a/assets/images/l.jpg b/assets/images/l.jpg new file mode 100644 index 00000000..33a00c68 Binary files /dev/null and b/assets/images/l.jpg differ diff --git a/assets/images/l.png b/assets/images/l.png new file mode 100644 index 00000000..43fcbdf1 Binary files /dev/null and b/assets/images/l.png differ diff --git a/assets/images/m.png b/assets/images/m.png new file mode 100644 index 00000000..71a6decb Binary files /dev/null and b/assets/images/m.png differ diff --git a/assets/images/r.png b/assets/images/r.png new file mode 100644 index 00000000..324d0a7a Binary files /dev/null and b/assets/images/r.png differ diff --git a/assets/images/u.png b/assets/images/u.png new file mode 100644 index 00000000..79e2d6d5 Binary files /dev/null and b/assets/images/u.png differ diff --git a/assets/images/x.png b/assets/images/x.png new file mode 100644 index 00000000..8bca927f Binary files /dev/null and b/assets/images/x.png differ diff --git a/index.html b/index.html index 57e4930c..f3389440 100644 --- a/index.html +++ b/index.html @@ -235,6 +235,16 @@

Transfer Lists

+
+
+ +
+ +

Icons

+
+ +
+