@ArjunKhara
The code for this tutorial is below. Feel free to use and adapt this code for your own projects. Just make sure to change the names of the company to your own entity's name or brand:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" "content=width=device-width, initial-scale=1" charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<title>Responsive Design Web Tutorial</title>
<style>
body{
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #676767;
padding: 0px;
margin: 30px;
background: #efefef;
}
.logo{
position: absolute;
top: 10px;
right: 20px;
color: #A07FB2;
font-size: 36px;
font-weight: 100;
}
.maincontainer{
position: relative;
max-width: 600px;
height: auto;
background: #ffffff;
margin: 50px 50px 50px 50px;
padding: 20px;
border-bottom: 2px solid #A07FB2;
box-sizing: border-box;
}
.mainflexcontainer{
position: relative;
max-width: 600px;
height: auto;
background: #ffffff;
margin: 50px;
display: flex;
flex-direction: row;
}
.mfcl{
background: #ffffff;
flex: 2;
padding: 20px;
font-size: 12px;
}
.mfcr{
position: relative;
background: #A07FB2;
color: #ffffff;
font-size: 2vmax;
text-align: center;
flex: 1 5%;
padding: 20px;
line-height: 1.1;
font-weight: 100;
}
#isosubline{
padding: 0;
margin-top: -5px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 100;
font-size: 17px;
}
/RESPONSIVE BEGINS/
@media screen and (max-width:900px){
.maincontainer{
margin: 40px 5px 40px 5px;
}
.mainflexcontainer{
margin: 50px 0px;
flex-direction: column;
}
.mfcr:after{
position: absolute;
content: '';
width: 0px;
height: 0px;
top: 100%;
left: 50%;
border-top: 10px solid #A07FB2;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin-left: -10px;
}
.logo{
position: relative;
top: 0px;
right: 0px;
color: #ff0000;
font-size: 24px;
font-weight: 100;
width: 100%;
text-align: center;
}
#isosubline{
letter-spacing: 2px;
font-size: 11px;
}
}
/RESPONSIVE ENDS/
</style>
</head>
<body>
<div class="logo">Quantico.<br/><p id="isosubline">ISO Certified Organisation<br/>www.qc.sg</p></div>
<section class="maincontainer">
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 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="mainflexcontainer">
<section class="mfcr">Quality Policy.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</section>
</section>
<section class="mainflexcontainer">
<section class="mfcr">Operations Procedure.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</section>
</section>
<section class="mainflexcontainer">
<section class="mfcr">Work Instructions.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</section>
</section>
</body>
</html>
@farmako-net