stackable bio or biography list with portrait image title and text [ sections ] - KruXoR

sections

stackable bio or biography list with portrait image title and text

Posted in sections

462

1:13 am, October 1, 2021

stackable bio or biography list with portrait image title and text

a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout.

As its in foundation here is a sample

or you can see the animated responsive version here

HTML

<div class='bio-section-wrap'>

  <div class='bio-item'>
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-2 cell">
        <div class="bio-image">
          <img src="https://unsplash.it/140/140">
        </div>
      </div>
      <div class="large-9 cell">
        <div class="bio-title">
          Lorem ipsum dolor
        </div>
        <div class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi.
        </div>
      </div>
    </div>
  </div>

  <div class='bio-item'>
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-2 cell">
        <div class="bio-image">
          <img src="https://unsplash.it/140/140">
        </div>
      </div>
      <div class="large-9 cell">
        <div class="bio-title">
          Lorem ipsum dolor
        </div>
        <div class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi.
        </div>
      </div>
    </div>
  </div>

  <div class='bio-item'>
    <div class="grid-x grid-padding-x grid-margin-x">
      <div class="large-2 cell">
        <div class="bio-image">
          <img src="https://unsplash.it/140/140">
        </div>
      </div>
      <div class="large-9 cell">
        <div class="bio-title">
          Lorem ipsum dolor
        </div>
        <div class="bio-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praesent nec nunc vel quam facilisis scelerisque a ut orci. Sed sed enim vestibulum ex commodo venenatis vitae in mi.
        </div>
      </div>
    </div>
  </div>




</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
.bio-section-wrap {}
.bio-item {
  margin-bottom:20px;
  padding-bottom:20px;
}
.bio-image img {
  display:block;
}
.bio-image {
  display: flex;
	align-items: center;
	justify-content: center;
  width:100%;
}
.bio-title {
  font-family:"Poppins", sans-serif;
  font-weight:bold;
  font-size:22px;
  margin-bottom:10px;
}
.bio-text {
  font-family:"Open Sans", sans-serif;
}

Scripts

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css" />

Posted in sections

462

1:13 am, October 1, 2021

View Statistics

This Week

353

This Month

941

This Year

3239

No Items Found.

Add Comment

Other Items in sections

slick slider section quick add subscribe to newsletter section example four box section template in foundation with classes find and replace (4 box) four box responsive section with all classes find and replace boxsection title foundation grid (4 box) two box responsive section with all classes find and replace boxsection title foundation grid (2 box) basic section item with foundation wrap and grid - single item in section html and css hoizontal simple timeline section in foundation responsive three box section with tabular data or table data stackable bio or biography list with portrait image title and text easy section wrap in foundation - 3 boxes responsive easy section wrap in foundation

Related Search Terms

sections font-family 1

sections foundation 2

sections fonts 2

sections open sans 1

sections HTML 1

sections sans 2

sections block 1

sections font 1

sections weight 1

sections switch 1

sections grid 2

sections margin 1

sections ajax 1

sections Unsplash 1

sections animate 3

sections SANS 2

sections adding 2

sections lore 1

sections display 1

sections html 2

sections href 2

sections item 4

sections nice 3

sections http 3

sections easily 2

sections style 3

sections import 3

sections open 1

sections google 2

sections Google 1

sections play 3

sections have 2

sections here 1

sections content 2

sections Play 3

sections Center 3

sections sheet 3

sections grid-x 2

sections Sheet 3

sections Responsive 3

sections Stack 5

sections https 2

sections unsplash 5

sections large 2

sections with 6

sections mage 10

sections text 8

sections stack 5

sections sections 6

sections Image 8

sections image 9

sections Poppins 4

sections list 8

sections just 2

sections section 2

Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...