-
Notifications
You must be signed in to change notification settings - Fork 108
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
34,076 changed files
with
6,162,832 additions
and
0 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| ## COLORS LANDING PAGE | ||
| COLORS - Color Palettes for Designers | ||
| <br> | ||
| A React based project made for Designers and Developers to find the right color schemes/palettes/gradients and also make their own. | ||
| <br> | ||
| We provide Color Palette & Gradients for Designers. | ||
| - Thousands of color palettes. | ||
| - Many Color Gradients available. | ||
| - Create your own custom palette. | ||
| - Theme Generator. | ||
| <br> | ||
| Live at: https://colors-dc.netlify.app/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| // NAVBAR TOGGLE: | ||
| const menu = document.querySelector("#mobile-menu"); | ||
| const menuLinks = document.querySelector(".navbar__menu"); | ||
| const navLogo = document.querySelector("#navbar__logo"); | ||
|
|
||
| // Display Mobile Menu | ||
| const mobileMenu = () => { | ||
| menu.classList.toggle("is-active"); | ||
| menuLinks.classList.toggle("active"); | ||
| }; | ||
|
|
||
| menu.addEventListener("click", mobileMenu); | ||
|
|
||
| // Show active menu when scrolling | ||
| const highlightMenu = () => { | ||
| const elem = document.querySelector(".highlight"); | ||
| const homeMenu = document.querySelector("#home-page"); | ||
| const aboutMenu = document.querySelector("#about-page"); | ||
| const servicesMenu = document.querySelector("#services-page"); | ||
| let scrollPos = window.scrollY; | ||
| // console.log(scrollPos); | ||
|
|
||
| // adds the highlight class to my menu items | ||
| if (window.innerWidth > 960 && scrollPos < 600) { | ||
| homeMenu.classList.add("highlight"); | ||
| aboutMenu.classList.remove("highlight"); | ||
| return; | ||
| } else if (window.innerWidth > 960 && scrollPos < 1400) { | ||
| aboutMenu.classList.add("highlight"); | ||
| homeMenu.classList.remove("highlight"); | ||
| servicesMenu.classList.remove("highlight"); | ||
| return; | ||
| } else if (window.innerWidth > 960 && scrollPos < 2345) { | ||
| servicesMenu.classList.add("highlight"); | ||
| aboutMenu.classList.remove("highlight"); | ||
| return; | ||
| } | ||
|
|
||
| if ((elem && window.innerWidth < 960 && scrollPos < 600) || elem) { | ||
| elem.classList.remove("highlight"); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener("scroll", highlightMenu); | ||
| window.addEventListener("click", highlightMenu); | ||
|
|
||
| // close mobile menu when clicking on menu links | ||
| const hideMobileMenu = () => { | ||
| const menuBars = document.querySelector(".is-active"); | ||
| if (window.innerWidth < 760 && menuBars) { | ||
| menu.classList.toggle("is-active"); | ||
| menuLinks.classList.remove("active"); | ||
| } | ||
| }; | ||
|
|
||
| menuLinks.addEventListener("click", hideMobileMenu); | ||
| navLogo.addEventListener("click", hideMobileMenu); |
COLOR%20WEBSITE/colors.PNG){kind=link}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,259 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Colors</title> | ||
| <link rel="icon" href="./svgs/Color palette.svg" /> | ||
| <meta name="author" content="Devraj Chatribin" /> | ||
| <meta | ||
| name="keywords" | ||
| content="Color,Color palette,Palettes,gradients,themes,Devraj, Chatribin, Devraj Chatribin, Devraj Chatribin Portfolio, Web Developer, Designer, Artist " | ||
| /> | ||
| <meta name="robots" content="index, follow" /> | ||
| <!-- Primary Meta Tags --> | ||
| <title>Colors-DC</title> | ||
| <meta name="title" content="Colors-DC" /> | ||
| <meta | ||
| name="description" | ||
| content="We provide color Palettes & gradients. | ||
| Services: Color Palettes, Color Gradients, Custom Palettes, Theme Generator." | ||
| /> | ||
|
|
||
| <!-- Open Graph / Facebook --> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:url" content="https://colors-dc.netlify.app/" /> | ||
| <meta property="og:title" content="Colors-DC" /> | ||
| <meta | ||
| property="og:description" | ||
| content="We provide color Palettes & gradients. | ||
| Services: Color Palettes, Color Gradients, Custom Palettes, Theme Generator." | ||
| /> | ||
| <meta | ||
| property="og:image" | ||
| content="https://colors-dc.netlify.app/colors.png" | ||
| /> | ||
|
|
||
| <!-- Twitter --> | ||
| <meta property="twitter:card" content="summary_large_image" /> | ||
| <meta property="twitter:url" content="https://colors-dc.netlify.app/" /> | ||
| <meta property="twitter:title" content="Colors-DC" /> | ||
| <meta | ||
| property="twitter:description" | ||
| content="We provide color Palettes & gradients. | ||
| Services: Color Palettes, Color Gradients, Custom Palettes, Theme Generator." | ||
| /> | ||
| <meta | ||
| property="twitter:image" | ||
| content="https://colors-dc.netlify.app/colors.png" | ||
| /> | ||
| <!-- CSS Stylesheet --> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| <!-- FONTAWESOME ICONS --> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" | ||
| integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" | ||
| crossorigin="anonymous" | ||
| /> | ||
| </head> | ||
| <body> | ||
| <!-- Navbar Section --> | ||
| <nav class="navbar"> | ||
| <div class="navbar__container"> | ||
| <a href="#home" id="navbar__logo">COLORS</a> | ||
| <div class="navbar__toggle" id="mobile-menu"> | ||
| <span class="bar"></span> | ||
| <span class="bar"></span> | ||
| <span class="bar"></span> | ||
| </div> | ||
| <ul class="navbar__menu"> | ||
| <li class="navbar__item"> | ||
| <a href="#home" class="navbar__links" id="home-page">Home</a> | ||
| </li> | ||
| <li class="navbar__item"> | ||
| <a href="#about" class="navbar__links" id="about-page">About</a> | ||
| </li> | ||
| <li class="navbar__item"> | ||
| <a href="#services" class="navbar__links" id="services-page" | ||
| >Services</a | ||
| > | ||
| </li> | ||
| <li class="navbar__btn"> | ||
| <a href="#sign-up" class="button" id="signup">Explore</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- Hero Section --> | ||
| <div class="hero" id="home"> | ||
| <div class="hero__container"> | ||
| <h1 class="hero__heading">Choose your <span>colors</span></h1> | ||
| <p class="hero__description">Unlimited Choices</p> | ||
| <button class="main__btn"><a href="#">Know more</a></button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- About Section --> | ||
| <div class="main" id="about"> | ||
| <div class="main__container"> | ||
| <div class="main__img--container"> | ||
| <center> | ||
| <div class="main__img--card"> | ||
| <!-- <i class="fas fa-palette"></i> --> | ||
| <img src="svgs/Color palette.svg" alt="COLOR" /> | ||
| </div> | ||
| </center> | ||
| </div> | ||
| <div class="main__content"> | ||
| <h1>What do we do?</h1> | ||
| <h2>We provide color Palettes & Gradients</h2> | ||
| <p>Start working on your website colors right now!</p> | ||
| <button class="main__btn"><a href="#">Get Colors</a></button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Services Section --> | ||
| <div class="services" id="services"> | ||
| <h1>SERVICES</h1> | ||
| <div class="services__wrapper"> | ||
| <div | ||
| class="services__card" | ||
| data-tilt | ||
| data-tilt-glare | ||
| data-tilt-max-glare="0.5" | ||
| > | ||
| <h2>Color Palettes</h2> | ||
| <p>Over 100+ Combinations</p> | ||
| <div class="services__btn"> | ||
| <button>Get Started</button> | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="services__card" | ||
| data-tilt | ||
| data-tilt-glare | ||
| data-tilt-max-glare="0.5" | ||
| > | ||
| <h2>Color Gradients</h2> | ||
| <p>Over 50+ Gradients</p> | ||
| <div class="services__btn"><button>Get Started</button></div> | ||
| </div> | ||
| <div | ||
| class="services__card" | ||
| data-tilt | ||
| data-tilt-glare | ||
| data-tilt-max-glare="0.5" | ||
| > | ||
| <h2>Custom Palette</h2> | ||
| <p>Make your own Palettes</p> | ||
| <div class="services__btn"><button>Get Started</button></div> | ||
| </div> | ||
| <div | ||
| class="services__card" | ||
| data-tilt | ||
| data-tilt-glare | ||
| data-tilt-max-glare="0.5" | ||
| > | ||
| <h2>Theme Generator</h2> | ||
| <p>Infinite colors generated</p> | ||
| <div class="services__btn"><button>Get Started</button></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- In react page use Glare Effect for the color palettes (From Tilt JS website) --> | ||
|
|
||
| <!-- Sign Up Section --> | ||
| <div class="main" id="sign-up"> | ||
| <div class="main__container"> | ||
| <div class="main__content"> | ||
| <h1>Why colors are important</h1> | ||
| <h2>Choose your colors wisely</h2> | ||
| <p> | ||
| Color selection is very important so that the user likes to read | ||
| more on the website. | ||
| </p> | ||
| <button class="main__btn"><a href="#">Explore</a></button> | ||
| </div> | ||
|
|
||
| <div class="main__img--container"> | ||
| <center> | ||
| <div class="main__img--card" id="card-2"> | ||
| <!-- <i class="fas fa-users"></i> --> | ||
| <img src="svgs/color strips.svg" alt="COLOR" /> | ||
| </div> | ||
| </center> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Footer Section --> | ||
| <div class="footer__container"> | ||
| <div class="footer__links"> | ||
| <div class="footer__links--wrapper"> | ||
| <div class="footer__links--items"> | ||
| <h2>About Us</h2> | ||
| <a href="#">How it works</a> | ||
| <a href="#">Testimonials</a> | ||
| <a href="#">Careers</a> | ||
| <a href="#">Terms of Service</a> | ||
| </div> | ||
| <div class="footer__links--items"> | ||
| <h2>Contact Us</h2> | ||
| <a href="#">Contact</a> | ||
| <a href="#">Support</a> | ||
| <a href="#">Destinations</a> | ||
| </div> | ||
| </div> | ||
| <div class="footer__links--wrapper"> | ||
| <div class="footer__links--items"> | ||
| <h2>Videos</h2> | ||
| <a href="#">Submit Video</a> | ||
| <a href="#">Ambassadors</a> | ||
| <a href="#">Agency</a> | ||
| </div> | ||
| <div class="footer__links--items"> | ||
| <h2>Social Media</h2> | ||
| <a href="#">Instagram</a> | ||
| <a href="#">Facebook</a> | ||
| <a href="#">Twitter</a> | ||
| <a href="#">Youtube</a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <section class="social__media"> | ||
| <div class="social__media--wrap"> | ||
| <div class="footer__logo"> | ||
| <a href="/" id="footer__logo">COLORS</a> | ||
| </div> | ||
| <p class="website__rights">© COLOR 2020, All rights reserved.</p> | ||
| <div class="social__icons"> | ||
| <a href="/" class="social__icon--link" target="_blank" | ||
| ><i class="fab fa-facebook"></i | ||
| ></a> | ||
| <a href="/" class="social__icon--link" target="_blank" | ||
| ><i class="fab fa-instagram"></i | ||
| ></a> | ||
| <a href="/" class="social__icon--link" target="_blank" | ||
| ><i class="fab fa-youtube"></i | ||
| ></a> | ||
| <a href="/" class="social__icon--link" target="_blank" | ||
| ><i class="fab fa-twitter"></i | ||
| ></a> | ||
| <a href="/" class="social__icon--link" target="_blank" | ||
| ><i class="fab fa-linkedin"></i | ||
| ></a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
|
||
| <!-- scripts --> | ||
| <script src="app.js"></script> | ||
| <!-- CDN tilt JS --> | ||
| <script src="tilt.js"></script> | ||
| <script src="tilt-gyro.js" crossorigin="anonymous"></script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.