diff --git a/assets/css/styles.css b/assets/css/styles.css index 4c53ee14b..350b48e83 100755 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,19 +1,47 @@ body{ font-size:16px; color: #dfdfdf; + background-color: #063647; } + +h3{ + padding-bottom:15px; +} + section{ padding-top: 3rem; padding-bottom: 6rem; } -h3{ - padding-bottom:15px; +.section-1 { + background: #063647; +} + +.section-2 { + background-color: #052D3D; +} + +.section-3 { + background-color: #0E282E; +} + +.section-4 { + background-color: #6589A9; + padding: 1.5rem 1.5rem 1.5rem; +} + +a.nav-item { + color: #dfdfdf; +} + +a.nav-item:hover { + color: #fff; } .avatar{ height:200px; - border-radius: 50%; + border-radius: 50%; + margin-top: 30px; } .intro-description{ @@ -23,7 +51,7 @@ h3{ .social-container img{ max-width:100%; max-height:175px; - padding-bottom:15px; + margin-bottom:15px; } .project-figure { @@ -41,20 +69,12 @@ h3{ border: 2px solid rgba(7, 59, 79, 0.5); } -.section-2 { - background: #063647; -} - -.section-3 { - background-color: #052D3D; -} - -.section-4 { - background-color: #0E282E; +.section-4 a { + color: #fff; } -.section-5 { - background-color: #6589A9; +.section-4 a:hover { + color: #dfdfdf; } .title { @@ -74,3 +94,26 @@ h3{ #contact { position: relative; } + +.intro { + text-align: justify; + width: 80%; + margin: 0 auto; +} + +.love { + color: #fff; +} + +.void-background { + background-color: transparent; +} + +@media screen and (max-width: 768px) { + .nav-menu { + background-color: #063647; + } + .nav-toggle:hover { + background-color: transparent; + } +} diff --git a/assets/img/box.png b/assets/img/box.png deleted file mode 100755 index a39be9b3e..000000000 Binary files a/assets/img/box.png and /dev/null differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100755 index 000000000..8988a1433 Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/phone.jpeg b/assets/img/phone.jpeg new file mode 100644 index 000000000..0f9110cd7 Binary files /dev/null and b/assets/img/phone.jpeg differ diff --git a/assets/img/profile.jpg b/assets/img/profile.jpg deleted file mode 100755 index 523b9eba8..000000000 Binary files a/assets/img/profile.jpg and /dev/null differ diff --git a/assets/img/watch.jpg b/assets/img/watch.jpg new file mode 100644 index 000000000..5b27e6a2a Binary files /dev/null and b/assets/img/watch.jpg differ diff --git a/controller.js b/controller.js index f0ebb8a6d..2b14a68ac 100755 --- a/controller.js +++ b/controller.js @@ -1,9 +1,11 @@ -var navigation_elems = document.querySelectorAll(".nav a"); - -for(var i = 0 ; i < navigation_elems.length ; i++){ - navigation_elems[i].addEventListener("click",function(event){ - document.querySelector(".nav .active").classList.remove("active"); - this.parentElement.classList.add("active"); - }) -} +window.onload = () => { + const navMenu = document.querySelector('.nav-menu'); + const navItems = document.querySelectorAll('.nav-item'); + const hamburger = document.querySelector('.nav-toggle'); + + const toggle = e => e.classList.toggle('is-active'); + const toggleNav = ({ target }) => Array.from(navMenu.classList).includes('is-active') ? toggle(navMenu) : null; + hamburger.addEventListener('click', () => toggle(navMenu, 'is-active')); + Array.from(navItems).forEach(e => e.addEventListener('click', toggleNav)); +} diff --git a/index.html b/index.html index ffee76034..634eeae3c 100755 --- a/index.html +++ b/index.html @@ -10,47 +10,41 @@ + -