Responsive Full-Width Section HTML5 CSS3

The HTML

To HTML for the responsive full-width section is simple. First, we’ll use the section tag to contain all the elements that will be in the section. Each tag has a unique class name so that the styling is specific to the section and not the whole web page.


<script type="prism-html-markup">
<section id="xop-about">
<div class="xop-container">
<h2 class="xop-heading">About Me</h2>
<p class="xop-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus at lectus vitae laoreet. Vestibulum malesuada risus quis ipsum laoreet pulvinar. Quisque placerat, purus ac egestas sollicitudin, ante nulla tempus nisl, a ullamcorper massa dolor id libero. Nam tincidunt ullamcorper blandit. Sed cursus sit amet diam a vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eu dui vel justo sagittis auctor vel non turpis. Etiam malesuada sem eu massa pulvinar, sit amet rhoncus augue rhoncus. Nam at elit vel lectus tincidunt semper. In hac habitasse platea dictumst. Mauris ac lacus sit amet dui posuere porta eu eu erat. Maecenas pharetra sagittis sodales.</p>
        <a class="xop-more" href="#">Learn more</a>
    </div>
</section>
</script>

The CSS

The CSS for the responsive full-width section is written in the order in which the appear. The <a> tag is written first since this is a global style. The most important CSS style is the .xop-container element. The declaration for this element is what makes the section responsive. By using max-width: 85% and width: 960px together, the sections container (which holds all the text elements) will go no wider than 960px so that it’s contained nicely in the section. When the browser goes below 960px, it will adjust nicely to the width of the browser.


a {
text-decoration: none;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}

#xop-about {
padding: 60px 0;
background: #3498DB;
text-align: center;
color: #fff;
font-family: ‘Source Sans Pro’, sans-serif;
font-size: 1.6rem;
line-height: 1.3;
text-rendering: optimizeLegibility;
}

.xop-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}

.xop-heading {
margin: 0;
font-size: 2.6rem;
font-weight: 700;
padding-bottom: 2rem;
letter-spacing: 0.08rem;
}

.xop-text {
margin-bottom: 20px;
font-size: 2rem;
line-height: 1.5;
font-weight: 400;
letter-spacing: 0.08rem;
}

.xop-more {
display: block;
margin: 2rem 0 0;
color: #19669A;
font-weight: 700;
font-size: 2rem;
}

.xop-more:hover {
color: #fff;
}

.xop-more::after {
content: “\f061”;
font-family: FontAwesome;
padding-left: 10px;
}

Like this article?

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.