A Pen by utcwebdev

Developer
Utcwebdev
Size
2,856 Kb
Views
16,192
  1. A Pen by utcwebdev Previews
  2. A Pen by utcwebdev HTML Codes
  3. A Pen by utcwebdev CSS Codes
  4. A Pen by utcwebdev JS Codes

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 Previews
IQ Test

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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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>&copy; 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
A Pen by utcwebdev - Script Codes
Home Page Home
Developer Utcwebdev
Username utcwebdev
Uploaded November 26, 2022
Rating 3
Size 2,856 Kb
Views 16,192
Do you need developer help for A Pen by utcwebdev?

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!

Utcwebdev (utcwebdev) Script Codes
Name
Sorting and filtering a huge table using footable plugin
Blackboard login form
Ultra wide responsive tables using footable plugin
Footable policy and procedure index
Bootstrap jQuery radio buttons reveal help message feedback
Off-Canvas Side Nav With Bootstrap 2
Online Learning Quiz Form
Javascript search within table
Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion
Sorting using footable plugin
Create amazing captions with AI!

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!