From 1eb12c1e1b66afca7f270f4cffba3c3daa8dc161 Mon Sep 17 00:00:00 2001 From: Akshay Jain Date: Sat, 21 Mar 2020 23:35:09 +0530 Subject: [PATCH 01/10] Made Initial set of changes for collaboration --- README.md | 1 - homepage.css | 9 --------- homepage.html | 49 ------------------------------------------------- homepage.js | 0 readme.txt | 14 ++++++++++++++ 5 files changed, 14 insertions(+), 59 deletions(-) delete mode 100644 README.md delete mode 100644 homepage.css delete mode 100644 homepage.html delete mode 100644 homepage.js create mode 100644 readme.txt diff --git a/README.md b/README.md deleted file mode 100644 index 7ae7296..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# TechBoardWebsite \ No newline at end of file diff --git a/homepage.css b/homepage.css deleted file mode 100644 index 43b3a6b..0000000 --- a/homepage.css +++ /dev/null @@ -1,9 +0,0 @@ -.jumbotron-fluid{ - padding-top: 5px; - background-color: #4f8ec9; - padding-bottom: 0px; -} -nav{ - padding-top: 0px; - -} \ No newline at end of file diff --git a/homepage.html b/homepage.html deleted file mode 100644 index f45b954..0000000 --- a/homepage.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - Technical Board, Indian Institute of Information Technology, Guwahati - - - - - - - - - - - \ No newline at end of file diff --git a/homepage.js b/homepage.js deleted file mode 100644 index e69de29..0000000 diff --git a/readme.txt b/readme.txt new file mode 100644 index 0000000..386872b --- /dev/null +++ b/readme.txt @@ -0,0 +1,14 @@ +This is a git, repository for the technical board website. +For obvious reasons it is here for development only, +There are two folders as part of the initial work + +1.Design_Landing +(Headed By Sameer Kumar Kushwaha) + +2.Design_X_Club +(Headed By Soumyajit Deb) + +Given the provided layout you will have to make simple webpages as specified by team leaders. + + + From 9dd1387ec1b4b9d5bd031a555e2a37b58b8ec38f Mon Sep 17 00:00:00 2001 From: Akshay Jain Date: Sat, 21 Mar 2020 23:41:38 +0530 Subject: [PATCH 02/10] Added the directories Design_X_Club and Design_landing --- Design_X_Club/layout.html | 1 + Design_landing/layout.html | 1 + 2 files changed, 2 insertions(+) create mode 100644 Design_X_Club/layout.html create mode 100644 Design_landing/layout.html diff --git a/Design_X_Club/layout.html b/Design_X_Club/layout.html new file mode 100644 index 0000000..82e0a9e --- /dev/null +++ b/Design_X_Club/layout.html @@ -0,0 +1 @@ + diff --git a/Design_landing/layout.html b/Design_landing/layout.html new file mode 100644 index 0000000..025a662 --- /dev/null +++ b/Design_landing/layout.html @@ -0,0 +1 @@ + From 2fc272df3d730f21ea1cf5164c4477a9fee90ea8 Mon Sep 17 00:00:00 2001 From: rajranjan0608 Date: Sun, 29 Mar 2020 15:33:13 +0530 Subject: [PATCH 03/10] readme.txt -> README.md --- readme.txt => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename readme.txt => README.md (100%) diff --git a/readme.txt b/README.md similarity index 100% rename from readme.txt rename to README.md From 2c315b7c9d2f536901d0d76d3bd3a6195d25a61c Mon Sep 17 00:00:00 2001 From: rajranjan0608 Date: Sun, 29 Mar 2020 15:41:33 +0530 Subject: [PATCH 04/10] Initial Project Structure --- app.js | 0 package.json | 19 +++++++++++++++++++ .../Design_X_Club}/layout.html | 0 .../Design_landing}/layout.html | 0 4 files changed, 19 insertions(+) create mode 100644 app.js create mode 100644 package.json rename {Design_X_Club => views/Design_X_Club}/layout.html (100%) rename {Design_landing => views/Design_landing}/layout.html (100%) diff --git a/app.js b/app.js new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json new file mode 100644 index 0000000..63032af --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "techboardwebsite", + "version": "1.0.0", + "description": "Technical Board Website 2020. A Programming Club project.", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Technical-Board-IIITG/TechBoardWebsite.git" + }, + "author": "Programming Club", + "license": "ISC", + "bugs": { + "url": "https://github.com/Technical-Board-IIITG/TechBoardWebsite/issues" + }, + "homepage": "https://github.com/Technical-Board-IIITG/TechBoardWebsite#readme" +} diff --git a/Design_X_Club/layout.html b/views/Design_X_Club/layout.html similarity index 100% rename from Design_X_Club/layout.html rename to views/Design_X_Club/layout.html diff --git a/Design_landing/layout.html b/views/Design_landing/layout.html similarity index 100% rename from Design_landing/layout.html rename to views/Design_landing/layout.html From f9f1a5a234f9b88b5517399259e1f1e5291ec47f Mon Sep 17 00:00:00 2001 From: Raj Ranjan Date: Sun, 29 Mar 2020 16:04:33 +0530 Subject: [PATCH 05/10] Details about the project and phase 1 teams --- README.md | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 386872b..cabfe31 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,24 @@ -This is a git, repository for the technical board website. -For obvious reasons it is here for development only, -There are two folders as part of the initial work +Project Structure +================== -1.Design_Landing -(Headed By Sameer Kumar Kushwaha) +We'll be following MVC Architecture for our application. Here app.js is the entry point for our application. Designs will be in the ./views directory. Structure of data i.e. models are in the ./models directory and controllers are in the ./controllers. -2.Design_X_Club -(Headed By Soumyajit Deb) -Given the provided layout you will have to make simple webpages as specified by team leaders. +Phase 1 (Designing Phase) +========================= +Designing phase is where we develop the layout and theme of the website. Along with the design, we will be working on Frontend part where we’ll define various actions on different events, toggling, and other effects using Javascript. +1.Design_Landing (Headed By Sameer Kumar Kushwaha) +--------------------------------------------------- +This team is required to develop the designs for Landing Page and its associated pages. Make PR's in the development branch of the repository inside the ./views/Design_Landing directory as specified by the team lead. +2.Design_X_Club (Headed By Soumyajit Deb) +------------------------------------------- +This team is required to develop the designs for Club X Page and its associated pages. Make PR's in the development branch of the repository inside the ./views/Design_X_Club directory as specified by the team lead. + + + +Phase 2 (Backend and API Development) +===================================== +This phase will consist of developing APIs for different tasks like routing, updating, creating, deleting etc. along with database persistence. From 889894e3397dfbd1223d7a7e8bb505536de9fb7b Mon Sep 17 00:00:00 2001 From: Ankit Kumar <53820439+iamankitkumar08062001@users.noreply.github.com> Date: Sun, 29 Mar 2020 19:31:16 +0530 Subject: [PATCH 06/10] Landing Page of X CLub This Commit has main Landing Page with Hall Of Fame Page --- views/Design_X_Club/css/about.css | 1041 +++++++++++++++++ views/Design_X_Club/css/cards.css | 621 ++++++++++ views/Design_X_Club/css/footer.css | 68 ++ views/Design_X_Club/css/header.css | 593 ++++++++++ views/Design_X_Club/css/logo.css | 35 + views/Design_X_Club/css/nav.css | 27 + views/Design_X_Club/css/transition.css | 29 + views/Design_X_Club/css/writing-effect.css | 231 ++++ .../Design_X_Club/hall_of_fame/css/banner.css | 69 ++ .../hall_of_fame/css/hall_of_fame.css | 698 +++++++++++ .../hall_of_fame/hall_of_fame.html | 210 ++++ views/Design_X_Club/index.html | 241 ++++ views/Design_X_Club/js/header.js | 81 ++ views/Design_X_Club/js/writing-effect.js | 52 + 14 files changed, 3996 insertions(+) create mode 100644 views/Design_X_Club/css/about.css create mode 100644 views/Design_X_Club/css/cards.css create mode 100644 views/Design_X_Club/css/footer.css create mode 100644 views/Design_X_Club/css/header.css create mode 100644 views/Design_X_Club/css/logo.css create mode 100644 views/Design_X_Club/css/nav.css create mode 100644 views/Design_X_Club/css/transition.css create mode 100644 views/Design_X_Club/css/writing-effect.css create mode 100644 views/Design_X_Club/hall_of_fame/css/banner.css create mode 100644 views/Design_X_Club/hall_of_fame/css/hall_of_fame.css create mode 100644 views/Design_X_Club/hall_of_fame/hall_of_fame.html create mode 100644 views/Design_X_Club/index.html create mode 100644 views/Design_X_Club/js/header.js create mode 100644 views/Design_X_Club/js/writing-effect.js diff --git a/views/Design_X_Club/css/about.css b/views/Design_X_Club/css/about.css new file mode 100644 index 0000000..30f5437 --- /dev/null +++ b/views/Design_X_Club/css/about.css @@ -0,0 +1,1041 @@ +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + .about { + text-align: center; + position: relative; + z-index: 0; + display: block !important; + margin-bottom: 5%; + margin-top: -40%; + } + + .head { + text-align: center; + } + + .head .hl { + width: 200px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 3px; + } + + .head .circle-left { + height: 7px; + width: 7px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-top { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 2px; + animation-name: bounce-up; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-bottom { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + bottom: 13px; + left: 1px; + animation-name: bounce-down; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head .circle-right { + height: 7px; + width: 7px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 5px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head h1 { + font-size: 18px; + } + + .hl { + padding: 0px; + } + + .vl { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 20px; + } + + .vl-start { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + top: 13px; + } + + .vl-end { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 13px; + } + + .content .circle-left { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .content .circle-right { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 4px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .upper-content-hl { + margin-top: -30px; + } + + .content .hl { + width: 250px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 6px; + } + + .content img { + width: 250px; + height: 250px; + } + + .content h1 { + font-size: 14px; + } + + .content p { + font-size: 10px; + } + + @keyframes bounce-up { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-down { + from { + top: -20px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-left { + from { + left: -10px; + } + + to { + left: 5px; + } + } + + @keyframes bounce-right { + from { + right: -8px; + } + + to { + right: 4px; + } + } +} + +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { + .about { + text-align: center; + position: relative; + margin-top: -5%; + z-index: 0; + display: block !important; + margin-bottom: 5%; + } + + .head { + text-align: center; + } + + .head .hl { + width: 200px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 4px; + } + + .head .circle-left { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-top { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 2px; + animation-name: bounce-up; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-bottom { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + bottom: 13px; + left: 2px; + animation-name: bounce-down; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head .circle-right { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 5px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head h1 { + font-size: 18px; + } + + .hl { + padding: 0px; + } + + .vl { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 10px; + } + + .vl-start { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + top: 13px; + } + + .vl-end { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 13px; + } + + .content .circle-left { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .content .circle-right { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 4px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .upper-content-hl { + margin-top: -21px; + } + + .content .hl { + width: 600px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 6px; + } + + .content img { + width: 300px; + height: 300px; + } + + .content h1 { + font-size: 18px; + } + + .content p { + font-size: 12px; + } + + @keyframes bounce-up { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-down { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-left { + from { + left: -10px; + } + + to { + left: 5px; + } + } + + @keyframes bounce-right { + from { + right: -8px; + } + + to { + right: 4px; + } + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .about { + text-align: center; + position: relative; + margin-top: -5%; + z-index: 0; + display: block !important; + margin-bottom: 5%; + } + + .head { + text-align: center; + } + + .head .hl { + width: 200px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 4px; + } + + .head .circle-left { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-top { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 2px; + animation-name: bounce-up; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-bottom { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + bottom: 13px; + left: 2px; + animation-name: bounce-down; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head .circle-right { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 5px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head h1 { + font-size: 18px; + } + + .hl { + padding: 0px; + } + + .vl { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 10px; + } + + .vl-start { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + top: 13px; + } + + .vl-end { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 13px; + } + + .content .circle-left { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .content .circle-right { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 4px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .upper-content-hl { + margin-top: -21px; + } + + .content .hl { + width: 600px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 6px; + } + + .content img { + width: 300px; + height: 300px; + } + + .content h1 { + font-size: 18px; + } + + .content p { + font-size: 12px; + } + + @keyframes bounce-up { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-down { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-left { + from { + left: -10px; + } + + to { + left: 5px; + } + } + + @keyframes bounce-right { + from { + right: -8px; + } + + to { + right: 4px; + } + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .about { + text-align: center; + position: relative; + margin-top: -5%; + z-index: 0; + display: block !important; + margin-bottom: 5%; + } + + .head { + text-align: center; + } + + .head .hl { + width: 200px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 4px; + } + + .head .circle-left { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-top { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 2px; + animation-name: bounce-up; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-bottom { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + bottom: 13px; + left: 2px; + animation-name: bounce-down; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head .circle-right { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 5px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .hl { + padding: 0px; + } + + .vl { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 10px; + } + + .vl-start { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + top: 13px; + } + + .vl-end { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 13px; + } + + .content .circle-left { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .content .circle-right { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 4px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .upper-content-hl { + margin-top: -21px; + } + + .content .hl { + width: 900px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 6px; + } + + .content img { + width: 300px; + height: 300px; + } + + @keyframes bounce-up { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-down { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-left { + from { + left: -10px; + } + + to { + left: 5px; + } + } + + @keyframes bounce-right { + from { + right: -8px; + } + + to { + right: 4px; + } + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .about { + text-align: center; + position: relative; + z-index: 0; + display: block !important; + margin-bottom: 5%; + margin-top: -5%; + } + + .head { + text-align: center; + } + + .head .hl { + width: 300px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 4px; + } + + .head .circle-left { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-top { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 2px; + animation-name: bounce-up; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .circle-bottom { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + bottom: 13px; + left: 2px; + animation-name: bounce-down; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head .circle-right { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 5px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .head h1 { + font-size: 40px; + font-weight: 900; + letter-spacing: 2px; + } + + .hl { + padding: 0px; + } + + .vl { + height: 100px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 41px; + } + + .vl-start { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + top: 13px; + } + + .vl-end { + height: 60px; + width: 1px; + border-left: 2px solid black; + left: 50%; + position: relative; + bottom: 13px; + } + + .content .circle-left { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + left: 5px; + animation-name: bounce-left; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .content .circle-right { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-block; + position: relative; + right: 4px; + animation-name: bounce-right; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .upper-content-hl { + margin-top: -51px; + } + + .content .hl { + width: 1150px; + height: 1px; + border-top: 2px solid black; + display: inline-block; + position: relative; + bottom: 6px; + } + + .content p{ + font-weight: 500; + font-size: 18px; + } + + .content img { + width: 350px; + height: 350px; + } + + @keyframes bounce-up { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-down { + from { + top: -13px; + } + + to { + top: 13px; + } + } + + @keyframes bounce-left { + from { + left: -10px; + } + + to { + left: 5px; + } + } + + @keyframes bounce-right { + from { + right: -8px; + } + + to { + right: 4px; + } + } +} diff --git a/views/Design_X_Club/css/cards.css b/views/Design_X_Club/css/cards.css new file mode 100644 index 0000000..47df781 --- /dev/null +++ b/views/Design_X_Club/css/cards.css @@ -0,0 +1,621 @@ +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + .team { + background-color: #13171d; + height: 500px; + position: relative; + width: 100%; + display: block; + } + + .team-header { + text-align: center; + margin-bottom: 30px; + } + + .team-header h1 { + color: antiquewhite; + } + + .box { + position: relative; + perspective: 1000px; + height: 200px; + width: 200px; + left: 20%; + } + + .column { + margin: 20px; + } + + .box-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + .box .box-img { + transform: rotateY(0deg); + transition: all 0.50s ease-in-out 0s; + border-radius: 10px; + } + + .box:hover .box-img { + transform: rotateY(-180deg); + visibility: hidden; + } + + .box .box-img img { + height: 200px; + width: 200px; + border-radius: 10px; + } + + .box .box-content { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + padding: 60px 20px; + text-align: center; + background-color: #4F6A8E; + transform: rotateY(180deg); + transition: all 0.50s ease-in-out 0s; + visibility: hidden; + border-radius: 10px; + } + + .box:hover .box-content { + transform: rotateY(0deg); + visibility: visible; + } + + .box .title { + font-size: 15px; + color: #fff; + text-transform: uppercase; + } + + .box .description { + font-size: 12px; + line-height: 24px; + color: #fff; + } + + .box .title:after, + .box .description:after { + content: ""; + width: 80%; + display: block; + border-bottom: 1px solid #fff; + margin: 15px auto; + } + + .box .social-links { + margin: 0; + padding: 0; + list-style: none; + } + + .box .social-links li { + display: inline-block; + margin: 0 10px; + } + + .box .social-links li a { + font-size: 20px; + color: #fff; + } + + .box .social-links li a i { + font-size: 15px; + color: #fff; + } + + .box .social-links li a:hover { + text-decoration: none; + color: #a6a6a6; + } +} + + +/* Small devices (portrait tablets and large phones, 600px and up) */ +@media only screen and (min-width: 600px) { + .team { + background-color: #13171d; + height: 500px; + position: relative; + width: 100%; + display: block; + } + + .team-header { + text-align: center; + margin-bottom: 30px; + } + + .team-header h1 { + color: antiquewhite; + } + + .box { + position: relative; + perspective: 1000px; + height: 250px; + width: 200px; + } + + .column { + margin: 20px; + } + + .box-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + .box .box-img { + transform: rotateY(0deg); + transition: all 0.50s ease-in-out 0s; + border-radius: 10px; + } + + .box:hover .box-img { + transform: rotateY(-180deg); + visibility: hidden; + } + + .box .box-img img { + height: 250px; + width: 200px; + border-radius: 10px; + } + + .box .box-content { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + padding: 60px 20px; + text-align: center; + background-color: #4F6A8E; + transform: rotateY(180deg); + transition: all 0.50s ease-in-out 0s; + visibility: hidden; + border-radius: 10px; + } + + .box:hover .box-content { + transform: rotateY(0deg); + visibility: visible; + } + + .box .title { + font-size: 15px; + color: #fff; + text-transform: uppercase; + } + + .box .description { + font-size: 12px; + line-height: 24px; + color: #fff; + } + + .box .title:after, + .box .description:after { + content: ""; + width: 80%; + display: block; + border-bottom: 1px solid #fff; + margin: 15px auto; + } + + .box .social-links { + margin: 0; + padding: 0; + list-style: none; + } + + .box .social-links li { + display: inline-block; + margin: 0 10px; + } + + .box .social-links li a { + font-size: 20px; + color: #fff; + } + + .box .social-links li a i { + font-size: 15px; + color: #fff; + } + + .box .social-links li a:hover { + text-decoration: none; + color: #a6a6a6; + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .team { + background-color: #13171d; + height: 400px; + position: relative; + width: 100%; + display: block; + } + + .team-header { + text-align: center; + margin-bottom: 30px; + } + + .team-header h1 { + color: antiquewhite; + } + + .box { + position: relative; + perspective: 1000px; + height: 250px; + width: 200px; + } + + .column { + margin: 20px; + } + + .box-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + .box .box-img { + transform: rotateY(0deg); + transition: all 0.50s ease-in-out 0s; + border-radius: 10px; + } + + .box:hover .box-img { + transform: rotateY(-180deg); + visibility: hidden; + } + + .box .box-img img { + height: 250px; + width: 200px; + border-radius: 10px; + } + + .box .box-content { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + padding: 60px 20px; + text-align: center; + background-color: #4F6A8E; + transform: rotateY(180deg); + transition: all 0.50s ease-in-out 0s; + visibility: hidden; + border-radius: 10px; + } + + .box:hover .box-content { + transform: rotateY(0deg); + visibility: visible; + } + + .box .title { + font-size: 15px; + color: #fff; + text-transform: uppercase; + } + + .box .description { + font-size: 12px; + line-height: 24px; + color: #fff; + } + + .box .title:after, + .box .description:after { + content: ""; + width: 80%; + display: block; + border-bottom: 1px solid #fff; + margin: 15px auto; + } + + .box .social-links { + margin: 0; + padding: 0; + list-style: none; + } + + .box .social-links li { + display: inline-block; + margin: 0 10px; + } + + .box .social-links li a { + font-size: 20px; + color: #fff; + } + + .box .social-links li a i { + font-size: 15px; + color: #fff; + } + + .box .social-links li a:hover { + text-decoration: none; + color: #a6a6a6; + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .team { + background-color: #13171d; + height: 400px; + position: relative; + width: 100%; + display: block; + } + + .team-header { + text-align: center; + margin-bottom: 30px; + } + + .team-header h1 { + color: antiquewhite; + } + + .box { + position: relative; + perspective: 1000px; + height: 300px; + width: 300px; + } + + .column { + margin: 20px; + } + + .box-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + .box .box-img { + transform: rotateY(0deg); + transition: all 0.50s ease-in-out 0s; + border-radius: 10px; + } + + .box:hover .box-img { + transform: rotateY(-180deg); + visibility: hidden; + } + + .box .box-img img { + height: 300px; + width: 300px; + border-radius: 10px; + } + + .box .box-content { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + padding: 60px 20px; + text-align: center; + background-color: #4F6A8E; + transform: rotateY(180deg); + transition: all 0.50s ease-in-out 0s; + visibility: hidden; + border-radius: 10px; + } + + .box:hover .box-content { + transform: rotateY(0deg); + visibility: visible; + } + + .box .title { + font-size: 20px; + color: #fff; + text-transform: uppercase; + } + + .box .description { + font-size: 14px; + line-height: 24px; + color: #fff; + } + + .box .title:after, + .box .description:after { + content: ""; + width: 80%; + display: block; + border-bottom: 1px solid #fff; + margin: 15px auto; + } + + .box .social-links { + margin: 0; + padding: 0; + list-style: none; + } + + .box .social-links li { + display: inline-block; + margin: 0 10px; + } + + .box .social-links li a { + font-size: 20px; + color: #fff; + } + + .box .social-links li a:hover { + text-decoration: none; + color: #a6a6a6; + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .team { + background-color: #13171d; + height: 400px; + position: relative; + width: 100%; + display: block; + } + + .team-header { + text-align: center; + margin-bottom: 30px; + font-weight: 900; + letter-spacing: 2px; + } + + .team-header h1 { + color: antiquewhite; + } + + .box { + position: relative; + perspective: 1000px; + height: 300px; + width: 300px; + } + + .box-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + .box .box-img { + transform: rotateY(0deg); + transition: all 0.50s ease-in-out 0s; + border-radius: 10px; + } + + .box:hover .box-img { + transform: rotateY(-180deg); + visibility: hidden; + } + + .box .box-img img { + height: 300px; + width: 300px; + border-radius: 10px; + } + + .box .box-content { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + padding: 60px 20px; + text-align: center; + background-color: #4F6A8E; + transform: rotateY(180deg); + transition: all 0.50s ease-in-out 0s; + visibility: hidden; + border-radius: 10px; + } + + .box:hover .box-content { + transform: rotateY(0deg); + visibility: visible; + } + + .box .title { + font-size: 20px; + color: #fff; + text-transform: uppercase; + } + + .box .description { + font-size: 14px; + line-height: 24px; + color: #fff; + } + + .box .title:after, + .box .description:after { + content: ""; + width: 80%; + display: block; + border-bottom: 1px solid #fff; + margin: 15px auto; + } + + .box .social-links { + margin: 0; + padding: 0; + list-style: none; + } + + .box .social-links li { + display: inline-block; + margin: 0 10px; + } + + .box .social-links li a { + font-size: 20px; + color: #fff; + } + + .box .social-links li a:hover { + text-decoration: none; + color: #a6a6a6; + } +} + +@media only screen and (max-width: 990px) { + .box { + margin-bottom: 20px; + } +} + +@media only screen and (max-width: 479px) { + .box .box-content { + padding: 20px; + } +} diff --git a/views/Design_X_Club/css/footer.css b/views/Design_X_Club/css/footer.css new file mode 100644 index 0000000..d56471c --- /dev/null +++ b/views/Design_X_Club/css/footer.css @@ -0,0 +1,68 @@ +.footer { + padding: 40px 0; + background-color: rgb(15, 6, 49); + color: #4b4c4d; +} + +.footer ul { + padding: 0; + list-style: none; + text-align: center; + font-size: 18px; + line-height: 1.6; + margin-bottom: 0; +} + +.footer li { + padding: 0 10px; +} + +.footer ul a { + color: inherit; + text-decoration: none; + opacity: 0.8; + font-weight: 600; + letter-spacing: 2px; +} + +.footer ul a:hover { + opacity: 1; +} + +.footer .social { + text-align: center; + padding-bottom: 25px; +} + +.footer .social > a { + font-size: 24px; + width: 40px; + height: 40px; + line-height: 40px; + display: inline-block; + text-align: center; + border-radius: 50%; + border: 1px solid #ccc; + margin: 0 8px; + color: antiquewhite; + opacity: 0.75; +} + +.footer .social > a:hover { + opacity: 0.9; +} + +.footer .copyright { + margin-top: 15px; + text-align: center; + font-size: 13px; + color: #aaa; + margin-bottom: 0; +} + +.copyright a{ + text-decoration: none; + color: antiquewhite; + font-weight: 600; + letter-spacing: 2px; +} diff --git a/views/Design_X_Club/css/header.css b/views/Design_X_Club/css/header.css new file mode 100644 index 0000000..0cd8357 --- /dev/null +++ b/views/Design_X_Club/css/header.css @@ -0,0 +1,593 @@ +html, +body { + margin: 0px; + padding: 0px; + background-color: #5D9090; + overflow-x: hidden; +} + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + .header { + width: 100%; + } + + .confetti { + position: relative; + height: 90vh; + background: #484c4f; + overflow: hidden; + z-index: 1; + width: 100%; + } + + .confetti .confetti-layer { + opacity: 0; + transition: opacity 2s; + } + + .confetti.active .confetti-layer { + opacity: 1; + } + + .confetti-pixel { + position: relative; + display: inline-block; + vertical-align: top; + height: 0; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + animation: 10s confettiDrop ease-in-out infinite alternate; + } + + .confetti-pixel:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .confetti-layer { + display: table; + position: absolute; + left: -10%; + width: 120%; + height: 100%; + text-align: center; + } + + .confetti-layer .inner { + display: table-cell; + vertical-align: middle; + } + + .confetti-layer.front { + z-index: 3; + } + + .confetti-layer.front .confetti-pixel { + width: 5%; + margin: 10% 5% 0; + padding-bottom: 5%; + animation-delay: -3.33333333s; + } + + .confetti-layer.front .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.5); + } + + .confetti-layer.front .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .confetti-layer.mid { + z-index: 2; + -webkit-filter: blur(2px); + filter: blur(2px); + } + + .confetti-layer.mid .confetti-pixel { + width: 2.5%; + margin: 8% 2.5% 0; + padding-bottom: 2.5%; + animation-delay: -6.66666667s; + } + + .confetti-layer.mid .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.7); + } + + .confetti-layer.mid .confetti-pixel:nth-child(odd) { + margin-top: 0; + } + + .confetti-layer.back { + z-index: 1; + -webkit-filter: blur(3px); + filter: blur(3px); + } + + .confetti-layer.back .confetti-pixel { + width: 1.25%; + margin: 5% 5% 0; + padding-bottom: 1.25%; + } + + .confetti-layer.back .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.9); + } + + .confetti-layer.back .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .banner-content { + display: table; + color: white; + z-index: 5; + } + + .banner-content .logo h1 { + font-weight: 900; + font-size: 30px; + font-family: 'Roboto', sans-serif; + position: absolute; + left: 13%; + z-index: 5; + top: 60vh; + letter-spacing: 2px; + } + + .banner-content .logo img { + position: absolute; + left: 24%; + z-index: 5; + height: 200px; + width: 200px; + } + + @keyframes confettiDrop { + 0% { + transform: none; + } + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .header { + width: 100%; + } + + .confetti { + position: relative; + height: 70vh; + background: #484c4f; + overflow: hidden; + z-index: 1; + width: 100%; + } + + .confetti .confetti-layer { + opacity: 0; + transition: opacity 2s; + } + + .confetti.active .confetti-layer { + opacity: 1; + } + + .confetti-pixel { + position: relative; + display: inline-block; + vertical-align: top; + height: 0; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + animation: 10s confettiDrop ease-in-out infinite alternate; + } + + .confetti-pixel:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .confetti-layer { + display: table; + position: absolute; + left: -10%; + width: 120%; + height: 100%; + text-align: center; + } + + .confetti-layer .inner { + display: table-cell; + vertical-align: middle; + } + + .confetti-layer.front { + z-index: 3; + } + + .confetti-layer.front .confetti-pixel { + width: 5%; + margin: 10% 5% 0; + padding-bottom: 5%; + animation-delay: -3.33333333s; + } + + .confetti-layer.front .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.5); + } + + .confetti-layer.front .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .confetti-layer.mid { + z-index: 2; + -webkit-filter: blur(2px); + filter: blur(2px); + } + + .confetti-layer.mid .confetti-pixel { + width: 2.5%; + margin: 8% 2.5% 0; + padding-bottom: 2.5%; + animation-delay: -6.66666667s; + } + + .confetti-layer.mid .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.7); + } + + .confetti-layer.mid .confetti-pixel:nth-child(odd) { + margin-top: 0; + } + + .confetti-layer.back { + z-index: 1; + -webkit-filter: blur(3px); + filter: blur(3px); + } + + .confetti-layer.back .confetti-pixel { + width: 1.25%; + margin: 5% 5% 0; + padding-bottom: 1.25%; + } + + .confetti-layer.back .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.9); + } + + .confetti-layer.back .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .banner-content { + display: table; + color: white; + z-index: 5; + } + + .banner-content .logo h1 { + font-weight: 900; + font-size: 60px; + font-family: 'Roboto', sans-serif; + position: absolute; + left: 20%; + z-index: 5; + top: 45vh; + letter-spacing: 2px; + } + + .banner-content .logo img { + position: absolute; + left: 33%; + z-index: 5; + } + + @keyframes confettiDrop { + 0% { + transform: none; + } + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .header { + width: 100%; + } + + .confetti { + position: relative; + height: 70vh; + background: #484c4f; + overflow: hidden; + z-index: 1; + width: 100%; + } + + .confetti .confetti-layer { + opacity: 0; + transition: opacity 2s; + } + + .confetti.active .confetti-layer { + opacity: 1; + } + + .confetti-pixel { + position: relative; + display: inline-block; + vertical-align: top; + height: 0; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + animation: 10s confettiDrop ease-in-out infinite alternate; + } + + .confetti-pixel:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .confetti-layer { + display: table; + position: absolute; + left: -10%; + width: 120%; + height: 100%; + text-align: center; + } + + .confetti-layer .inner { + display: table-cell; + vertical-align: middle; + } + + .confetti-layer.front { + z-index: 3; + } + + .confetti-layer.front .confetti-pixel { + width: 5%; + margin: 10% 5% 0; + padding-bottom: 5%; + animation-delay: -3.33333333s; + } + + .confetti-layer.front .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.5); + } + + .confetti-layer.front .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .confetti-layer.mid { + z-index: 2; + -webkit-filter: blur(2px); + filter: blur(2px); + } + + .confetti-layer.mid .confetti-pixel { + width: 2.5%; + margin: 8% 2.5% 0; + padding-bottom: 2.5%; + animation-delay: -6.66666667s; + } + + .confetti-layer.mid .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.7); + } + + .confetti-layer.mid .confetti-pixel:nth-child(odd) { + margin-top: 0; + } + + .confetti-layer.back { + z-index: 1; + -webkit-filter: blur(3px); + filter: blur(3px); + } + + .confetti-layer.back .confetti-pixel { + width: 1.25%; + margin: 5% 5% 0; + padding-bottom: 1.25%; + } + + .confetti-layer.back .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.9); + } + + .confetti-layer.back .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .banner-content { + display: table; + color: white; + z-index: 5; + } + + .banner-content .logo h1 { + font-weight: 900; + font-size: 60px; + font-family: 'Roboto', sans-serif; + position: absolute; + left: 26%; + z-index: 5; + top: 35vh; + letter-spacing: 2px; + } + + .banner-content .logo img { + position: absolute; + left: 36%; + z-index: 5; + } + + @keyframes confettiDrop { + 0% { + transform: none; + } + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .header { + width: 100%; + } + + .confetti { + position: relative; + height: 100vh; + background: #484c4f; + overflow: hidden; + z-index: 1; + width: 100%; + } + + .confetti .confetti-layer { + opacity: 0; + transition: opacity 2s; + } + + .confetti.active .confetti-layer { + opacity: 1; + } + + .confetti-pixel { + position: relative; + display: inline-block; + vertical-align: top; + height: 0; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); + animation: 10s confettiDrop ease-in-out infinite alternate; + } + + .confetti-pixel:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + + .confetti-layer { + display: table; + position: absolute; + left: -10%; + width: 120%; + height: 100%; + text-align: center; + } + + .confetti-layer .inner { + display: table-cell; + vertical-align: middle; + } + + .confetti-layer.front { + z-index: 3; + } + + .confetti-layer.front .confetti-pixel { + width: 5%; + margin: 10% 5% 0; + padding-bottom: 5%; + animation-delay: -3.33333333s; + } + + .confetti-layer.front .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.5); + } + + .confetti-layer.front .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .confetti-layer.mid { + z-index: 2; + -webkit-filter: blur(2px); + filter: blur(2px); + } + + .confetti-layer.mid .confetti-pixel { + width: 2.5%; + margin: 8% 2.5% 0; + padding-bottom: 2.5%; + animation-delay: -6.66666667s; + } + + .confetti-layer.mid .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.7); + } + + .confetti-layer.mid .confetti-pixel:nth-child(odd) { + margin-top: 0; + } + + .confetti-layer.back { + z-index: 1; + -webkit-filter: blur(3px); + filter: blur(3px); + } + + .confetti-layer.back .confetti-pixel { + width: 1.25%; + margin: 5% 5% 0; + padding-bottom: 1.25%; + } + + .confetti-layer.back .confetti-pixel:after { + background-color: rgba(72, 76, 79, 0.9); + } + + .confetti-layer.back .confetti-pixel:nth-child(even) { + margin-top: 0; + } + + .banner-content { + display: table; + color: white; + z-index: 5; + } + + .banner-content .logo h1 { + font-weight: 900; + font-size: 60px; + font-family: 'Roboto', sans-serif; + position: absolute; + left: 33%; + z-index: 5; + top: 60vh; + letter-spacing: 2px; + } + + .banner-content .logo img { + position: absolute; + left: 39%; + z-index: 5; + } + + @keyframes confettiDrop { + 0% { + transform: none; + } + } +} diff --git a/views/Design_X_Club/css/logo.css b/views/Design_X_Club/css/logo.css new file mode 100644 index 0000000..b2c1583 --- /dev/null +++ b/views/Design_X_Club/css/logo.css @@ -0,0 +1,35 @@ +.logo{ + text-align: center; +} + +.logo img { + height: 300px; + width: 300px; +/* [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]*/ +/* change colour here*/ + box-shadow: 0px 0px 2px 2px #000000, + 0px 0px 4px 4px #000000, + 0px 0px 30px 18px #000000; + border-radius: 50%; + position: relative; + animation-name: float; + animation-direction: alternate; + animation-duration: 1s; + animation-iteration-count: infinite; + z-index: 2; +} + +.logo h1{ + position: relative; + top: 150px; +} + +/*Change the to values here to make it bounce/float*/ +@keyframes float { + from { + top: 150px; + } + to { + top: 140px; + } +} diff --git a/views/Design_X_Club/css/nav.css b/views/Design_X_Club/css/nav.css new file mode 100644 index 0000000..5b40c26 --- /dev/null +++ b/views/Design_X_Club/css/nav.css @@ -0,0 +1,27 @@ +*{ + font-family: 'Roboto', sans-serif; +} + +#mainNav { + background-color: #000000; + color: rgb(255, 255, 255); + opacity: 0.90; + width: 100%; +} + +#mainNav .logo { + width: 30px; + height: 31x; +} + +#mainNav .entry { + margin-right: 10px; + color: rgb(255, 255, 255); + letter-spacing: 2px; + font-weight: 700; +} + +#mainNav .entry:hover{ + background-color: aqua; + transition: ease 1s; +} diff --git a/views/Design_X_Club/css/transition.css b/views/Design_X_Club/css/transition.css new file mode 100644 index 0000000..8808272 --- /dev/null +++ b/views/Design_X_Club/css/transition.css @@ -0,0 +1,29 @@ +.triangle-bottom-left { + width: 0; + height: 0; + border-bottom: 100px solid #13171d; + border-right: 3000px solid transparent; + margin-bottom: -40px; +} + +.triangle-top-left { + width: 0; + height: 0; + border-top: 100px solid #13171d; + border-right: 3000px solid transparent; +} + +.triangle-bottom-right { + width: 0; + height: 0; + border-bottom: 100px solid rgb(15, 6, 49); + border-left: 3000px solid transparent; + margin-top: -110px; +} + +.triangle-top-right { + width: 0; + height: 0; + border-top: 200px solid #484c4f; + border-left: 3000px solid transparent; +} diff --git a/views/Design_X_Club/css/writing-effect.css b/views/Design_X_Club/css/writing-effect.css new file mode 100644 index 0000000..c6beb42 --- /dev/null +++ b/views/Design_X_Club/css/writing-effect.css @@ -0,0 +1,231 @@ +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + .writing-effect { + z-index: 5; + text-align: center; + position: relative; + top: 70vh; + } + + .writing-effect h1 { + font-size: 18px; + color: antiquewhite; + font-family: 'Roboto', sans-serif; + font-weight: 900; + } + + .writing-effect h1 span.text { + padding: 0; + padding-right: 4px; + border-right: 2px solid #747474; + animation: blink 0.75s infinite; + } + + .writing-effect h1 .yellow { + color: #FCE847; + } + + .writing-effect h1 .red { + color: #F5320C; + } + + .writing-effect h1 .blue { + color: #205462; + } + + @keyframes blink { + from { + border: none; + } + + to { + border-color: 2px solid #747474; + } + } + + @media screen and (max-width: 670px) { + .writing-effect h1 { + font-size: 40px; + } + } + + @media screen and (max-width: 400px) { + .writing-effect h1 { + font-size: 32px; + } + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + .writing-effect { + z-index: 5; + text-align: center; + position: relative; + top: 55vh; + } + + .writing-effect h1 { + font-size: 50px; + color: antiquewhite; + font-family: 'Roboto', sans-serif; + font-weight: 900; + } + + .writing-effect h1 span.text { + padding: 0; + padding-right: 4px; + border-right: 2px solid #747474; + animation: blink 0.75s infinite; + } + + .writing-effect h1 .yellow { + color: #FCE847; + } + + .writing-effect h1 .red { + color: #F5320C; + } + + .writing-effect h1 .blue { + color: #205462; + } + + @keyframes blink { + from { + border: none; + } + + to { + border-color: 2px solid #747474; + } + } + + @media screen and (max-width: 670px) { + .writing-effect h1 { + font-size: 40px; + } + } + + @media screen and (max-width: 400px) { + .writing-effect h1 { + font-size: 32px; + } + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + .writing-effect { + z-index: 5; + text-align: center; + position: relative; + top: 50vh; + } + + .writing-effect h1 { + font-size: 50px; + color: antiquewhite; + font-family: 'Roboto', sans-serif; + font-weight: 900; + } + + .writing-effect h1 span.text { + padding: 0; + padding-right: 4px; + border-right: 2px solid #747474; + animation: blink 0.75s infinite; + } + + .writing-effect h1 .yellow { + color: #FCE847; + } + + .writing-effect h1 .red { + color: #F5320C; + } + + .writing-effect h1 .blue { + color: #205462; + } + + @keyframes blink { + from { + border: none; + } + + to { + border-color: 2px solid #747474; + } + } + + @media screen and (max-width: 670px) { + .writing-effect h1 { + font-size: 40px; + } + } + + @media screen and (max-width: 400px) { + .writing-effect h1 { + font-size: 32px; + } + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + .writing-effect { + z-index: 5; + text-align: center; + position: relative; + top: 80vh; + } + + .writing-effect h1 { + font-size: 50px; + color: antiquewhite; + font-family: 'Roboto', sans-serif; + font-weight: 900; + } + + .writing-effect h1 span.text { + padding: 0; + padding-right: 4px; + border-right: 2px solid #747474; + animation: blink 0.75s infinite; + } + + .writing-effect h1 .yellow { + color: #FCE847; + } + + .writing-effect h1 .red { + color: #F5320C; + } + + .writing-effect h1 .blue { + color: #205462; + } + + @keyframes blink { + from { + border: none; + } + + to { + border-color: 2px solid #747474; + } + } + + @media screen and (max-width: 670px) { + .writing-effect h1 { + font-size: 40px; + } + } + + @media screen and (max-width: 400px) { + .writing-effect h1 { + font-size: 32px; + } + } +} diff --git a/views/Design_X_Club/hall_of_fame/css/banner.css b/views/Design_X_Club/hall_of_fame/css/banner.css new file mode 100644 index 0000000..8276d90 --- /dev/null +++ b/views/Design_X_Club/hall_of_fame/css/banner.css @@ -0,0 +1,69 @@ +@import url(https://fonts.googleapis.com/css?family=Oswald:400); + +.banner { + position: relative; + z-index: 1; + margin: 120px auto; + width: 800px; +} + +.banner .line { + margin: 0 0 10px; + width: 100%; + height: 78px; + box-shadow: 10px 10px 10px rgba(0,0,0,0.5); + text-align: center; + text-transform: uppercase; + font-size: 3em; + line-height: 78px; + transform: skew(0, -10deg); +} + +.banner .line:after, +.banner .line:first-child:before { + position: absolute; + top: 44px; + left: 0; + z-index: -1; + display: block; + width: 330px; + height: 78px; + border-radius: 4px; + background: rgba(180,180,180,0.9); + content: ''; + transform: skew(0, 15deg); +} + +.banner .line:first-child:before { + top: -10px; + right: 0; + left: auto; +} + +.banner .line:first-child:before, +.banner .line:last-child:after { + width: 0; + height: 0; + border-width: 38px; + border-style: solid; + border-color: rgba(180,180,180,0.8) rgba(180,180,180,0.8) transparent transparent; + background: transparent; +} + +.banner .line:last-child:after { + top: 12px; + border-color: transparent transparent rgba(180,180,180,0.8) rgba(180,180,180,0.8); +} + +.banner span { + display: block; + width: 100%; + height: 100%; + border-radius: 4px; + background: #1C486C; + color: #fff; + text-shadow: 1px 1px 0 #444; + font-weight: 900; + font-size: 70px; + letter-spacing: 2px; +} \ No newline at end of file diff --git a/views/Design_X_Club/hall_of_fame/css/hall_of_fame.css b/views/Design_X_Club/hall_of_fame/css/hall_of_fame.css new file mode 100644 index 0000000..ad96bf5 --- /dev/null +++ b/views/Design_X_Club/hall_of_fame/css/hall_of_fame.css @@ -0,0 +1,698 @@ +body { + background-color: #B6D8C0; + overflow-x: hidden; + margin-top: 25vh; +} + +/* Extra small devices (phones, 600px and down) */ +@media only screen and (max-width: 600px) { + + .intermediate .hl { + width: 310px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header .hl { + width: 50px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header h1 { + display: inline-flex; + margin-left: 15px; + margin-right: 15px; + font-weight: 900; + font-size: 40px; + letter-spacing: 2px; + animation-name: resize; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .small-circle { + height: 10px; + width: 10px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 5px; + } + + .big-circle { + height: 20px; + width: 20px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 1px; + } + + .circle-left { + left: 5px; + } + + .circle-right { + right: 5px; + } + + .item { + margin: 15px; + padding: 6px; + height: 350px; + border-style: solid; + border-width: 15px; + border-top-color: rgba(0, 0, 0, 0.7); + border-right-color: rgba(0, 0, 0, 1); + border-bottom-color: rgba(0, 0, 0, 0.6); + border-left-color: rgba(0, 0, 0, 1); + box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); + background-color: antiquewhite; + transition: 1s ease; + transform-origin: top; + } + + .item:hover { + transform-origin: top; + transition: 1s ease; + transform: rotate(-5deg); + } + + .item h1 { + margin-bottom: 10px; + margin-top: 10px; + font-weight: 900; + transition: 1s ease; + } + + .item img { + height: 200px; + width: 200px; + border: 1px solid black; + box-shadow: 0px 0px 2px 2px #000000; + margin-top: 5px; + margin-bottom: 10px; + transition: 1s ease; + } + + .item img:hover { + filter: grayscale(100%); + } + + .item h1:hover { + transform: scale(1.4); + transition: 1s ease; + } + + .row { + margin-bottom: 10px; + margin-top: 10px; + } + + .col { + margin-left: 2px !important; + margin-right: 2px !important; + } +} + +/* Medium devices (landscape tablets, 768px and up) */ +@media only screen and (min-width: 768px) { + + .intermediate .hl { + width: 650px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header .hl { + width: 150px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header h1 { + display: inline-flex; + margin-left: 15px; + margin-right: 15px; + font-weight: 900; + font-size: 50px; + letter-spacing: 2px; + } + + .small-circle { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 4px; + } + + .big-circle { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + top: 3px; + } + + .circle-left { + left: 5px; + } + + .circle-right { + right: 5px; + } + + .set1 { + animation-name: left-bounce; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .set2 { + animation-name: right-bounce; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .item { + margin: 2px; + padding: 6px; + height: 300px; + border-style: solid; + border-width: 15px; + border-top-color: rgba(0, 0, 0, 0.7); + border-right-color: rgba(0, 0, 0, 1); + border-bottom-color: rgba(0, 0, 0, 0.6); + border-left-color: rgba(0, 0, 0, 1); + box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); + background-color: antiquewhite; + transition: 1s ease; + transform-origin: top; + } + + .item:hover { + transform-origin: top; + transition: 1s ease; + transform: rotate(-5deg); + } + + .item h1 { + margin-bottom: 10px; + margin-top: 10px; + font-weight: 900; + transition: 1s ease; + } + + .item img { + height: 160px; + width: 160px; + border: 1px solid black; + box-shadow: 0px 0px 2px 2px #000000; + margin-top: 5px; + margin-bottom: 10px; + transition: 1s ease; + } + + .item img:hover { + filter: grayscale(100%); + } + + .item h1:hover { + transform: scale(1.4); + transition: 1s ease; + } + + .row { + margin-bottom: 10px; + margin-top: 10px; + } + + .col { + margin-left: 2px !important; + margin-right: 2px !important; + } + + @keyframes left-bounce { + from { + transform: translateX(0px); + } + + to { + transform: translateX(-20px) + } + } + + @keyframes right-bounce { + from { + transform: translateX(0px); + } + + to { + transform: translateX(20px) + } + } +} + +/* Large devices (laptops/desktops, 992px and up) */ +@media only screen and (min-width: 992px) { + + .intermediate .hl { + width: 900px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header .hl { + width: 150px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header h1 { + display: inline-flex; + margin-left: 15px; + margin-right: 15px; + font-weight: 900; + font-size: 50px; + letter-spacing: 2px; + } + + .small-circle { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 4px; + } + + .big-circle { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + top: 3px; + } + + .circle-left { + left: 5px; + } + + .circle-right { + right: 5px; + } + + .set1 { + animation-name: left-bounce; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .set2 { + animation-name: right-bounce; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .item { + margin: 5px; + padding: 10px; + height: 380px; + border-style: solid; + border-width: 15px; + border-top-color: rgba(0, 0, 0, 0.7); + border-right-color: rgba(0, 0, 0, 1); + border-bottom-color: rgba(0, 0, 0, 0.6); + border-left-color: rgba(0, 0, 0, 1); + box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); + background-color: antiquewhite; + transition: 1s ease; + transform-origin: top; + } + + .item:hover { + transform-origin: top; + transition: 1s ease; + transform: rotate(-5deg); + } + + .item h1 { + margin-bottom: 10px; + margin-top: 10px; + font-weight: 900; + transition: 1s ease; + } + + .item img { + height: 230px; + width: 230px; + border: 1px solid black; + box-shadow: 0px 0px 2px 2px #000000; + margin-top: 5px; + margin-bottom: 10px; + transition: 1s ease; + } + + .item img:hover { + filter: grayscale(100%); + } + + .item h1:hover { + transform: scale(1.4); + transition: 1s ease; + } + + .row { + margin-bottom: 10px; + margin-top: 10px; + } + + .col { + margin-left: 5px !important; + margin-right: 5px !important; + } + + @keyframes left-bounce { + from { + transform: translateX(0px); + } + + to { + transform: translateX(-20px) + } + } + + @keyframes right-bounce { + from { + transform: translateX(0px); + } + + to { + transform: translateX(20px) + } + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +@media only screen and (min-width: 1200px) { + + .intermediate .hl { + width: 1300px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header .hl { + width: 150px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header h1 { + display: inline-flex; + margin-left: 15px; + margin-right: 15px; + font-weight: 900; + font-size: 50px; + letter-spacing: 2px; + } + + .small-circle { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 4px; + } + + .big-circle { + height: 30px; + width: 30px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + top: 3px; + } + + .circle-left { + left: 5px; + } + + .circle-right { + right: 5px; + } + + .set1 { + animation-name: left-bounce; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .set2 { + animation-name: right-bounce; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .item { + margin: 30px; + padding-bottom: 20px; + height: 470px; + border-style: solid; + border-width: 15px; + border-top-color: rgba(0, 0, 0, 0.7); + border-right-color: rgba(0, 0, 0, 1); + border-bottom-color: rgba(0, 0, 0, 0.6); + border-left-color: rgba(0, 0, 0, 1); + box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); + background-color: antiquewhite; + transition: 1s ease; + transform-origin: top; + } + + .item:hover { + transform-origin: top; + transition: 1s ease; + transform: rotate(-5deg); + } + + .item h1 { + margin-bottom: 40px; + margin-top: 10px; + font-weight: 900; + transition: 1s ease; + } + + .item img { + height: 300px; + width: 300px; + border: 1px solid black; + box-shadow: 0px 0px 2px 2px #000000; + margin-top: 5px; + margin-bottom: 10px; + transition: 1s ease; + } + + .item img:hover { + filter: grayscale(100%); + } + + .item h1:hover { + transform: scale(1.4); + transition: 1s ease; + } + + .row { + margin-bottom: 20px; + margin-top: 20px; + } + + @keyframes left-bounce { + from { + transform: translateX(0px); + } + + to { + transform: translateX(-20px) + } + } + + @keyframes right-bounce { + from { + transform: translateX(0px); + } + + to { + transform: translateX(20px) + } + } +} + +@media only screen and (max-width: 330px) { + + .intermediate .hl { + width: 280px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header .hl { + width: 30px; + height: 1px; + border-top: 2px solid black; + display: inline-flex; + position: relative; + bottom: 10px; + } + + .header h1 { + display: inline-flex; + margin-left: 15px; + margin-right: 15px; + font-weight: 900; + font-size: 40px; + letter-spacing: 2px; + animation-name: resize; + animation-duration: 500ms; + animation-iteration-count: infinite; + animation-direction: alternate; + } + + .small-circle { + height: 7px; + width: 7px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 7px; + } + + .big-circle { + height: 15px; + width: 15px; + border: 2px solid black; + border-radius: 50%; + display: inline-flex; + position: relative; + bottom: 4px; + } + + .circle-left { + left: 5px; + } + + .circle-right { + right: 5px; + } + + .item { + margin: 15px; + padding: 6px; + height: 350px; + border-style: solid; + border-width: 15px; + border-top-color: rgba(0, 0, 0, 0.7); + border-right-color: rgba(0, 0, 0, 1); + border-bottom-color: rgba(0, 0, 0, 0.6); + border-left-color: rgba(0, 0, 0, 1); + box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); + background-color: antiquewhite; + transition: 1s ease; + transform-origin: top; + } + + .item:hover { + transform-origin: top; + transition: 1s ease; + transform: rotate(-5deg); + } + + .item h1 { + margin-bottom: 10px; + margin-top: 10px; + font-weight: 900; + transition: 1s ease; + } + + .item img { + height: 200px; + width: 200px; + border: 1px solid black; + box-shadow: 0px 0px 2px 2px #000000; + margin-top: 5px; + margin-bottom: 10px; + transition: 1s ease; + } + + .item img:hover { + filter: grayscale(100%); + } + + .item h1:hover { + transform: scale(1.4); + transition: 1s ease; + } + + .row { + margin-bottom: 10px; + margin-top: 10px; + } + + .col { + margin-left: 2px !important; + margin-right: 2px !important; + } + + .banner{ + text-align: center; + } +} diff --git a/views/Design_X_Club/hall_of_fame/hall_of_fame.html b/views/Design_X_Club/hall_of_fame/hall_of_fame.html new file mode 100644 index 0000000..51760b5 --- /dev/null +++ b/views/Design_X_Club/hall_of_fame/hall_of_fame.html @@ -0,0 +1,210 @@ + + + + + Technical Board - Hall Of Fame + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + +
+
+ + + + +

2019

+ + + + +
+
+ + + +
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+ +
+ +
+
+ + + +
+
+ + + + +

2020

+ + + + +
+
+ + + +
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+
+

Heading

+ +
+
+
+ +
+ + + + + + + + + + diff --git a/views/Design_X_Club/index.html b/views/Design_X_Club/index.html new file mode 100644 index 0000000..3ef0127 --- /dev/null +++ b/views/Design_X_Club/index.html @@ -0,0 +1,241 @@ + + + + + + Technical Board + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+

Build for everyone

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ + + +
+

About Us +
+ + + +
+

+
+
+
+ + + +
+
+
+
+ +
+
+

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

+
+
+
+
+ + + +
+
+
+
+
+ +
+ +
+
+

COORDINATORS

+
+
+
+ +
+
+
+
Williamson
+
+

Astronaut

+

I want to go to Moon

+ +
+
+
+
+ + +
+
+
+
Williamson
+
+

Astronaut

+

I want to go to Moon

+ +
+
+
+
+ +
+
+
+ +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + diff --git a/views/Design_X_Club/js/header.js b/views/Design_X_Club/js/header.js new file mode 100644 index 0000000..7f9a05f --- /dev/null +++ b/views/Design_X_Club/js/header.js @@ -0,0 +1,81 @@ +$(function () { + var width = (window.innerWidth > 0) ? window.innerWidth : screen.width; + if (width >= 1200) { + makeConfetti(11, 'front'); + makeConfetti(23, 'mid'); + makeConfetti(23, 'back'); + } + if (width >= 992 && width<1200) { + makeConfetti(22, 'front'); + makeConfetti(46, 'mid'); + makeConfetti(46, 'back'); + } + if (width >= 768 && width<992) { + makeConfetti(22, 'front'); + makeConfetti(46, 'mid'); + makeConfetti(46, 'back'); + } + if (width > 600 && width<768) { + makeConfetti(5, 'front'); + makeConfetti(11, 'mid'); + makeConfetti(5, 'back'); + } + if (width<=600) { + makeConfetti(44, 'front'); + makeConfetti(80, 'mid'); + makeConfetti(80, 'back'); + } + $('.confetti-pixel').each(function () { + var colorIndex = Math.floor(Math.random() * (confettiColors.length)); + $(this).attr('data-color', colorIndex).css({ + 'background-color': confettiColors[colorIndex] + }); + //for device width greater than 1200px + if (width >= 1200) { + var x = (Math.random() * 400) - 400; + var y = (Math.random() * 1200) - 1200; + var scale = 1.5 - Math.random(); + } + //for device width greater than 1200px + if (width >= 992 && width<1200) { + var x = (Math.random() * 700) - 700; + var y = (Math.random() * 1100) - 1100; + var scale = 1.5 - Math.random(); + } + if (width >= 768 && width<992) { + var x = (Math.random() * 500) - 500; + var y = (Math.random() * 800) - 800; + var scale = 1.5 - Math.random(); + } + if (width > 600 && width<768) { + var x = (Math.random() * 500) - 500; + var y = (Math.random() * 670) - 670; + var scale = 1.5 - Math.random(); + } + if (width<=600) { + var x = (Math.random() * 1200) - 1200; + var y = (Math.random() * 500) - 500; + var scale = 1.5 - Math.random(); + } + $(this).css({ + 'transform': 'translateX(' + x + '%) translateY(' + y + '%) scale(' + scale + ')' + }); + }); + + $.stellar(); + + $('.confetti').addClass('active'); +}); + +function makeConfetti(num, layer) { + var $layer = $('.confetti-layer.' + layer + ' .inner'); + $layer.append(new Array(num + 1).join('')); +} + +var confettiColors = [ + '#a8c94e', + '#8ab84f', + '#82b34e', + '#71aa6a', + '#5ba14e' +]; diff --git a/views/Design_X_Club/js/writing-effect.js b/views/Design_X_Club/js/writing-effect.js new file mode 100644 index 0000000..b39ac0a --- /dev/null +++ b/views/Design_X_Club/js/writing-effect.js @@ -0,0 +1,52 @@ +const words = ["Build", "Create", "Code"], + colors = ["yellow", "red", "blue"], + text = document.querySelector(".text"); + +// Generator (iterate from 0-3) +function* generator() { + var index = 0; + while (true) { + yield index++; + + if (index > 2) { + index = 0; + } + } +} + +// Printing effect +function printChar(word) { + let i = 0; + text.innerHTML = ""; + text.classList.add(colors[words.indexOf(word)]); + let id = setInterval(() => { + if (i >= word.length) { + deleteChar(); + clearInterval(id); + } else { + text.innerHTML += word[i]; + i++; + } + }, 100); +} + +// Deleting effect +function deleteChar() { + let word = text.innerHTML; + let i = word.length - 1; + let id = setInterval(() => { + if (i >= 0) { + text.innerHTML = text.innerHTML.substring(0, text.innerHTML.length - 1); + i--; + } else { + text.classList.remove(colors[words.indexOf(word)]); + printChar(words[gen.next().value]); + clearInterval(id); + } + }, 200); +} + +// Initializing generator +let gen = generator(); + +printChar(words[gen.next().value]); \ No newline at end of file From 1e68f5555094bbd6ccfa513105d753833f50f3ea Mon Sep 17 00:00:00 2001 From: Soumyajit Deb Date: Sun, 29 Mar 2020 23:18:31 +0530 Subject: [PATCH 07/10] Created a TODO list for the frontend features to be created for Club page --- views/Design_X_Club/TODO.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 views/Design_X_Club/TODO.md diff --git a/views/Design_X_Club/TODO.md b/views/Design_X_Club/TODO.md new file mode 100644 index 0000000..61576bd --- /dev/null +++ b/views/Design_X_Club/TODO.md @@ -0,0 +1 @@ +[comment]: <> (This is a TODO list for all the frontend features to be added) From 7f394504825d27dfc6c16be8309770efcf0ad89e Mon Sep 17 00:00:00 2001 From: Soumyajit Deb Date: Sun, 29 Mar 2020 23:21:16 +0530 Subject: [PATCH 08/10] Created a markdown file Bug.md for maintaining a list of frontend bugs present in club page --- views/Design_X_Club/Bug.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 views/Design_X_Club/Bug.md diff --git a/views/Design_X_Club/Bug.md b/views/Design_X_Club/Bug.md new file mode 100644 index 0000000..47da69b --- /dev/null +++ b/views/Design_X_Club/Bug.md @@ -0,0 +1 @@ +[comment]: <> (This is a BUG list for all the frontend related bugs currently present in Club Pages) From 7c8a3e413f2bf0accef68e65315a7aa5acbb012f Mon Sep 17 00:00:00 2001 From: Soumyajit Deb Date: Mon, 30 Mar 2020 00:41:25 +0530 Subject: [PATCH 09/10] Written the description about TODO list and Guidelines about how toremove and add new item to TODO list --- views/Design_X_Club/TODO.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/views/Design_X_Club/TODO.md b/views/Design_X_Club/TODO.md index 61576bd..35dfd9d 100644 --- a/views/Design_X_Club/TODO.md +++ b/views/Design_X_Club/TODO.md @@ -1 +1,28 @@ [comment]: <> (This is a TODO list for all the frontend features to be added) +[comment]: <> (A list of frontend features to be added to Club Page is maintained here) + +# TODO List + +## About +- This is a list consisting of all the **frontend** features to be included in **club** pages. + +- A feature can only be **checked off** if a **working** version of the feature is implemented and approved by the **maintainer** of the repository. + +- To propose a new feature and add it to the TODO list, please discuss about the feature before hand with the maintainers of the repository and only after the approval of the feature, can the feature be added to this list. + +- Format in which features will represented in this list: + + 1. A heading describing the feature in short (one line) + 2. A description of the feature proposed. Description should be to the point, concise and self-explanatory. If this is a design idea to be implemented, A prototype design should also be included in the short description in png/jpeg format. + 3. **Tech Stack:** The language, framework,etc. to be used to implement the feature. + 4. **Assigned to:** This should include the email ID, Name and the github ID of the person (if any) who is currently working on implementing the feature. This should be written down by maintainers of this repository. + +**PS:** A feature can be a minor addition too! + +# FEATURES + + [ ] ******** Add the first feature to work upon here ********** + + + + From df555f06456fbefa1fff7931726bd445e70f17db Mon Sep 17 00:00:00 2001 From: Soumyajit Deb Date: Mon, 30 Mar 2020 01:45:39 +0530 Subject: [PATCH 10/10] Set the guidelines for Bug reporting and resolving in the Bug list Bug.md --- views/Design_X_Club/Bug.md | 28 ++++++++++++++++++++++++++++ views/Design_X_Club/TODO.md | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/views/Design_X_Club/Bug.md b/views/Design_X_Club/Bug.md index 47da69b..7eaa606 100644 --- a/views/Design_X_Club/Bug.md +++ b/views/Design_X_Club/Bug.md @@ -1 +1,29 @@ [comment]: <> (This is a BUG list for all the frontend related bugs currently present in Club Pages) +[comment]: <> (A list of frontend related bugs which are currently present in the club page and has not been been rectified yet are maintained here) + + +# Bug List + + +## About + + - This is a list consisting of all the **frontend** bugs currently present in **club** pages and has not been rectified yet. + + - To report a new bug, add the description of the bug in this bug list and make a pull request. Maintainers will then review the bug and try to reproduce it themselves. If the bug is genuine and a concerning issue, bug will be added to this list and will be reported as a + issue for this repo. Credit will be given to the founder of the bug by mentioning his/her name, Github ID in the bug description. + + - Format in which bug will be represented in this list: + + 1. A heading describing the bug in short (one line) + 2. A description of the bug reported. Description should be to the point, concise and self explanatory. Bug description should also contain the steps to be followed to reproduce the bug. Screenshots depicting the bug is welcome too. + + 3. Location: This contains the name of the directory/file or files which are concerned with the bug if they are known. + + 4. **Reported by:** This should include the Name and Github ID of the person who reported the bug. + + 5. **Resolved by:** This should include the name and Github ID of the person (if any) who solved the bug. + + +# BUGS + +[ ] **Add any new bug here** diff --git a/views/Design_X_Club/TODO.md b/views/Design_X_Club/TODO.md index 35dfd9d..8fda8cd 100644 --- a/views/Design_X_Club/TODO.md +++ b/views/Design_X_Club/TODO.md @@ -21,7 +21,7 @@ # FEATURES - [ ] ******** Add the first feature to work upon here ********** + [ ] ******** Add the first feature to work upon here **********