A Pen by utcwebdev
How do I make an a pen by utcwebdev?
What is a a pen by utcwebdev? How do you make a a pen by utcwebdev? This script and codes were developed by Utcwebdev on 26 November 2022, Saturday.
A Pen by utcwebdev - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by utcwebdev</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="navbar navbar-fixed-top navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Bootstrap Off-Canvas</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!-- /.nav-collapse --> </div><!-- /.container --> </div><!-- /.navbar --> <div class="container"> <div class="row row-offcanvas row-offcanvas-right"> <div class="col-xs-12 col-sm-9"> <p class="pull-right visible-xs"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> </p> <div class="jumbotron"> <h1>Hello, world!</h1> <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p> </div> <div class="row"> <div class="col-6 col-sm-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div><!--/span--> <div class="col-6 col-sm-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div><!--/span--> <div class="col-6 col-sm-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div><!--/span--> <div class="col-6 col-sm-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div><!--/span--> <div class="col-6 col-sm-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div><!--/span--> <div class="col-6 col-sm-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#">View details »</a></p> </div><!--/span--> </div><!--/row--> </div><!--/span--> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="well sidebar-nav"> <ul class="nav"> <li>Sidebar</li> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li>Sidebar</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li>Sidebar</li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!--/.well --> </div><!--/span--> </div><!--/row--> <hr> <footer> <p>© Company 2013</p> </footer> </div><!--/.container--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by utcwebdev - Script Codes CSS Codes
/* original example CSS, with required change to max-width See also, Refinements, below */
/* * Style twaks * -------------------------------------------------- */
body { padding-top: 70px;
}
footer { padding-left: 15px; padding-right: 15px;
}
/* * Off Canvas * -------------------------------------------------- */
@media screen and (max-width: 767px) {/* 767 not 768 */ .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .row-offcanvas-right .sidebar-offcanvas { right: -50%; /* 6 columns */ } .row-offcanvas-left .sidebar-offcanvas { left: -50%; /* 6 columns */ } .row-offcanvas-right.active { right: 50%; /* 6 columns */ } .row-offcanvas-left.active { left: 50%; /* 6 columns */ } .sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ }
}
/* Refinements */
html { overflow-x: hidden;
}
A Pen by utcwebdev - Script Codes JS Codes
$(document).ready(function() { $('[data-toggle=offcanvas]').click(function() { $('.row-offcanvas').toggleClass('active'); });
});
![A Pen by utcwebdev - Script Codes](http://shots.codepen.io/utcwebdev/pen/aHgGB-512.jpg)
Developer | Utcwebdev |
Username | utcwebdev |
Uploaded | November 26, 2022 |
Rating | 3 |
Size | 2,856 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Loading animation | Hafizfattah | 0 Kb |
GrcJS | Vino6 | 2,047 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
Hc first draft | Stepfray | 5,104 Kb |
The Rope | Chribbe | 2,886 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!