From 6558cc609cc5112e135a4cd74e2e21d35bda94e0 Mon Sep 17 00:00:00 2001 From: Prashant-3103 Date: Thu, 23 Mar 2023 22:09:31 +0530 Subject: [PATCH 1/6] i was given the task to alter the "Homepage" i changed the navbar, teams section, footer section. the card section also i changed. i still have to alter the background of the page and bit of animation. --- .vscode/settings.json | 3 + css/index.css | 1071 +++++++++++++++++++++++++++--- index.html | 550 +++++++++------ js/index.js | 31 +- js/members.js | 4 +- teams_picture/MukilanMurugan.jpg | Bin 0 -> 195511 bytes teams_picture/PoojaGummuluru.jpg | Bin 0 -> 898943 bytes teams_picture/PoornaHegde.jpg | Bin 0 -> 163114 bytes teams_picture/RajditaDatta.jpg | Bin 0 -> 372898 bytes teams_picture/RohitTaparia.jpg | Bin 0 -> 94712 bytes 10 files changed, 1348 insertions(+), 311 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 teams_picture/MukilanMurugan.jpg create mode 100644 teams_picture/PoojaGummuluru.jpg create mode 100644 teams_picture/PoornaHegde.jpg create mode 100644 teams_picture/RajditaDatta.jpg create mode 100644 teams_picture/RohitTaparia.jpg diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d85aeb1 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} diff --git a/css/index.css b/css/index.css index 1d2e916..eea33fc 100644 --- a/css/index.css +++ b/css/index.css @@ -1,21 +1,23 @@ +@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap'); html { scroll-behavior: smooth; } - - .body{ - background-color: #cfe5cc; + + .body1{ + background-color: #000; + } - + .header{ background-color: #f15a42; position: fixed; z-index: 10; } - + .header.active { box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.6); } - + .nav-options ul li a{ padding-top: 21px; padding-bottom: 17px; @@ -26,28 +28,28 @@ html { color: #ffffff; font-family: 'Raleway', sans-serif; } - + .chapter_name{ text-align: center; font-size: 30px; text-decoration: none; color: #ffffff; } - + .nav-options ul > li a:hover { background-color: #fac92C; color: #f15a42; } - + button.hamburger{ display: none; } - + @media only screen and (max-width: 576px){ .nav-options li{ display: none; } - + button.hamburger{ align-self: flex-end; display: block; @@ -60,20 +62,20 @@ html { color: #ffffff; margin-top: 5px; } - + .nav-options ul{ flex-direction: column; } - + .nav-options li{ margin: 0; } - + .nav-options a{ display: block; } } - + @media only screen and (max-width: 409px){ button.hamburger{ font-size: 3vh; @@ -81,7 +83,7 @@ html { margin-top: -70px; } } - + .logo{ margin-top: 5px; } @@ -89,41 +91,72 @@ html { font-family: 'Raleway', sans-serif; text-align: center; /* background-color: #0040c1; */ - background-color: #1b4793; + background-color: #4b006e color: #ffffff; z-index: 20; } - + .about{ align-items: center; font-family: 'Alatsi', sans-serif; font-weight: 100; - background-color: #ffffff; + background-color: #000000; + } - + .about heading { font-family: 'Alatsi', sans-serif; padding-bottom: 10px; color: #1b4793; - border-bottom: 5px solid #f15a42; + border-bottom: 5px solid #f15a42; font-size: 35px; } - + .head1{ + color: #ffffff; + font-size: 50px; + font-weight: bold; + font-family: monospace; + letter-spacing: 7px; + cursor: pointer; + text-align: center; + + } + #head1{ + padding-top: 5%; + } + .head1 span{ + transition: .5s linear + } + .head1:hover span:nth-child(1){ + margin-right: 5px + } + .head1:hover span:nth-child(1):after{ + content: ""; + } + .head1:hover span:nth-child(2){ + margin-left: 30px + } + .head1:hover span{ + color: #02ccfe; + text-shadow: 0 0 10px #02ccfe, + 0 0 20px #fff, + 0 0 40px #02ccfe; + } .about parabody { font-family: 'Raleway', sans-serif; font-size: 20px; - color: #1b4793; + color: #ffffff; text-align: justify; } - - - + + + .about-card{ margin: auto; align-items: center; } - - + + .officers{ padding: 30px; font-family: 'Lato', sans-serif; @@ -132,7 +165,7 @@ html { background-image: linear-gradient(#ab8fde, #8860D0,#8860D0); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); } - + hr { color: #ffffff; opacity: 0.6; @@ -144,72 +177,72 @@ html { border-style: inset; border-width: 2px; } - + .contact-us { margin: auto; padding-top: 20px; background-image: linear-gradient(#84CEEB, #5680e9 , #5680e9); box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4); } - + .card{ border-color: transparent; background-color: transparent; } - + .card-body{ font-family: 'Raleway', sans-serif; } - + .card-body name{ text-align: center; font-size: 30px; } - + .card-body role{ text-align: center; font-size: 20px; } - + .fa { padding: 0px; width: 10px; height: 10px; border-radius: 50%; } - + a.fa{ text-decoration: none; /*Removed underline from social media icons*/ } - + .fa:hover { opacity: 0.5; } - + .officers .fa-facebook { background-image: linear-gradient(#5AB9EA,#5AB9EA); color: white; } - + .officers .fa-linkedin { background-image: linear-gradient(#5AB9EA,#5AB9EA); color: white; } - - + + .carousel-inner{ background-color: #2178ae; } - + .carousel { background-color: transparent; } - + .activities{ background-color: #cfe5cc; padding-bottom: 20px; } - + .carousel-item{ padding: 20px; font-family: 'Lato', sans-serif; @@ -219,49 +252,49 @@ html { .carousel-item heading{ font-size: 35px; } - + .carousel-item parabody{ font-size: 20px; } - + .carousel-control-prev { margin-left: -6%; } - + .carousel-control-next { margin-right: -6%; } - + .fa-facebook { color: #1b4793; margin: 10px; } - + .fa-linkedin { color: #1b4793; margin: 10px; } - + .fa-instagram { color: #1b4793; margin: 10px; } - + .fa-instagram:hover { opacity: 0.8; border: none; } - + .fa-facebook:hover { opacity: 0.8; border: none; } - + .fa-linkedin:hover { opacity: 0.8; border: none; } - + .email-button { background-color: #1b4793; color : white; @@ -276,7 +309,7 @@ html { width: 180px; text-decoration: none; } - + .email-button:hover{ border: 0px; background-color: #ffffff; @@ -284,58 +317,59 @@ html { .header-text { margin-top:100px; } - + img { - + width:100%; } - + .img-logo { height:60px; width:60px; padding: 5px; + } - + .paragraph heading{ font-family: 'Alatsi', sans-serif; padding-bottom: 5px; color: #1b4793; - border-bottom: 4px solid #f15a42; + border-bottom: 4px solid #f15a42; text-align: center; } - + .paragraph parabody{ font-family: 'Raleway', sans-serif; font-size: 17px; color: #1b4793; text-align: justify; } - + .main-header p1{ font-family: 'Lato', sans-serif; font-weight: 300; } - + .main-header { padding: 20px; } - - + + /* xs */ @media (min-width: 0px) { - + .paragraph heading{ font-size: 30px; } - + .paragraph parabody{ font-size: 20px; } - + .main-header p1{ font-size: 50px; } - + .main-header p2{ font-size: 30px; } @@ -343,65 +377,65 @@ html { padding-top: 20px; } } - + /* sm */ @media (min-width: 576px) { - + .paragraph heading{ font-size: 30px; } - + .paragraph parabody{ font-size: 20px; } - - + + .main-header p1{ font-size: 100px; } - + .main-header p2{ font-size: 35px; } - + } - + /* md */ @media (min-width: 768px) { - + .paragraph heading{ font-size: 35px; } - + .paragraph parabody{ font-size: 25px; } - - + + .main-header p1{ font-size: 80px; } - + .main-header p2{ font-size: 45px; } } - + /* lg */ @media (min-width: 992px) { - + .paragraph heading{ font-size: 35px; } - + .paragraph parabody{ font-size: 15px; } - + .main-header p1{ font-size: 80px; } - + .main-header p2{ font-size: 45px; } @@ -412,22 +446,22 @@ html { padding-top: 0px; } } - + /* xl */ @media (min-width: 1200px) { - + .paragraph heading{ font-size: 35px; } - + .paragraph parabody{ font-size: 25px; } - + .main-header p1{ font-size: 100px; } - + .main-header p2{ font-size: 45px; } @@ -435,7 +469,7 @@ html { padding: 40px; } } - + .base{ height:400px; width:300px; @@ -445,7 +479,7 @@ html { margin: auto; border-radius: 10px; } - + .circle{ position:absolute; height:70px; @@ -456,27 +490,27 @@ html { top: -40px; background: #d33; } - + .base1 { background:#5680e9; } - + .circle1 { background:#5680e9; } - + .base2 { background:#f15a42; } - + .circle2 { background:#f15a42; } - + .base3 { background:#fac92C; } - + .circle3 { background:#fac92C; } @@ -492,7 +526,7 @@ html { font-size: 20px; color: #1b4793; } - + button.accordion { width: 100%; background-color: whitesmoke; @@ -508,22 +542,22 @@ html { cursor: pointer; transition: background-color 0.2s linear; } - + button.accordion:after { content: '\f055'; font-family: "fontawesome"; font-size: 14px; float: right; } - + button.accordion.is-open:after { content: '\f056'; } - + button.accordion:hover, button.accordion.is-open { background-color: #ddd; } - + .accordion-content { background-color: white; border-left: 1px solid whitesmoke; @@ -559,7 +593,7 @@ html { } .rounded-circle:hover { transform: scale(1.1); -} +} .dropdown:hover .dropdown-menu { display: block; } @@ -626,8 +660,829 @@ html { } @media (min-width: 768px) { - + .image-box1{ width: 40%; } - } \ No newline at end of file + } + + a{ + + text-decoration: none; +} + +input { + + display: none; +} + +.container1 { + + width: 100%; + height: 100%; + max-width: 600px; + max-height: 600px; + display: flex; + transform-style: preserve-3d; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.cards { + + position: relative; + height: 500px; + width: 430px; + margin-bottom: 20px; + perspective: 1000px; + transform-style: preserve-3d; +} + +.cards label { + + position: absolute; + width: 430px; + left: 0; + right: 0; + margin: auto; + cursor: pointer; + transition: transform 0.55s ease; +} + +.cards .card{ + + position: relative; + height: 100%; + background-color: #323444; + border-radius: 10px; + padding: 30px 35px; + margin-left: 30%; +} + +.card .image{ + + display: flex; + justify-content: space-between; + align-items: center; +} + +.card .image img{ + + border-radius: 5px; + box-shadow: 15px 15px 40px rgba(0, 0, 0, 50%); + margin-top: 23px; + width: 86%; + height: 220px; + object-fit: cover; +} + +.card .image .dots{ + + text-align: center; +} + +.dots div{ + + width: 10px; + height: 10px; + border-radius: 50%; + margin-bottom: 10px; +} + +.dots div:nth-child(1){ + + background-color: var(--current-color1); +} + +.dots div:nth-child(2){ + + background-color: #5B85F9; +} + +.dots div:nth-child(3){ + + background-color: #000; +} + +.card .infos{ + + display: block; + text-align: center; + padding-top: 60px; +} + +.infos span{ + + display: block; +} + +.infos .name{ + + font-size: 30px; + color: #02ccfe; + letter-spacing: 8px; + margin-bottom: 20px; + transition: all .6s ease; +} + +.infos .lorem{ + + font-size: 15.5px; + color: #ECEAED; + letter-spacing: 3px; +} + +.card .btn-contact{ + + width: 100%; + height: 60px; + margin: 35px auto; + border-radius: 5px; + background-color: #4b006e; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 25px; + letter-spacing: 10px; + font-weight: 700; + transition: all .7s ease; +} + +.card .socials{ + + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; +} + +.socials i{ + + font-size: 25px; + transition: all .7s ease; + color: var(--current-color2); +} + + + +#s1:checked~.cards #slide4, +#s2:checked~.cards #slide5, +#s3:checked~.cards #slide1, +#s4:checked~.cards #slide2, +#s5:checked~.cards #slide3 { + box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); + transform: translate3d(-70%, 0, -220px); + --current-color1: #ECEAED; + --current-color2: #404457; +} + +#s1:checked~.cards #slide5, +#s2:checked~.cards #slide1, +#s3:checked~.cards #slide2, +#s4:checked~.cards #slide3, +#s5:checked~.cards #slide4 { + box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); + transform: translate3d(-35%, 0, -120px); + --current-color1: #ECEAED; + --current-color2: #404457; +} + +#s1:checked~.cards #slide1, +#s2:checked~.cards #slide2, +#s3:checked~.cards #slide3, +#s4:checked~.cards #slide4, +#s5:checked~.cards #slide5 { + box-shadow: 0 25px 50px 0 rgba(0, 0, 0, 50%); + transform: translate3d(0, 0, 0); + --current-color1: #fad00c; + --current-color2: #ECEAED; +} + +#s1:checked~.cards #slide2, +#s2:checked~.cards #slide3, +#s3:checked~.cards #slide4, +#s4:checked~.cards #slide5, +#s5:checked~.cards #slide1 { + box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 45%); + transform: translate3d(35%, 0, -120px); + --current-color1: #ECEAED; + --current-color2: #404457; +} + +#s1:checked~.cards #slide3, +#s2:checked~.cards #slide4, +#s3:checked~.cards #slide5, +#s4:checked~.cards #slide1, +#s5:checked~.cards #slide2 { + box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 45%); + transform: translate3d(70%, 0, -220px); + --current-color1: #ECEAED; + --current-color2: #404457; +} + + + + + + + + .but1:hover::before { + transform: scale(1.1); + box-shadow: 0 0 15px #ac2bac; + } + + .but1:hover { + color: #ffee10; + /* box-shadow: 0 0 5px #ac2bac; + text-shadow: 0 0 5px #ac2bac; */ + + font-size: 40px; + transition: 0.1s; + } + .but2:hover::before { + transform: scale(1.1); + box-shadow: 0 0 15px #0082ca; + + } + + .but2:hover { + color: #ffee10; + box-shadow: 0 0 5px #0082ca; + text-shadow: 0 0 5px #0082ca; + font-size: 40px; + transition: 0.4s; + + + } +.but1{ + padding-right: 20%; +} + +.card .image img { + border-radius: 5px; + box-shadow: 15px 15px 40px rgb(0 0 0 / 50%); + margin-top: 23px; + width: 86%; + height: auto; + object-fit: cover; + border-radius: 5%; + transition: 1s ease; +} +.card .image img:hover{ + -webkit-transform: scale(0.8); + -ms-transform: scale(0.8); + transform: scale(0.8); + transition: 1s ease; +} + +@charset "UTF-8"; +.navigation { + height: 70px; + background: #262626; +} + +.brand { + position: absolute; + padding-left: 20px; + float: left; + line-height: 70px; + text-transform: uppercase; + font-size: 1.4em; +} +.brand a, +.brand a:visited { + color: #ffffff; + text-decoration: none; +} + +.nav-container { + max-width: 1000px; + margin: 0 auto; +} + +nav { + float: right; +} +nav ul { + list-style: none; + margin: 0; + padding: 0; +} +nav ul li { + float: left; + position: relative; +} +nav ul li a, +nav ul li a:visited { + display: block; + padding: 0 20px; + line-height: 70px; + background: #262626; + color: #ffffff; + text-decoration: none; +} +nav ul li a:hover, +nav ul li a:visited:hover { + background: #2581DC; + color: #ffffff; +} +nav ul li a:not(:only-child):after, +nav ul li a:visited:not(:only-child):after { + padding-left: 4px; + content: " ▾"; +} +nav ul li ul li { + min-width: 190px; +} +nav ul li ul li a { + padding: 15px; + line-height: 20px; +} + +.nav-dropdown { + position: absolute; + display: none; + z-index: 1; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); +} + +/* Mobile navigation */ +.nav-mobile { + display: none; + position: absolute; + top: 0; + right: 0; + background: #262626; + height: 70px; + width: 70px; +} + +@media only screen and (max-width: 798px) { + .nav-mobile { + display: block; + } + + nav { + width: 100%; + padding: 70px 0 15px; + } + nav ul { + display: none; + } + nav ul li { + float: none; + } + nav ul li a { + padding: 15px; + line-height: 20px; + } + nav ul li ul li a { + padding-left: 30px; + } + + .nav-dropdown { + position: static; + } +} +@media screen and (min-width: 799px) { + .nav-list { + display: block !important; + } +} +#nav-toggle { + position: absolute; + left: 18px; + top: 22px; + cursor: pointer; + padding: 10px 35px 16px 0px; +} +#nav-toggle span, +#nav-toggle span:before, +#nav-toggle span:after { + cursor: pointer; + border-radius: 1px; + height: 5px; + width: 35px; + background: #ffffff; + position: absolute; + display: block; + content: ""; + transition: all 300ms ease-in-out; +} +#nav-toggle span:before { + top: -10px; +} +#nav-toggle span:after { + bottom: -10px; +} +#nav-toggle.active span { + background-color: transparent; +} +#nav-toggle.active span:before, #nav-toggle.active span:after { + top: 0; +} +#nav-toggle.active span:before { + transform: rotate(45deg); +} +#nav-toggle.active span:after { + transform: rotate(-45deg); +} + +article { + max-width: 1000px; + margin: 0 auto; + padding: 10px; +} + +.cont1 .card1{ + position: relative; + width: 320px; + height: 440px; + box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05), + inset -5px -5px 5px rgba(225, 225,225,0.5), + inset 5px 5px 5px rgba(0, 0,0,0.05), + inset -5px -5px 5px rgba(225, 225,225,0.5); + + +border-radius: 15px; +margin: 30px; +} +.cont1 .card1 .box{ + position: absolute; + top: 20px; + left: 20px; + right: 20px; + bottom: 20px; + background: #ebf5fc; + box-shadow: 0 10px 20px rgba(0, 0,0,0.1); + border-radius: 15px; + justify-content: center; + align-items: center; + display: flex; + transition: 1s; +} +.cont1 .card1 .box .content{ + padding: 20px; + text-align: center; +} +.cont1 .card1 .box .content h2{ + position: absolute; + top: -10px; + right: 30px; + font-size: 8em; + color: rgba(0, 0,0,0.02); + transition: 0.5s; + pointer-events: none; +} +.cont1 .card1:hover .box .content h2{ + color: rgba(0, 0,0,0.05); +} +.cont1 .card1 .box .content h3{ + font-size: 1.8em; + color: #777; + z-index: 1; + transition: 0.5s ease; + + +} +.cont1 .card1 .box .content p{ + font-size: 1em; + font-weight: 300; + color: #777; + z-index: 1; + transition: 0.5s ease; + +} +.cont1 .card1 .box .content a{ + position: relative; + display: inline-block; + padding: 8px 20px; + background: #03a9f4; + margin-top: 15px; + color: #fff; + text-decoration: none; + font-weight: 400; + box-shadow: 0 10px 20px rgba(0, 0,0,0.2); +border-radius: 20px; + +} +.cont1 .card1:hover .box .content a{ + background: #ffffff; + color: #000000; + +} +.cont1 .card1:hover .box{ + transform: translateY(-50px) ; + box-shadow: 0 10px 40px rgba(0, 0,0,0.4); +background: linear-gradient(45deg, #000000, #4b006e); + +} +.cont1 .card1:hover .box .content h3, .cont1 .card1:hover .box .content p{ + color: #fff; + +} + + +*{ + margin: 0; + padding: 0; + font-family: 'poppins', sans-serif; + box-sizing: border-box; +} + +body{ + background:#000 ; +} +footer{ + width: 100%; + + bottom: 6; + background: linear-gradient(to right, #4b006e, #2d0b00); + color: #fff; + padding: 100px 0 30px; +border-top-left-radius: 125px; +font-size: 13px; +line-height: 20px; + +} +.row{ + width: 85%; + margin: auto; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + justify-content: space-between; + +} +.col{ +flex-basis: 25%; +padding: 10px; +} +.col:nth-child(2),.col:nth-child(3){ + flex-basis: 15%; +} +.logo{ + width: 80px; + margin-bottom: 50px; + +} +.col h3{ + width: fit-content; + margin-bottom: 40px; + position: relative; + +} +.email-id{ + width: fit-content; + border-bottom:1px solid #ccc ; + margin: 20px 0;; +} + +ul li{ + list-style: none; + margin-bottom: 12px; + +} +ul li a +{ + text-decoration: none; + color: white; + +} +form{ + padding-bottom: 15px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #ccc; + margin-bottom: 50px; + +} + +form .envop{ + font-size: 18px; + margin-right: 10px; +} + +form input{ + width: 100%; + background: transparent; + color: #ccc; + border: 0; + outline: none; + +} + +form button{ + background: transparent; + border: 0; + outline: none; + cursor: pointer; +} +form button .butfa{ + font-size: 16px; + color: #ccc; + +} +.social-icons .fab{ + width: 40px; + border-radius: 50%; + height: 40px; + text-align: center; + line-height: 40px; + font-size: 20px; + background: #fff; + margin-right: 15px; + cursor: pointer; + color: #000; + + + +} +.fal{ + color: red; +} +hr{ + width: 90%; + border: 0; + border-bottom:1px solid #ccc; + margin: 20px auto; + +} +.last{ + text-align: center; +} +.underline{ + width: 100%; + height: 5px ; + background: #767676; + border-radius: 3px; + position: absolute; + top: 25px; + left: 0; + overflow: hidden; + +} +.underline span{ + width: 15px; + height: 100%; + background: #fff; + border-radius: 5px; + position: absolute; + top: 0; + left: 10px; + animation: moving 2s linear infinite; + + +} +@keyframes moving{ + 0% { + left: -20px; + + } + 100% { + left: 100%; + + } +} +.faloc{ + color: red; + font-size: 25px; + +} +.emailbutton{ + + transform: translate(-50%, -50%); + color: #1670f0; + + font-size: 30px; +} + +section{ + width: 50%; + height: vh; + background-color: + #3c4053; + display: flex; + align-items: center; + justify-content: center; + margin-right:auto; + margin-left: 28% + +} +.container-accordion{ + width: 100%; + max-width: 80rem; + margin: 0 auto; + padding: 0 1.5rem; + +} +.accordion-item{ + background-color: #283042; + border-radius: .4rem; + margin-bottom: 1rem; + padding: 1rem; + box-shadow: .5rem 2px .5rem rgba(0, 0, 0, .1); + +} +.accordion-link{ + font-size: 1.6rem; + color: rgb(225, 225,225,.8); + text-decoration: none; + background-color: #283042; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0; +} +.accordion-link i{ + color: #e7d5ff; + padding: .5rem; +} + +.accordion-link .remov1{ + display: none; +} + +.answer{ + max-height: 0; + overflow: hidden; + position: relative; + background-color: #212838; + transition: max-height 650ms +} + +.answer::before{ + content: ""; + position: absolute; + width: .6rem; + height: 90%; + top: 50%; + background-color: #8fc460; + left: 0; + transform: translateY(-50%); + +} +.answer p { + color: rgb(225, 225,225,.6); + font-size: 1.4rem; + padding: 2rem; +} +.accordion-item:target .answer{ + max-height: 20rem; +} +.accordion-item:target .accordion-link .fa-plus{ + display: none; +} +.accordion-item:target .accordion-link .fa-minus{ + display: block; +} + +.facebook1{ + margin-left: 40%; + + +} +div.social-links.social-icons{ + margin-left: 43%; + margin-bottom: 1%; +} + +.social-links a{ + text-align: center; + + color:#000; + border-radius: 50%; + box-shadow: 0 0 20px 10px rgba(0,0,0,0.1); + margin:10px 10px 10px 10px; + transform: translateY(-10px); + transition: 0.5s; +} + +.footer-icons{ + transition:0.5s; +} + +.footer-icons:hover{ +transform: translateY(-10px); +transition: 0.5s; +} + +.linkedin-icon:hover{ + color:#0077b5; +} + +.facebook-icon:hover{ + color:#3B5998; +} + /* Gradient color added to instagram icon on hover with CSS */ + +.instagram-icon:hover{ + background:linear-gradient(to top right,#bc2a8d,#fccc63); + +/* -webkit-background-clip: text; */ +/* -webkit-text-fill-color: transparent; */ +} diff --git a/index.html b/index.html index 2b7bd88..e13cd31 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,14 @@ + + @@ -24,6 +26,9 @@ + + + @@ -61,47 +66,65 @@ - +