diff --git a/website/about.html b/about.html similarity index 96% rename from website/about.html rename to about.html index a2e11f3..befbe42 100644 --- a/website/about.html +++ b/about.html @@ -1,27 +1,27 @@ - - - - - - - Portofolio | Ayaz Zafar - - - -
-

AyazZafar

- - -
- -

About

- - + + + + + + + Portofolio | Ayaz Zafar + + + +
+

AyazZafar

+ + +
+ +

About

+ + \ No newline at end of file diff --git a/website/contact.html b/contact.html similarity index 96% rename from website/contact.html rename to contact.html index 9af88be..29368ad 100644 --- a/website/contact.html +++ b/contact.html @@ -1,27 +1,27 @@ - - - - - - - Portofolio | Ayaz Zafar - - - -
-

AyazZafar

- - -
- -

Contact

- - + + + + + + + Portofolio | Ayaz Zafar + + + +
+

AyazZafar

+ + +
+ +

Contact

+ + \ No newline at end of file diff --git a/website/css/main.css b/css/main.css similarity index 93% rename from website/css/main.css rename to css/main.css index e6893d1..888322a 100644 --- a/website/css/main.css +++ b/css/main.css @@ -1,170 +1,171 @@ - -*, *::before, *::after { - box-sizing: border-box; -} - -body { -background-color: black; -margin-left: 15rem; -margin-right: 15rem; -margin-top: 0.5rem; -} - -.h1-ayaz { - color: white; - text-transform: uppercase; - display: flex; - align-items: center; - text-shadow: 0 0 2px red; -} - -h1 span { - color: red; - font-weight: bold; -} - -.main-nav { - display: flex; - justify-content: space-between; - align-items: center; - text-decoration: none; - margin: 0; - padding: 0; - list-style: none; -} - -.main-nav ul{ - display: flex; - margin: 0; - padding: 0; - list-style: none; - font-size: 20px; -} - -.main-nav a{ - text-decoration: none; - color: white; - padding: 1rem; - text-shadow: 0 0 2px red; -} - -.main-nav a:hover{ - color: red; -} - -.main-header { - display: flex; - justify-content: space-between; - align-items: center; -} - -.brand-name { - display: flex; - align-items: center; - justify-content: space-between; - text-decoration: none; -} - -.h1-title { - color: white; - text-align: center; - margin-top: 50px; - text-transform: uppercase; - text-shadow: 0 0 2px red; -} - - - - -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); - -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -ul { - list-style: none; - height: 100%; - display: flex; - align-items: center; - justify-content: space-between; -} - -ul a { - color: white; - text-shadow: 0 0 2px red; - text-decoration: none; -} - -ul li { - padding: 5px; - margin-left: 10px; -} - -ul li:hover { - transform: scale(1.1); - transition: 0.3s; - color: red; -} - - -#hamburger-icon { - margin: auto 0; - display: none; - cursor: pointer; -} - -#hamburger-icon div { - width: 35px; - height: 3px; - background-color: white; - margin: 6px 0; - transition: 0.4s; -} - -.open .bar1 { - -webkit-transform: rotate(-45deg) translate(-6px, 6px); - transform: rotate(-45deg) translate(-6px, 6px); - -} - -.open .bar2 { - opacity: 0; -} - -.open .bar3 { - -webkit-transform: rotate(45deg) translate(-6px, -8px); - transform: rotate(45deg) translate(-6px, -8px); -} - -.open .mobile-menu { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; -} - -.mobile-menu { - display: none; - position: absolute; - top: 50px; - left: 0; - height: calc(100vh - 50px); - width: 100%; -} - -.mobile-menu li { - margin-bottom: 10px; -} - -@media only screen and (max-width: 888px) { - .main-nav { - display: none; - } - - #hamburger-icon { - display: block; - } + +*, *::before, *::after { + box-sizing: border-box; +} + +body { +background-color: black; +margin-left: 15rem; +margin-right: 15rem; +margin-top: 0.5rem; +} + +.h1-ayaz { + color: white; + text-transform: uppercase; + display: flex; + align-items: center; + text-shadow: 0 0 2px red; +} + +h1 span { + color: red; + font-weight: bold; +} + +.main-nav { + display: flex; + justify-content: space-between; + align-items: center; + text-decoration: none; + margin: 0; + padding: 0; + list-style: none; +} + +.main-nav ul{ + display: flex; + margin: 0; + padding: 0; + list-style: none; + font-size: 20px; +} + +.main-nav a{ + text-decoration: none; + color: white; + padding: 1rem; + text-shadow: 0 0 2px red; +} + +.main-nav a:hover{ + color: red; +} + +.main-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.brand-name { + display: flex; + align-items: center; + justify-content: space-between; + text-decoration: none; +} + +.h1-title { + color: white; + text-align: center; + margin-top: 50px; + text-transform: uppercase; + text-shadow: 0 0 2px red; +} + + + + +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +ul { + list-style: none; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + +ul a { + color: white; + text-shadow: 0 0 2px red; + text-decoration: none; + font-size: large; +} + +ul li { + padding: 5px; + margin-left: 10px; +} + +ul li:hover { + transform: scale(1.1); + transition: 0.3s; + color: red; +} + + +#hamburger-icon { + margin: auto 0; + display: none; + cursor: pointer; +} + +#hamburger-icon div { + width: 35px; + height: 3px; + background-color: white; + margin: 6px 0; + transition: 0.4s; +} + +.open .bar1 { + -webkit-transform: rotate(-45deg) translate(-6px, 6px); + transform: rotate(-45deg) translate(-6px, 6px); + +} + +.open .bar2 { + opacity: 0; +} + +.open .bar3 { + -webkit-transform: rotate(45deg) translate(-6px, -8px); + transform: rotate(45deg) translate(-6px, -8px); +} + +.open .mobile-menu { + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; +} + +.mobile-menu { + display: none; + position: absolute; + top: 50px; + left: 0; + height: calc(100vh - 50px); + width: 100%; +} + +.mobile-menu li { + margin-bottom: 10px; +} + +@media only screen and (max-width: 888px) { + .main-nav { + display: none; + } + + #hamburger-icon { + display: block; + } } \ No newline at end of file diff --git a/website/images/hero.jpg b/images/hero.jpg similarity index 100% rename from website/images/hero.jpg rename to images/hero.jpg diff --git a/website/index.html b/index.html similarity index 96% rename from website/index.html rename to index.html index b9c5449..4efaf6e 100644 --- a/website/index.html +++ b/index.html @@ -1,49 +1,49 @@ - - - - - - - Home | Ayaz Zafar - - - - -
-

AyazZafar

- - -
-
-
-
- -
-
- - - - - - - - - - - - - - + + + + + + + Home | Ayaz Zafar + + + + +
+

AyazZafar

+ + +
+
+
+
+ +
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/js/main.js b/js/main.js similarity index 97% rename from website/js/main.js rename to js/main.js index cb04ef0..4cddf66 100644 --- a/website/js/main.js +++ b/js/main.js @@ -1,3 +1,3 @@ -function toggleMobileMenu(menu) { - menu.classList.toggle('open'); +function toggleMobileMenu(menu) { + menu.classList.toggle('open'); } \ No newline at end of file diff --git a/website/portofolio.html b/portofolio.html similarity index 96% rename from website/portofolio.html rename to portofolio.html index e26d69c..54ca4e5 100644 --- a/website/portofolio.html +++ b/portofolio.html @@ -1,27 +1,27 @@ - - - - - - - Portofolio | Ayaz Zafar - - - -
-

AyazZafar

- - -
- -

Portofolio

- - + + + + + + + Portofolio | Ayaz Zafar + + + +
+

AyazZafar

+ + +
+ +

Portofolio

+ + \ No newline at end of file