diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..73f69e0
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/Forum-Frontend-Web.iml b/.idea/Forum-Frontend-Web.iml
new file mode 100644
index 0000000..c956989
--- /dev/null
+++ b/.idea/Forum-Frontend-Web.iml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..17f0c5f
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index d6d4537..d62b217 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -12,13 +12,15 @@ export default function Home() {
{/* //navbar */}
-
+
{/* main */}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index e4fc1d3..9d06616 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -122,3 +122,4 @@
flex-direction: column;
}
}
+
diff --git a/styles/globals.css b/styles/globals.css
index a057533..f641d71 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,18 +15,62 @@ a {
box-sizing: border-box;
}
-nav{
- margin: 10px auto 80px;
- padding: 10px 0;
- display: flex;
- justify-content: flex-end;
- align-items: center;
+nav {
+ margin: 27px auto 0;
+ position: relative;
+ width: 600px;
+ height: 50px;
+ background-color: #34495e;
+ border-radius: 8px;
+ font-size: 0;
}
-
-nav a{
- margin-left: 2rem;
+nav a {
+ line-height: 50px;
+ height: 100%;
+ font-size: 15px;
+ display: inline-block;
+ position: relative;
+ z-index: 1;
+ text-decoration: none;
+ text-transform: uppercase;
+ text-align: center;
+ color: white;
+ cursor: pointer;
+}
+nav .animation {
+ position: absolute;
+ height: 100%;
+ top: 0;
+ z-index: 0;
+ transition: all 0.5s ease 0s;
+ border-radius: 8px;
+}
+a:nth-child(1) {
+ width: 200px;
+}
+a:nth-child(2) {
+ width: 200px;
+}
+a:nth-child(3) {
+ width: 200px;
}
-nav .logo{
- margin-right:auto;
+nav .start-home,
+a:nth-child(1):hover ~ .animation {
+ width: 200px;
+ left: 0;
+ background-color: #1abc9c;
+}
+nav .start-about,
+a:nth-child(2):hover ~ .animation {
+ width: 200px;
+ left: 200px;
+ background-color: #e74c3c;
}
+nav .start-blog,
+a:nth-child(3):hover ~ .animation {
+ width: 200px;
+ left: 400px;
+ background-color: #3498db;
+}
+