From 1182bcc0438eb3aacffdd589ad7c046f258fb563 Mon Sep 17 00:00:00 2001 From: Nilay Doshi <59107722+niayniay99@users.noreply.github.com> Date: Sat, 15 Oct 2022 10:45:33 +0530 Subject: [PATCH] Add files via upload october-fest --- Frontend-Projects/index1.html | 16 ++++++++ Frontend-Projects/index2.html | 35 +++++++++++++++++ Frontend-Projects/script1.js | 0 Frontend-Projects/script2.js | 14 +++++++ Frontend-Projects/stylesheet1.css | 15 ++++++++ Frontend-Projects/stylesheet2.css | 62 +++++++++++++++++++++++++++++++ 6 files changed, 142 insertions(+) create mode 100644 Frontend-Projects/index1.html create mode 100644 Frontend-Projects/index2.html create mode 100644 Frontend-Projects/script1.js create mode 100644 Frontend-Projects/script2.js create mode 100644 Frontend-Projects/stylesheet1.css create mode 100644 Frontend-Projects/stylesheet2.css diff --git a/Frontend-Projects/index1.html b/Frontend-Projects/index1.html new file mode 100644 index 00000000..94574ac4 --- /dev/null +++ b/Frontend-Projects/index1.html @@ -0,0 +1,16 @@ + + + + + + + + My First Project + + +

Project Simple

+

Project Simple

+

Project Simple

+ + + \ No newline at end of file diff --git a/Frontend-Projects/index2.html b/Frontend-Projects/index2.html new file mode 100644 index 00000000..62e43d29 --- /dev/null +++ b/Frontend-Projects/index2.html @@ -0,0 +1,35 @@ + + + + + + + + 2nd Dynamic Project Nilay + +Nilay +
+
+

Explore the world

+
+ +
+

Wild Forest

+
+ +
+

Sunny Beach

+
+ +
+

City on winter

+
+ +
+

Mountains - Cloud

+
+ +
+ + + \ No newline at end of file diff --git a/Frontend-Projects/script1.js b/Frontend-Projects/script1.js new file mode 100644 index 00000000..e69de29b diff --git a/Frontend-Projects/script2.js b/Frontend-Projects/script2.js new file mode 100644 index 00000000..346aa4c5 --- /dev/null +++ b/Frontend-Projects/script2.js @@ -0,0 +1,14 @@ +const panels = document.querySelectorAll('.panel') + +panels.forEach(panel => { + panel.addEventListener('click', () => { + removeActiveClasses() + panel.classList.add('active') + }) +}) + +function removeActiveClasses() { + panels.forEach(panel =>{ + panel.classList.remove('active') + }) +} \ No newline at end of file diff --git a/Frontend-Projects/stylesheet1.css b/Frontend-Projects/stylesheet1.css new file mode 100644 index 00000000..cc7170a5 --- /dev/null +++ b/Frontend-Projects/stylesheet1.css @@ -0,0 +1,15 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +*{ + box-sizing: border-box; +} +body{ + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + margin: 0; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; +} \ No newline at end of file diff --git a/Frontend-Projects/stylesheet2.css b/Frontend-Projects/stylesheet2.css new file mode 100644 index 00000000..a2800d8f --- /dev/null +++ b/Frontend-Projects/stylesheet2.css @@ -0,0 +1,62 @@ +@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); + +*{ + box-sizing: border-box; +} +body{ + font-family: 'Muli', sans-serif; + display: flex; + margin: 0; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; +} + +.container{ + display: flex; + width: 80vh; +} + +.panel{ + background-size: auto 100%; + background-position: center; + background-repeat: no-repeat; + height: 80vh; + border-radius: 50px; + color: azure; + cursor: pointer; + flex:0.5; + margin: 10px; + position: relative; + transition: flex 0.7s ease-in; +} +.panel h3{ + font-size: 24px; + position: absolute; + bottom: 20px; + left: 20px; + margin: 0px; + opacity: 0; +} + +.panel.active{ + flex:5; +} + +.panel.active h3{ + opacity: 1; + transition: opacity 0.3s ease-in 0.4s; +} + +@media (max-width:480px) { + .container{ + width: 100vw; + } + +.panel:nth-of-type(4), +.panel:nth-of-type(5){ + display: none; +} + +} \ No newline at end of file