HTML CSS Sections
Posted in
2545
1:36 am, August 31, 2022
Overview full width section in Poppins font with light gray background using foundation
Quick overview full width section code. Lightgray and teal colours on white background.
Overview full width section in Poppins font with light gray background using foundation Demo
View Demo Full Screen View Demo New Tab
Overview full width section in Poppins font with light gray background using foundation Code
HTML
<section class="overview-section">
<div class="grid-container">
<div class="grid-x">
<div class="large-12 cell">
<div class="overview-box">
<div class="overview-title">
<h1>Overview</h1>
</div>
<div class="overview-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div>
<div class="overview-link">
<a href='#!'>Learn more <svg width="18" height="8" viewBox="0 0 18 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3536 4.35355C17.5488 4.15829 17.5488 3.84171 17.3536 3.64645L14.1716 0.464465C13.9763 0.269203 13.6597 0.269203 13.4645 0.464465C13.2692 0.659727 13.2692 0.97631 13.4645 1.17157L16.2929 4L13.4645 6.82843C13.2692 7.02369 13.2692 7.34027 13.4645 7.53553C13.6597 7.73079 13.9763 7.73079 14.1716 7.53553L17.3536 4.35355ZM4.37114e-08 4.5L17 4.5L17 3.5L-4.37114e-08 3.5L4.37114e-08 4.5Z" fill="#273270"/></svg></a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
.overview-section {
text-align:center;
margin:80px 0;
}
.overview-box {
background: rgb(208 208 208 / 47%);
border-radius: 20px;
padding:70px 60px;
}
.overview-title h1 {
margin-bottom:20px;
font-family: 'Poppins',sans-serif;
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 121%;
color: #4fa89e;
}
.overview-text p {
margin-bottom:20px;
font-family: 'Poppins',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 144%;
text-align: center;
color: #1d3d39;
}
.overview-link a {
font-family: 'Poppins',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 121%;
color: #1d3d39;
}
Scripts
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css" />
Related Tags
Add Comment
Other Items in HTML CSS Sections
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
HTML Canvas
javascript