Tudor Anghelina Portfolio

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Tudor Anghelina Portfolio</title>
  </head>
  <body>
    
    <div class="container">
      
      <nav class="navbar navbar-dark bg-light fixed-top nav-pills">
  <!-- Navbar content -->
        
        <a class="navbar-brand" href="#"><img src="https://i.imgur.com/jgbdYgk.png" id="logo"></img><span class="text-dark">Angel Designs</span></a>
        <a class="nav-link text-success " href="#about">About</a>
        <a class="nav-link text-success" href="#portfolio">Portfolio</a>
    <a class="nav-link text-success" href="#contact">Contact</a>
      </nav>
      
      <div id="about" class="jumbotron bg-warning text-white border border-danger">
        <img src="https://avatars1.githubusercontent.com/u/16164903?v=4" class="img-round img-thumbnail float-right">
        <p class="lead text-center">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture.

        </p>
        <hr>
        <h4 class="text-center">Web Developer - User Experience Designer - Graphic Artist</h4>

      </div>
    
    <div class="container text-center" id="portfolio">
      <img src="https://picsum.photos/500/500?r" class="d-block mx-auto float-left"></img>
      <img src="https://picsum.photos/300/300?r" class="d-block mx-auto float-middle"></img>
      <img src="https://picsum.photos/300/300?r" class="d-block mx-auto float-right"></img>
      <img src="https://picsum.photos/300/300?r" class="d-block mx-auto"></img>
      
    </div>
      
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

/*Downloaded from https://www.codeseek.co/tudoranghelina91/tudor-anghelina-portfolio-zEOEOa */
    img {width: 10em;}

hr {
  max-width: 40em;
}

#logo {width: 2.5em;}

#about {margin-top: 5em;}


/*Downloaded from https://www.codeseek.co/tudoranghelina91/tudor-anghelina-portfolio-zEOEOa */
    $('a[href*=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1200);
});


Comments