Posted in
7
12:23 am, September 29, 2021
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
HTML
<div class='boxsection-wrap'>
<div class='grid-container'>
<div class="grid-x grid-padding-x grid-margin-x">
<div class="large-12 cell">
<div class="boxsection">
<div class="boxsection-title">
<h2>Box Section Title</h2>
</div>
<div class="boxsection-boxes">
<div class="grid-x grid-margin-x">
<div class="large-4 cell">
<div class="boxsection-box bsbi1">
<div class="boxsection-box-image">
</div>
<div class="boxsection-box-title">
My Title
</div>
<div class="boxsection-box-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. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.
</div>
<div class="boxsection-box-link">
<a href="#!">Read More</a>
</div>
</div>
</div>
<div class="large-4 cell">
<div class="boxsection-box bsbi2">
<div class="boxsection-box-image">
</div>
<div class="boxsection-box-title">
My Title
</div>
<div class="boxsection-box-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. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.
</div>
<div class="boxsection-box-link">
<a href="#!">Read More</a>
</div>
</div>
</div>
<div class="large-4 cell">
<div class="boxsection-box bsbi3">
<div class="boxsection-box-image">
</div>
<div class="boxsection-box-title">
My Title
</div>
<div class="boxsection-box-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. In eu velit sed nunc euismod tempor ac at odio. Mauris sit amet mi ac turpis rutrum congue sit amet id nunc.
</div>
<div class="boxsection-box-link">
<a href="#!">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
.boxsection-wrap {
margin:0 auto;
width:100%;
max-width:1200px;
padding:50px 0;
}
.boxsection {}
.boxsection-title {}
.boxsection-box-link {}
.boxsection-box-link a {
}
.boxsection-box-text {
margin-bottom:10px;
}
.boxsection-box-title {
font-weight:bold;
font-family:"Poppins", sans-serif;
margin-bottom:10px;
}
.boxsection-box-image {
height:200px;
width:100%;
margin-bottom:10px;
/* background:url(https://unsplash.it/900/700) center no-repeat; */
}
.bsbi1 .boxsection-box-image{
background:url(https://unsplash.it/900/700) center no-repeat;
background-size:cover;
}
.bsbi2 .boxsection-box-image{
background:url(https://unsplash.it/900/700) center no-repeat;
background-size:cover;
}
.bsbi3 .boxsection-box-image{
background:url(https://unsplash.it/900/700) center no-repeat;
background-size:cover;
}
Scripts
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/css/foundation.min.css" integrity="sha512-2meDMHyoDRV8O0gr5Diq32ch+6QqI9Af9Km4eFwgxZg356CbUI4S30C3zuUetkNAN4Bn+17y9OgxoQ3HnQ648w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
View Statistics
This Week
41
This Month
320
This Year
0
Add Comment
Other Items in sections
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress