A Pen by Yas

Developer
Yas
Size
4,042 Kb
Views
10,120
  1. A Pen by Yas Previews
  2. A Pen by Yas HTML Codes
  3. A Pen by Yas CSS Codes
  4. A Pen by Yas JS Codes

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

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(); });
});
A Pen by Yas - Script Codes
A Pen by Yas - Script Codes
Home Page Home
Developer Yas
Username Yas46
Uploaded January 05, 2023
Rating 3
Size 4,042 Kb
Views 10,120
Do you need developer help for A Pen by Yas?

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!

Yas (Yas46) Script Codes
Name
TicTacToe
Twitch Streamers
Quote Machine
Browser Calculator
Wikipedia Search
Tic-tac-toe
Weather
Tic-tac-toe React
Pomodoro Clock
Create amazing web content 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!