From 8c31e101337881a434b84d4ae695146896adaf87 Mon Sep 17 00:00:00 2001 From: abisummers Date: Mon, 8 Oct 2018 16:36:14 +0200 Subject: [PATCH 1/3] added name to contributors --- src/home.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/home.html b/src/home.html index cd918cd..144a37c 100644 --- a/src/home.html +++ b/src/home.html @@ -118,6 +118,7 @@

Contributors:

  • Ricky Sukma
  • Colin Schindler
  • Sarthak Trivedi
    • +
  • Abi Summers
    • From 55608d8d74cabb7a3f74fcac4f6b599d0a6d899d Mon Sep 17 00:00:00 2001 From: abisummers Date: Tue, 9 Oct 2018 11:15:18 +0200 Subject: [PATCH 2/3] updated README with how to view our non live site --- README.md | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 31edd18..fac8f5e 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,20 @@ Let's have a productive Hacktoberfest. Submit 5 PRs to this account after regist My name is Sudarshan Kamath and I am hosting this repository for the month of October, 2018. The idea is to create a website over the month, about Open-Source Programming. This site is open to all forms of suggestions. Happy contributing! +Iff you want to see what the site looks like you can through github. +All you need to do it click the HTML file you want to view, click the button Raw and then change the url. You need to remove ".githubusercontent" and replace it with just "git" so the link looks like this - https://rawgit.com + +Here is what our homepage looks like! +https://rawgit.com/sudz123/Happy_Hacking/master/src/home.html + # :bookmark: IMPORTANT :bookmark: -Since this repository is gaining some momentum, I expect good grammar in all PRs. I also expect proper comments in the code. The code could be trivial with a small change, that is totally fine. **When making changes to existing files, make sure you do not add more than one feature or change more than one component in a PR!** Also these file descriptions should be helpful: +Since this repository is gaining some momentum, I expect good grammar in all PRs. I also expect proper comments in the code. The code could be trivial with a small change, that is totally fine. **When making changes to existing files, make sure you do not add more than one feature or change more than one component in a PR!** Also these file descriptions should be helpful: -- [*src*](src) contains all the code. -- *.html* files like these should not have css or javascript code ideally. If they do then remove it and add to respective folders. -- [*styles*](src/style) I want all the css files in this folder with proper nomenclature. -- [*Images*](img) I want all images in this within sub-folders in this folder, according to the page they are on. +- [_src_](src) contains all the code. +- _.html_ files like these should not have css or javascript code ideally. If they do then remove it and add to respective folders. +- [_styles_](src/style) I want all the css files in this folder with proper nomenclature. +- [_Images_](img) I want all images in this within sub-folders in this folder, according to the page they are on. - **THE MORE THE STRUCTURED YOUR CODE IS, THE EASIER IT IS FOR ME TO REVIEW, THE HIGHER CHANCES THAT IT WILL BE MERGED**. ## :building_construction: How it works @@ -34,7 +40,7 @@ Create a pull request that will be merged to the main repo. :rotating_light: **Don't forget to add your name to Contributors.md(AN EASY PR)**:rotating_light: -:white_check_mark:*You can check your progress here after every merged PR* : https://hacktoberfest.digitalocean.com/stats +:white_check_mark:_You can check your progress here after every merged PR_ : https://hacktoberfest.digitalocean.com/stats :white_check_mark:Your code will be reviewed and approved. @@ -56,9 +62,8 @@ A few other tutorial links: 1. [Build a website](https://www.w3schools.com/howto/howto_website.asp) 2. [Hosting the website](https://gist.github.com/TylerFisher/6127328) - ## Additional Resources -* [Running HTML pages](./src/README-HTML.md) -* [Styling with CSS](./src/style/README-CSS.md) -* [Functionality with JavaScript](./src/scripts/README-JS.md) +- [Running HTML pages](./src/README-HTML.md) +- [Styling with CSS](./src/style/README-CSS.md) +- [Functionality with JavaScript](./src/scripts/README-JS.md) From 45105f4d7cea45aab4c2b601e33efa045a6c8b17 Mon Sep 17 00:00:00 2001 From: abisummers Date: Tue, 9 Oct 2018 12:07:48 +0200 Subject: [PATCH 3/3] removed unused code and made it beginner friendly --- src/menu-bar.css | 333 ----------------------------------------- src/menu-bar.html | 42 ++---- src/style/menu-bar.css | 19 +++ 3 files changed, 32 insertions(+), 362 deletions(-) delete mode 100644 src/menu-bar.css create mode 100644 src/style/menu-bar.css diff --git a/src/menu-bar.css b/src/menu-bar.css deleted file mode 100644 index 2b2bde5..0000000 --- a/src/menu-bar.css +++ /dev/null @@ -1,333 +0,0 @@ -/* Primary style */ - -@font-face { - font-family: "Product Sans"; - src: url("fonts/Product Sans.ttf"); -} - -*, -*::after, -*::before { - box-sizing: border-box; -} - -html { - font-size: 62.5%; - overflow-x: hidden; -} - -body { - font-size: 1.6rem; - font-family: "Source Sans Pro", sans-serif; - color: #003c5d; - background-color: #ffffff; - scroll-behavior: smooth; -} - -a { - color: rgba(19, 23, 28, 0.65); - text-decoration: none !important; -} -/* -------------------------------- - -Stretchy Nav style - common to: - - basic navigation - - add-content navigation - - edit-content navigation - --------------------------------- */ -.cd-stretchy-nav { - position: fixed; - z-index: 2; - top: 40px; - right: 2%; - pointer-events: none; -} -.cd-stretchy-nav .stretchy-nav-bg { - /* this is the stretching navigation background */ - position: absolute; - z-index: 1; - top: 0; - right: 0; - width: 60px; - height: 60px; - border-radius: 30px; - background: rgba(19, 23, 28, 0.65); - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); - -webkit-transition: height 0.2s, box-shadow 0.2s; - -moz-transition: height 0.2s, box-shadow 0.2s; - transition: height 0.2s, box-shadow 0.2s; -} -.cd-stretchy-nav.nav-is-visible { - pointer-events: auto; -} -.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg { - height: 100%; - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); -} - -.cd-nav-trigger { - position: absolute; - z-index: 3; - top: 0; - right: 0; - height: 60px; - width: 60px; - border-radius: 50%; - /* replace text with image */ - overflow: hidden; - white-space: nowrap; - color: transparent; - pointer-events: auto; -} -.cd-nav-trigger span, -.cd-nav-trigger span::after, -.cd-nav-trigger span::before { - /* this is the hamburger icon */ - position: absolute; - width: 16px; - height: 2px; - background-color: #ffffff; -} -.cd-nav-trigger span { - /* middle line of the hamburger icon */ - left: 50%; - top: 50%; - bottom: auto; - right: auto; - -webkit-transform: translateX(-50%) translateY(-50%); - -moz-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - -o-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); - -webkit-transition: background-color 0.2s; - -moz-transition: background-color 0.2s; - transition: background-color 0.2s; -} -.cd-nav-trigger span::after, -.cd-nav-trigger span::before { - /* top and bottom lines of the hamburger icon */ - content: ""; - top: 0; - left: 0; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transition: -webkit-transform 0.2s; - -moz-transition: -moz-transform 0.2s; - transition: transform 0.2s; -} -.cd-nav-trigger span::before { - -webkit-transform: translateY(-6px); - -moz-transform: translateY(-6px); - -ms-transform: translateY(-6px); - -o-transform: translateY(-6px); - transform: translateY(-6px); -} -.cd-nav-trigger span::after { - -webkit-transform: translateY(6px); - -moz-transform: translateY(6px); - -ms-transform: translateY(6px); - -o-transform: translateY(6px); - transform: translateY(6px); -} -.no-touch .cd-nav-trigger:hover ~ .stretchy-nav-bg { - box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); -} -.nav-is-visible .cd-nav-trigger span { - background-color: transparent; -} -.nav-is-visible .cd-nav-trigger span::before { - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - transform: rotate(-45deg); -} -.nav-is-visible .cd-nav-trigger span::after { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); -} - -.cd-stretchy-nav ul { - position: relative; - z-index: 2; - padding: 60px 0 0; - visibility: hidden; - -webkit-transition: visibility 0.3s; - -moz-transition: visibility 0.3s; - transition: visibility 0.3s; - text-align: right; -} -.cd-stretchy-nav ul a { - position: relative; - display: block; - height: 50px; - line-height: 50px; - padding: 0 calc(1em + 60px) 0 1em; - color: rgba(255, 255, 255, 0.7); - font-size: 1.4rem; - -webkit-transition: color 0.2s; - -moz-transition: color 0.2s; - transition: color 0.2s; -} -.cd-stretchy-nav ul a::after { - /* navigation item icons */ - content: ""; - position: absolute; - height: 16px; - width: 16px; - right: 22px; - top: 50%; - -webkit-transform: translateY(-50%) scale(0); - -moz-transform: translateY(-50%) scale(0); - -ms-transform: translateY(-50%) scale(0); - -o-transform: translateY(-50%) scale(0); - transform: translateY(-50%) scale(0); - opacity: 0.6; - background: url(../img/cd-sprite-1.svg) no-repeat 0 0; -} -.cd-stretchy-nav ul a::before { - /* line visible next to the active navigation item */ - content: ""; - position: absolute; - width: 3px; - height: 16px; - top: 50%; - right: 60px; - -webkit-transform: translateX(3px) translateY(-50%) scaleY(0); - -moz-transform: translateX(3px) translateY(-50%) scaleY(0); - -ms-transform: translateX(3px) translateY(-50%) scaleY(0); - -o-transform: translateX(3px) translateY(-50%) scaleY(0); - transform: translateX(3px) translateY(-50%) scaleY(0); - background-color: #0a9581; -} -.cd-stretchy-nav ul li:first-of-type a::after { - /* change custom icon using image sprites */ - background-position: -32px 0; -} -.cd-stretchy-nav ul li:nth-of-type(2) a::after { - background-position: -64px 0; -} -.cd-stretchy-nav ul li:nth-of-type(3) a::after { - background-position: -48px 0; -} -.cd-stretchy-nav ul li:nth-of-type(4) a::after { - background-position: 0 0; -} -.cd-stretchy-nav ul li:nth-of-type(5) a::after { - background-position: -16px 0; -} -.cd-stretchy-nav ul li:nth-of-type(6) a::after { - background-position: -80px 0; -} -.cd-stretchy-nav ul span { - /* navigation item labels */ - display: block; - opacity: 0; - -webkit-transform: translateX(-25px); - -moz-transform: translateX(-25px); - -ms-transform: translateX(-25px); - -o-transform: translateX(-25px); - transform: translateX(-25px); -} - -.cd-stretchy-nav.nav-is-visible ul { - visibility: visible; -} -.cd-stretchy-nav.nav-is-visible ul a::after { - /* navigation item icons */ - -webkit-transform: translateY(-50%) scale(1); - -moz-transform: translateY(-50%) scale(1); - -ms-transform: translateY(-50%) scale(1); - -o-transform: translateY(-50%) scale(1); - transform: translateY(-50%) scale(1); - -webkit-animation: scaleIn 0.15s backwards; - -moz-animation: scaleIn 0.15s backwards; - animation: scaleIn 0.15s backwards; - -webkit-transition: opacity 0.2s; - -moz-transition: opacity 0.2s; - transition: opacity 0.2s; -} -.cd-stretchy-nav.nav-is-visible ul a.active { - color: #ffffff; -} -.cd-stretchy-nav.nav-is-visible ul a.active::after { - opacity: 1; -} -.cd-stretchy-nav.nav-is-visible ul a.active::before { - -webkit-transform: translateX(3px) translateY(-50%) scaleY(1); - -moz-transform: translateX(3px) translateY(-50%) scaleY(1); - -ms-transform: translateX(3px) translateY(-50%) scaleY(1); - -o-transform: translateX(3px) translateY(-50%) scaleY(1); - transform: translateX(3px) translateY(-50%) scaleY(1); - -webkit-transition: -webkit-transform 0.15s 0.3s; - -moz-transition: -moz-transform 0.15s 0.3s; - transition: transform 0.15s 0.3s; -} -.cd-stretchy-nav.nav-is-visible ul span { - opacity: 1; - -webkit-transform: translateX(0); - -moz-transform: translateX(0); - -ms-transform: translateX(0); - -o-transform: translateX(0); - transform: translateX(0); - -webkit-animation: slideIn 0.15s backwards; - -moz-animation: slideIn 0.15s backwards; - animation: slideIn 0.15s backwards; - -webkit-transition: -webkit-transform 0.2s; - -moz-transition: -moz-transform 0.2s; - transition: transform 0.2s; -} -.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover { - color: #ffffff; -} -.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover::after { - opacity: 1; -} -.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover span { - -webkit-transform: translateX(-5px); - -moz-transform: translateX(-5px); - -ms-transform: translateX(-5px); - -o-transform: translateX(-5px); - transform: translateX(-5px); -} -.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after, -.cd-stretchy-nav.nav-is-visible ul li:first-of-type span { - -webkit-animation-delay: 0.05s; - -moz-animation-delay: 0.05s; - animation-delay: 0.05s; -} -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) a::after, -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span { - -webkit-animation-delay: 0.1s; - -moz-animation-delay: 0.1s; - animation-delay: 0.1s; -} -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) a::after, -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span { - -webkit-animation-delay: 0.15s; - -moz-animation-delay: 0.15s; - animation-delay: 0.15s; -} -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) a::after, -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) span { - -webkit-animation-delay: 0.2s; - -moz-animation-delay: 0.2s; - animation-delay: 0.2s; -} -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) a::after, -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) span { - -webkit-animation-delay: 0.25s; - -moz-animation-delay: 0.25s; - animation-delay: 0.25s; -} - -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(6) a::after, -.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(6) span { - -webkit-animation-delay: 0.3s; - -moz-animation-delay: 0.3s; - animation-delay: 0.3s; -} diff --git a/src/menu-bar.html b/src/menu-bar.html index 541db06..1ef0761 100644 --- a/src/menu-bar.html +++ b/src/menu-bar.html @@ -5,48 +5,32 @@ - - - - - - - - - - - + Happy hacking -
    - -
    -
    -