diff --git a/css/hamburger-dumb.css b/css/hamburger-dumb.css
new file mode 100644
index 0000000..6b856c0
--- /dev/null
+++ b/css/hamburger-dumb.css
@@ -0,0 +1,31 @@
+/* Add to existing CSS */
+.hamburger {
+ display: none; /* Hide by default */
+ cursor: pointer;
+ font-size: 30px; /* Adjust based on your design preferences */
+ color: #ffffff; /* Change color as needed */
+}
+
+
+/* Mobile-specific styles */
+
+@media only screen and (max-width: 388px) {
+ .hamburger {
+ display: block;
+ }
+
+ .menu {
+ flex-direction: row;
+ width: 100%;
+ }
+
+ .nav {
+ display: block;
+ text-align: center;
+ padding: 5px;
+ }
+
+ .nav-bar {
+ align-items: flex-start;
+ }
+}
diff --git a/css/nav.css b/css/nav.css
index 978fa98..fa3e0b0 100755
--- a/css/nav.css
+++ b/css/nav.css
@@ -3,14 +3,16 @@
display:flex;
align-items:center;
justify-content: center;
- height:40px;
+ height:80px;
}
-.nav, .nav0{
- color:#ffffff;
- text-decoration:none;
- padding:15px;
+.nav, .nav0 {
+ color: #ffffff;
+ text-decoration: none;
+ padding: 10px 10px; /* Increase horizontal padding */
transition: all .5s ease;
- position : relative;
+ position: relative;
+ flex: auto;
+ flex-wrap: wrap;
}
.nav:hover{
text-shadow:
@@ -25,64 +27,19 @@
left:0;
position: absolute;
background-color:#ffffff;
- transform-origin: bottom;
+ transform-origin: center;
transform: scaleX(0);
transition: transform 0.5s ease;
}
.nav:hover::before{
transform: scaleX(1);
}
-.dot{
- display:inline-block;
- width:10px;
- height:10px;
- border-radius:10px;
- background-color:#000;
- transition: all 0.5s;
- animation-name: blinking;
- animation-duration: 4s;
- animation-iteration-count: infinite;
-}
.nav0:hover{
text-shadow:1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000;
}
.nav0:hover .dot{
box-shadow: 0px 1px #016A70, 1px 1px #016A70;
}
-@keyframes blinking{
- 0%{
- height:2px;
- transform: translateY(-100%);
- }
- 5%{
- height:10px;
- transform: translateY(0%);
- }
- 7%{
- height:2px;
- transform: translateY(-100%);
- }
- 10%{
- height:10px;
- transform: translateY(0%);
- }
- 68%{
- height:10px;
- transform: translateY(0%);
- }
- 70%{
- height:2px;
- transform: translateY(-100%);
- }
- 76%{
- height:10px;
- transform: translateY(0%);
- }
- 100%{
- height:10px;
- transform: translateY(0%);
- }
-}
.main {
color:#000;
display:flex;
@@ -120,70 +77,72 @@
}
-/* Mobile compatibility */
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 485px) {
+
+ .nav, .nav0 {
+
+ padding: 10px 5px; /* Increase horizontal padding */
+
+ }
+
+}
+
+@media only screen and (max-width: 380px) {
+
+ .nav, .nav0 {
+
+ padding: 10px 5px; /* Increase horizontal padding */
+ margin: 0px;
+ }
+
+}
+
+/* Add to existing CSS */
+.hamburger {
+ display: none; /* Hide by default */
+ cursor: pointer;
+ font-size: 30px; /* Adjust based on your design preferences */
+ color: #ffffff; /* Change color as needed */
+}
+
+/* Mobile-specific styles */
+
+@media only screen and (max-width: 340px) {
+ .hamburger {
+ display: flex;
+ padding-left: 10px;
+ }
+
+ .animate{
+ transform:skew(180deg);
+ transition: transform 0.5s ease;
+
+}
+
+.unanimate{
+ transform:skew(180deg);
+ transition: transform 0.5s ease;
+
+}
+
+ .menu {
+ flex-direction: row;
+ width: 100%;
+ }
+
+ .nav {
+ display: flex;
+ text-align: left;
+ padding: 10px;
+ width: fit-content;
+ }
+
.nav-bar {
- flex-direction: column;
align-items: flex-start;
- padding: 10px;
}
- .nav, .nav0 {
- padding: 10px;
- font-size: 14px; /* Adjust font size for smaller screens */
- }
+ .nav::before{
+ transform-origin: left;
+ }
- .nav-bar, .main, .container, .paragraph {
- flex-direction: column;
- align-items: center;
- }
-
- .main {
- font-size: 30px; /* Adjust main section font size */
- }
-
- .paragraph {
- width: 85%; /* Adjust paragraph width */
- }
-}
-
-/* Hamburger menu for smaller screens */
-@media only screen and (max-width: 768px) {
- .hamburger-menu {
- display: block;
- cursor: pointer;
- }
-
- .nav-menu {
- display: none; /* Hide nav menu by default on mobile */
- flex-direction: column;
- align-items: center;
- }
-
- .hamburger-menu.active + .nav-menu {
- display: flex; /* Show menu when hamburger is active */
- }
-}
-
-
-.logo {
- height: 40px; /* Adjust the height to fit your navbar's size */
- width: auto; /* Keeps the logo's aspect ratio intact */
-}
-
-.logo-link {
- display: inline-flex;
- align-items: center;
- position: relative; /* Needed for the positioning of the pseudo-element */
- margin-right: 20px; /* Adjust if you need more space around the divider */
-}
-
-.logo-link::after {
- content: "";
- position: absolute;
- right: -10px; /* Adjust this value based on your specific spacing needs */
- top: 0;
- bottom: 0;
- width: 1px;
- background-color: white; /* Set the color of the divider */
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index f305de3..2093c06 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,69 @@
+
+
+
+