Sectioned-bootstrap-portfolio

Developer
Calvin
Size
10,149 Kb
Views
4,048
  1. Sectioned-bootstrap-portfolio Previews
  2. Sectioned-bootstrap-portfolio HTML Codes
  3. Sectioned-bootstrap-portfolio CSS Codes
  4. Sectioned-bootstrap-portfolio JS Codes

How do I make an sectioned-bootstrap-portfolio?

What is a sectioned-bootstrap-portfolio? How do you make a sectioned-bootstrap-portfolio? This script and codes were developed by Calvin on 09 January 2023, Monday.

Sectioned-bootstrap-portfolio Previews
IQ Test

Sectioned-bootstrap-portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>sectioned-bootstrap-portfolio</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head></head>
<body> <div class="container">	<div class="menu-wrap fart "> <div class="ham-menu main"> <div class="menu-header"> <div class="brand invert-div flash animated infinite"><a href=""><img src="https://www.calvinmorett.com/codepen/cb/cbadger-dark.png"></a><p class="white-motto">Collin Badger ••• Designer</p> </div> </div> <div class="row dark"> <div class="col col-md-3"> <nav id="menu-nav" class="menu-main-menu"> <div class="flex-container"> <ul> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Work</h1></a></li> <li><a href="">Contact</a></li> </ul> </nav> <div id="menu-left-side">	<ul>	<li><a class="hover-link" href="http://necon.co/jobs/">Jobs</a></li>	<li><a class="hover-link" target="_blank" href="https://medium.com/design-pacing">Blog</a></li>	</ul>	</div> <p></p>	</div> <div class="col col-md-9"> <div class="menu-right-side"> <h5>Interested in reading my articles on Medium?</h5> <div class="medium-articles"><a href="https://uxplanet.org/storyboarding-in-ux-design-b9d2e18e5fab">Storyboarding in UX Design</a></div> </div> </div>	</div> </div> <div class="menu-footer-section dark"> <div class="row center menu-icons"> <div class="col-xs-6 col-md-3 "> <a href="#"><i class="fa fa-fw fa-google-plus" aria-hidden="true"></i><span>Google</span></a> </div> <div class="col-xs-3 col-md-3">	<a href="#"><i class="fa fa-fw fa-facebook" aria-hidden="true"></i><span>Facebook</span></a> </div> <div class="col-xs-3 col-md-3"> <a href="#"> <i class="fa fa-fw fa-twitter" aria-hidden="true"></i><span>Twitter</span></a> </div> <div class="col-xs-3 col-md-3">	<a href="#"><i class="fa fa-fw fa-share-square-o" aria-hidden="true"></i><span>Share</span></a> </div> </div> <!-- ends row --> <div class="clear"></div> <div id="menu-footer"> &copy; C. Badger <a href="http://www.bloomberg.com/tos" rel="popup">Email</a> — <a href="http://www.bloomberg.com/privacy">Twitter</a> — <a href="http://www.bloomberg.com/feedback" title="Feedback">Projects</a> </div>
</div> </div> <button type="button" class="menu-button" id="open-button">
<p id="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></p> </button>	<div class="content-wrap">	<div class="content"> <div class="header"> <div class="brand"><a href=""><img src="https://www.calvinmorett.com/codepen/cb/cbadger.png"></a><p>Collin Badger ••• Designer</p> </div> </div> <section id="work-slider" class="main"> <div class="row work-slider-item"> <div class="col col-md-3 expands-when-small-col"> <h1>The Sembrich</h1> <p>1914: Summer of Destiny, was a piece I took the lead in Art Direction on. Over the course of a couple months we devised a detailed design strategy from Print to the Web which was reinforced with a focus on content. <BR><BR><a href="">Read More</a></p> </div> <div class="col col-md-9 work-slider-img img-2"> <!-- <img src="http://necon.co/wp-content/uploads/2015/11/edge-slide.jpg">--> </div> </div> <!-- ends row --> </section> <section id="work-gallery" class="main"> <div class="row no-gutters"> <div class="col-6 col-sm-4 gallery-item"> <div class="thumb"> <img src="https://i.imgur.com/7OklIZO.jpg"> <div class="gallery-item-hover"> <div class="gallery-item-desc"> <h4><a href="https://i.imgur.com/7OklIZO.jpg" title="lightbox view">Silver Bay YMCA</a></h4> </div><!-- gallery item desc end --> </div><!-- gallery hover end--> </div><!-- thumb end--> </div><!-- col end --> <div class="col-6 col-sm-4 gallery-item"> <div class="thumb"> <img src="http://placekitten.com/600/600"> <div class="gallery-item-hover"> <div class="gallery-item-desc"> <h4><a href="http://placekitten.com/600/600" title="lightbox view">Empire Wine</a></h4> </div><!-- gallery item desc end --> </div><!-- gallery hover end --> </div><!-- thumb end--> </div><!-- col end--> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix"></div> <div class="col-6 col-sm-4 gallery-item"> <div class="thumb"> <img src="http://placekitten.com/600/600"> <div class="gallery-item-hover"> <div class="gallery-item-desc"> <h4><a href="http://placekitten.com/600/600" title="lightbox view">Jiminy Peak</a></h4> </div><!-- gallery item desc end --> </div><!-- gallery hover end --> </div><!-- thumb end --> </div><!-- col end--> <div class="col-4 col-sm-6 gallery-item"> <div class="thumb"> <img src="http://placekitten.com/1793/1040"> <div class="gallery-item-hover"> <div class="gallery-item-desc"> <h4><a href="http://placekitten.com/1793/1040" title="lightbox view">Sub-Bombin Records</a></h4> </div><!-- gallery item desc end --> </div><!-- gallery hover end --> </div><!-- thumb end --> </div><!-- col end--> <div class="col-4 col-sm-6 gallery-item"> <div class="thumb"> <img src="http://www.freshrr.com/wp-content/uploads/2014/09/freshrr-beat-shot-music-518-loves-dilla-logo.jpg"> <div class="gallery-item-hover"> <div class="gallery-item-desc"> <h4><a href="http://www.freshrr.com/wp-content/uploads/2014/09/freshrr-beat-shot-music-518-loves-dilla-logo.jpg" title="lightbox view">Dilla Logo</a></h4> </div><!-- gallery item desc end --> </div><!-- gallery hover end --> </div><!-- thumb end --> </div><!-- col end --> </div> <!-- ends row--> <div class="view-more"><a href="/projects">View All</a></div> </section> <section id="contact-sec" class="main"> <div class="row"> <div class="col col-md-3 expands-when-small-col"> <h1>Get in Touch</h1> <p>If you’re interested in discussing projects, please send a brief and let me know why you think I could be a great fit for the work. If you contribute to an open source project, write a blog or have a presence on the web (Twitter, SoundCloud, LinkedIn, etc.) I would love to hear about it.</p> </div> <div class="col col-md-9 expands-when-small-col"> <div> <script language="javascript">var sa_email_id = '84756-36c52';var sa_sent_text = 'Thank you for contacting us. We will get back to you soon.';</script>
<script language="javascript" src="http://s1.smartaddon.com/sa_htmlform.js"></script>
<div id="sa_contactdiv">
<form name=sa_htmlform onsubmit="return sa_contactform()">
<table>
<tr><td class="form-label form-left"> <h4>Full Name</h4><span><i class="fa fa-asterisk" aria-hidden="true"></i></span><input type="text" name="name" required="true" /></td></tr>
<tr><td class="form-label form-left"> <h4>Email</h4><span><i class="fa fa-asterisk" aria-hidden="true"></i></span><input type="text" name="email" required="true" /></td></tr>
<tr><td class="form-label form-right">
<h4>Phone</h4><span><i class="fa fa-asterisk" aria-hidden="true"></i></span><input type="text" name="tel" required="true" /></td></tr>
<tr><td class="form-label form-right">
<h4>Web URL (http://)</h4><input type="text" name="url" /></td></tr>
<tr><td class="form-label"><h4>Message</h4><span><i class="fa fa-asterisk" aria-hidden="true"></i></span><textarea name="message" cols="42" rows="9" required="true"></textarea></td></tr>
<tr><td class="submit-button"><input type="submit" value="Send Message"></td></tr>
</table>
</form> </div> </div> <!-- <form id="contact" action="" method="post"> <div class="left"> <fieldset class="left50"> <input placeholder="Full Name" type="text" tabindex="1" required> </fieldset> <fieldset class="left50"> <input placeholder="Email" type="email" tabindex="2" required> </fieldset> </div> <div class="left"> <fieldset class="left50"> <input placeholder="Phone" type="tel" tabindex="3" required> </fieldset> <fieldset class="left50"> <input placeholder="Company" type="text" tabindex="4" required> </fieldset> </div> <div class="clearfix"></div> <fieldset> <textarea placeholder="Message" tabindex="5" required></textarea> </fieldset> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button> </fieldset> </form> </div>
<div class="col col-md-3
textright expands-when-small-col"> <h1>Locations</h1> <p>
We are doing our best to be everywhere.</p> <p>There is always someone to pick up the phone</p> </div> </div><!-- ends row --> </section> <section id="irl-section" class="main"> <div class="row"> <div class="col col-md-3 dark"> <h1>On the Web</h1> <p>Give me a shout on Twitter! @CollinBadger <BR><BR>	<a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=@CollinBadger What up Dog!">Catch me on Twitter</a></p> </div> <div class="col col-md-9 h200"> <a class="twitter-timeline" href="https://twitter.com/collinbadger">Tweets by collinbadger</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </div> <!-- ends row --> </section> <div class="footer-section main"> <div class="row center"> <div class="col-xs-6 col-md-3"> <a href="#"><i class="fa fa-fw fa-google-plus" aria-hidden="true"></i><span>Google</span></a> </div> <div class="col-xs-3 col-md-3">	<a href="#"><i class="fa fa-fw fa-facebook" aria-hidden="true"></i><span>Facebook</span></a> </div> <div class="col-xs-3 col-md-3"> <a href="https://twitter.com/intent/tweet?text=@CollinBadger What up Dog!"> <i class="fa fa-fw fa-twitter" aria-hidden="true"></i><span>Twitter</span></a> </div> <div class="col-xs-3 col-md-3">	<a href="https://twitter.com/intent/tweet?text=@CollinBadger What up Dog!"><i class="fa fa-fw fa-share-square-o" aria-hidden="true"></i><span>Share</span></a> </div> </div> <!-- ends row --> <div class="clear"></div> <div id="footer"> &copy; C. Badger <a href="http://www.bloomberg.com/tos" rel="popup">Email</a> — <a href="http://www.bloomberg.com/privacy">Twitter</a> — <a href="http://www.bloomberg.com/feedback" title="Feedback">Projects</a> </div>
</div> </div> <!-- ends container--> <!--
<div class="main"> <p>header, only appears full when at top </p> <p>if you scroll up it appears,
menu full screen. </p> <p>menu layout + footer-section </p> <p>grid, 4 columns </p> <p>section id = home slider </p> <p>home slider = 4 columns, 1 col for description, 3 for slider image </p> <p>section id = 2 row gallery </p> <p>2 row gallery = 4 colums - 1 image per column </p> <p>section id = contact </p> <p>contact = 4 columns, 1 col for desc., 2 for form, 1 for locations / other contact info </p> <p>section id = image-blog </p> <p>image-blog = 4 columns, 1 col for desc. 3 for images </p> <p>section id = footer-section </p> <p>footer-section = 2 for locations & emails, 2 for social + internal links </p>
</div> -->
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sectioned-bootstrap-portfolio - Script Codes CSS Codes

*, ::after, ::before {	box-sizing:border-box;	-webkit-box-sizing:border-box;	-moz-box-sizing:border-box;	-webkit-font-smoothing:antialiased;	-moz-font-smoothing:antialiased;	-o-font-smoothing:antialiased;	font-smoothing:antialiased;	text-rendering:optimizeLegibility;
}
::selection { color: #fff; background: #d6b161; text-shadow: none;
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
#element::-webkit-scrollbar { display: none;
}::-webkit-scrollbar { display: none;
}
a { color: #2d814b; text-decoration: none; outline: none; font-weight: bold;
}
a:hover, a:focus {	color: #22944b;	outline: none;
}
button:focus {	outline: none;
}
html { width: 100%; overflow-y:scroll; overflow-y:scroll; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;
}
html{ -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes flicker { from { opacity: 0; } to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes flicker { from { opacity: 0; } to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes flicker { from { opacity: 0; } to { opacity: 1; }
}
body { font-family: Arial, -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #292b2c; background-color: #fff; height: 100vh;
}
section{ vertical-align:top; height:100%;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: .24rem; font-family: inherit; line-height: 1.1; color: inherit;
}
.main{ padding:0 60px;
}
.main h1{ font-size: 48px; text-align: left; font-weight: 700; display:inline-block;
border-top:1px solid; padding-top:24px; margin-bottom: 14px; font-size: 40px; line-height: 1; letter-spacing: -.5px;
}
.main p{ font-size: 20px; text-align: left; font-weight: 300; margin: 1em .64em 1em 0; padding: 0 24% 0 0; letter-spacing: -.25px;
}
.menu-right-side { display:inline-block; text-align:left; float:right; border-top:1px solid #fff; background:rgba(255,255,255,255,.5);
}
.menu-right-side a { -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear; max-width: 100%;
}
.menu-right-side .medium-articles { margin: 28px 0 52px;
}
.menu-right-side .medium-articles a{ color:white; margin-left:20px;
}
.menu-right-side h5 { padding-top: 20px; color: #fff;
}
.ham-menu{
padding:0 60px;
}
.ham-menu .col{ margin-top:150px; width:100vw;	opacity: 0; margin:150px 0 10px;
}
.dark,.darkh1, .darkh2, .darkh3, .darkh4, .darkh5, .darkh6{ color: #fff;
}
a { color: #0065bd; text-decoration: none; background-color: transparent;
}
.row.no-gutters { margin-right: 0; margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] { padding-right: 0; padding-left: 0;
}
.container { height:100vh; width:100vw;	margin:0 auto; padding:0;	position:relative; transition: opacity 800ms;
}
.header {z-index:-1; position: fixed; top: 0; left: 0; right: 0; width:100vw; padding: 33px; text-align:right; background: transparent; opacity:1; transition: opacity 0.2s ease-in-out 0s; line-height: 1.44em;
}
.menu-header { position: fixed; top: 0; left: 0; right: 0; width:100vw; padding: 33px; text-align:right; background: transparent; opacity:1; transition: opacity 0.2s ease-in-out 0s; line-height: 1.44em;
}
.left, .alignleft { float: left;
}
.right, .alignright { float: right;
}
.textright,
.textright h1,
.textright p{ text-align:right;
}
.textright h1{ margin-right:0; margin-left:.64em; padding-left: 24%;
}
.textright p{ margin-top:1em; margin-left:.64em; padding-left: 24%;
}
.textleft p{ padding-left:0!important; margin-left:0!important;
}
.textright p{ padding-right:0!important; margin-right:0!important;
}
.textleft a, .textright a, .view-more a { padding:6px; text-decoration: none; color: #000; text-transform:uppercase; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border:1px solid #000;
}
.textleft a:hover,
.textright a:hover, .view-more a:hover{ color:blue; border:1px solid #000; color: #fff; background: #000; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.view-more { font-size: 24px; margin: 0 auto; padding: 32px 24px; padding-right: 0; margin: 0 0 24px 0; text-align: right; border-top: 0; overflow: hidden; text-decoration: none; color: #000;
}
.view-more a{ margin:0 auto; padding:.8em; width: auto; background:#fff; border:1px solid #000; font-weight:600;
}
#work-gallery .gallery-item { transition:all .4s ease;	opacity: 1;	visibility: visible;
}
#work-gallery .gallery-item:nth-child(1) {	-webkit-transition-delay: 0.2s;	transition-delay: 0.2s;
}
#work-gallery .gallery-item:nth-child(2) {	-webkit-transition-delay: 0.3s;	transition-delay: 0.3s;
}
#work-gallery .gallery-item:nth-child(2) {	-webkit-transition-delay: 0.4s;	transition-delay: 0.4s;
}
#work-gallery .gallery-item:nth-child(3) {	-webkit-transition-delay: 0.26s;	transition-delay: 0.26s;
}
#work-gallery .gallery-item:nth-child(4) {	-webkit-transition-delay: 0.5s;	transition-delay: 0.5s;
}
#work-gallery .gallery-item:nth-child(5) {	-webkit-transition-delay: 0.6s;	transition-delay: 0.6s;
}
.brand{ margin-left:20px; width:100%; text-align:left;
vertical-align:middle;
}
.brand img{	-webkit-transition-delay: 0.33s;	transition-delay: 0.33s;
}
.brand p { color: #000; text-decoration: none; font-weight:700; font-size:12px; letter-spacing:1px; display: inline-block; position: relative; padding: 0 32px 0 12px;
}
.brand img { position: relative; top: -5px; display: inline-block; max-height: 66px; padding: 5px 0;
}
.invert-div img{
-webkit-filter:invert(0);
filter: invert(0);
}
.invert-div p, .white-motto{
color:#fff;
}
p { margin-top: 0; margin-bottom: 1rem;
}
#work-slider { padding-top: 150px; padding-bottom: 30px;
}
#work-slider::after{ vertical-align:middle; content:''; display:inline; background:#000; height:2px; width:100%;
}
.work-slider-item .work-slider-img img{ width:100%; opacity:.5;
}
.work-slider-item a:hover{ color:inherit; background:transparent; border-bottom:2px solid; text-decoration:none;
}
.img-2 { background: url(http://www.freshrr.com/wp-content/uploads/2014/08/freshrr-the-sembrich-1914summer-of-destiny-banner.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; /* height: 150px; */ height: 500px; display: block; background-position-x: -15px; position: relative; padding: 5px 0px 0px 10px; margin: 0 auto; padding-bottom: 15px;
}
#work-gallery{ margin:3.5vh 0; min-width:50vw;
}
#contact-sec{ margin:3.5vh 0; min-height:50vh; background:#fff; z-index:99;
}
#irl-section{ margin:3.5vh 0; background: #323232; min-height:25vh; padding-top:25px;
}
.h200{height:50vh; overflow-y:scroll;
display:block;
}
#instafeed{ min-height:500px;
background:rgba(255,255,255,.2);
}
footer{ left:0; right:0; bottom:0; margin:0;
}
.footer-section{ min-height:25vh; background:#fff; padding:0 60px;
}
#work-gallery .gallery-item .thumb { position: relative;
}
#work-gallery .gallery-item{
height:auto;
width:100%;
background-size:cover; overflow:hidden;
}
#work-gallery .gallery-item .thumb img{ position: relative; width: 100%; min-height:100%; display: block;
}
.gallery-item .thumb { position: absolute; bottom: 0; width: 100%; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.gallery-item a{ color:#333;
text-decoration:none; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.gallery-item a:hover{ color:#333;
text-decoration:none; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.gallery-item-hover, .gallery-item-desc { position: absolute; bottom: 0; top:0%; left:0; width: 100%; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 0;
}
.gallery-item-desc { top:45%; width:100%;
}
.gallery-item-desc h4 { margin-bottom: 5px; display:inline-block; text-transform: uppercase;
}
.gallery-item-desc h4 a{ color: #fff; background: #000; text-decoration:none; border:1px solid #000; padding:16px;
}
.gallery-item-desc h4 a:hover{ color:#000; color:black; background: transparent; text-decoration:none; border:1px solid #000;	opacity: 1;
}
.gallery-item:hover
.gallery-item-hover,
.gallery-item:hover
.gallery-item-hover
.gallery-item-desc{ opacity: 1; border:10px solid #000;
}
.gallery-item:hover
.gallery-item-hover
.gallery-item-desc{ opacity: 1; border:0;
}
.gallery-item:hover .gallery-item-hover, .gallery-item:hover .gallery-item-hover .gallery-item-desc { opacity: 1;
}
.gallery-item-hover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; opacity: 0; border: 10px solid rgba(0,0,0,1); background-color: rgba(255, 255, 255, .75); text-align:center; -webkit-transition: all 0.2s ease-in-out, color .7s ease; transition: all 0.2s ease-in-out, color .7s ease;
}
.gallery-item:hover .gallery-item-hover, .gallery-item:hover .gallery-item-hover .gallery-item-desc, .gallery-item:hover .gallery-item-hover .action-btn { opacity: 1;
}
.gallery-item:hover .gallery-item-hover .gallery-item-desc p{ color:#333;
}
.row a:hover{ opacity:.6; -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear;
}
.menu{ background:#000; height:100vh;
}
#menu-nav{line-style:none;}
.menu-main-menu li a { -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear; font-family: Arial; color: inherit; display: block; font-size:48px; font-weight: 900;
}
.menu-main-menu a, .menu-main-menu{ color: #fff;
}
#menu-nav .flex-container { align-items: stretch; flex-flow: row nowrap;
}
.menu-main-menu { display:inline-block; border-top: 1px solid #fff; border-bottom: 1px solid #fff;
}
ul {margin-left: -20px; list-style-type: none;
}
#menu-left-side { margin-top: 20px; } #menu-left-side li:first-child { margin-left: 0;
} #menu-left-side li a{ color:#fff; } #menu-left-side li { margin-left: 30px; display: inline-block;
}
.show-menu .ham-menu .col, .show-menu .menu-footer-section .menu-icons { -webkit-transition: all 0.2s ease-in-out 0.21s; transition: all 0.2s ease-in-out 0.21s; -webkit-transition: all 0.2s ease-in-out .22s; transition: all 0.2s ease-in-out .22s;	opacity: 1;	visibility: visible;
}
.show-menu .ham-menu .col:nth-child(6),.show-menu .menu-footer-section .menu-icons:nth-child(6) {	-webkit-transition-delay: 0.24s;	transition-delay: 0.24s;
}
.show-menu .ham-menu .col:nth-child(5),.show-menu .menu-footer-section .menu-icons:nth-child(5) {	-webkit-transition-delay: 0.27s;	transition-delay: 0.27s;
}
.show-menu .ham-menu .col:nth-child(4),.show-menu .menu-footer-section .menu-icons:nth-child(4) {	-webkit-transition-delay: 0.3s;	transition-delay: 0.3s;
}
.show-menu .ham-menu .col:nth-child(3),.show-menu .menu-footer-section .menu-icons:nth-child(3) {	-webkit-transition-delay: 0.33s;	transition-delay: 0.33s;
}
.show-menu .ham-menu .col:nth-child(2),.show-menu .menu-footer-section .menu-icons:nth-child(2) {	-webkit-transition-delay: 0.37s;	transition-delay: 0.37s;
}
.show-menu .ham-menu .col:nth-child(1),.show-menu .menu-footer-section .menu-icons:nth-child(1) {	-webkit-transition-delay: 0.4s;	transition-delay: 0.4s;
}
/* Common styles for menu button and menu-wrap */
.menu-button,
.menu-wrap {	position: fixed;	width: 60px; top:.5em; right:.25em;	height: 2.5em;	font-size: 1em;	-webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);
}
.fart{	overflow: hidden; overflow-y:scroll;
}
/* Menu Button */
.menu-button { z-index: 1000; margin: 0; padding: 1.5em; border: none;
}
/* border-bottom: 5px solid #4a3a92; */
.menu-button{ background: transparent;
}
.xmenu-button::before {	position: absolute;	top: 0.25em;	right: 0.25em;	bottom: 0.25em;	left: 0.25em;	background: linear-gradient(#fffce1 20%, transparent 20%, transparent 40%, #fffce1 40%, #fffce1 60%, transparent 60%, transparent 80%, #fffce1 80%);	content: '';
}
.menu-button:hover { opacity: 1;
}
.menu-button .fa{ padding:25px .2em; font-size:2em; transition:all .4s ease; color:inherit;
}
.show-menu .fa{ transition:all .4s ease; color:#FFF;
}
/* Menu */
.menu-wrap { background: #2a8e4e; /* GReen */ background: #333; z-index: 999; top:0; right:0; right: -100px; -webkit-transition: width 0.2s, height 0.3s, -webkit-transform 0.34s; transition: width 0.2s, height 0.3s, transform 0.34s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu {	height: 100%;	overflow: hidden; overflow-y:scroll;	font-size:1em; line-height:1.4;
}
.menu-wrap a:hover,
.menu-wrap a:focus {	color: #fffce1; text-decoration:none;
}
#menu-toggle{ z-index:999999999; top:0; right:.2em;	position: absolute;	top: 0.25em;
}
/* Shown menu */
.show-menu .content-wrap {	-webkit-transition-delay: 0s;	transition-delay: 0s;	-webkit-transform: translate3d(0,100vh,0);	transform: translate3d(0,100vh,0);
}
.show-menu .menu-wrap { right: 0; width: 100vw; height: 100vh;	-webkit-transform: translate3d(0,0,0);	transform: translate3d(0,0,0);	-webkit-transition-delay: 0s;	transition-delay: 0s;
}
.show-menu .icon-list a {	opacity: 1;	-webkit-transition: opacity 0.4s 0.4s;	transition: opacity 0.4s 0.4s;
}
.show-menu .icon-list a:nth-child(2) {	-webkit-transition-delay: 0.42s;	transition-delay: 0.42s;
}
.show-menu .icon-list a:nth-child(3) {	-webkit-transition-delay: 0.44s;	transition-delay: 0.44s;
}
.show-menu .icon-list a:nth-child(4) {	-webkit-transition-delay: 0.46s;	transition-delay: 0.46s;
}
.show-menu .icon-list a:nth-child(5) {	-webkit-transition-delay: 0.48s;	transition-delay: 0.48s;
}
.show-menu .icon-list a:nth-child(6) {	-webkit-transition-delay: 0.5s;	transition-delay: 0.5s;
}
@media screen and (max-width: 999px) { .work-slider-item, .work-slider-img{ display:block; min-width:100%;
}
.expands-when-small-col{ margin:0; padding-right:0; padding-left:0; display:block; min-width:100%;
}
.main p{ padding: 0 0 0 0;
}
.textright h1{ text-align:left; margin:0; margin-bottom:20px; padding-left:0; display:block;
}
.textright,
.textright p{ text-align:left; margin:0; padding-left:0; display:block;
} .work-slider-img img{ display:inline-block; min-width:100%;
}
}
@media screen and (max-width: 55em) {
.show-menu .menu-wrap { width: 100%; height: 100vh;
} .menu{ height:100vh; }	.icon-list a {	padding: .5em .5em;	margin: 0 0;	font-size: 2em;	}	.icon-list a span {	display: none;	}
}
/* CONTACT123 */
/*
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font-size:inherit; border:0;	border-top:1px solid black!important; display:inline-block;
}*/
span .fa{ color:inherit; padding:0 .25em; vertical-align: super;
}
.form-label {	background:transparent;
}
form { border:0;	margin:0;	padding:0 1em .5em;
width:100%; background:transparent; display:block; font-size: 14px; line-height:1.44em; font-weight:300; font-family:sans-serif;
}
.form-label textarea { resize:none; font-family:sans-serif;
}
::-webkit-input-placeholder {
color:black;
}
:-moz-placeholder {
color:black;
}
::-moz-placeholder {
color:black;
}
:-ms-input-placeholder { color:black;
}
.form-label{ float:left; padding:.5em; width:100%; font-weight:700; font-size: 24px; text-align:left;
}
.form-label textarea{ padding:.5em;
}
.form-label h4{ text-transform:uppercase; background:#fff; color:#000; border:1px solid #000; border-bottom:0; padding:1em; display:inline-block; letter-spacing:0.05em; margin:0; padding:.5em; font-size: 14px;
font-weight:700;
}
.form-label span{ margin:0; font-size: 12px; font-weight:700; letter-spacing:0.05em; color:transparent;
}
.form-label span::before{ background:red; margin:0; width:10px; height:10px; display:inline-block; position:absolute; vertical-align:super; border-top:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; content:'';
}
.form-label input[type=text], .form-label textarea { background: rgba(0,25,25,.05); color: #000; padding:1em;
}
.form-label input:focus{	outline:0; color:black;
}
.form-label textarea:focus {	outline:0; color:black;
}
.form-label textarea { font-weight:700; font-size: 24px; font-family:sans-serif; clear: both; outline:0;
}
button, input, select, textarea { line-height: inherit; width: 100%; vertical-align:baseline; border: 1px solid #000;
}
.form-label input[type="submit"] { margin:0;
padding:0;
}
.submit-button input[type="submit"] { cursor: pointer; width: auto; float: left; color: #000; background: transparent; margin:0 1em 0 .5em; font-weight: bold;	border:1px solid #000!important; text-transform: uppercase; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-size:24px; padding:30px 24px; text-decoration:none; color:#000;
}
.submit-button input[type="submit"]:hover {	background:#000; color:#fff; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.submit-button input[type="submit"]:active { border:0; box-shadow:0;
}
table { width: 100%;
}
table tr { display: block;
}
table td{ display: block;
}
.form-left{
width:50%; vertical-align:baseline;
}
.form-right { vertical-align:baseline;
width:50%;
}
/***********************************/
/* for simple_header_footer layout */
/***********************************/
.clear { clear: both; visibility: hidden; overflow: hidden; margin: 0; padding: 0; height: 0; line-height: 0;
}
#footer{ font-size:100%; /* .75 em = 12px */ line-height:1.125em; /* 16�1.125=18 */ font-family: Helvetica,Arial,sans-serif; color:#333; border-top:1px solid #ccc; font-size:.7em; clear:both; margin:48px 0 0 0; padding:10px; text-align:center;
}
.footer-section {	padding: 1.4em 2em 0;
}
.footer-section a {	opacity: 1;	display: inline-block;	padding: 0 0.2em;	margin: 0 2px;	text-align: center; color:#333; position:relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}
.footer-section a span {	display: block;	text-transform: uppercase;	letter-spacing: 1px;	font-size: 0.5em; font-size:1em;	font-weight: 700;	padding-top: 0.5em; position:relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}
.footer-section i {	font-size: 0.5em;
font-size:2em;
}
.footer-section a {	opacity: 1;	-webkit-transition: opacity 0.4s 0.4s;	transition: opacity 0.4s 0.4s;
}
.footer-section a:nth-child(2) {	-webkit-transition-delay: 0.42s;	transition-delay: 0.42s;
}
.footer-section a:nth-child(3) {	-webkit-transition-delay: 0.44s;	transition-delay: 0.44s;
}
.footer-section a:nth-child(4) {	-webkit-transition-delay: 0.46s;	transition-delay: 0.46s;
}
.footer-section a:nth-child(5) {	-webkit-transition-delay: 0.48s;	transition-delay: 0.48s;
}
.footer-section a:nth-child(6) {	-webkit-transition-delay: 0.5s;	transition-delay: 0.5s;
}
/* * MENU FOOTER * */
#menu-footer{ font-size:100%; /* .75 em = 12px */ line-height:1.125em; /* 16�1.125=18 */ font-family: Helvetica,Arial,sans-serif; color:#333; color:inherit; border-top:1px solid #ccc; font-size:.7em; clear:both; margin:60px 0 60px 0; padding:10px; text-align:center;
}
.menu-footer-section {	padding: 1.4em 2em 0;
}
.menu-footer-section a {	opacity: 1;	display: inline-block;	padding: 0 0.2em;	margin: 0 2px;	text-align: center; color:inherit; position:relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}
.menu-footer-section a span{	display: block;	text-transform: uppercase;	letter-spacing: 1px;	font-size: 0.5em; font-size:1em;	font-weight: 700;	padding-top: -0.2em; margin:0em 0 1em; position:relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */
}
.menu-footer-section a i { margin:2em 0 .5em;	text-transform: uppercase;	letter-spacing: 1px;	font-size: 0.5em; font-size:2em;	font-weight: 700;
}
.menu-footer-section a:hover{ color:#fff;
}
.menu-footer-section a {	opacity: 1;	-webkit-transition: opacity 0.4s 0.4s;	transition: opacity 0.4s 0.4s;
}
.menu-footer-section a:nth-child(2) {	-webkit-transition-delay: 0.42s;	transition-delay: 0.42s;
}
.menu-footer-section a:nth-child(3) {	-webkit-transition-delay: 0.44s;	transition-delay: 0.44s;
}
.menu-footer-section a:nth-child(4) {	-webkit-transition-delay: 0.46s;	transition-delay: 0.46s;
}
.menu-footer-section a:nth-child(5) {	-webkit-transition-delay: 0.48s;	transition-delay: 0.48s;
}
.menu-footer-section a:nth-child(6) {	-webkit-transition-delay: 0.5s;	transition-delay: 0.5s;
}
.center{ text-align:center;
}

Sectioned-bootstrap-portfolio - Script Codes JS Codes

/** https://interfacelovers.com/
https://vogelrh.github.io/scalable-image-grid/components/scalable-image-grid/demo/
**/
/** * main.js * http://www.codrops.com * * Licensed under the MIT license. * https://www.opensource.org/licenses/mit-license.php * * Copyright 2014, Codrops * http://www.codrops.com */
(function() {	var bodyEl = document.body,	content = document.querySelector( '.content-wrap' ),	openbtn = document.getElementById( 'open-button' ),	closebtn = document.getElementById( 'close-button' ),	isOpen = false;	function init() {	initEvents();	}	function initEvents() {	openbtn.addEventListener( 'click', toggleMenu );	if( closebtn ) {	closebtn.addEventListener( 'click', toggleMenu );	}	// close the menu element if the target it´s not the menu element or one of its descendants..	content.addEventListener( 'click', function(ev) {	var target = ev.target;	if( isOpen && target !== openbtn ) {	toggleMenu();	}	} );	}	function toggleMenu() {	if( isOpen ) {	classie.remove( bodyEl, 'show-menu' );	}	else {	classie.add( bodyEl, 'show-menu' );	}	isOpen = !isOpen;	}	init();
})();
$(window).scroll(function() { if($(this).scrollTop() > 9) { $('.header').css('opacity','0'); } else { $('.header').css('opacity','1'); }
});
$('#menu-toggle').click(function() { $("i", this).toggleClass("fa-bars fa-window-close");
});
Sectioned-bootstrap-portfolio - Script Codes
Sectioned-bootstrap-portfolio - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded January 09, 2023
Rating 3
Size 10,149 Kb
Views 4,048
Do you need developer help for Sectioned-bootstrap-portfolio?

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!

Calvin (CalvinMorett) Script Codes
Name
The word good is bad.
IDEA BLOCKS
Horizontal Scrolling Theme
Image Stack Test SCSS
Sidebar Nav
POE Rank Mockup
Portfolio Base
Full Page Slide, Vertical Progress Bar
Fixed-width Single Page Portfolio
CLG Web Design Concept
Create amazing art & images 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!