CodePen

HTML

            
              

		<ol><div class="grid">
			<article><div class="grid-1-3"> 
				<div class="module">
					<li><h1>Title 1</h1></li>
						<div class="background">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
							dolor quam veritatis dolorem eum omnis doloribus commodi iste
							placeat eligendi ex nulla architecto perferendis est totam quidem
							laboriosam cumque quisquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
							dolor quam veritatis dolorem eum omnis doloribus commodi iste
							placeat eligendi ex nulla architecto perferendis est totam quidem
							laboriosam cumque quisquam. </p>
						</div>
				</div>
			</div>
			<div class="grid-2-3">
				<div class="right-module">
					<ul class="buy-btns">
					  	<li><span>link</span></li>
					  	<li><a href="">link</a></li>
					</ul>
					<p>descr 1 <br/> <span>SOME TEXT BELOW </p></span>
					<p>description 2 <br/><span> SOME TEXT BELOW </span></p>
					<p> descriptions number 3 <br/> <span>SOME TEXT BELOW </p></span>
				</div>
			</div>
		</div>
	</article>
		<div class="grid">
		<article>
			<div class="grid-1-3"> 
				<div class="module">
						<li><h1>Title 2</h1></li>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque
							dolor quam veritatis dolorem eum omnis doloribus commodi iste
							placeat eligendi ex nulla architecto perferendis est totam quidem
							laboriosam cumque quisquam. </p>
				</div>
			</div>
			<div class="grid-2-3">
				<div class="right-module">
					<ul class="buy-btns">
					  <li><span>link</span></li>
					  <li><a href="">link</a></li>
					</ul>
					<p>descr 1 <br/> <span>SOME TEXT BELOW </p></span>
					<p>description 2 <br/><span> SOME TEXT BELOW </span></p>
					<p> descriptions number 3 <br/> <span>SOME TEXT BELOW </p></span>
			</div>
		</article>
		</div><ol>
	            
		

	

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="/js/script.js" type="text/javascript"></script>

</grid> <!--- END div.grid --->
<?php include("parts/footer.php"); ?>
</html>
            
          
!
via HTML Inspector

CSS

            
              .pointer {
    cursor: pointer;
    }

.expanded {
	background: #e05f5a;
	@include transition(background .2s linear);
	color: white;
	width: 100%;
	}

 
.fonts {
	margin-top: 100px;
}

h1 {
	font-size: 3.5em;
	line-height: 100px;
	margin-bottom: 18px;
	margin-top: 0;
	color: #e05f5a;
}

ol li {
	font-size: 20px;
	list-style-type: decimal-leading-zero;
	color: #e05f5a;
	padding-left: 10px;
	
}

p {
	font-size: 18px;
	width: 90%;
	line-height: 25px;
	margin: 0 0 0 0;
		
}

span {
		font-size: 10px;
}

h2 {
	font-size: 18px;
	line-height: 124px;
	margin-bottom: 18px;
	padding-top: 12px;
}

h3 {
	font-size: 12px;
	line-height: 18px;
}


.right-module {
	margin-top: 30px;
	background: 0;
	margin-left: 20px;
	padding-left: 20px;
}

.left-module {
	margin-top: 40px;
	background: 0;
	margin-left: 60px;
	padding-left: 20px;
	padding-right: 0;
}


footer {
	margin-top: 800px;
}




.buy-btns {
	list-style: none;
	padding: 5px;
	margin-bottom: 30px;
	li {
		display: inline;

	}
}

	span {
		color: #e05f5a;
		font-size: 14px;
	}
  
	a {
		display: inline-block;
		background: white;
		color: #e05f5a;
		padding: 8px;
		font-size: 15px;
		border: 0;

	}
  


  
  
.grid {
	padding: 0px 0 20px 80px;
	margin-bottom: 80px;
	&:after {
		content: "";
		display: table;
		clear: both;
	  }
}

[class*='grid-'] {
	float: left;
	
}

[class*='column'] 

.grid-1 {
	width: 100%;
}

.grid-1-8 {
	width: 12.5%
}

.grid-1-2 {
	width: 50%;
}

.grid-1-4 {
	width: 25%;
}

.grid-3-4 {
	width: 75%;
}

.grid-2-3 {
	width: 66.66%;
}

.grid-1-3 {
	width: 33.33%;
}

.grid-right {
	width:62.5%;
}










            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('article p, article .buy-btns').hide();
$('article h1').addClass('pointer').click(function() {
    var $article  = $(this).parent(),
        $siblings = $(this).siblings();
    if ($article.hasClass('expanded')) {
      $siblings.slideToggle('slow').promise().done(function() {
        $article.removeClass('expanded');
      });
    } else {
      $article.addClass('expanded');
      $siblings.slideToggle('slow');
    }
  });


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................