diff --git a/src/components/assests/icons/cross.svg b/src/components/assests/icons/cross.svg new file mode 100644 index 0000000..a3504b7 --- /dev/null +++ b/src/components/assests/icons/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/assests/icons/home.svg b/src/components/assests/icons/home.svg new file mode 100644 index 0000000..161b590 --- /dev/null +++ b/src/components/assests/icons/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/assests/icons/info.svg b/src/components/assests/icons/info.svg new file mode 100644 index 0000000..fb5e424 --- /dev/null +++ b/src/components/assests/icons/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/assests/icons/mic.svg b/src/components/assests/icons/mic.svg new file mode 100644 index 0000000..499a0ea --- /dev/null +++ b/src/components/assests/icons/mic.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/assests/icons/portfolionav.svg b/src/components/assests/icons/portfolionav.svg new file mode 100644 index 0000000..f220c93 --- /dev/null +++ b/src/components/assests/icons/portfolionav.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/assests/icons/reviewsnav.svg b/src/components/assests/icons/reviewsnav.svg new file mode 100644 index 0000000..32e8b21 --- /dev/null +++ b/src/components/assests/icons/reviewsnav.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/assests/icons/servicesrocket.svg b/src/components/assests/icons/servicesrocket.svg new file mode 100644 index 0000000..cf3435a --- /dev/null +++ b/src/components/assests/icons/servicesrocket.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/designs.jsx b/src/components/designs.jsx index 49d660a..4aba1de 100644 --- a/src/components/designs.jsx +++ b/src/components/designs.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from "react"; +import React from "react"; import "./styles/designs.css"; import left1 from "./assests/designs/left1.png"; import left2 from "./assests/designs/left2.png"; diff --git a/src/components/home.jsx b/src/components/home.jsx index c64392b..6e5ccc4 100644 --- a/src/components/home.jsx +++ b/src/components/home.jsx @@ -1,11 +1,25 @@ -import React, { useEffect } from "react"; +import React, { useState } from "react"; import "./styles/home.css"; import "./styles/style.css"; +import "./styles/dropdown.css"; import logo from "./assests/icons/logo.png"; import arrow from "./assests/icons/arrow.png"; import griplines from "./assests/icons/griplines.svg"; +import cross from "./assests/icons/cross.svg"; +import home from "./assests/icons/home.svg"; +import info from "./assests/icons/info.svg"; +import mic from "./assests/icons/mic.svg"; +import portfolionav from "./assests/icons/portfolionav.svg"; +import reviewsnav from "./assests/icons/reviewsnav.svg"; +import servicesnav from "./assests/icons/servicesrocket.svg"; export default function Home() { + const [dropdownVisible, setDropdownVisible] = useState(false); + + const toggleDropdown = () => { + setDropdownVisible(!dropdownVisible); + }; + return (
@@ -28,11 +42,52 @@ export default function Home() {
-
+
Open Menu
+
+
+
+ logo +

+ ADVAL STUDIOS +

+
+ +
+ Open Menu +
+
+ +
+

Building Your Brand with You, diff --git a/src/components/styles/dropdown.css b/src/components/styles/dropdown.css new file mode 100644 index 0000000..9237672 --- /dev/null +++ b/src/components/styles/dropdown.css @@ -0,0 +1,43 @@ +.dropdown { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100%; + padding: 20px; + background-color: black; + color: white; + z-index: 10; + transition: transform 0.5s ease-in-out; + transform: translateY(-100%); +} + +.dropdown.show { + transform: translateY(0); +} + +.dropdown .navbar { + height: 10vh; +} + +.navrightmobiledrop { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + height: calc(100% - 10vh); +} +.navrightmobiledrop li { + display: flex; + gap: 20px; + font-size: 20px; + padding: 20px; + + width: 100%; +} + +@media screen and (min-width: 1000px) { + .dropdown { + display: none; + } +} diff --git a/src/components/styles/expertisecomponent.css b/src/components/styles/expertisecomponent.css index 4a6720e..3be4f3b 100644 --- a/src/components/styles/expertisecomponent.css +++ b/src/components/styles/expertisecomponent.css @@ -51,7 +51,7 @@ } .rightexpertisebottom { position: absolute; - top: -20px; + top: -40px; left: calc(80% - 180px); width: 100%; font-weight: 800;