NotesWhat is notes.io?

Notes brand slogan

Notes - notes.io

Popular notes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Dashboard</title>

<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Font awesome CDN -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body id="myPage" data-spy="scroll" data-target=".wrapper" data-offset="60" onload="myFunction()">
<div id="loader"></div>
<div class="wrapper" style="display:none;" id="myDiv" class="animate-bottom">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="profile_pic">
<img src="img/upwork_pp.jpg" alt="profile_pic" class="img-responsive profile_img">
</div>
<div class="profile-usertitle">
<div class="profile-usertitle-name">
Bishal Kumar Shrestha
</div>
<div class="profile-usertitle-desgination">
Front End Developer
</div>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#content">Home</a>
</li>
<li>
<a href="#aboutme">About Me</a>
</li>
<li>
<a href="#services">What I do</a>
</li>
<li>
<a href="#summary">Resume</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#testimonial">Testimonial</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li><a href="cv/CV.pdf" target="_blank" class="download">Download CV</a></li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
</button>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#content" class="active">Home</a></li>
<li><a href="#aboutme">About Me</a></li>
<li><a href="#services">What I do</a></li>
<li><a href="#summary">Resume</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonial">Testimonial</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid well">
<video autoplay muted loop id="myVideo">
<source src="vid/main.mp4" type="video/mp4">
</video>
</div>
<div class="container-fluid">
<div class="aboutme_header">
<h3 id="aboutme">About Me</h3>
<p class="knowmemore">Know Me More</p>
</div>
<div class="aboutme_intro">
<h3 class="name">I'm <label class="fullname">Bishal Kumar Shrestha,</label> a Front End Developer</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="aboutme_qualification">
<div class="col-md-3 line">
<h3><span class="counter">2</span>+</h3>
<h4>Years Experience</h4>
<i class="fa fa-history"></i>
</div>
<div class="col-md-3 line">
<h3><span class="counter">50</span>+</h3>
<h4>Happy Clients</h4>
<i class="fa fa-users"></i>
</div>
<div class="col-md-3 line">
<h3><span class="counter">100</span>+</h3>
<h4>Projects Done</h4>
<i class="fa fa-tasks"></i>
</div>
<div class="col-md-3 line">
<h3><span class="counter">20</span>+</h3>
<h4>Awards</h4>
<i class="fa fa-trophy"></i>
</div>
</div>
</div>
<div class="download_cv text-center">
<a href="cv/CV.pdf" target="_blank" class="btn btn-primary btn-md"><span>Download CV</span></a>
</div>
<hr>
<div class="container-fluid bg_whatido">
<div class="services_header">
<h3 id="services">Services</h3>
<p class="whatido">What I Do?</p>
</div>
<div class="services_body">
<div class="col-md-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3>Photography</h3>
</div>
<div class="panel-body">
<p><strong>20</strong> Lorem</p>
<p><strong>15</strong> Ipsum</p>
<p><strong>5</strong> Dolor</p>
<p><strong>2</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3>Videography</h3>
</div>
<div class="panel-body">
<p><strong>50</strong> Lorem</p>
<p><strong>25</strong> Ipsum</p>
<p><strong>10</strong> Dolor</p>
<p><strong>5</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3>Cinematography</h3>
</div>
<div class="panel-body">
<p><strong>100</strong> Lorem</p>
<p><strong>50</strong> Ipsum</p>
<p><strong>25</strong> Dolor</p>
<p><strong>10</strong> Sit</p>
<p><strong>Endless</strong> Amet</p>
</div>
</div>
</div>
<div class="readmore text-center">
<a class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal"><span>Read More</span></a>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Here are some of the services that I provide</h4>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="summary_header">
<h3 id="summary">SUMMARY</h3>
<p class="resume">Resume</p>
</div>
<div class="container-fluid">
<div class="education_section">
<p class="title"><span class="fa fa-play"></span> My Education</p>
<div class="col-md-12 effects">
<span class="btn btn-warning btn-sm">2015-2019</span>
<h4>Bachelor Degree</h4>
<p>Tribhuwan University</p>
</div>
</div>
<div class="experience_section">
<p class="title"><span class="fa fa-play"></span> My Experience</p>
<div class="row">
<div class="col-md-12">
<div class="col-md-4 effects">
<span class="btn btn-warning btn-sm">2012-2014</span>
<h4>Junior Photography</h4>
<p>Next Level Pvt. Ltd.</p>
</div>
<div class="col-md-4 effects">
<span class="btn btn-warning btn-sm">2015-2019</span>
<h4>Senior Videography</h4>
<p>Shrijan Nayaju Pvt. Ltd</p>
</div>
<div class="col-md-4 effects">
<span class="btn btn-warning btn-sm">2015-2019</span>
<h4>Junior Motion Graphic</h4>
<p>Shrijan Nayaju Pvt. Ltd</p>
</div>
</div>
</div>
<div class="skill_section">
<p class="title"><span class="fa fa-play"></span> My Skills</p>
<div class="container-fluid">
<div class="col-md-12">
<div class="col-md-6">
<h4>Adobe Photoshop</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:80%">
80%
</div>
</div>
</div>
<div class="col-md-6">
<h4>Adobe Illustrator</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:60%">
60%
</div>
</div>
</div>
<div class="col-md-6">
<h4>Adobe AfterEffects</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:40%">
40%
</div>
</div>
</div>
<div class="col-md-6">
<h4>Adobe Photoshop lightroom</h4>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:20%">
20%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg_portfolio">
<div class="portfolio_header">
<h3 id="portfolio">Portfolio</h3>
<p class="portfolio_title">My Work</p>
</div>
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="photos">Photos</button>
<button class="btn btn-default filter-button" data-filter="videos">Videos</button>
<button class="btn btn-default filter-button" data-filter="motion">Motion Graphics</button>
</div>
<div class="img_gallery">
<div class="col-md-4 filter photos">
<img src="img/photo/Sky.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Sunsets.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Temple.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Darshan.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Child.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Grandpaa.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Light.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Weather.jpg" class="img-responsive imgs">
</div>
<div class="col-md-4 filter photos">
<img src="img/photo/Sun.jpg" class="img-responsive imgs">
</div>
</div>
<div class="vid_gallery">
<div class="col-md-4 vids filter videos">
<video id="myVideo1" width="300" height="200" controls>
<source src="vid/Life.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter videos">
<video id="myVideo2" width="300" height="200" controls>
<source src="vid/Maa.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter videos">
<video id="myVideo3" width="300" height="200" controls>
<source src="vid/before_after.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="motion_gallery">
<div class="col-md-4 vids filter motion">
<video id="motion1" width="300" height="200" controls>
<source src="motion/ads.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter motion">
<video id="motion2" width="300" height="200" controls>
<source src="motion/ads_boost.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter motion">
<video id="motion3" width="300" height="200" controls>
<source src="motion/cinematic.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter motion">
<video id="motion4" width="300" height="200" controls>
<source src="motion/Intro_after.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter motion">
<video id="motion5" width="300" height="200" controls>
<source src="motion/slideshow.mp4" type="video/mp4">
</video>
</div>
<div class="col-md-4 vids filter motion">
<video id="motion6" width="300" height="200" controls>
<source src="motion/youtube_intro.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container-fluid">
<div class="testiomonal_header">
<h3 id="testimonial">Testimonial</h3>
<p class="testiomonal_title">Client Speak</p>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row testi_head">
<button id="bn"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button>
<p class="testimonial_para">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.</p><br>
<div class="row">
<div class="col-md-12">
<h4><strong>Jack Andreson</strong></h4>
<p class="testimonial_subtitle"><span>Chlinical Chemistry Technologist</span><br>
<span>Officeal All Star Cafe</span>
</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row testi_head">
<button id="bn"><i class="fa fa-quote-left testimonial_fa" aria-hidden="true"></i></button>
<p class="testimonial_para">Lorem Ipsum ist ein einfacher Demo-Text für die Print- und Schriftindustrie. Lorem Ipsum ist in der Industrie bereits der Standard Demo-Text "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo en.</p><br>
<div class="row">
<div class="col-md-10">
<h4><strong>Kiara Andreson</strong></h4>
<p class="testimonial_subtitle"><span>Chlinical Chemistry Technologist</span><br>
<span>Officeal All Star Cafe</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="controls testimonial_control pull-right">
<a class="left fa fa-chevron-left btn btn-default testimonial_btn" href="#carousel"
data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-default testimonial_btn" href="#carousel"
data-slide="next"></a>
</div> -->
</div>
<div class="container-fluid bg_contact">
<div class="contact_header">
<h3 id="contact">Contact</h3>
<p class="contact_title">Get in Touch</p>
</div>
<div class="row" style="margin-top: 20px;">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Kathmandu, Nepal</p>
<p><span class="glyphicon glyphicon-phone"></span> +977-0123456789 </p>
<p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
<p>Follow Me</p>
<a href="#" title="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="instagram"><i class="fa fa-instagram"></i></a>
<a href="#" title="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" title="github"><i class="fa fa-github"></i></a>
</div>
<div class="col-sm-7 slideanim">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="fullname" name="name" placeholder="Full Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="textarea" name="comments" placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit" value="Submit" id="submit-button">Send</button>
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<a href="#myPage" title="To Top">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<p>Designed with <i class="fa fa-heart"></i> by bishalpro21</p>
</footer>
</div>
</div>

<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js" iyntegrity="sha512-ZKNVEa7gi0Dz4Rq9jXcySgcPiK+5f01CqW+ZoKLLKr9VMXuCsw3RjWiv8ZpIOa0hxO79np7Ec8DDWALM0bDOaQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js" integrity="sha512-+/4Q+xH9jXbMNJzNt2eMrYv/Zs2rzr4Bu2thfvzlshZBvH1g+VGP55W8b6xfku0c0KknE7qlbBPhDPrHFbgK4g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>


<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1200, function(){

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
$('.counter').counterUp({
delay: 10,
time: 1000
});
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');

if(value == "all")
{
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
}
else
{
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');

}
});

if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");

});
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 2000);
}

function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>
     
 
what is notes.io
  

Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...

With notes.io;

  • * You can take a note from anywhere and any device with internet connection.
  • * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
  • * You can quickly share your contents without website, blog and e-mail.
  • * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
  • * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 12 years and has been free since the day it was started.


You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;


Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio



Regards;
Notes.io Team

     
 
Shortened Note Link
  
 
Looding Image
 
     
 
Long File
  
 

For written notes was greater than 18KB Unable to shorten.

To be smaller than 18KB, please organize your notes, or sign in.

  
     

Notes

I'm Feeling Lucky

repost for Instagram

Paste Keyboard iOS - Quick Replies

v 2.7.3

We'd love to hear from you. Please email us at [email protected]

Copyright 2022 Metromedya

ios uygulama geliştirme