ylk

In this example below you will see how to do a ylk with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by yelynn1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yelynn1 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>ylk</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" href="css/style.css">

  
</head>

<body>

  <div class="responsive">
<nav id="navid" class="navbar navbar-inverse bg-inverse  navbar-toggleable-md" role="navigation">
  <a class="navbar-brand ylk" href="#">Ye Lynn Khant</a>
  <div class="collapse navbar-collapse abt ">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"><a id="navabout" class="nav-link" href="#" >ABOUT</a></li>
      <li class="nav-item"><a id="navportfolio" class="nav-link" href="#" >PORTFOLIO</a></li>
      <li class="nav-item"><a id="navcontact" class="nav-link" href="#" >CONTACT</a></li>
    </ul>
  </div>
</nav>
</div>
<body>
  <div class="container-fluid bd">
    <div id="about" class="bio responsive" style="background-color:#BDBDBD">
       <div class="row">
      <div class="text col-sm-9">
      <p style="color:white">Front-End and Back-End Developer and UX/UI designer, Networking Engineer and Web Security Pentester with practical experience, branding strategy, and creative direction; devoted to functional programming and information architecture.</p></div>
      <div class="col-sm-3"><img class="img-thumbnail img-responsive cusimg" src="https://github.com/yelynn1/myproject1/blob/master/profile.jpg?raw=true"></div>
      </div>
    </div>
    <div id="portfolio" class="responsive bio" style="background-color:white;color:gray;">
      <br/>
      <h1 class="text-center">PORTFOLIO</h1><br/>
      <div class="row">
<div class="col-sm-6"><img class="img-thumbnail" src="https://github.com/yelynn1/myproject1/blob/master/index.png?raw=true" style="width:100%;height:100%;"></div>
      <div class="col-sm-6"><img class="img-thumbnail" src="https://github.com/yelynn1/myproject1/blob/master/Untitled.png?raw=true" style="width:100%;height:100%;"></div>
    </div>
    </div>  
      
      <div id="contact" class="responsive bio bord" style="background-color:white;">
        <h1 class="text-center">Contact Me</h1>
        <div class="row">
         <div class="col-sm-6">
        <form id="conct-form">
          <div class="form-group">
            <label for="nam">Name</label>
          <input type="text" id="nam" placeholder="Enter Your Name" class="form-control">
          </div>
           <div class="form-group">
            <label for="emai">Name</label>
          <input type="email" id="emai" placeholder="Enter Your Email" class="form-control">
          </div>
          
           <div class="form-group">
            <label for="phon">Phone</label>
          <input type="tel" id="phon" placeholder="Enter Your Phone Number" class="form-control">
          </div>
          
                 <div class="form-group">
            <label for="messag">Message</label>
          <textarea form="conct-form" placeholder="Leave something that you want to say me" class="form-control" rows="4"></textarea>
          </div>
          
          <div class="form-group">
            <input type="submit" class="btn btn-success" value="Send">
          </div>
        </form>
          </div>
          <div class="col-sm-6">
           <div class="cent"> <p>Want to get in touch with me? Be it to request more info about myself or my experience, to ask for my resume, tips on how to solve your algorithm, random questions , networking , and security. Just feel free to drop me a line anytime.</p></div>
          </div>
          
      </div>
        </div>
     </div>
    <div class="responsive row ext1" style="background-color:#292b2c;color:#BDBDBD;">
      <div class="col-sm-6 text-center">
        <h1>About This Page</h1>
        Made for myself by <a href="https://www.freecodecamp.com/yelynn1" style="color:gray">Ye Lynn Khant</a>
      </div>
      <div class="col-sm-6 text-center">
        <h1>Around The Web</h1>
        <a target="_blank" href="https://www.facebook.com/ye.l.khant"><i class="fa fa-facebook-square awe"></i></a>
        <i class="fa fa-instagram awe"></i>
        <a target="_blank" href="https://github.com/yelynn1"><i class="fa fa-github-square awe"></i></a>
      </div>
    </div>
    
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/yelynn1/ylk-eWgxRE */
.ylk {
  padding-left: 10%;
}

.abt {
  padding-right: 10%;
}

.cusimg {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

body {
  margin-top: 57px;
}

.bd {
  margin: 0px 10% 20px 10%;
}

.bio {
  padding: 5% 5% 5% 5%;
}

.text {
  display: flex;
  align-items: center;
}

body {
  background-color: #585858;
}

.bord {
  border-top: solid;
  color: gray;
}

label {
  font-weight: bold;
}

.cent {
  margin-top: 35%;
}

#navid {
  position: fixed;
  margin-top: -57px !important;
  padding-right: 0px;
  width: 100%;
  z-index: 1;
}

.ext1 {
  margin-top: -20px;
}

.awe {
  font-size: 30px;
  color: gray;
}


/*Downloaded from https://www.codeseek.co/yelynn1/ylk-eWgxRE */
$("#navcontact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contact").offset().top
    },1000);
});
$("#navabout").click(function() {
    $('html, body').animate({
        scrollTop: $("#about").offset().top
    },1000);
});
$("#navportfolio").click(function() {
    $('html, body').animate({
        scrollTop: $("#portfolio").offset().top
    },1000);
});

Comments