Bootstrap 5 About Me Section Component - HTMLCSSFreebies

PHOTO

Sat Oct 01 2022 06:53:41 GMT+0000 (Coordinated Universal Time)

Saved by @wnakswl #markup

HTML
<!-- About Me 1 - HCF Bootstrap 5 Component -->
<section class="bg-light py-5 py-xl-6">
  <div class="container mb-4 mb-md-5 mb-xl-6">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-xxl-8">
        <img class="img-fluid rounded shadow" loading="lazy" src="./assets/img/about-me/about-me-1/img-1.jpg" alt="">
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row gy-2 gy-md-0 justify-content-xxl-center">
      <div class="col-12 order-md-1 col-md-8 col-xxl-6">
        <div class="text-center text-md-start">
          <h2 class="display-3 fw-bold lh-1">Lucas Henry</h2>
          <p class="text-secondary fs-4 mb-2">UX/UI Designer</p>
          <hr class="w-25 mx-auto ms-md-0 mb-4 text-secondary">
          <p>Nam sit amet condimentum arcu. Vestibulum non convallis elit, nec finibus purus. Morbi a tortor vitae mauris volutpat lacinia in vel leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam vel dictum nisi.</p>
          <p>Duis bibendum lectus vitae posuere euismod. Nunc semper mauris sed justo consequat mollis. Suspendisse eu lectus ornare, pulvinar tortor eget, iaculis libero. Nullam non metus sed lacus luctus posuere. Morbi semper pharetra tortor sit amet mollis.</p>
        </div>
      </div>
      <div class="col-12 order-md-0 col-md-4 col-xxl-4">
        <div class="text-center text-md-start me-md-3 me-xl-5">
          <p class="mb-4">
            <span class="d-block display-6 lh-1">12+</span>
            <span class="fs-4 text-secondary">years of experience</span>
          </p>
          <div class="d-grid">
            <button class="btn btn-primary btn-lg" type="button">Hire Me</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy

https://htmlcssfreebies.com/bootstrap-5-about-me-section-component/

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

html

@wnakswl

[접근성] Tab - 01.HTML / CSS 구조 잡기 Bootstrap 5 Achievements Section Component - HTMLCSSFreebies Bootstrap 5 Blog Section Template Component - HTMLCSSFreebies Bootstrap 5 About Me Section Component - HTMLCSSFreebies

Emmet Playground

<div class="a-class" id="an-id">Edit me!</div>

Shadow DOM slots, composition

<custom-menu id="menu">
  <span slot="title">Candy menu</span>
  <li slot="item">Lollipop</li>
  <li slot="item">Fruit Toast</li>
</custom-menu>

<script>
customElements.define('custom-menu', class extends HTMLElement {
  items = []

  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `<div class="menu">
      <slot name="title"></slot>
      <ul><slot name="item"></slot></ul>
    </div>`;

    // triggers when slot content changes
    this.shadowRoot.firstElementChild.addEventListener('slotchange', e => {
      let slot = e.target;
      if (slot.name == 'item') {
        this.items = slot.assignedElements().map(elem => elem.textContent);
        alert("Items: " + this.items);
      }
    });
  }
});

// items update after 1 second
setTimeout(() => {
  menu.insertAdjacentHTML('beforeEnd', '<li slot="item">Cup Cake</li>')
}, 1000);
</script>

Bilinear Gradients

<svg>
  <gradientRect x="0" y="0" width="100%" height="100%"
    gradient-type="bilinear"
    gradient-x1="30" gradient-y1="30"
    gradient-x2="100%-60" gradient-y2="100%-60"
    gradient-color1="cyan"
    gradient-color2="white"
    gradient-color3="magenta"
    gradient-color4="green" />
</svg>

<svg viewport-fill="#222">
  <mask id="mask">
    <rect x="50%+15" y="50%"  width="60" height="10" />
    <rect x="$-160"  y="$-10" width="60" height="10" />
    <rect x="$+15"   y="$-85" width="10" height="60" />
    <rect x="$-10"   y="$+40" width="10" height="60" />
  </mask>
  <svg mask="#mask" width="100%" height="100%">
    <gradientRect width="100%" height="100%" fill="cyan"
      gradient-type="bilinear"
      gradient-x1="10%" gradient-y1="10%"
      gradient-x2="80%" gradient-y2="80%"
      gradient-color2="yellow"
      gradient-color3="magenta"
      gradient-color4="green" />
  </svg>
</svg>

Clock face Guide

<svg viewport-fill="fb-cyan">
  <text id="clock-label" x="50%" y="50%+15"
      fill="black" font-size="32" font-family="System-Regular"
      text-anchor="middle" text-length="20">00:00:00</text>
</svg>

Clock face Guide

<svg viewport-fill="fb-cyan">
  <g id="mins" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-4" y="-110" width="8" height="110" fill="#e0e0e0" />
  </g>
  <g id="hours" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-6" y="-75" width="12" height="75" fill="#ffffff" />
  </g>
  <g id="secs" pointer-events="visible" transform="translate(50%,50%)">
    <rect x="$-2" y="-120" width="4" height="120" fill="#ff0000" />
  </g>
  <circle cx="50%" cy="50%" r="10" fill="#444444" />
</svg>

Angular 12 Detect Width and Height of Screen Tutorial - positronX.io

<div class="container text-center mt-5">

  <p>Window width: <strong>{{ getScreenWidth }}</strong></p>
  <p>Window height: <strong>{{ getScreenHeight }}</strong></p>

</div>

Navbar - Materialize

  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

How to remove ssl in centos and cyberpanel - CV.Irando

rm -rf /etc/letsencrypt/live/example.com

HTML5 Template: A Basic Boilerplate for Any Project - SitePoint

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>
  <meta name="description" content="A simple HTML5 Template for new projects.">
  <meta name="author" content="SitePoint">

  <meta property="og:title" content="A Basic HTML5 Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
  <meta property="og:description" content="A simple HTML5 Template for new projects.">
  <meta property="og:image" content="image.png">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body>
  <!-- your content here... -->
  <script src="js/scripts.js"></script>
</body>
</html>

How to Use Position: Sticky for Sidebars with Pure CSS and Bootstrap | DigitalOcean

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sticky Position Example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      .placeholder-example {
        background: lavender;
        height: 100vh;
        padding: 1em;
      }

      .sticky-example {
        background: cornflowerblue;
        padding: 1em;
      }

      .sticky {
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="sticky-example sticky">Sticky</div>
    <div class="placeholder-example">Placeholder</div>
  </body>
</html>

Fetch GET API Call

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>

Basic slick Slider Codes

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

HTML5 Structural Elements

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Chili Recipe</title>
</head>
<body>
   <h1>Recipe Book</h1>
   <nav>
      <ul>
         <li><a href="recipes.html">Recipes</a></li>
         <li><a href="tips.html">Tips</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </nav>
   
   <main>
      <h2>Recipe for Chili</h2>
      <p>Instructions...</p>
   </main>
   
   <footer>Copyright, me</footer>
   
</body>
</html>

HTML5 Structural Elements<article>

<article>
   <h1>PB&J Sandwiches</h1>
   <p>Here's how to make this snack staple.</p> 
   
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li>Peanut Butter</li>
         <li>Jelly</li>
         <li>Bread</li>
      </ul>
   </section>

   <section>
      <h2>Instructions</h2>
      <ol>
         <li>Get two slices of bread.</li>
         <li>Spread peanut butter on one side of both slices.</li>
         <li>Spread jelly over the peanut button on one slice of bread.</li>
         <li>Press bread slices together.</li>
      </ol>
   </section>
</article>

Browse more snippets >>