From f9d49a2873d2b41258cc76763575182618eaee89 Mon Sep 17 00:00:00 2001 From: GGarv Date: Mon, 8 Jan 2024 18:22:27 +0530 Subject: [PATCH] UI changed to dark mode, footer modified --- css/about.css | 15 +++++++++------ css/contact.css | 11 +++++++---- css/events.css | 11 +++++++---- css/footer.css | 18 ++++++++++-------- css/header.css | 12 ++++++++---- css/main.css | 39 ++++++++++++++++++++++++++++++--------- css/section-1.css | 11 +++++++---- css/team.css | 7 ++++--- images/ecell_logo1.png | Bin 0 -> 1726 bytes index.html | 30 +++++++++++++++--------------- team.html | 33 +++++++++++++++++---------------- 11 files changed, 114 insertions(+), 73 deletions(-) create mode 100644 images/ecell_logo1.png diff --git a/css/about.css b/css/about.css index dfbe815..25d9cf6 100644 --- a/css/about.css +++ b/css/about.css @@ -35,10 +35,12 @@ } .commanp { - background: #ffffff; + /* background: #ffffff; */ + background: #000000; padding: 0.5rem; margin: 0; - color: #2a2d35; + /* color: #2a2d35; */ + color: #ffffff; text-align: center; font-size: 1.2rem; font-weight: 700; @@ -63,12 +65,13 @@ /* ------------------------------------- column-2 -------------------------------------*/ .who { - color: var(--color-bostonblue); + /* color: var(--color-bostonblue); */ + color: #e3e6e9; font-size: 1rem; font-weight: bolder; } #about-part-2 h1 { - color: #292c34; + color:#fad225; font-size: 3.5rem; margin-block-start: 1rem; margin-block-end: 1rem; @@ -77,7 +80,7 @@ #about-part-2 h1::after { content: ""; width: 100%; - background: linear-gradient(90deg, var(--color-bostonblue) 100%, var(--color-denim--lightest) 0);; + background: linear-gradient(90deg, #fad225 100%, var(--color-denim--lightest) 0);; display: block; width: 20%; height: 0.3rem; @@ -85,7 +88,7 @@ } .col2_description { - color: #999da7; + color: #e3e6e9; line-height: 2; font-weight: 600; } diff --git a/css/contact.css b/css/contact.css index 6b4b3b2..1a57229 100644 --- a/css/contact.css +++ b/css/contact.css @@ -1,6 +1,8 @@ #contact { overflow: hidden; - background-color: var( --color-denim); + /* background-color: var( --color-denim); */ + /* background-color: #edd156; */ + background-image: linear-gradient(180deg, #F3D65E -5%, #000000 80%, #000000 100%); padding-bottom: 80px; padding-top: 20px; margin-top: 60px; @@ -13,14 +15,15 @@ flex-direction: column; z-index: 4; min-height: 100%; - background-color: rgb(255, 255, 255); + /* background-color: rgb(255, 255, 255);; */ + background-color: #f3d24f; transition: all 0.4s ease 0s; transform: translate3d(0px, 0px, 0px); overflow: hidden; border-radius: 6px; - box-shadow: rgb(0 0 0 / 7%) 0px 5px 14px 2px; + box-shadow: rgb(0 0 0 / 100%) 0px 5px 14px 2px; will-change: transform; - --gradient-background: linear-gradient(60deg, #237CCA 0%, #1CA6B2 100%); + --gradient-background: linear-gradient(60deg, #ef734e 10%, #ffffff 10%, #000000 90%); --gradient-color: currentColor; flex-grow: 1; padding: 40px 48px; diff --git a/css/events.css b/css/events.css index 0f17261..ea6ed5a 100644 --- a/css/events.css +++ b/css/events.css @@ -28,7 +28,7 @@ height: 100%; object-fit: cover; border-radius: 0px 12px 12px 0px; - box-shadow: rgb(50 50 50 / 10%) 0px 16px 32px, rgb(0 0 0 / 7%) 0px 6px 16px; + box-shadow: #e9d37d 0px 12px 28px, rgb(0 0 0 / 7%) 0px 6px 16px; } .event-desc { @@ -42,7 +42,8 @@ letter-spacing: 0.008em; margin: 0px; padding: 0px; - color: rgb(42, 48, 57); + /* color: rgb(42, 48, 57); */ + color: #ffffff; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; @@ -64,7 +65,8 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; - color: var(--color-bostonblue); + /* color: var(--color-bostonblue); */ + color:#fad225 ; transition: margin 0.3s; } @@ -76,7 +78,8 @@ } .event-link a:hover { - color: var(--color-denim--dark); + /* color: var(--color-denim--dark); */ + color: #ffffff; margin-left: 4px; } diff --git a/css/footer.css b/css/footer.css index e055dcf..af14a6d 100644 --- a/css/footer.css +++ b/css/footer.css @@ -1,5 +1,6 @@ .footer { - color: black; + /* color: black; */ + color: #f0f0f0; width: 100%; margin: 0px auto; padding: 40px 0; @@ -7,11 +8,12 @@ } .footer-logo { + padding-top: 20px; padding-left: 20px; } .footer-logo img { - width: 30%; + width: 40%; } .footer-inner-title { @@ -29,7 +31,7 @@ width: 40px; height: 2px; font-style: normal; - background: #318bc5; + background: #fad225; transition: all 0.35s ease-out; } @@ -44,7 +46,7 @@ } .footer-inner-content ul li a { - color: #000000; + color: #f0f0f0; display: block; font-weight: 500; font-size: large; @@ -53,7 +55,7 @@ } .footer-inner-content ul li a:hover { - color: #318bc5; + color: #fad225; } .footer-social-media ul { @@ -66,7 +68,7 @@ position: relative; width: 30px; height: 30px; - border: 2px solid rgb(75, 74, 74); + border: 2px solid #f0f0f0; border-radius: 20%; text-align: center; margin: 8px 5px; @@ -96,7 +98,7 @@ position: absolute; bottom: 5px; line-height: 20px; - color: black; + color: #f0f0f0; } .footer-inner-content input { @@ -111,7 +113,7 @@ } .footer-button { - margin-top: 10px; + margin-top: 20px; border-radius: 30px; background-color: #318bc5; color: #fff; diff --git a/css/header.css b/css/header.css index 0edfaad..17fa9ff 100644 --- a/css/header.css +++ b/css/header.css @@ -3,7 +3,8 @@ header { position: sticky; top: 0; z-index: 999; - background-color: rgb(255, 255, 255); + /* background-color: rgb(255, 255, 255); */ + background-color: #000000; transition: background-color 0.1s ease-in 0s, box-shadow 0.15s ease-in 0s; will-change: background-color, box-shadow; box-shadow: rgb(0 0 0 / 0%) 0px 2px 4px 0px; @@ -60,7 +61,8 @@ header { position: relative; display: block; text-decoration: none; - color: rgba(0, 0, 0, 0.9); + /* color: rgba(0, 0, 0, 0.9); */ + color: #ffffff; font-size: 1.25rem; font-weight: 600; } @@ -72,13 +74,15 @@ header { height: 2px; bottom: -2px; left: 0; - background-color: var(--color-denim--dark); + /* background-color: var(--color-denim--dark); */ + background-color: #FEDC4C; transform: scaleX(0); transition: all 0.3s ease-in-out 0s; } .nav-link:hover { - color: var(--color-denim--dark); + /* color: var(--color-denim--dark); */ + color: #FEDC4C; } .nav-link:hover:before { diff --git a/css/main.css b/css/main.css index a88bf15..38c6bb8 100644 --- a/css/main.css +++ b/css/main.css @@ -29,6 +29,7 @@ html { padding: 0; scroll-behavior: smooth; font-family: 'Open Sans', sans-serif; + background-color: #000000; } .w-100 { @@ -70,27 +71,32 @@ button, .btn, .btn-outlined { transition: transform 0.4s ease 0s, background-color, border-color, background, color; border-width: 1px; border-style: solid; - border-color: var(--color-denim); + /* border-color: var(--color-denim); */ + border-color: #FEDC4C; border-image: initial; border-radius: 25px; } button:hover, .btn:hover, .btn-outlined:hover { transform: translateY(-3px); - border-color: #0764af; + /* border-color: #0764af; */ + border-color:#FEDC4C ; } .btn { color: rgb(255, 255, 255); - background: var(--color-denim); + /* background: var(--color-denim); */ + background: #FEDC4C; } .btn:hover { - background: var(--color-denim--dark); + /* background: var(--color-denim--dark); */ + background: #FEDC4C; } .btn-outlined { - color: var(--color-denim); + /* color: var(--color-denim); */ + color: #FEDC4C; background: transparent; } @@ -124,16 +130,30 @@ section { letter-spacing: 0.023em; margin: 0px; padding: 0px; - color: rgb(42, 48, 57); + /* color: rgb(42, 48, 57); */ + color: #ffffff; + line-height: 1.6; +} + +.heading2 { + text-align: center; + margin: 0 auto 56px auto; + letter-spacing: 0.023em; + margin: 0px; + padding: 0px; + /* color: rgb(42, 48, 57); */ + + color: #000000; line-height: 1.6; } .heading p { margin-top: -16px; - font-size: 16px; + font-size: 20px; line-height: 1.6; font-weight: 400; - color: rgb(70, 78, 91); + /* color: rgb(70, 78, 91); */ + color: #ffffff; } .con-1 { width: 100%; @@ -156,7 +176,8 @@ section { font-size: 16px; line-height: 1.6; font-weight: 400; - color: rgb(70, 78, 91); + /* color: rgb(70, 78, 91); */ + color: #000000; } @media (max-width: 1148px) { diff --git a/css/section-1.css b/css/section-1.css index 848cd1b..9078a9a 100644 --- a/css/section-1.css +++ b/css/section-1.css @@ -2,12 +2,14 @@ display: block; position: relative; z-index: 10; - background-color: rgb(215, 240, 250); + /* background-color: rgb(215, 240, 250); */ + background-color: #000000; background-size: cover; background-repeat: no-repeat; will-change: background-image; - background-image: linear-gradient(0deg, rgb(215, 240, 250) -20%, rgb(255, 255, 255) 85%, rgb(255, 255, 255) 100%); - color: rgb(42, 48, 57); + background-image: linear-gradient(0deg, #F3D65E -30%, #000000 85%, #000000 100%); + /* color: rgb(42, 48, 57); */ + color: #ffffff; opacity: 0.999; padding-top: 50px; } @@ -46,7 +48,8 @@ font-size: 16px; line-height: 1.6; font-weight: 400; - color: rgb(70, 78, 91); + /* color: rgb(70, 78, 91); */ + color: #ffffff; } .top-1-buttons { diff --git a/css/team.css b/css/team.css index 266b12f..3c177c9 100644 --- a/css/team.css +++ b/css/team.css @@ -1,5 +1,6 @@ .team-desc { padding-bottom: 40px; + color: #fff; max-width: 800px; margin: auto; } @@ -27,9 +28,9 @@ transition: 0.3s; min-width: 15%; background-color: #fff; - box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 50px -12px, - rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, - rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + box-shadow:#fad225(0, 0, 0, 0.2) 0px 25px 50px -12px, + #fad225(0, 0, 0, 0.3) 0px 30px 60px -30px, + #fad225(10, 37, 64, 0.35) 0px -2px 6px 0px inset; } .person:hover { diff --git a/images/ecell_logo1.png b/images/ecell_logo1.png new file mode 100644 index 0000000000000000000000000000000000000000..ea1836af8401111321fca4489035fc8a9d4b2ea3 GIT binary patch literal 1726 zcmV;v20{6WP)Px*cu7P-RCr$Pn_FyDMHt8b|FVaBEMU?U4A{67gYoiE4Z&dL!Ni!*)R+`~5J`MM zK%$WsBQbXSVAK~>5`-9^j4$GY)$-y4iY1U}suFJr)(xf!axqZE0MhODlUdHGr`vP( z+~(|s&UxDG&iv>5e)G-D&Np)i^JpVLZAwN62ByX!Ffa{FjRZ7GnaDISH4@M$Wg^qS z)JQ<1l!?r0!(6}pu7zLied-KwX@SPJ%cNG0l3SOgr=PxZP-IeM{{(Op7#@WLl}=zU z1wi{M0INW5O|hi}Mg~;%HTv?%v&-f$Z#^aXAJc2yN153>0IbW98;ezMJVArLFhzDr zEkHWHD4^t?hKf*6W7W`>{K48fGByFOesYZ5JSRc0RJE!P%$*|n-#iUrR?TaAAOE&i zf_$g8of^T_NH7&ha<_KpM7%pMt@a}DiB#0UjD)LlVFS~^)JQ<1l!;6OQzHS5QYJD( zz!VW7IgM5M_XcJFOcB`%U|%^*1yWUYe_!V?H&je|I1U8`mseB;)p35W8BCGfZXh4l z&Ku?aDFWkHUy=)jDfO7G3{n+#V0LwNt?KOToKk;qa1a9n1Ep0+$rhAg4IyWgjRbPPO zfY4DV2&Ra10GJ^8g9}b+m;=ZFc&p5gCXzed-x-+yN7b~|zS1!FnM$g&0O^RXBpNC* z3xxtK%PK)De+q>HEz6qnr(Hx^0GtJIi(lJ)eSMd6x!lBz9OgkC;%*1BWdFsR5~gxW_ay`wK7nabX}1$}MlT}UNxml{vq_GL$QBp)4@f#I z@)nZs+pDwt^V0z4+jT6GdqrdifDw|Pi^w*T`$Xh+0FOG_F0BnDCwDJ?*JHG0f#OCL zvv-4hv*LvZ=h#3*=99c)!#Yp$*0Mj|{{m3JRRUx3aUVOVe_13g_eQ|$xZ=#nNO$Xs z6`$E{eMs_|NyvWAio7b4KOUDwqI%5EK_Bn2a>%KqgYOdordr@sqIf0AS&pC|O!Zgl z?Roz=IKojqt!Yr`E!ZDM6JwabAfpe?I&N{7F0J1OdHB8 zB;RnubW&{qicVzOWhZw}ZkVTrhr4fUZ;uAE)C(7Snz4BGMO^z8^2b#mqy3uE4ZkJ; zwpc*(odB+Nl5Zag0%=D{>C`a9F!wuMRQvYQ(031WrJ2j+T6%kX&pMH5LoY?Avk4H9 zaKn7+-16Lgz|!Nu-%2WspApNZgeIF*rrSH|p{ap1WkSJJ3D~rs@+5BB?WLg~3g-BD#f^v-yE2(fqH8Q#j7TUF z3Z{xoj~jIfo1R*IM!@Xo=&*){hQ`v2P6ZOcy(E9q+Cx!tj# zj>dv{O~{~<0PG1WjJ>1*n?}=uKgM}ZZDh$ zFnIlCrRO!;UsqCzBU40P0PwC#9@|OY@2+37yWe@O&N)A_EK7m5>dJe~#w3QR>=BV8 zBC@VnEIL3H;5|-uK9k9)yFOE{^J(^@F66Ypw1HkI6bg&gS&@oR7s!S`C=1(D+F;s1 zr=58xd2v3h6ZKL~E6jRvs#bOwm>S6&mf3u1ONa4 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index fc3d331..5079526 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,7 @@ - + @@ -71,7 +71,7 @@
@@ -142,11 +142,11 @@

Wecome to E-Cell IIT Mandi

- - + + - + @@ -224,7 +224,7 @@

Past events organized

- + @@ -237,8 +237,8 @@

Past events organized

-
-

Amol Agarwal

+
+

Amol Agarwal

@@ -253,9 +253,9 @@

Amol Agarwal

@@ -297,12 +297,12 @@

Amol Agarwal

- News Letter + Location
-

E-Cell is a holographic abbreviation adopted by the entrepreneurship club of IIT Mandi.

- - +

Indian Institute of Technology Mandi, Kamand, Himachal Pradesh

+ +
@@ -322,7 +322,7 @@

Amol Agarwal

background-color: #5b9fef; color: white; cursor: pointer; - padding: 15px; + padding: 5px; border-radius: 4px; } diff --git a/team.html b/team.html index 325c500..e243e84 100644 --- a/team.html +++ b/team.html @@ -62,7 +62,7 @@
@@ -113,8 +113,8 @@

Team E-Cell IIT Mandi

- - + + @@ -149,15 +149,15 @@

Coordinators

-
--> + - + -->
@@ -180,35 +180,36 @@

Coordinators

  • -

    Facebook

    +

     Facebook

  • -

    Instagram

    +

     Instagram

  • -

    Linkedin

    +

     Linkedin

  • -

    YouTube

    +

     YouTube

- News Letter + Location
-

E-Cell is a holographic abbreviation adopted by the entrepreneurship club of IIT Mandi.

- - +

Indian Institute of Technology Mandi, Kamand, Himachal Pradesh

+ +
+