Skip to content

Added new Grayscale template lemme know if you like it #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zatch3301 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added new Grayscale template lemme know if you like it #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Portfolios/Grayscale/assets/img/bg-masthead.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Portfolios/Grayscale/assets/img/bg-signup.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Portfolios/Grayscale/assets/img/demo-image-01.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Portfolios/Grayscale/assets/img/demo-image-02.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Portfolios/Grayscale/assets/img/favicon.ico
View file
Open in desktop
Binary file not shown.
Binary file added Portfolios/Grayscale/assets/img/ipad.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10,366 changes: 10,366 additions & 0 deletions Portfolios/Grayscale/css/styles.css
View file
Open in desktop

Large diffs are not rendered by default.

172 changes: 172 additions & 0 deletions Portfolios/Grayscale/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Gagan Verma</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Gagan Verma</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#projects">Projects</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#signup">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">Welcome</h1>
<h2 class="text-white-50 mx-auto mt-2 mb-5">A highly innovative individual with a keen interest in developing creative ideas.Strong in design and integration with intuitive problem-solving skills.Passionate about implementing and launching new projects. </h2>
<a class="btn btn-primary js-scroll-trigger" href="#about">Get Started</a>
</div>
</div>
</header>
<!-- About-->
<section class="about-section text-center" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-white mb-4">Built with Bootstrap 4</h2>
<p class="text-white-50">
Intractive website made with Bootstrap 4.
</p>
</div>
</div>
<img class="img-fluid" src="assets/img/ipad.png" alt="" />
</div>
</section>
<!-- Projects-->
<section class="projects-section bg-light" id="projects">
<div class="container">
<!-- Featured Project Row-->
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/bg-masthead.jpg" alt="" /></div>
<div class="col-xl-4 col-lg-5">
<div class="featured-text text-center text-lg-left">
<h4>Shoreline</h4>
<p class="text-black-50 mb-0">Grayscale is open source and MIT licensed. This means you can use it for any project - even commercial projects! Download it, customize it, and publish your website!</p>
</div>
</div>
</div>
<!-- Project One Row-->
<div class="row justify-content-center no-gutters mb-5 mb-lg-0">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-01.jpg" alt="" /></div>
<div class="col-lg-6">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-left">
<h4 class="text-white">Misty</h4>
<p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
<hr class="d-none d-lg-block mb-0 ml-0" />
</div>
</div>
</div>
</div>
</div>
<!-- Project Two Row-->
<div class="row justify-content-center no-gutters">
<div class="col-lg-6"><img class="img-fluid" src="assets/img/demo-image-02.jpg" alt="" /></div>
<div class="col-lg-6 order-lg-first">
<div class="bg-black text-center h-100 project">
<div class="d-flex h-100">
<div class="project-text w-100 my-auto text-center text-lg-right">
<h4 class="text-white">Mountains</h4>
<p class="mb-0 text-white-50">Another example of a project with its respective description. These sections work well responsively as well, try this theme on a small screen!</p>
<hr class="d-none d-lg-block mb-0 mr-0" />
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Signup-->
<section class="signup-section" id="signup">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto text-center">
<i class="far fa-paper-plane fa-2x mb-2 text-white"></i>
<h2 class="text-white mb-5">Subscribe to receive updates!</h2>
<form class="form-inline d-flex">
<input class="form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail" type="email" placeholder="Enter email address..." />
<button class="btn btn-primary mx-auto" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</section>
<!-- Contact-->
<section class="contact-section bg-black">
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Address</h4>
<hr class="my-4" />
<div class="small text-black-50">Kharghar, Navi Mumbai 410210</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-envelope text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Email</h4>
<hr class="my-4" />
<div class="small text-black-50"><a href="#!">zatch.3301@gmail.com</a></div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="card py-4 h-100">
<div class="card-body text-center">
<i class="fas fa-mobile-alt text-primary mb-2"></i>
<h4 class="text-uppercase m-0">Phone</h4>
<hr class="my-4" />
<div class="small text-black-50">+91 (916) 727-4084</div>
</div>
</div>
</div>
</div>
<div class="social d-flex justify-content-center">
<a class="mx-2" href="mailto:zatch.3301@gmail.com"><i class="fa fa-envelope"></i></a>
<a class="mx-2" href="https://www.linkedin.com/in/g4g4nv3rm4/"><i class="fab fa-linkedin-in"></i></a>
<a class="mx-2" href="https://github.com/zatch3301"><i class="fab fa-github"></i></a>
</div>
</div>
</section>
<!-- Footer-->
<footer class="footer bg-black small text-center text-white-50"><div class="container">Copyright © Gagan Verma 2020</div></footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
56 changes: 56 additions & 0 deletions Portfolios/Grayscale/js/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*!
* Start Bootstrap - Grayscale v6.0.2 (https://startbootstrap.com/themes/grayscale)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-grayscale/blob/master/LICENSE)
*/
(function ($) {
"use strict"; // Start of use strict

// Smooth scrolling using jQuery easing
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function () {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length
? target
: $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
$("html, body").animate(
{
scrollTop: target.offset().top - 70,
},
1000,
"easeInOutExpo"
);
return false;
}
}
});

// Closes responsive menu when a scroll trigger link is clicked
$(".js-scroll-trigger").click(function () {
$(".navbar-collapse").collapse("hide");
});

// Activate scrollspy to add active class to navbar items on scroll
$("body").scrollspy({
target: "#mainNav",
offset: 100,
});

// Collapse Navbar
var navbarCollapse = function () {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
})(jQuery); // End of use strict