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 11 March 2022, Friday.

How do I make an a pen by yas?
  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
A Pen by Yas Previews

A Pen by Yas 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/[email protected]" 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 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 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();
    });
});
Do you want hide your ip address?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.