I'm facing a dilemma. I've been striving to replicate the layout of my training website blocks to look like this: http://prntscr.com/4cd4gm. However, aligning text and paragraphs has become an obstacle for me. Despite succeeding in aligning pictures, the struggle with text alignment continues. Even attempts with columns have proven futile. It seems like such a simple task that I'm perhaps overthinking. Could someone extend a helping hand? Your assistance would be greatly appreciated! Below is the code snippet.
http://codepen.io/anon/pen/KbhoB
<html lang="en">
<head>
<meta charset="UTF-8">
<title> xxx</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="grid">
<div class="headerbg">
<h1>Welcome to the homepage</h1>
</div><!-- END HEADERBG -->
<div class="first-panel">
<img src="http://i.imgur.com/Fy3HxDt.png" class="img1" alt="IPAD">
<img src="http://i.imgur.com/HnnetnV.png" class="img2" alt="IPHONE">
<div class="main-text-heading">
<h2 class="main-heading first-panel-heading">Flexible</h2>
<p class="main-text first-panel-text">Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
</div>
</div><!-- END FIRST PANEL -->
<div class="second-panel">
<!-- <img src="img/clock-cloud.png" alt="Clock and Cloud"> -->
<h2 class="main-heading">Fast</h2>
<p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing 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</p>
</div><!-- END SECOND PANEL -->
</div><!-- END GRID -->
</body>
</html>
and css
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
/* --------------- TEXT ---------------*/
h1 {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1.875em; /* 30/16=1.975em */
font-weight: 700;
color: #fff;
}
.main-heading {
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1.5em; /* 24/16 = 1.5 em */
line-height: 1.5;
color: #8b8b8b;
}
.main-text {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 1.4;
color: #8b8b8b;
}
/* --------------- FIXING WHITE SPACES -- */
body {
margin: 0;
overflow: hidden;
}
/* -------------- HEADER --------------- */
.headerbg {
position: absolute;
background-color: #04bf75;
width: 100%;
padding-top: 25.5em; /* 408/16 */
padding-left: 3em; /* 1200/400 */
display: block;
}
h1 {
text-align: center;
position: relative;
right: 0;
bottom: 204px; /* 408/2 */
margin-top: -0.9375em;/* 30/2; 15/16 */
}
/* --------------- MAIN SECTION ---------- */
/* --------------- FIRST PANEL ----------- */
.first-panel {
background-color: #e2e2e2;
margin: 0 auto;
padding: 25.5em 3em;
text-align: center;
width: 100%;
}
img {
float: left;
}
.first-panel-heading {
}
.first-panel-text {
}
p {
margin: 0;
}
div{
clear: both;
}