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

8971

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

8971

1:13 am, October 1, 2021

View Statistics

This Week

324

This Month

960

This Year

2324

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 wrap 13

sections http 21

sections https 88

sections SANS 59

sections section 85

sections google 69

sections with 83

sections api 86

sections text 86

sections Sheet 83

sections pop 109

sections stack 101

sections responsive 111

sections animated 109

sections animate 117

sections Stack 122

sections Poppins 87

sections font 86

sections have 93

sections switch 101

sections Easily 85

sections Google 93

sections just 92

sections import 174

sections list 114

sections ajax 103

sections grid 101

sections large 118

sections block 95

sections Display 92

sections Play 95

sections Image 92

sections mage 109

sections margin 114

sections nice 96

sections adding 89

sections sheet 107

sections style 96

sections the 93

sections display 87

sections image 101

sections fac 115

sections Center 102

sections unsplash 118

sections fonts 126

sections item 120

sections html 114

sections grid-x 92

sections gif 128

sections content 91

sections sim 107

sections play 94

sections Block 80

sections easily 100

sections poppins 104

sections open 108

sections css 120

sections center 95

sections foundation 150

sections weight 115

sections sans 90

sections Responsive 107

sections CSS 104

sections open sans 100

sections git 124

sections href 100

sections here 111

sections sections 147

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...