Alignment

by Nathan Leachman

HTML

<div class="info gradient">

<ul>
<li><p class="text-01" style="margin-left:200px">Lorem</p> <p class="description-01" style="margin-left:180px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-02" style="margin-left:200px">Ipsum</p> <p class="description-02" style="margin-left:180px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>

<li><p class="text-03" style="margin-left:200px">Dolor</p> <p class="description-03" style="margin-left:180px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
</ul>

</div>

CSS

div.info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	clear: both;
	float: none;
	display: block;
	visibility: visible;
    background: #4b7279;
}
div.info p.info-tittle {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	margin: 8% 0 0 0;
	padding: 0;
	clear: both;
	float: none;
	display: block;
	visibility: visible;
	
	text-align: center;	
	font-family: 'Fjalla One', Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 35px;
	
	color: #d2e6da;
}
div.info ul {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	clear: none;
	float: left;
	display: block;
	visibility: visible;
	
	list-style: none;
	list-style-type: none;
	list-style-image: none;
	
	background-color: rgba(255,0,0,0.5);
}
div.info ul li {
	list-style: none;
	list-style-type: none;
	list-style-image: none;
}
div.info ul li p.text-01 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 0 0 35%;
	padding: 0;
	clear: none;
	float: left;
	display: block;
	visibility: visible;
	
	text-align: start;	
	font-family: 'Open Sans', Verdana, Geneva, Helvetica, Arial, sans-serif;
  	font-style: normal;
  	font-weight: 800;
	font-size: 3%;
	
	color: #ffdbbd;
}
div.info ul li p.text-01:after {
	position: absolute;
	top: 0;
	left: 0;
	
	margin: -40px 0 0 -130px;
	padding: 0;
	clear: none;
	float: left;
	display: block;
	visibility: visible;
	
	text-align: start;	
	font-family: 'SOSA';
  	font-style: normal;
  	font-weight: 800;
	font-size: 130px;
	
	white-space: pre;
	content: "]";
	
	color: #d2e6da;
	color: rgba(210, 230, 218, 0.2);
}
div.info ul li p.description-01 {
	position: relative;
	width: 60%;
	height: auto;
	margin: 0 0 0 26%;
	padding: 0;
	clear: none;
	float: left;
	display: block;
	visibility: visible;
	
	text-align: start;	
	font-family: 'Fjalla One', Verdana, Geneva, Helvetica, Arial, sans-serif;
  	font-style: normal;
  	font-weight: 800;
	font-size: 2%;
	
	color:...

JavaScript

var fontFix = function () {
    var width = window.innerWidth || document.documentElement.clientWidth;
    document.body.style.fontSize = width + "px";
};
window.addEventListener('resize', fontFix);
window.addEventListener('load', fontFix);