From 689973baae7b4839efd517f03e3b5b7a95e8e1ca Mon Sep 17 00:00:00 2001 From: Aakash Lawana Date: Sat, 26 Feb 2022 16:48:24 +0530 Subject: [PATCH] header changes --- .../Rectangle 16.png | Bin acm_logo.png => Photograph/acm_logo.png | Bin back.jpeg => Photograph/back.jpeg | Bin blog.jpg => Photograph/blog.jpg | Bin .../clock _tower.jpg | Bin dummy.jpg => Photograph/dummy.jpg | Bin img1.jpg => Photograph/img1.jpg | Bin img2.png => Photograph/img2.png | Bin Styles/eventsStyle.css | 279 ++++++++++++++++ style.css => Styles/style.css | 0 team.css => Styles/team.css | 95 +++--- events.html | 32 +- eventsStyle.css | 275 ---------------- index.html | 303 +++++++++--------- team.html | 35 +- 15 files changed, 518 insertions(+), 501 deletions(-) rename Rectangle 16.png => Photograph/Rectangle 16.png (100%) rename acm_logo.png => Photograph/acm_logo.png (100%) rename back.jpeg => Photograph/back.jpeg (100%) rename blog.jpg => Photograph/blog.jpg (100%) rename clock _tower.jpg => Photograph/clock _tower.jpg (100%) rename dummy.jpg => Photograph/dummy.jpg (100%) rename img1.jpg => Photograph/img1.jpg (100%) rename img2.png => Photograph/img2.png (100%) create mode 100644 Styles/eventsStyle.css rename style.css => Styles/style.css (100%) rename team.css => Styles/team.css (91%) delete mode 100644 eventsStyle.css diff --git a/Rectangle 16.png b/Photograph/Rectangle 16.png similarity index 100% rename from Rectangle 16.png rename to Photograph/Rectangle 16.png diff --git a/acm_logo.png b/Photograph/acm_logo.png similarity index 100% rename from acm_logo.png rename to Photograph/acm_logo.png diff --git a/back.jpeg b/Photograph/back.jpeg similarity index 100% rename from back.jpeg rename to Photograph/back.jpeg diff --git a/blog.jpg b/Photograph/blog.jpg similarity index 100% rename from blog.jpg rename to Photograph/blog.jpg diff --git a/clock _tower.jpg b/Photograph/clock _tower.jpg similarity index 100% rename from clock _tower.jpg rename to Photograph/clock _tower.jpg diff --git a/dummy.jpg b/Photograph/dummy.jpg similarity index 100% rename from dummy.jpg rename to Photograph/dummy.jpg diff --git a/img1.jpg b/Photograph/img1.jpg similarity index 100% rename from img1.jpg rename to Photograph/img1.jpg diff --git a/img2.png b/Photograph/img2.png similarity index 100% rename from img2.png rename to Photograph/img2.png diff --git a/Styles/eventsStyle.css b/Styles/eventsStyle.css new file mode 100644 index 0000000..23819f7 --- /dev/null +++ b/Styles/eventsStyle.css @@ -0,0 +1,279 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"); + +* { + font-family: Lato; + font-style: normal; +} + +* { + margin: 0; + padding: 0; +} + +nav { + height: 70px; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav span { + margin: 0 2rem; + text-transform: uppercase; + font-weight: 500; + line-height: 24px; +} + +nav a { + color: inherit; + text-decoration: none; +} + +.logo img, +.logo { + height: 100%; +} + +.active { + color: #059fc9; + border-bottom: 2px solid #059fc9; +} + +.underline { + position: relative; +} + +.underline::before { + content: ""; + position: absolute; + bottom: 0; + right: 0; + width: 0; + height: 2px; + background-color: #012732; + transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); +} + +@media (hover: hover) and (pointer: fine) { + .underline:hover::before { + left: 0; + right: auto; + width: 100%; + } +} + +.page1 { + width: 100vw; + height: 100vh; + background-image: url(back.jpeg); + overflow-x: hidden; +} + +.owl-carousel { + position: relative; + top: 25vh; + padding-top: 5px; + width: 80%; + left: 10%; + overflow: visible; +} + +.page1 h1 { + position: absolute; + width: 500px; + height: 86px; + left: 40%; + top: 73%; + + font-family: "Noto Sans HK", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 2rem; + line-height: 86px; + + color: #012732; + + /* Inside Auto Layout */ + + flex: none; + order: 0; + flex-grow: 0; + margin: 4px 0px; +} + +.page1 p { + position: absolute; + width: 500px; + height: 86px; + left: 45%; + top: 78%; + + font-family: "Noto Sans HK", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 1rem; + line-height: 86px; + + color: #012732; + + /* Inside Auto Layout */ + + flex: none; + order: 0; + flex-grow: 0; + margin: 4px 0px; +} + +.icon { + color: black; + font-family: "FontAwesome"; + font-size: 40px; + font-weight: 20px; + line-height: 60px; + + position: relative; + top: 37%; + left: 10%; + text-align: center; + width: 60px; + height: 60px; +} +.owl-item img { + border-radius: 50%; + box-shadow: 0px 0px 16px 4px rgba(5, 159, 201, 0.32); +} +.owl-next, +.owl-prev { + height: 100%; + position: absolute; + top: 0; + + width: 33.33333%; + border-radius: 50%; +} + +.owl-next { + right: 0; +} +.owl-prev { + left: 0; +} +.owl-next:hover .icon, +.owl-prev:hover .icon { + color: black; +} +.icon-arrow-left7 { + left: 0; + border-radius: 50%; +} +.icon-arrow-left7:before { + content: "\f053"; +} +.icon-arrow-right7 { + right: 0; + border-radius: 50%; +} +.icon-arrow-right7:before { + content: "\f054"; +} + +@media (min-width: 768px) { + body { + overflow-x: hidden; + } + .container { + /* background: #eee; */ + margin: 0 auto; + overflow: visible; + width: 800px; + } + .owl-carousel { + margin: 0 0; + position: relative; + width: 860px; + } + .owl-item > div { + margin: 45px 60px; + transition: margin 400ms ease-out; + } + .owl-item.center > div { + margin: 0px; + } + .owl-next { + right: 60px; + } + .owl-prev { + left: 60px; + } + .icon-arrow-left7 { + left: -70px; + right: 0; + } + .icon-arrow-right7 { + left: 340px; + } +} + +.page2 { + position: absolute; + top: 100vh; + height: 100vh; + left: -5%; +} + +.line { + position: absolute; + width: 12px; + height: 200px; + left: 618px; + top: 60vh; + + background: #059fc9; +} + +.page2 img { + position: absolute; + width: 200px; + height: 70vh; + left: 20vw; + top: 25vh; +} +.page2 h1 { + position: absolute; + width: 483px; + height: 86px; + left: 695px; + top: 55vh; + + font-family: "Noto Sans HK", sans-serif; + font-style: normal; + font-weight: 500; + font-size: 2rem; + line-height: 86px; + + color: #012732; +} + +.page2 p { + position: absolute; + width: 582px; + height: 221px; + left: 695px; + top: 65vh; + + font-family: "Noto Sans HK", sans-serif; + font-style: normal; + font-weight: normal; + font-size: 25px; + line-height: 30px; + display: flex; + align-items: center; + + color: #012732; +} + +.right { + position: absolute; + top: 0; +} diff --git a/style.css b/Styles/style.css similarity index 100% rename from style.css rename to Styles/style.css diff --git a/team.css b/Styles/team.css similarity index 91% rename from team.css rename to Styles/team.css index 44c1c26..d8ebc85 100644 --- a/team.css +++ b/Styles/team.css @@ -3,6 +3,7 @@ * { font-family: Lato; font-style: normal; + box-sizing: border-box; } body { @@ -16,54 +17,57 @@ body { background-position: center 1.25%; } -#navbar { - top: 0; - width: 100%; - padding: 10px 0; +nav { + height: 70px; + padding: 1rem; display: flex; - align-items: center; justify-content: space-between; + align-items: center; } -.nav-brand { - font-size: 40px; - text-decoration: none; - padding-left: 20px; +nav span { + margin: 0 2rem; + text-transform: uppercase; + font-weight: 500; + line-height: 24px; } -#navbar ul { - list-style-type: none; - overflow: hidden; - padding-right: 20px; +nav a { + color: inherit; + text-decoration: none; } -#navbar li { - display: inline-block; +.logo img, +.logo { + height: 100%; } -.nav-item a { - text-decoration: none; - font-weight: bold; - color: #012732; - display: block; - text-align: center; - padding: 13px 20px; +.active { + color: #059fc9; + border-bottom: 2px solid #059fc9; } -.nav-item:hover a { - text-decoration: none; - color: #059fc9; +.underline { + position: relative; } -a { - line-height: 1.4; - padding: 0.25em; +.underline::before { + content: ""; + position: absolute; + bottom: 0; + right: 0; + width: 0; + height: 2px; + background-color: #012732; + transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1); } -.current { - text-decoration: underline; - text-decoration-style: solid; - color: #767879 !important; +@media (hover: hover) and (pointer: fine) { + .underline:hover::before { + left: 0; + right: auto; + width: 100%; + } } .header { @@ -78,8 +82,8 @@ a { font-size: 4rem; } -.logo { - /* Rectangle 3 */ +/* .logo { + background: #ffffff; box-shadow: 0px 6px 13px rgba(5, 159, 201, 0.25); border-radius: 10px; @@ -87,7 +91,7 @@ a { margin: 0.7rem; width: 2.5rem; text-align: center; -} +} */ .member { border-radius: 10px; @@ -117,6 +121,7 @@ a { .member .links a { font-size: xx-large; color: black; + margin: 0.5rem; } .member p a { @@ -206,10 +211,11 @@ a { "twenty4 . twenty1 twenty2 twenty3" "twenty4 twenty5 . twenty2 twenty3" "twenty4 twenty5 twenty6 . twenty3" - "twenty4 twenty5 twenty6 . ." - "twenty4 twenty5 twenty6 . ." - ". twenty5 twenty6 . ." - ". . twenty6 . ."; + "twenty4 twenty5 twenty6 twenty7 ." + "twenty4 twenty5 twenty6 twenty7 ." + ". twenty5 twenty6 twenty7 ." + ". . twenty6 twenty7 ." + ". . . twenty7 ."; } .c2018 { @@ -350,11 +356,6 @@ a { .container { height: 100%; margin: 0; -} - -/* For presentation only, no need to copy the code below */ - -.container { margin: 3em 5em; } @@ -481,7 +482,8 @@ a { "twenty5 twenty6" "twenty5 twenty6" "twenty5 twenty6" - ". twenty6"; + "twenty7 twenty6" + "twenty7 ."; } .pic img { @@ -560,7 +562,8 @@ a { "twenty3" "twenty4" "twenty5" - "twenty6"; + "twenty6" + "twenty7"; } } diff --git a/events.html b/events.html index 6c9a90e..25ef95c 100644 --- a/events.html +++ b/events.html @@ -2,26 +2,28 @@ - events + Events - + + + -