Align Paragraph with the icon using CSS - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:p

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. p

Description

Align Paragraph with the icon using CSS

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>card</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.card-container {<!--   ww w . j a v  a2 s . com-->
   display:flex;
}

.landing-page-card {
   margin:11px;
   padding:21px;
   background:Chartreuse;
   width:29%;
   float:left;
}

.card-heading {
   text-transform:uppercase;
   font-size:25px;
   color:yellow;
   margin-bottom:16px;
}

.card-subheading {
   font-size:16px;
   font-weight:601;
   margin:0 0 11px 0;
}

.card-icon {
   width:41px;
   max-width:41px;
   height:31px;
   background:black;
   border-radius:51%;
   margin-right:11px;
   color:blue;
   text-align:center;
   margin-top:5px;
   padding-top:11px;
   flex:2;
}

.card-content {
   font-size:14px;
   flex:2;
}

.card-link {
   text-decoration:none;
   font-size:16px;
   color:pink;
}
</style> 
 </head> 
 <body> 
  <div class="landing-page-card"> 
   <h1 class="card-heading">HEADING</h1> 
   <h6 class="card-subheading">Sub Heading</h6> 
   <div class="card-container"> 
    <span class="card-icon"> icon </span> 
    <p class="card-content"> 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. <br> <a href="#" class="card-link" target="_blank">Download Report &gt; </a> </p> 
   </div> 
  </div> 
  <div class="landing-page-card"> 
   <h1 class="card-heading">HEADING</h1> 
   <div class="card-content"> 
    <p>There's power in partnering up. With Nielsen's Connected Partner Program you can easily connect your network. Now, you can shift from managing and analyzing data to making smarter, faster decisions. Because when the data and analytics get smarter, everyone wins.</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials