diff --git a/public/assets/gear1.png b/public/assets/gear1.png new file mode 100644 index 0000000..da9d5ba Binary files /dev/null and b/public/assets/gear1.png differ diff --git a/public/assets/gear2.png b/public/assets/gear2.png new file mode 100644 index 0000000..f2f704b Binary files /dev/null and b/public/assets/gear2.png differ diff --git a/public/assets/gear3.png b/public/assets/gear3.png new file mode 100644 index 0000000..4204f8d Binary files /dev/null and b/public/assets/gear3.png differ diff --git a/public/assets/gear4.png b/public/assets/gear4.png new file mode 100644 index 0000000..10a49ab Binary files /dev/null and b/public/assets/gear4.png differ diff --git a/public/assets/gear5.png b/public/assets/gear5.png new file mode 100644 index 0000000..c24583c Binary files /dev/null and b/public/assets/gear5.png differ diff --git a/public/assets/gear6.png b/public/assets/gear6.png new file mode 100644 index 0000000..29f5c1c Binary files /dev/null and b/public/assets/gear6.png differ diff --git a/public/assets/gear7.png b/public/assets/gear7.png new file mode 100644 index 0000000..694c636 Binary files /dev/null and b/public/assets/gear7.png differ diff --git a/public/assets/gear_img.png b/public/assets/gear_img.png new file mode 100644 index 0000000..c0d08ba Binary files /dev/null and b/public/assets/gear_img.png differ diff --git a/public/assets/wave.png b/public/assets/wave.png new file mode 100644 index 0000000..dc6aab4 Binary files /dev/null and b/public/assets/wave.png differ diff --git a/public/css/footer.css b/public/css/footer.css new file mode 100644 index 0000000..203a373 --- /dev/null +++ b/public/css/footer.css @@ -0,0 +1,161 @@ +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap'); +* { + padding: 0px; + margin: 0px; + box-sizing: border-box; +} + +body { + height: 100vh; + width: 100%; + background: #0a0a0a; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +#container { + height: 100%; + width: 100%; + background: #000; + overflow: hidden; +} + +.a_star { + transition-duration: 1s; +} + +#cursor { + position: absolute; + height: 200px; + width: 200px; + border-radius: 50%; + -moz-backdrop-filter: brightness(500%); + -webkit-backdrop-filter: brightness(500%); + backdrop-filter: brightness(500%); +} + + +/* Footer CSS */ +.footercontainer { + display: flex; + justify-content: center; + align-items: flex-end; + min-height: 100vh; + background: #141414; +} +.text { + position: absolute; + display: flex; + justify-content: center; + align-items: center; +} +.text h1 { + color: #2567f5; + margin-top: -900px; +} +footer { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background: #2567f5; + height: 190px; + padding: 20px 50px; + flex-direction: column; +} +footer .social_icon, +footer .menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin: 10px 0; + flex-wrap: wrap; +} +footer .social_icon li, +footer .menu li { + list-style: none; +} +footer .social_icon li a { + font-size: 2em; + color: #141414; + margin: 0 10px; + display: inline-block; + transition: 0.5s; +} +footer .social_icon li a:hover { + transform: translateY(-10px); +} +footer .menu li a { + font-size: 1.2em; + font-family: "Quicksand", sans-serif; + color: #141414; + margin: 0 10px; + display: inline-block; + text-decoration: none; + opacity: 0.75; + transition: 0.5s; +} +footer .menu li a:hover { + opacity: 1; +} +footer p { + color: #141414; + text-align: center; + margin-top: 15px; + margin-bottom: 10px; + font-size: 1.1em; + opacity: 0.75; +} +footer .wave { + position: absolute; + top: -100px; + left: 0; + width: 100%; + height: 100px; + background: url(../assets/wave.png); + background-size: 1000px 100px; +} +footer .wave1 { + z-index: 1000; + opacity: 1; + bottom: 0; + animation: animateWave 4s linear infinite; +} +footer .wave2 { + z-index: 999; + opacity: 0.5; + bottom: 0; + animation: animateWave-02 4s linear infinite; +} +footer .wave3 { + z-index: 1000; + opacity: 0.2; + bottom: 15px; + animation: animateWave-02 4s linear infinite; +} +footer .wave4 { + z-index: 999; + opacity: 0.7; + bottom: 20px; + animation: animateWave-02 4s linear infinite; +} +@keyframes animateWave { + 0% { + background-position-x: 1000px; + } + 100% { + background-position-x: 0px; + } +} +@keyframes animateWave-02 { + 0% { + background-position-x: 0px; + } + 100% { + background-position-x: 1000px; + } +} diff --git a/public/css/home.css b/public/css/home.css index c0c3293..4ec3b34 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -1,36 +1,112 @@ +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap"); * { - padding: 0px; - margin: 0px; - box-sizing: border-box; + padding: 0px; + margin: 0px; + box-sizing: border-box; } body { - height: 100vh; - width: 100%; - background: #0a0a0a; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; + height: 100vh; + width: 100%; + background: #0a0a0a; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; } #container { - height: 100%; - width: 100%; - background: #000; - overflow: hidden; + height: 100%; + width: 100%; + background: #000; + overflow: hidden; } .a_star { - transition-duration: 1s; + transition-duration: 1s; } #cursor { - position: absolute; - height: 200px; - width: 200px; - border-radius: 50%; - -moz-backdrop-filter: brightness(500%); - -webkit-backdrop-filter: brightness(500%); - backdrop-filter: brightness(500%); -} \ No newline at end of file + position: absolute; + height: 200px; + width: 200px; + border-radius: 50%; + -moz-backdrop-filter: brightness(500%); + -webkit-backdrop-filter: brightness(500%); + backdrop-filter: brightness(500%); +} + +/* Menu Bar CSS */ +.contain { + position: absolute; + width: 100%; + height: 100vh; + background: transparent; +} +.box { + width: fit-content; + height: 50vh; + background: transparent; + position: absolute; + text-align: left; + z-index: 1; + opacity: 0; + left: -500px; + pointer-events: none; + transition: 0.5s; +} +.active.box { + opacity: 1; + left: 0px; + pointer-events: fill; +} +.menu_item_box { + z-index: 2; + width: fit-content; + height: auto; + background-color: #fff; + margin: 30px; + position: absolute; + border-radius: 5px; + cursor: pointer; +} +.line1, +.line2, +.line3 { + width: 30px; + height: 3px; + margin: 8px 5px; + background-color: #ffffff; + border-radius: 50px; +} +.active .line1 { + transform: translate(0px, 12px) rotate(45deg); +} +.active .line2 { + opacity: 0; +} +.active .line3 { + transform: translate(0px, -12px) rotate(-45deg); +} +nav { + padding-top: 10px; +} +nav ul { + margin: 0px 30px; +} +nav ul li { + list-style: none; + margin-bottom: 12px; + transition: 0.2s; +} +nav ul li a { + color: #fff; + font-family: "Quicksand", sans-serif; + font-size: 20px; + padding: 10px 30px; + display: block; + text-decoration: none; +} +nav ul li a:hover { + color: #ffff00; +} diff --git a/public/css/loading.css b/public/css/loading.css new file mode 100644 index 0000000..2e9fc8d --- /dev/null +++ b/public/css/loading.css @@ -0,0 +1,129 @@ +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap"); +/* Background Star CSS */ +* { + padding: 0px; + margin: 0px; + box-sizing: border-box; +} + +body { + height: 100vh; + width: 100%; + background: #0a0a0a; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +#container { + height: 100%; + width: 100%; + background: #000; + overflow: hidden; +} + +.a_star { + transition-duration: 1s; +} + +#cursor { + position: absolute; + height: 200px; + width: 200px; + border-radius: 50%; + -moz-backdrop-filter: brightness(500%); + -webkit-backdrop-filter: brightness(500%); + backdrop-filter: brightness(500%); +} + +/* Gear rotating CSS */ +.rotate1 { + display: block; + position: fixed; + top: 46%; + left: 35%; + margin: -60px 0 0 -280px; + animation: rotate-left 5s linear infinite; +} +.rotate2{ + display: block; + position: fixed; + top: 45%; + left: 44%; + margin: -60px 0 0 -280px; + animation: rotate-right 5s linear infinite; +} +.rotate3{ + color: #f6ff00; + display: block; + position: fixed; + top: 49%; + left: 55%; + margin: -60px 0 0 -280px; + animation: rotate-left 5s linear infinite; +} +.rotate4{ + display: block; + position: fixed; + top: 49%; + left: 64%; + margin: -60px 0 0 -280px; + animation: rotate-right 5s linear infinite; +} +.rotate5{ + display: block; + position: fixed; + top: 52%; + left: 73%; + margin: -60px 0 0 -280px; + animation: rotate-left 5s linear infinite; +} +.rotate6{ + display: block; + position: fixed; + top: 42%; + left: 79%; + margin: -60px 0 0 -280px; + animation: rotate-right 5s linear infinite; +} +.rotate7{ + display: block; + position: fixed; + top: 40%; + left: 92%; + margin: -60px 0 0 -280px; + animation: rotate-left 5s linear infinite; +} +@keyframes rotate-right { + from{ + transform: rotateZ(0); + } + to{ + transform: rotateZ(360deg); + } +} +@keyframes rotate-left { + from{ + transform: rotateZ(0); + } + to{ + transform: rotateZ(-360deg); + } +} +.main { + position: absolute; + top: 0; + display: flex; + justify-content: center; + text-align: center; + background: transparent; +} +.main h1 { + font-family: "Quicksand", sans-serif; + font-size: 60px; + font-weight: 700; + color: #fff; + background: transparent; + margin-top: 60px; +} diff --git a/public/footer.ejs b/public/footer.ejs new file mode 100644 index 0000000..442a778 --- /dev/null +++ b/public/footer.ejs @@ -0,0 +1,60 @@ + + + + + + Footer + + + + + + + + +
+
+ + +
+
+

Animated Footer

+
+ +
+ + + + + \ No newline at end of file diff --git a/public/index.ejs b/public/index.ejs index d2035bb..adad125 100644 --- a/public/index.ejs +++ b/public/index.ejs @@ -1,26 +1,76 @@ - - - - - + + + + home - - - - + + + + + + +
+ + +
+
+
+
+
+
+
+ +
+
+ + + - - - \ No newline at end of file + + diff --git a/public/loading.ejs b/public/loading.ejs new file mode 100644 index 0000000..2ac1352 --- /dev/null +++ b/public/loading.ejs @@ -0,0 +1,29 @@ + + + + + + Loading + + + + + + +
+
+ + +

INSEES

+ Gear + Gear + Gear + Gear + Gear + Gear + Gear + + + + + diff --git a/routes/index.js b/routes/index.js index c3f6c9d..54b2baf 100644 --- a/routes/index.js +++ b/routes/index.js @@ -1,17 +1,21 @@ -const express = require('express') +const express = require("express"); const router = express.Router(); -router.get('/', (req, res) => { - // res.send('hello!! this is express from node js') - const params = { 'title': 'home' } - res.render('index', params); +router.get("/", (req, res) => { + // res.send('hello!! this is express from node js') + const params = { title: "home" }; + res.render("index", params); }); -router.get('/our_activities', (req, res) => { - // res.send('hello!! this is express from node js') - const params = { 'title': 'our_activities' } - res.render('our_activities', params) +router.get("/our_activities", (req, res) => { + // res.send('hello!! this is express from node js') + const params = { title: "our_activities" }; + res.render("our_activities", params); }); +router.get("/loading", (req, res) => { + const params = { title: "loading" }; + res.render("loading", params); +}); -module.exports = router; \ No newline at end of file +module.exports = router;