diff --git a/README.md b/README.md index 7ae7296..cabfe31 100644 --- a/README.md +++ b/README.md @@ -1 +1,24 @@ -# TechBoardWebsite \ No newline at end of file +Project Structure +================== + +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. + + +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. diff --git a/homepage.js b/app.js similarity index 100% rename from homepage.js rename to app.js 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/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/views/Design_X_Club/Bug.md b/views/Design_X_Club/Bug.md new file mode 100644 index 0000000..7eaa606 --- /dev/null +++ b/views/Design_X_Club/Bug.md @@ -0,0 +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 new file mode 100644 index 0000000..8fda8cd --- /dev/null +++ b/views/Design_X_Club/TODO.md @@ -0,0 +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 ********** + + + + 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 diff --git a/views/Design_X_Club/layout.html b/views/Design_X_Club/layout.html new file mode 100644 index 0000000..82e0a9e --- /dev/null +++ b/views/Design_X_Club/layout.html @@ -0,0 +1 @@ + diff --git a/views/Design_landing/layout.html b/views/Design_landing/layout.html new file mode 100644 index 0000000..025a662 --- /dev/null +++ b/views/Design_landing/layout.html @@ -0,0 +1 @@ +