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) diff --git a/src/home.html b/src/home.html index 56244ee..93db763 100644 --- a/src/home.html +++ b/src/home.html @@ -152,6 +152,7 @@

Contributors

  • Ricky Sukma
  • Colin Schindler
  • Sarthak Trivedi
  • +
  • Abi Summers
  • 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 -
    - -
    -
    -