Posted in sections
1644
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">
                    &nbsp;
    					    </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">
                    &nbsp;
    					    </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">
                    &nbsp;
    					    </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
258
This Month
1102
This Year
61

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
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...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
1. Show your work to the world instead of keeping in your head💆. 2. Do the work consistently👌 3. Respect your work🥰 4. Don't postpone your work 5. Make mistakes 🔥🔥🔥
Unknown
Random CSS Property

place-self

The place-self CSS shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as Grid or Flexbox. If the second value is not present, the first value is also used for it.
place-self css reference