Skip to content

Instantly share code, notes, and snippets.

@devmnj

devmnj/index.html

Created July 13, 2022 06:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save devmnj/b8e1229e5a972d5a8f799e91426a0169 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devmnj/b8e1229e5a972d5a8f799e91426a0169 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio
Raw
index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="fonts/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" >
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<a class="navbar-brand" href="#page-top">Ritu Verma</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#services">Projects</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<h1 class="brand-heading text-center">Hello World</h1>
<p class="intro-text text-center"> Get ready to explore my world</p>
<div class="arrow bounce">
<a class= "smoothScroll" href = "#about"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></a>
</div>
<!-- <div class="below">
</div> -->
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Freelance UI / UX DEVELOPER</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p align = "justify">
I've been working as a <strong>freelance front end developer and user experience designer.</strong>
<p align = "justify">I specialize in Front End technologies, tools and good practices with emphasis on User Experience. I can do most of the UX tasks as well.</p>
<p align = "justify">I love to ensure best practices such as Unit Testing, Code Reviews, and Front End Architecture. I also like to play with Algorithms in my free time.</p>
<p align = "justify">I write semantic, modular front end code using <STRONG>HTML5, CSS3, JAVASCRIPT, JQUERY, BOOTSTRAP and W3C coding practices</STRONG></p>
<p align = "justify">I develop for <strong>cross-platform experiences mobile, tablet, desktop.</strong>
I incorporate UX Design and usability best practices in code I write
I have some experience working with UX tools, such as: <strong>Personas, Scenarios, Sitemaps, and Wireframes.</strong>
</p>
</div>
<div class="col-sm-6">
<img class="img-responsive img-circle"src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835496/rits_vkl4cb.jpg" alt="picture">
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>PROJECTS</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
Website for Android App
</div>
</div>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835143/Capture1_-_Large_nonk2a.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
Form
<!--<i class="fa fa-search-plus fa-3x"></i>-->
</div>
</div>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835143/Capture2_-_Large_bk9mb4.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
Gym Website
<!--<i class="fa fa-search-plus fa-3x"></i>-->
</div>
</div>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835145/Capture3-Large_pbap4n.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
<div class="caption">
<div class="caption-content">
Sample
</div>
</div>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835145/Capture4_-_Large_yxzeof.png" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal5" class="portfolio-link">
<div class="caption nohigh">
<div class="caption-content">
</div>
</div>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835146/coming_soon_by_salam_sol_pzuoti.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#portfolioModal6" class="portfolio-link" >
<div class="caption nohigh">
<div class="caption-content">
<!--<i class="fa fa-search-plus fa-3x"></i>-->
</div>
</div>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835146/coming_soon_by_salam_sol_pzuoti.jpg" class="img-responsive" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact</h1>
<h4><span class="glyphicon glyphicon-map-marker"></span> My Location is Chicago - a beautiful city!!</h4>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d380513.7260790933!2d-88.01303704660626!3d41.833390807182916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e2c3cd0f4cbed%3A0xafe0a6ad09c0c000!2sChicago%2C+IL!5e0!3m2!1sen!2sus!4v1493756223623" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<a href="" class="button"><span>Resume</span></a>
</div>
</div>
</div>
</section>
<!-- Modals -->
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>P3 Labs Website</h2>
<br>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835143/Capture1_-_Large_nonk2a.png" class="img-responsive img-centered" alt="">
<p>I developed this website for P3 Labs from scratch, Its fully Responsive<!-- .<a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. --></p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="#">P3 Labs.Inc</a>
</strong>
</li>
<li>Date:
<strong>June 2016</a>
</strong>
</li>
<li>Service:
<strong>Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Form for P3 Labs Website</h2>
<br>
<img style='border:1px solid #a8a8a8'src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835143/Capture2_-_Large_bk9mb4.png" class="img-responsive img-centered" alt="">
<p>I developed this website for P3 Labs from scratch, Its fully Responsive. This is a screenshot of a form for the same website.</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="#">P3 Labs Inc.</a>
</strong>
</li>
<li>Date:
<strong>June 2016</a>
</strong>
</li>
<li>Service:
<strong>Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Gym Website</h2>
<br>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835145/Capture3-Large_pbap4n.png" class="img-responsive img-centered" alt="">
<p>I developed this website for my friend, its fully responsive.</p>
<ul class="list-inline item-details">
<li>Client:
<strong><a href="#">Friend</a>
</strong>
</li>
<li>Date:
<strong>Jan 2016<a href="https://startbootstrap.com">April 2014</a>
</strong>
</li>
<li>Service:
<strong>Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Sample</h2>
<br>
<img src="https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835145/Capture4_-_Large_yxzeof.png" class="img-responsive img-centered" alt="">
<p>I developed this website for fun!</p>
<ul class="list-inline item-details">
<li>Date:
<strong>April 2016</a>
</strong>
</li>
<li>Service:
<strong>Web Development</a>
</strong>
</li>
</ul>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>Location</h3>
<p>Chicago,IL</p>
</div>
<div class="footer-col col-md-4">
<h3>Around the Web</h3>
<ul class="list-inline">
<li>
<a href="https://www.facebook.com/ritu.verma.775" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
</li>
<li>
<a href="https://plus.google.com/u/0/108044657669330680476/posts" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
</li>
<li>
<a href="https://twitter.com/RituSkVerma?lang=en" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/ritu-verma-b0ab4587?trk=hp-identity-name" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
</li>
</ul>
</div>
<div class="footer-col col-md-4">
<h3>About Me</h3>
<p>I love to code</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Coded with <i class="fa fa-fw fa-heart fa-spin" style = "color:red;font-size:24px;"></i> by RITU
</div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</body>
Raw
script.js
// jQuery for page scrolling feature - requires jQuery Easing plugin
function collapseNavbar() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
$(window).scroll(collapseNavbar);
$(document).ready(collapseNavbar);
$(function() {
$('body').on('click', '.page-scroll a', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
// Bouncing arrow bottom of full screen
// Different arrow choices from Font Awesome
// Fades away as you scroll down
$(window).scroll(function(){
$(".arrow").css("opacity", 1 - $(window).scrollTop() / 250);
//250 is fade pixels
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top'
})
$(function() {
// This will select everything with the class smoothScroll
// This should prevent problems with carousel, scrollspy, etc...
$('.smoothScroll').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
}, 1500); // The number here represents the speed of the scroll in milliseconds
return false;
}
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Raw
style.css
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
@import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20px;
width: 40px;
height: 60px; /*change with size of arrow to make sit on bottom */
/* background-image: url(); */
/* background-size: contain; */
}
.bounce {
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
i {
display: block;
color: #fff;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
.btn-social {
display: inline-block;
width:50px;
height:50px;
font-size: 40px;
}
.btn-default:hover, .btn-default:active, .btn-default:visited {
background-color: gray !important;
}
.portfolio-modal .modal-content i{
color:#939393;
}
/* .section {
width: 100%;
height: 100%;
/*padding-top:50px;
} */
iframe {
width:100%;
height:500px;
border:6px solid gray;
}
.navbar-custom {
margin-bottom: 0;
/*text-transform: uppercase;*/
font-family: 'Montserrat',"Helvetica Neue",Helvetica,Arial,sans-serif;
}
/**recently added*************/
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
outline: 0;
background-color: transparent;
}
.navbar-custom .nav li.active {
outline: 0;
}
.navbar-custom .nav li.active a {
background-color: rgba(255,255,255,.3);
}
.navbar-custom .nav li.active a:hover {
color: #fff;
}
/*************boundary ends here*************/
.navbar-custom a {
color: #fff;
font-size: 24px;
}
.navbar-custom .nav li a:hover {
outline: 0;
color: rgba(255,255,255,.8);
background-color: transparent;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
/* .navbar-custom .navbar-toggle .icon-bar {
background-color:white;
}
*/
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 35px;
text-transform: uppercase;
font-family: 'Montserrat',"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
margin: 0 0 25px;
font-size: 18px;
line-height: 1.5;
}
.glyphicon {
font-size:25px;
color: white;
}
.intro-section .brand-heading {
font-size:100px;
color: white;
margin-top:50px;
}
/*I added this ***************
#intro .container {
padding-top: 100px;
padding-bottom: 50px;
}
/***********************************************/
.intro-section .intro-text{
font-size:28px;
color:#fff;
}
/* a {
color:#fff;
} */
/****Resume button code ******************/
.button
{
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
color: #0C5;
font-size: 24px;
font-family: "Nunito", sans-serif;
font-weight: 300;
padding: 20px;
width: 220px;
height:30px;
background: #363636 ;
border: 1px solid #fff;
color: #FFF;
}
.button:hover, .button:active
{
text-decoration: none;
color: #0C5;
border-color: #0C5;
background: #FFF;
}
.button span
{
display: inline-block;
position: relative;
margin-top:100px;
padding-right: 10px;
padding-left:10px;
transition: padding-right 0.5s;
}
.button span:after
{
content: ' ';
position: absolute;
top: 0;
right: -18px;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -10px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
.button:hover span, .button:active span
{
padding-right: 30px;
}
.button:hover span:after, .button:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: #0C5;
right: 0;
top: 50%;
}
#services .portfolio-item {
display: block;
position: relative;
/*margin: 0 auto;
/*max-width: 800px;*/
margin-top:50px;
}
#services .portfolio-item img{
border:6px solid gray;
width:370px;
height:230px;
}
#services .portfolio-item .portfolio-link .caption {
position: absolute;
width: 93%;
height: 100%;
opacity: 0;
background: rgba(24,188,156,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#services .portfolio-item .portfolio-link .caption:hover {
opacity: 1;
}
#services .portfolio-item .portfolio-link .nohigh {
Cursor:not-allowed;
background:transparent;
}
/* #services .portfolio-item .portfolio-link .caption .caption-content i {
margin-top: -12px;
} */
#services .portfolio-item .portfolio-link .caption .caption-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#services .portfolio-item .portfolio-link .caption .caption-content h3,
#services .portfolio-item .portfolio-link .caption .caption-content h4 {
margin: 0;
}
#portfolio * {
z-index: 2;
}
#contact h4{
color: #fff;
}
.portfolio-modal .modal-content {
padding: 100px 0;
min-height: 100%;
border: 0;
border-radius: 0;
text-align: center;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.portfolio-modal .modal-content h2 {
margin: 0;
font-size: 3em;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
width:100%;
height:100%;
}
.portfolio-modal .modal-content .item-details {
margin: 30px 0;
}
.portfolio-modal .close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.portfolio-modal .close-modal:hover {
opacity: .3;
}
.portfolio-modal .close-modal .lr {
z-index: 1051;
width: 1px;
height: 75px;
margin-left: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.portfolio-modal .close-modal .lr .rl {
z-index: 1052;
width: 1px;
height: 75px;
background-color: #2c3e50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.portfolio-modal .modal-backdrop {
display: none;
opacity: 0;
}
@media(min-width:767px) {
.navbar-custom {
padding: 25px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
background:0 0;
}
#intro {
/* background: url(../Images/cup-of-coffee-1280537_1920.jpg) no-repeat bottom center scroll; */
background: url(https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835110/cup-of-coffee-1280537_1920_inrevw.jpg) no-repeat ;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.navbar-custom.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: #000;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
/****Jaduaye line hai ye ********/
section
{ padding: 375px 0;
}
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
.btn-social {
display: inline-block;
width:50px;
height:50px;
font-size: 40px;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #5BC8AC;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #FCFDFE;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #B6452C;
}
/***Potrait mode ******/
@media (max-width: 768px) {
#intro {
/* background: url(../Images/cup-of-coffee-1280537_1920.jpg) no-repeat bottom center scroll; */
background: url(https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835110/cup-of-coffee-1280537_1920medium_nngskf.jpg) no-repeat ;
width:auto;
height:800px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.intro-section .brand-heading {
font-size:45px;
margin-top:200px;
}
.portfolio-modal .close-modal .lr {
z-index: 1051;
width: 1px;
height: 15px;
margin-left: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.portfolio-modal .close-modal .lr .rl {
z-index: 1052;
width: 1px;
height: 15px;
background-color: #2c3e50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
iframe {
width:100%;
height:100%;
}
.button span{
margin-bottom:30px;
}
#services {
padding-bottom:25px;
}
#contact {
padding-bottom:145px;
}
.navbar-custom.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
background: #000;
}
}
/**landscape mode ******************/
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {
#intro {
background: url(https://res.cloudinary.com/ddqhcwp8j/image/upload/v1465835109/cup-of-coffee-xs_pfy8mu.jpg) no repeat;
width:auto;
height:500px;
}
#services .portfolio-item .portfolio-link .caption {
position: absolute;
width: 96%;
height: 100%;
opacity: 0;
background: rgba(24,188,156,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#services .portfolio-item img{
border:6px solid gray;
width:100%; height:100%;
}
#services {
margin-bottom:20px;
}
#services .portfolio-item .portfolio-link .nohigh {
Cursor:not-allowed;
background:transparent;
}
.portfolio-modal .close-modal .lr {
z-index: 1051;
width: 5px;
height: 35px;
margin-left: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.portfolio-modal .close-modal .lr .rl {
z-index: 1052;
width: 5px;
height: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.intro-section .brand-heading {
font-size:50px;
color: white;
margin-top:150px;
}
iframe {
width:100%;
height:100%;
}
}
/****************************************************************/
/*iPhone 6 Plus Portrait & Landscape Size*/
/**Portrait iphone 6 plus ************/
/* @media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{
#intro {
background: url(../Images/cup-of-coffee-1280537_1920medium.jpg) no-repeat ;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover; }
}
*/
/* @media only screen and (min-width : 414px) and (max-width : 736px) and (orientation:landscape) {
#intro {
background: url(../Images/test2.PNG) no-repeat ;
}
} */
/*iPhone 6+ Portrait*/
/* @media only screen (max-width: 736px) and (orientation : landscape) {
#intro {
background: url(../Images/test2.PNG) no repeat;
height:500px;
}
.intro-section .brand-heading {
font-size:50px;
color: white;
margin-top:-100px;
}
} */
@media screen and (min-width : 414px)
and (max-height : 736px) and (orientation : landscape)
{
#intro {
background: url(../Images/test2.PNG) no repeat;
height:500px;
}
.intro-section .brand-heading {
font-size:50px;
color: white;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment