Mini Task 1

index.html

<div class="container">
	<div class="row first">
		<div class="why-islam">
			<div class="heading">
				<hr />
				<h2>why <span>islam</span></h2>
			</div>
			<p><b>Islam</b> is the tastes: grawIng religIon In the woridA indeed. one out of every five
persons on this earth :5 a Musflm. There are nearly 3 miiIion Muslums living In
United Kingdom and the number Is growing. Yet. unfortunately. Islam is aiso the
most misunderstood religion. Muslims Me In diiferent parts 0! the werld ranging
from China to Argenuna. Russu Io South Africa. The country mm the larges:
Muslim population is Indonesia , <a href="https://en.wikipedia.org/wiki/Islam">read more</a></p>
			<h3>pillars of <span>iman</span></h3>
			<div class="row">
				<ul>
					<li>belief in Allah</li>
					<li>belief in Angels</li>
					<li>belief in Allah Revealed Books</li>
				</ul>
				<ul>
					<li>belief in the Prophets</li>
					<li>belief in the Day of Judgment</li>
					<li>belief in al-Qadar</li>
				</ul>
			</div>
		</div>
		<div class="quran-img"></div>
	</div>
</div>

mini-task-1.markdown

Mini Task 1

A Pen by abdurraufahmad on CodePen.

License.

script.js

// only html & css

style.css

* { box-sizing: border-box }

body {
	padding: 0;
	margin:0;
	background-color: #eaeaea;
}

.container {
	width: 90%;
	margin: 80px auto;
}

.row {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}

.why-islam, .quran-img, ul { width: 50% }

.quran-img {
	background-image: url('http://www.islamicity.org/wp-content/plugins/blueprint-timthumb/timthumb.php?src=http://media.islamicity.org/wp-content/uploads/2015/07/Quran1.jpg&w=1200&h=675&q=50');
	-webkit-background-size: cover;
	background-size: cover;
}

h2, h3 {
	text-transform: uppercase;
	font-weight: bold;
	font-family: Arial, tahoma;
}

.heading {
	position: relative;
	text-align: center;
  width: 70%;
  overflow: hidden;
}

.heading hr {
  position: absolute;
  top: 35%;
  border: 1px solid #0cb698;
  width: 100%;
	z-index: 1;
}

h2 {
	position: relative;
	display: inline-block;
  background-color: #eaeaea;
  z-index: 2;
  padding: 0 10px;
}

h2 span, h3 span { color: #0cb698 }

.heading::after, .heading::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #0cb698;
  top: 40%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.heading::after { left: 0 }

.heading::before { right: 0 }

p {
	line-height: 2;
	margin-right: 40px;
  overflow: hidden;
}

p a {
  float: right;
  text-transform: uppercase;
  text-decoration: none;
  color: #0cb698;
  margin-top: 15px;
}

h3 {
	display: inline-block;
	position: relative;
	border-bottom: 2px solid #0cb698;
	margin: 20px 20px;
	padding-bottom: 5px;
}

h3::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #0cb698;
  top: 40%;
  left: -20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul {
	margin: 0;
	padding: 0px 20px;
}

ul li { list-style: none; }

ul li {
	margin: 0 0 10px 20px;
	position: relative;
}

ul li:first-letter { text-transform: capitalize }

ul li::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #0cb698;
  top: 25%;
  left: -20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .container { margin: 0 }
  
  .container, .why-islam, .quran-img { width: 100%; }			

  .why-islam { margin-left: 10px }

  .quran-img { min-height: 100vw; }

  .first {
		-webkit-flex-direction: column-reverse;
		-moz-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
}