From bcffbe2e0380cdd979a28faae664abd7ed527d97 Mon Sep 17 00:00:00 2001 From: Sanskriti Khare <60572554+sanskritikhare142@users.noreply.github.com> Date: Fri, 8 Oct 2021 00:27:04 +0530 Subject: [PATCH] Add recruitments announcement on herolanding --- css/home.css | 608 ++++++++++++++++++++++++++------------------------- index.html | 84 +++++-- 2 files changed, 378 insertions(+), 314 deletions(-) diff --git a/css/home.css b/css/home.css index 7884891..cf01de9 100644 --- a/css/home.css +++ b/css/home.css @@ -1,391 +1,407 @@ .intro { - background: url("../assets/home/intro.png"); - background-repeat: no-repeat; - background-size: cover; - padding: 15% 10%; - margin-top: -5%; + background: url("../assets/home/intro.png"); + background-repeat: no-repeat; + background-size: cover; + padding: 15% 10%; + margin-top: -5%; } .intro h4 { - font-family: 'Montserrat'; - font-style: normal; - font-weight: 600; - font-size: 14px; - line-height: 17px; - font-variant: small-caps; - color: #0A19CE; + font-family: "Montserrat"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 17px; + font-variant: small-caps; + color: #0a19ce; } .intro h1 { - font-family: 'Poppins'; - font-style: normal; - font-weight: 600; - font-size: 60px; - line-height: 70px; - color: #263238; + font-family: "Poppins"; + font-style: normal; + font-weight: 600; + font-size: 60px; + line-height: 70px; + color: #263238; } .intro p { - font-family: 'Poppins'; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 21px; - text-align: justify; - color: #969696; - padding-right: 3%; + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 14px; + line-height: 21px; + text-align: justify; + color: #969696; + padding-right: 3%; } .wdwd { - font-family: 'Poppins'; - font-style: normal; - font-weight: 600; - font-size: 35px; - line-height: 52px; - color: #0A19CE; + font-family: "Poppins"; + font-style: normal; + font-weight: 600; + font-size: 35px; + line-height: 52px; + color: #0a19ce; } .owl-carousel { - padding: 5%; + padding: 5%; } .item .card { - width: 328px; - height: 324px; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(4px); - border-radius: 10px; - padding: 10% 5%; - margin: 0 auto; + width: 328px; + height: 324px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(4px); + border-radius: 10px; + padding: 10% 5%; + margin: 0 auto; } .card .card-title { - font-family: 'Poppins'; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 30px; - text-align: center; - color: #263238; + font-family: "Poppins"; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + text-align: center; + color: #263238; } .card .card-text { - font-family: 'Poppins'; - font-style: normal; - font-weight: 500; - font-size: 12px; - line-height: 18px; - text-align: justify; - color: #848383; + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 18px; + text-align: justify; + color: #848383; } .web { - width: 389px; - height: 79px; - left: 83.8px; - top: 99px; - background: linear-gradient(180deg, rgba(144, 142, 224, 0.4) 0%, rgba(141, 135, 216, 0.4) 100%); - backdrop-filter: blur(10px); - border-radius: 10px; - margin: 10% auto; + width: 389px; + height: 79px; + left: 83.8px; + top: 99px; + background: linear-gradient( + 180deg, + rgba(144, 142, 224, 0.4) 0%, + rgba(141, 135, 216, 0.4) 100% + ); + backdrop-filter: blur(10px); + border-radius: 10px; + margin: 10% auto; } .cyber { - width: 389px; - height: 79px; - background: linear-gradient(180deg, rgba(242, 180, 225, 0.4) 0%, rgba(233, 151, 193, 0.4) 100%); - backdrop-filter: blur(10px); - border-radius: 10px; - margin: 10% auto; + width: 389px; + height: 79px; + background: linear-gradient( + 180deg, + rgba(242, 180, 225, 0.4) 0%, + rgba(233, 151, 193, 0.4) 100% + ); + backdrop-filter: blur(10px); + border-radius: 10px; + margin: 10% auto; } .human { - width: 389px; - height: 79px; - background: linear-gradient(180deg, rgba(142, 199, 224, 0.4) 0%, rgba(135, 196, 216, 0.4) 100%); - backdrop-filter: blur(10px); - border-radius: 10px; - margin: 10% auto; + width: 389px; + height: 79px; + background: linear-gradient( + 180deg, + rgba(142, 199, 224, 0.4) 0%, + rgba(135, 196, 216, 0.4) 100% + ); + backdrop-filter: blur(10px); + border-radius: 10px; + margin: 10% auto; } .ml { - width: 389px; - height: 79px; - background: linear-gradient(180deg, rgba(224, 142, 157, 0.4) 0%, rgba(216, 135, 140, 0.4) 100%); - backdrop-filter: blur(10px); - border-radius: 10px; - margin: 10% auto; + width: 389px; + height: 79px; + background: linear-gradient( + 180deg, + rgba(224, 142, 157, 0.4) 0%, + rgba(216, 135, 140, 0.4) 100% + ); + backdrop-filter: blur(10px); + border-radius: 10px; + margin: 10% auto; } .domain .col-6 .web, .domain .col-6 .cyber, .domain .col-6 .human, .domain .col-6 .ml { - margin: 5% auto; - padding-top: 3%; + margin: 5% auto; + padding-top: 3%; } .web p { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 30px; - text-align: center; - color: #64558E; + font-family: Poppins; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + text-align: center; + color: #64558e; } .cyber p { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 30px; - text-align: center; - color: #AD3454; + font-family: Poppins; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + text-align: center; + color: #ad3454; } .human p { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 30px; - text-align: center; - color: #64558E; + font-family: Poppins; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + text-align: center; + color: #64558e; } .ml p { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 30px; - text-align: center; - color: #894713; + font-family: Poppins; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + text-align: center; + color: #894713; } .box { - width: 85%; - height: 150px; - background: rgba(255, 255, 255, 0.8); - backdrop-filter: blur(4px); - border-radius: 10px; - margin: 10%; + width: 85%; + height: 150px; + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(4px); + border-radius: 10px; + margin: 10%; } .box img { - width: 100px; - height: 100px; - margin: 4% 2%; - border-radius: 50%; + width: 100px; + height: 100px; + margin: 4% 2%; + border-radius: 50%; } .box h1 { - font-family: Poppins; - font-style: normal; - font-weight: 600; - font-size: 20px; - line-height: 30px; - color: #64558E; + font-family: Poppins; + font-style: normal; + font-weight: 600; + font-size: 20px; + line-height: 30px; + color: #64558e; } .content { - padding: 2% 4%; + padding: 2% 4%; } .carousel { - margin-bottom: 10%; + margin-bottom: 10%; } .contact { - background: url("../assets/home/contact.png"); - background-size: cover; - background-repeat: no-repeat; - padding: 4% 6%; + background: url("../assets/home/contact.png"); + background-size: cover; + background-repeat: no-repeat; + padding: 4% 6%; } .owl-carousel { - position: relative; + position: relative; } .one { - position: absolute; - top: 15%; - z-index: 100; + position: absolute; + top: 15%; + z-index: 100; } .two { - position: absolute; - bottom: 15%; - left: 34%; - z-index: 100; + position: absolute; + bottom: 15%; + left: 34%; + z-index: 100; } .three { - position: absolute; - bottom: 15%; - right: 0; - z-index: 100; - width: 135px; - height: 145px; + position: absolute; + bottom: 15%; + right: 0; + z-index: 100; + width: 135px; + height: 145px; } .rel { - position: relative; + position: relative; } .abs { - position: absolute; - left: 10%; - top: 45%; + position: absolute; + left: 10%; + top: 45%; } .carousel-item p { - font-family: Poppins; - font-style: normal; - font-weight: 500; + font-family: Poppins; + font-style: normal; + font-weight: 500; + font-size: 12px; + line-height: 18px; + text-align: justify; + color: #848383; +} + +@media (max-width: 1090px) { + .intro { + background-size: contain; + } +} + +@media (max-width: 575px) { + .intro h4 { + font-size: 12px; + } + .intro h1 { + font-size: 25px; + line-height: 35px; + } + .intro p { font-size: 12px; - line-height: 18px; - text-align: justify; - color: #848383; -} - -@media (max-width:1090px) { - .intro { - background-size: contain; - } -} - -@media (max-width:575px) { - .intro h4 { - font-size: 12px; - } - .intro h1 { - font-size: 25px; - line-height: 35px; - } - .intro p { - font-size: 12px; - line-height: 15px; - } - .wdwd { - font-size: 25px; - margin-top: 15%; - line-height: 35px; - } - .item .card { - width: 280px; - } - .one, - .three { - width: 80px; - height: 80px; - } - .two { - width: 80px; - height: 80px; - left: 8%; - } - .one { - top: -4%; - } - .three { - right: 5%; - } - .web, - .cyber, - .human, - .ml { - width: 280px; - height: 60px; - } - .web p, - .cyber p, - .human p, - .ml p { - font-size: 15px; - padding-top: 5%; - } - .box { - padding: 1%; - } - .box img { - width: 70px; - height: 70px; - } - .box h1 { - font-size: 12px; - line-height: 15px; - } - .carousel-item p { - font-size: 9px; - line-height: 13px; - } - .intro { - margin-top: 0%; - } - .contact { - padding-bottom: 35%; - } - .carousel-indicators { - bottom: -3%; - } -} - -@media(min-width:576px) and (max-width:900px) { - .web, - .cyber, - .human, - .ml { - width: 280px; - height: 60px; - } - .web p, - .cyber p, - .human p, - .ml p { - font-size: 15px; - padding-top: 5%; - } - .intro h1 { - font-size: 40px; - line-height: 55px; - } - .intro { - margin-top: 0%; - } - .one { - top: -10%; - } - .owl-carousel { - padding: 5% 1%; - } - .item .card { - width: 220px; - } - .card .card-title { - font-size: 15px; - line-height: 25px; - } - .card .card-text { - font-size: 10px; - line-height: 15px; - } -} - -@media (max-width:325px) { - .item .card { - width: 250px; - } - .box img { - width: 60px; - height: 60px; - } - .box h1 { - font-size: 10px; - } - .carousel-item p { - line-height: 11px; - } -} \ No newline at end of file + line-height: 15px; + } + .wdwd { + font-size: 25px; + margin-top: 15%; + line-height: 35px; + } + .item .card { + width: 280px; + } + .one, + .three { + width: 80px; + height: 80px; + } + .two { + width: 80px; + height: 80px; + left: 8%; + } + .one { + top: -4%; + } + .three { + right: 5%; + } + .web, + .cyber, + .human, + .ml { + width: 280px; + height: 60px; + } + .web p, + .cyber p, + .human p, + .ml p { + font-size: 15px; + padding-top: 5%; + } + .box { + padding: 1%; + } + .box img { + width: 70px; + height: 70px; + } + .box h1 { + font-size: 12px; + line-height: 15px; + } + .carousel-item p { + font-size: 9px; + line-height: 13px; + } + .intro { + margin-top: 0%; + } + .contact { + padding-bottom: 35%; + } + .carousel-indicators { + bottom: -3%; + } +} + +@media (min-width: 576px) and (max-width: 900px) { + .web, + .cyber, + .human, + .ml { + width: 280px; + height: 60px; + } + .web p, + .cyber p, + .human p, + .ml p { + font-size: 15px; + padding-top: 5%; + } + .intro h1 { + font-size: 40px; + line-height: 55px; + } + .intro { + margin-top: 0%; + } + .one { + top: -10%; + } + .owl-carousel { + padding: 5% 1%; + } + .item .card { + width: 220px; + } + .card .card-title { + font-size: 15px; + line-height: 25px; + } + .card .card-text { + font-size: 10px; + line-height: 15px; + } +} + +@media (max-width: 325px) { + .item .card { + width: 250px; + } + .box img { + width: 60px; + height: 60px; + } + .box h1 { + font-size: 10px; + } + .carousel-item p { + line-height: 11px; + } +} diff --git a/index.html b/index.html index d0cad13..d2af67a 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,18 @@ - - - + + + +