From ef091abb61af996a85ec014164cbb6a050985e68 Mon Sep 17 00:00:00 2001 From: Mayuresh Kaulwar Date: Thu, 27 Oct 2022 17:24:49 +0530 Subject: [PATCH 1/5] Added navbar component --- assets/css/styles.css | 163 ++++++++++++++++++++++++++++++++++++++++++ assets/js/app.js | 5 ++ index.html | 15 ++++ 3 files changed, 183 insertions(+) diff --git a/assets/css/styles.css b/assets/css/styles.css index cd23631..493969e 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,5 +1,168 @@ /* Edo Font */ @import url("http://fonts.cdnfonts.com/css/edo"); +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; +} + +.navbar { + display: flex; + position: relative; + justify-content: space-between; + align-items: center; + background-color: #333; + color: white; +} + +.brand-title { + font-size: 1.5rem; + margin: .5rem; +} + +.navbar-links { + height: 100%; +} + +.navbar-links ul { + display: flex; + margin: 0; + padding: 0; +} + +.navbar-links li { + list-style: none; +} + +.navbar-links li a { + display: block; + text-decoration: none; + color: white; + padding: 1rem; +} + +.navbar-links li:hover { + background-color: #555; +} + +.toggle-button { + position: absolute; + top: .75rem; + right: 1rem; + display: none; + flex-direction: column; + justify-content: space-between; + width: 30px; + height: 21px; +} + +.toggle-button .bar { + height: 3px; + width: 100%; + background-color: white; + border-radius: 10px; +} + +@media (max-width: 800px) { + .navbar { + flex-direction: column; + align-items: flex-start; + } + + .toggle-button { + display: flex; + } + + .navbar-links { + display: none; + width: 100%; + } + + .navbar-links ul { + width: 100%; + flex-direction: column; + } + + .navbar-links ul li { + text-align: center; + } + + .navbar-links ul li a { + padding: .5rem 1rem; + } + + .navbar-links.active { + display: flex; + } +} + + + + + + + + + + + + + + +/* Background Styles Only */ + +@import url('https://fonts.googleapis.com/css?family=Raleway'); + +* { + font-family: Raleway; +} + +html { + background-color: #DFDFDF; +} + +.side-links { +position: absolute; +bottom: 15px; +right: 15px; +} + +.side-link { +display: flex; +align-items: center; +justify-content: center; +text-decoration: none; +margin-bottom: 10px; +color: white; +width: 180px; +padding: 10px 0; +border-radius: 10px; +} + +.side-link-youtube { +background-color: red; +} + +.side-link-twitter { +background-color: #1DA1F2; +} + +.side-link-github { +background-color: #6e5494; +} + +.side-link-text { +margin-left: 10px; +font-size: 18px; +} + +.side-link-icon { +color: white; +font-size: 30px; +} .bg-img { background-image: url("../img/Background Image.jpg"); diff --git a/assets/js/app.js b/assets/js/app.js index 8b13789..5788a0a 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1 +1,6 @@ +const toggleButton = document.getElementsByClassName('toggle-button')[0] +const navbarLinks = document.getElementsByClassName('navbar-links')[0] +toggleButton.addEventListener('click', () => { + navbarLinks.classList.toggle('active') +}) diff --git a/index.html b/index.html index ced9e60..b81232f 100644 --- a/index.html +++ b/index.html @@ -72,6 +72,21 @@ href="assets/img/CALCULATOR.png" alt="CALCULATOR" /> + From dde0b5428d303cc3fef4304030898c0b1cb155a8 Mon Sep 17 00:00:00 2001 From: Mayuresh Kaulwar Date: Sun, 30 Oct 2022 20:44:09 +0530 Subject: [PATCH 2/5] changed font to original --- assets/css/styles.css | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 493969e..c15fa86 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,8 +1,5 @@ -/* Edo Font */ -@import url("http://fonts.cdnfonts.com/css/edo"); -* { - box-sizing: border-box; -} + + body { margin: 0; From 06b9f31d7e9a97bf7a99a55dbc437d06fbfa664d Mon Sep 17 00:00:00 2001 From: Mayuresh Kaulwar Date: Mon, 31 Oct 2022 12:33:28 +0530 Subject: [PATCH 3/5] added edo font --- assets/css/styles.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 38b309b..d3ff8bd 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,4 +1,5 @@ - +/* Edo Font */ +@import url("http://fonts.cdnfonts.com/css/edo"); body { From a0a0edbb15f2dbad3e348e5db67f8a52bc9e3bc9 Mon Sep 17 00:00:00 2001 From: Mayuresh Kaulwar Date: Mon, 31 Oct 2022 20:11:27 +0530 Subject: [PATCH 4/5] changed navbar text alignment --- assets/css/styles.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 611187e..31bd717 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -9,16 +9,19 @@ body { .navbar { display: flex; + position: relative; justify-content: space-between; align-items: center; background-color: #333; color: white; + } .brand-title { + font-size: 1.5rem; - margin: .5rem; + margin: 3rem; } .navbar-links { From a1893813fc3f1705016f1745b7acf75b8fad01e7 Mon Sep 17 00:00:00 2001 From: YOSHITHA RATHNAYAKE Date: Mon, 31 Oct 2022 22:56:32 +0530 Subject: [PATCH 5/5] Updated --- assets/css/styles.css | 68 +++++++++++-------------------------------- 1 file changed, 17 insertions(+), 51 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index a47c803..5b9532b 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,25 +1,36 @@ /* Edo Font */ @import url("http://fonts.cdnfonts.com/css/edo"); +.bg-img { + background-image: url("../img/Background Image.jpg"); + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} -body { - margin: 0; - padding: 0; +.title { + color: #26eab9; + display: flex; + align-items: center; + justify-content: center; + margin: 10vh auto; + font-size: 30px; + font-family: "Edo"; + font-style: italic; + font-size: 4rem; } .navbar { display: flex; - position: relative; justify-content: space-between; align-items: center; background-color: #333; color: white; - } .brand-title { - font-size: 1.5rem; margin: 3rem; } @@ -100,31 +111,6 @@ body { } } - - - - - - - - - - - - - -/* Background Styles Only */ - -@import url('https://fonts.googleapis.com/css?family=Raleway'); - -* { - font-family: Raleway; -} - -html { - background-color: #DFDFDF; -} - .side-links { position: absolute; bottom: 15px; @@ -165,26 +151,6 @@ color: white; font-size: 30px; } -.bg-img { - background-image: url("../img/Background Image.jpg"); - background-position: center; - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; -} - -.title { - color: #26eab9; - display: flex; - align-items: center; - justify-content: center; - margin: 10vh auto; - font-size: 30px; - font-family: "Edo"; - font-style: italic; - font-size: 4rem; -} - .paragraph { background-color: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(50px);