How to make a responsive paragraph with Text and Button?
Updated On: 2024-06-13
Learn how to make a responsive paragraph with Text and Button.
Example 1
HTML
<section> <div class="intro"> <h1>Photo Gallery</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <a class="btn" href="#">Explore</a> </div> </section>
CSS
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); $dark:#222; $strongDark:#111; $light:#fff; $clouds:#ecf0f1; $strongClouds: rgba(174,178,183, 0.1); $wetAsphalt:#34495e; $font:'Josefin Sans', sans serif; html, body{ height:100%; margin:0; padding:0; font-family:$font; color: $light; } body{ background: $wetAsphalt; } h1{ text-transform: uppercase; } p{ text-align: justify; } section{ display:flex; flex-direction: columns; height:100%; position:relative; } section:after{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; background: url('https://c1.staticflickr.com/1/700/33168271301_35698586a8_c.jpg'); background-size: cover; opacity:0.8; } @mixin setBtn($borderColor,$bgColor,$txtColor){ border:1px solid $borderColor; background: $bgColor; color:$txtColor; } .intro{ margin: auto; width:20%; position:relative; z-index:1; } .btn{ display:block; position:relative; margin:0 auto; padding:1.2em 3em; border-radius:2px; @include setBtn($clouds,$strongClouds,$clouds); text-decoration:none; text-transform:uppercase; text-align:center; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .btn:hover{ @include setBtn($strongDark,$dark,$light); } .btn:focus{ @include setBtn($strongDark,$strongDark,$light); } @media only screen and (max-width: 800px){ .intro{ width:80%; } }
Example 2
Related video
Related Resources
For more information, you can use the following resources: