A Pen by Yas
How do I make an a pen by yas?
What is a a pen by yas? How do you make a a pen by yas? This script and codes were developed by Yas on 05 January 2023, Thursday.
A Pen by Yas - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Yas</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/BlackrockDigital/startbootstrap-scrolling-nav/master/css/scrolling-nav.css'>
<link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/BlackrockDigital/startbootstrap-scrolling-nav/master/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<title>Yasser Beyer</title>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"> <!-- Navigation --> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <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="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand page-scroll" href="#page-top">YASSER BEYER</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse 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 class="page-scroll" href="#page-top #about"></a> </li> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#services">Portfolio</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Intro Section --> <section id="about" class="about-section intro-section text-center fill"> <div class="container" id="vCenter"> <div class="row"> <div class="col-lg-12"> <h1 cover-heading>Hello!</h1> </div> </div> <div class="row"> <div class="col-md-8 col col-md-offset-2"> <p class="lead">I’m Yasser Beyer, a self-taught Front-end Developer & award winning Digital Designer with over nine years work experience. I'm based in Bethesda, Maryland, working as a Web Developer at GEICO.</p> </div> </div> <div class="row"> <div class="row col-lg-12"> <a href="https://www.instagram.com/yas46/" target="_blank" class="btn btn-md btn-default side1"><img src="https://5a5a57ff32a328601212-ee0df397c56b146e91fe14be42fa361d.ssl.cf1.rackcdn.com/icon/instagram_logos_glyph/03H5cHNMt-Jni4pe9u+7/glyph-logo_May2016_200.png" style="height:24px;"> Instagram</a> <a href="https://www.flickr.com/photos/50684724@N00" target="_blank" class="btn btn-md btn-default side1"><img src="http://www.houstonfiremuseum.org/wp-content/uploads/2013/11/Flickr-logo.png" style="height:24px;">Flickr</a></li> <a href="https://codepen.io/Yas46/" target="_blank" class="btn btn-md btn-default side1"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZ41SMeKfRaxQOsDDuMH2iPmacPQFev59cUfXIuwbuO4ojc-A4te5LbA" style="height:24px;"> Codepen</a> <a href="https://github.com/yas46/" target="_blank" class="btn btn-md btn-default side1"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRitIc8NwqYA4lIukZOBG5rJYWDzBWOftq3R4WBTBrZUcCcPx1hTg" style="height:24px;"> GitHub</a> </div> </div> </div> </section> <!-- Portfolio Section --> <section id="services" class="services-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Stuff I Made</h1> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 portfolio-item"> <p data-height="265" data-theme-id="light" data-slug-hash="JRzbwN" data-default-tab="result" data-user="Yas46" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/Yas46/pen/JRzbwN/">Weather</a> by Yas (<a href="https://codepen.io/Yas46">@Yas46</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 portfolio-item"> <p data-height="265" data-theme-id="light" data-slug-hash="VKgbdX" data-default-tab="result" data-user="Yas46" data-embed-version="2" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/Yas46/pen/VKgbdX/">Quote Machine</a> by Yas (<a href="https://codepen.io/Yas46">@Yas46</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="//assets.codepen.io/assets/embed/ei.js"></script> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 portfolio-item-last"> <p data-height="265" data-theme-id="light" data-slug-hash="PGrpxw" data-default-tab="result" data-user="Yas46" data-embed-version="2" data-preview="true" data-pen-title="Wikipedia Search" class="codepen">See the Pen <a href="https://codepen.io/Yas46/pen/PGrpxw/">Wikipedia Search</a> by Yas (<a href="https://codepen.io/Yas46">@Yas46</a>) on <a href="https://codepen.io">CodePen</a>.</p> <script async src="https://assets.codepen.io/assets/embed/ei.js"></script> </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> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 email"> <img src="http://www.freeiconspng.com/uploads/paper-plane-icon--icon-search-engine-13.png" style="height:70px; margin-bottom:18px;"> <h4><a href="mailto:[email protected]" target="_top">Send me an email</a></h4> </div> </div> </div> </section>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://gsgd.co.uk/sandbox/jquery/easing/'></script> <script src="js/index.js"></script>
</body>
</html>
A Pen by Yas - Script Codes CSS Codes
html { width: 100%; height: 100%;
}
body {
position:relative;
width: 100%;
height: 100%;
}
@media(min-width:767px) { .navbar { padding: 20px 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; } .top-nav-collapse { padding: 0; }
}
.intro-section {
text-align: center;
background: #fff;
}
.cover .btn-lg { font-weight: bold;
}
.about-section { height: 100%; padding-top: 150px; text-align: center; background: #eee;
}
.services-section { padding: 50px 0 30px 0; text-align: center; background: #fff;
}
.portfolio-item { margin-top: 20px;
}
.portfolio-item-last { margin-top: 20px;
}
.contact-section { height: 100%; padding-top: 150px; text-align: center; background: #eee;
}
.contact-container { margin-top: 20px;
}
.email { margin-top:80px;
}
#about { margin-top: 90px;
}
.side1 {margin: 1em .3em 0 .3em;}
.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
A Pen by Yas - Script Codes JS Codes
//jQuery to collapse the navbar on scroll
$(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".navbar-fixed-top").addClass("top-nav-collapse"); } else { $(".navbar-fixed-top").removeClass("top-nav-collapse"); }
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); });
});
Developer | Yas |
Username | Yas46 |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 4,042 Kb |
Views | 10,120 |
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!
Name | Size |
TicTacToe | 1,674 Kb |
Tic-tac-toe React | 3,512 Kb |
Weather | 3,186 Kb |
Quote Machine | 3,625 Kb |
A Pen by Yas | 4,042 Kb |
Pomodoro Clock | 3,328 Kb |
Browser Calculator | 2,846 Kb |
Tic-tac-toe | 3,730 Kb |
Twitch Streamers | 2,772 Kb |
Wikipedia Search | 2,746 Kb |
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 |
A Pen by Theun | Tjoen | 6,152 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
The Rope | Chribbe | 2,886 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 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!