sections

easy section wrap in foundation - 3 boxes responsive

Posted in sections
9460
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" />
Posted in sections
9460
12:23 am, September 29, 2021

View Statistics
This Week
250
This Month
1266
This Year
3020

No Items Found.

Add Comment
Type in a Nick Name here
 
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 16
sections http 23
sections https 82
sections SANS 65
sections section 79
sections google 74
sections Videos 84
sections api 95
sections text 94
sections Sheet 93
sections back 92
sections videos 101
sections responsive 97
sections Poppins 82
sections font 94
sections pop 103
sections height 92
sections have 92
sections referrer 86
sections VIDEO 103
sections Height 106
sections loop 120
sections Google 109
sections import 173
sections source 115
sections Video 116
sections easy 121
sections grid 115
sections large 109
sections Display 95
sections Play 80
sections Image 94
sections ajax 99
sections mage 120
sections multiple 136
sections margin 113
sections read 113
sections adding 108
sections sheet 110
sections style 93
sections this 108
sections display 97
sections fac 106
sections play 97
sections sim 104
sections Center 97
sections grid-x 105
sections unsplash 124
sections video 115
sections CSS 125
sections image 100
sections foundation 141
sections Responsive 106
sections Source 110
sections section wrap in foundation 90
sections more 107
sections sans 106
sections css 132
sections poppins 103
sections Change 90
sections weight 127
sections change 95
sections fonts 130
sections git 118
sections html 110
sections href 105
sections sections 155
sections center 116
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress
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...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

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

james clear
Random CSS Property

animation

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
animation css reference