Posted in
1972
2:41 am, September 27, 2022
section with image to the right text to the left gradient
section with image to the right and text to the left, can be a block on a landing page, easy find and replace the section names with new names to create new class section items.
Preview - Full Screen
section with image to the right text to the left gradient Demo
View Demo Full Screen View Demo New Tab
section with image to the right text to the left gradient Code
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.min.css" />
<section class="block-section">
<div class="grid-container">
<div class="block-section-inner">
<div class="grid-x grid-padding-x">
<div class="large-6 cell">
<div class="block-section-content">
<p>"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. "</p>
</div>
<div class="block-section-link">
<a href='#!'>read more... </a>
</div>
</div>
<div class="large-6 cell">
</div>
</div>
</div>
</div>
</section>
CSS
/* replace block-section with your own class name */
/* block-section */
.block-section {
padding:190px 0;
background:linear-gradient(90deg, rgba(255,255,255,1),rgba(255,255,255,0) ), url("https://i.imgur.com/RFAN7VK.jpeg") center right no-repeat;
background-size:cover;
}
.block-section-inner {}
.block-section-content {}
.block-section h1 {}
.block-section h2 {}
.block-section p {
font-style: normal;
font-weight: bold;
font-size: 28px;
line-height: 150%;
color: #1E1E1E;
margin-bottom:20px;
}
.block-section-link {}
.block-section-link svg {
margin-left:5px;
height:12px;
}
.block-section-link a {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 22px;
text-decoration-line: underline;
color: #444;
}
/* block-section */
Related Tags
Add Comment
Other Items in 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