digital-portfolio.html

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900" rel="stylesheet">

    <title>CodeTheTech</title>
    
    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Additional CSS Files -->
    <link rel="stylesheet" href="assets/css/fontawesome.css">
    <link rel="stylesheet" href="assets/css/templatemo-grad-school.css">
    <link rel="stylesheet" href="assets/css/owl.css">
    <link rel="stylesheet" href="assets/css/lightbox.css">

  </head>

<body>

   
  <!--header-->
  <header class="main-header clearfix" role="header">
    <div class="logo">
      <img src="https://assets.hackclub.com/icon-rounded.svg" class="hack-logo">
       <a href="https://hackclub.com" class="hc-logo">Hack Club</a>
    </div>
    <div class="nav-home">
      <a href="https://codethetech.hackclub.com/">Home</a>
  </div>
  </header>


<section class="extras section courses">
    <div></div>
</section>

<!-- main content -->
  <section class="section courses events">
    <div class="evts">
        <div class="evt-title">
        <h1>Digital Portfolio Building Workshop</h1>
        <h3>Master the Art of Self-Promotion</h3>
    </div>
    <div class="evt-cnt">

        <p>
        
          <b>Date-</b> 22 to 26 May 2023
        </p>  
      </p><p>
          <b>Time-</b> 6:00 PM to 7:30 PM  IST
        </p><p>
          We are excited to announce that we will be organizing a <b>5-day web portfolio workshop!</b> This workshop is designed for individuals who are interested in developing and improving their web portfolio skills.
        </p><p>
         
              <b>The workshop will cover various topics such as:</b>
              <ul><li>HTML (List tags, anchor tags, image tags, header, section, div, etc.)</li>
                <li>CSS (Element editing, Variables, Fonts, Responsiveness, etc)</li>
                
            </ul>
            else than these we'll be providing sample portfolios and we'll assign you tasks to keep up your skills.
            </p><p>
       <b>Goodies (Postcards & Hack Club Stickers)</p></b>

       <b>Last date for Registration is 19 May 2023</b>

    <div class="evt-link">
        <a href="https://forms.gle/HS9yRNCz2FEZ9FqF7">Click here to Register <i class="fa fa-angle-double-right"></i></a>
    </div>
    </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Contact Us-
          <a href="mailto:team.codethetech@gmail.com">team.codethetech@gmail.com</a></p>
          <p><i class="fa fa-copyright"></i> Copyright 2023 by CodeTheTech        
           
        </div>
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="assets/js/isotope.min.js"></script>
    <script src="assets/js/owl-carousel.js"></script>
    <script src="assets/js/lightbox.js"></script>
    <script src="assets/js/tabs.js"></script>
    <script src="assets/js/video.js"></script>
    <script src="assets/js/slick-slider.js"></script>
    <script src="assets/js/custom.js"></script>
    <script>
        //according to loftblog tut
        $('.nav li:first').addClass('active');

        var showSection = function showSection(section, isAnimate) {
          var
          direction = section.replace(/#/, ''),
          reqSection = $('.section').filter('[data-section="' + direction + '"]'),
          reqSectionPos = reqSection.offset().top - 0;

          if (isAnimate) {
            $('body, html').animate({
              scrollTop: reqSectionPos },
            800);
          } else {
            $('body, html').scrollTop(reqSectionPos);
          }

        };

        var checkSection = function checkSection() {
          $('.section').each(function () {
            var
            $this = $(this),
            topEdge = $this.offset().top - 80,
            bottomEdge = topEdge + $this.height(),
            wScroll = $(window).scrollTop();
            if (topEdge < wScroll && bottomEdge > wScroll) {
              var
              currentId = $this.data('section'),
              reqLink = $('a').filter('[href*=\\#' + currentId + ']');
              reqLink.closest('li').addClass('active').
              siblings().removeClass('active');
            }
          });
        };

        $('.main-menu, .scroll-to-section').on('click', 'a', function (e) {
          if($(e.target).hasClass('external')) {
            return;
          }
          e.preventDefault();
          $('#menu').removeClass('active');
          showSection($(this).attr('href'), true);
        });

        $(window).scroll(function () {
          checkSection();
        });
    </script>
</body>
</html>