From b36be36d596c46621304880bb45c0fabeef0ae51 Mon Sep 17 00:00:00 2001 From: Ashis-007 Date: Tue, 31 Mar 2020 18:04:57 +0530 Subject: [PATCH 1/4] Home page mobile complete --- .gitignore | 1 + assets/css/style.css | 196 ++++++++++++++++++++++++++++++++++++ assets/images/close.svg | 44 ++++++++ assets/images/facebook.svg | 1 + assets/images/ham.svg | 7 ++ assets/images/instagram.svg | 1 + assets/images/twitter.svg | 1 + assets/images/youtube.svg | 48 +++++++++ assets/js/app.js | 14 +++ imageURL.txt | 5 + index.html | 99 ++++++++++++++++++ package.json | 11 ++ 12 files changed, 428 insertions(+) create mode 100644 .gitignore create mode 100644 assets/css/style.css create mode 100644 assets/images/close.svg create mode 100644 assets/images/facebook.svg create mode 100644 assets/images/ham.svg create mode 100644 assets/images/instagram.svg create mode 100644 assets/images/twitter.svg create mode 100644 assets/images/youtube.svg create mode 100644 assets/js/app.js create mode 100644 imageURL.txt create mode 100644 index.html create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0035f5c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +imageURL.txt, \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..4a0e392 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,196 @@ +/* defaults */ +html { + font-size: 56.25%; +} + +body { + max-width: 100%; + max-height: auto; + overflow-y: hidden; + font-family: "Montserrat", sans-serif; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +a { + text-decoration: none; + color: black; +} + +li { + list-style: none; +} + +.btn { + text-decoration: none; + background: none; + border: none; +} + +/* navbar */ + +nav { + width: 100%; + border-bottom: 2px solid #f6f6f6; + box-shadow: 0px 2px 5px #f6f6f6; +} + +.brand { + display: flex; +} + +.brand-title { + font-size: 2.7rem; + margin-top: 0.8em; +} + +.burger { + position: absolute; + right: 0; + top: 0; + margin: 2.5rem; + margin-top: 3em; + cursor: pointer; +} + +nav .logo { + width: 13vw; + margin: 1.2em 0.8em 1.2em 0.8em; +} + +.hide-mobile { + display: none; +} + +.close-btn { + width: 20%; + position: absolute; + top: 0; + right: 0; + padding: 2rem; + cursor: pointer; +} + +.nav-links { + background-color: #f6f6f6; + position: absolute; + top: 0; + right: 0; + padding-top: 7em; + padding-right: 3em; + display: block; + text-align: center; + width: 60%; + height: 100vh; + z-index: 2; + transform: translateX(100%); + transition: transform 0.5s ease-in; +} + +.nav-links li a { + display: block; + font-size: 2em; + padding: 2em; + letter-spacing: 0.2rem; +} + +.nav-links.nav-active { + transform: translateX(0%); +} + +/* body */ + +.container { + max-width: 100%; + height: auto; + margin: 2em auto; + text-align: center; +} + +.back-image img { + width: 100vw; + margin-bottom: 2rem; +} + +.tagline { + margin-bottom: 2rem; +} + +.tagline h2 { + font-size: 1.6rem; +} + +.club-register { + margin-top: 6rem; +} + +.club-register h3 { + font-size: 1.8rem; + padding-bottom: 0.5rem; +} + +.btn.register { + padding: 0.5rem 4rem; + border-radius: 3em; + background-color: #0084ff; +} + +.btn.register a { + letter-spacing: 0.2rem; + color: white; + font-size: 2.4rem; +} + +.other-info { + margin: 6rem auto; +} + +.other-info .btn { + border: 2px solid #0084ff; + padding: 1rem 3rem; + border-radius: 1.7rem; +} + +.other-info a { + font-size: 2.3rem; + font-weight: 600; +} + +.other-info p { + font-size: 1.8rem; +} + +.other-info .btn:hover { + background-color: #0084ff; +} + +/* footer */ + +footer { + width: 100%; + border-top: 2px solid rgba(230, 228, 228, 0.5); + max-height: 10vh; +} + +@media (min-height: 700px) { + footer { + position: absolute; + bottom: 0; + width: 100%; + border-top: 2px solid rgba(230, 228, 228, 0.5); + } +} + +.social-icons { + display: flex; + margin-top: 2em; + justify-content: space-evenly; +} + +footer img { + width: 3em; +} diff --git a/assets/images/close.svg b/assets/images/close.svg new file mode 100644 index 0000000..fd8878f --- /dev/null +++ b/assets/images/close.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/facebook.svg b/assets/images/facebook.svg new file mode 100644 index 0000000..285f4fe --- /dev/null +++ b/assets/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/ham.svg b/assets/images/ham.svg new file mode 100644 index 0000000..14bc7fc --- /dev/null +++ b/assets/images/ham.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/instagram.svg b/assets/images/instagram.svg new file mode 100644 index 0000000..29d37f0 --- /dev/null +++ b/assets/images/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/twitter.svg b/assets/images/twitter.svg new file mode 100644 index 0000000..893ee63 --- /dev/null +++ b/assets/images/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/youtube.svg b/assets/images/youtube.svg new file mode 100644 index 0000000..bbe38d7 --- /dev/null +++ b/assets/images/youtube.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/js/app.js b/assets/js/app.js new file mode 100644 index 0000000..dec0c0a --- /dev/null +++ b/assets/js/app.js @@ -0,0 +1,14 @@ +const navSlide = () => { + const burger = document.querySelector(".burger"); + const navLinks = document.querySelector(".nav-links"); + const exit = document.querySelector(".close-btn"); + + burger.addEventListener("click", () => { + navLinks.classList.toggle("nav-active"); + }); + exit.addEventListener("click", () => { + navLinks.classList.toggle("nav-active"); + }); +}; + +navSlide(); \ No newline at end of file diff --git a/imageURL.txt b/imageURL.txt new file mode 100644 index 0000000..8e1882d --- /dev/null +++ b/imageURL.txt @@ -0,0 +1,5 @@ +logo +https://static.wixstatic.com/media/fcb8e7_e1093d7e7fe6430a9b8c0184805d177d~mv2.png/v1/crop/x_322,y_0,w_606,h_629/fill/w_99,h_81,al_c,q_85,usm_0.66_1.00_0.01/IRC_1.webp + +background +https://static.wixstatic.com/media/fcb8e7_776a951a941e486aa2ceedc0c987095a~mv2_d_3368_1530_s_2.png/v1/crop/x_12,y_0,w_3356,h_1351/fill/w_1939,h_781,al_c,q_90,usm_0.66_1.00_0.01/IRC%20Logo.webp \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..56d91e4 --- /dev/null +++ b/index.html @@ -0,0 +1,99 @@ + + + + + + Home | ITER ROBOTICS CLUB + + + + +
+ +
+ +
+
+
+ +
+ +
+

Innovating + Simulating + Fabricating + Coding = ROBOTizing

+
+ +
+

Not a member yet ?

+ +
+ +
+ +
+
+
+ + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..284b22d --- /dev/null +++ b/package.json @@ -0,0 +1,11 @@ +{ + "name": "irc", + "version": "1.0.0", + "description": "Website for IRC", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "skywalker", + "license": "ISC" +} From b4e14ac2bbecb0507ddd403a0fa23f0dbf300d3a Mon Sep 17 00:00:00 2001 From: Ashis-007 Date: Wed, 1 Apr 2020 00:16:49 +0530 Subject: [PATCH 2/4] Home page desktop version complete --- .gitignore | 3 +- about.html | 97 +++++++++++++++++++++++++++++ app.js | 0 assets/css/about.css | 0 assets/css/index.css | 122 +++++++++++++++++++++++++++++++++++++ assets/css/style.css | 141 ++++++++++++++++++++++--------------------- imageURL.txt | 17 +++++- index.html | 8 ++- support.html | 66 ++++++++++++++++++++ 9 files changed, 380 insertions(+), 74 deletions(-) create mode 100644 about.html create mode 100644 app.js create mode 100644 assets/css/about.css create mode 100644 assets/css/index.css create mode 100644 support.html diff --git a/.gitignore b/.gitignore index 0035f5c..9dcbb37 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -imageURL.txt, \ No newline at end of file +imageURL.txt +node_modules \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..c97bb5d --- /dev/null +++ b/about.html @@ -0,0 +1,97 @@ + + + + + + About Us | ITER ROBOTICS CLUB + + + + +
+ +
+ +
+
+

+ The need for a technical club which would incorporate the principles + of all engineering branches onto a common platform was felt by the + dynamic students of the college, as a result of which the iter + robotics club was initiated in the year 2007. +

+

+ ​It is an open club, co-ordinated by the students, functioning in the + interest of students of the institution wishing to have a practical + application of their knowledge base, gained from the classrooms. +

+

+ ​We at iter robotics club constantly have been working for the + spreading of technical awareness in the field of robotics . +

+

+ ​We beileve in creating local hotpots of technical knowledge for the + proper access to technology to the engineering fraternity. We believe + in putting theories into practice in day to day life making process + easier for humans +

+

+ ​The worldwide developments in the field of robotics today has + obviously encouraged whooping number of students taking ‘robotics’ + into something more than just a hobby. +

+

+ Presently, the IRC has more than 100+ registered student members from + various branches who have shown their excellence by winning robotics + competitions throughout the nation. +

+
+
+ +
+ +
+ + + + diff --git a/app.js b/app.js new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 0000000..e69de29 diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 0000000..7153886 --- /dev/null +++ b/assets/css/index.css @@ -0,0 +1,122 @@ +/* body */ + +.container { + max-width: 100%; + height: auto; + margin: 2em auto; + text-align: center; +} + +.back-image img { + width: 100vw; + margin-bottom: 2rem; +} + +.tagline { + margin-bottom: 2rem; +} + +.tagline h2 { + font-size: 1.6rem; +} + +.club-register { + margin-top: 6rem; +} + +.club-register h3 { + font-size: 1.8rem; + padding-bottom: 0.5rem; +} + +.btn.register { + padding: 0.5rem 4rem; + border-radius: 3em; + background-color: #0084ff; +} + +.btn.register a { + letter-spacing: 0.2rem; + color: white; + font-size: 2.4rem; +} + +.other-info { + margin: 6rem auto; +} + +.other-info .btn { + border: 2px solid #0084ff; + padding: 1rem 3rem; + border-radius: 1.7rem; +} + +.other-info a { + font-size: 2.3rem; + font-weight: 600; +} + +.other-info p { + font-size: 1.8rem; +} + +.other-info .btn:hover { + cursor: pointer; + background-color: #0084ff; +} + +/* desktop version */ + +@media (min-width: 950px) { + .container { + width: 85%; + margin: 0 auto; + } + + .back-image img { + width: 100%; + margin: 2em auto; + } + + .tagline h2 { + font-size: 4rem; + color: rgba(30, 30, 30, 0.9); + } + + .club-register h3 { + font-size: 3rem; + } + + .btn.register { + width: 25%; + height: auto; + padding: 3em auto; + } + + .btn.register a { + letter-spacing: 0.2rem; + color: white; + font-size: 2.7rem; + } + + .btn.register:hover { + box-shadow: 0px 3px 5px #979797; + cursor: pointer; + } + + .other-info a { + font-size: 3rem; + font-weight: 600; + letter-spacing: 0.3rem; + } + + .other-info p { + font-size: 2.3rem; + letter-spacing: 0.2rem; + } + + .other-info .btn { + width: 30%; + margin: 3em auto; + } +} diff --git a/assets/css/style.css b/assets/css/style.css index 4a0e392..748c28b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -6,7 +6,7 @@ html { body { max-width: 100%; max-height: auto; - overflow-y: hidden; + overflow-x: hidden; font-family: "Montserrat", sans-serif; } @@ -39,7 +39,7 @@ nav { box-shadow: 0px 2px 5px #f6f6f6; } -.brand { +.brand a { display: flex; } @@ -102,95 +102,98 @@ nav .logo { transform: translateX(0%); } -/* body */ +/* footer */ -.container { - max-width: 100%; - height: auto; - margin: 2em auto; - text-align: center; +@media (min-height: 700px) { + footer { + position: absolute; + bottom: 0; + width: 100%; + border-top: 2px solid rgba(230, 228, 228, 0.5); + } } -.back-image img { - width: 100vw; - margin-bottom: 2rem; +footer { + width: 100%; + border-top: 2px solid rgba(230, 228, 228, 0.5); + max-height: 10vh; } -.tagline { - margin-bottom: 2rem; +.social-icons { + display: flex; + margin-top: 2em; + justify-content: space-evenly; } -.tagline h2 { - font-size: 1.6rem; +footer img { + width: 3em; } -.club-register { - margin-top: 6rem; -} +/* desktop version */ -.club-register h3 { - font-size: 1.8rem; - padding-bottom: 0.5rem; -} +@media (min-width: 950px) { + nav { + width: 100%; + display: flex; + height: 10vh; + } -.btn.register { - padding: 0.5rem 4rem; - border-radius: 3em; - background-color: #0084ff; -} + nav .logo { + width: 7rem; + } -.btn.register a { - letter-spacing: 0.2rem; - color: white; - font-size: 2.4rem; -} + .brand-title { + font-size: 3.5rem; + margin-top: 2.5rem; + } -.other-info { - margin: 6rem auto; -} + .burger { + display: none; + } -.other-info .btn { - border: 2px solid #0084ff; - padding: 1rem 3rem; - border-radius: 1.7rem; -} + .close-btn { + display: none; + } -.other-info a { - font-size: 2.3rem; - font-weight: 600; -} + .show-desktop { + display: flex; + } -.other-info p { - font-size: 1.8rem; -} + .nav-links { + display: flex; + justify-content: space-evenly; + width: 50%; + padding: 0; + margin: 1em 0 0 0; + transform: translateX(0%); + height: auto; + background: none; + } -.other-info .btn:hover { - background-color: #0084ff; -} + .nav-links li a { + padding-bottom: 1.3em; + padding-top: 1.3em; + } -/* footer */ + .nav-links li a:hover { + background-color: #f6f6f6; + } -footer { - width: 100%; - border-top: 2px solid rgba(230, 228, 228, 0.5); - max-height: 10vh; -} + /* footer */ -@media (min-height: 700px) { - footer { - position: absolute; - bottom: 0; + footer.footer { width: 100%; - border-top: 2px solid rgba(230, 228, 228, 0.5); + position: relative; + max-height: 10vh; } -} -.social-icons { - display: flex; - margin-top: 2em; - justify-content: space-evenly; -} + .social-icons { + width: 60%; + margin: 2.5em auto; + justify-content: space-evenly; + } -footer img { - width: 3em; + footer img { + width: 3.5rem; + } } diff --git a/imageURL.txt b/imageURL.txt index 8e1882d..c01faec 100644 --- a/imageURL.txt +++ b/imageURL.txt @@ -2,4 +2,19 @@ logo https://static.wixstatic.com/media/fcb8e7_e1093d7e7fe6430a9b8c0184805d177d~mv2.png/v1/crop/x_322,y_0,w_606,h_629/fill/w_99,h_81,al_c,q_85,usm_0.66_1.00_0.01/IRC_1.webp background -https://static.wixstatic.com/media/fcb8e7_776a951a941e486aa2ceedc0c987095a~mv2_d_3368_1530_s_2.png/v1/crop/x_12,y_0,w_3356,h_1351/fill/w_1939,h_781,al_c,q_90,usm_0.66_1.00_0.01/IRC%20Logo.webp \ No newline at end of file +https://static.wixstatic.com/media/fcb8e7_776a951a941e486aa2ceedc0c987095a~mv2_d_3368_1530_s_2.png/v1/crop/x_12,y_0,w_3356,h_1351/fill/w_1939,h_781,al_c,q_90,usm_0.66_1.00_0.01/IRC%20Logo.webp + + +about text +---------- +The need for a technical club which would incorporate the principles of all engineering branches onto a common platform was felt by the dynamic students of the college, as a result of which the iter robotics club was initiated in the year 2007. + +​It is an open club, co-ordinated by the students, functioning in the interest of students of the institution wishing to have a practical application of their knowledge base, gained from the classrooms. + +​We at iter robotics club constantly have been working for the spreading of technical awareness in the field of robotics . + +​We beileve in creating local hotpots of technical knowledge for the proper access to technology to the engineering fraternity. We believe in putting theories into practice in day to day life making process easier for humans + +​The worldwide developments in the field of robotics today has obviously encouraged whooping number of students taking ‘robotics’ into something more than just a hobby. + +Presently, the IRC has more than 100+ registered student members from various branches who have shown their excellence by winning robotics competitions throughout the nation. \ No newline at end of file diff --git a/index.html b/index.html index 56d91e4..011bcc2 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Home | ITER ROBOTICS CLUB + -

ITER Robotics Club

+ /> +

ITER Robotics Club

@@ -77,7 +79,7 @@

Not a member yet ?

-