riyaz-ali/imad_profile.html

## imad_profile.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Riyaz's IMAD Profile</title>
  <!-- some meta information about this page -->
  <meta charset="utf-8">
  <!-- prevent resizing the screen, used for mobile-first website -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <!-- Using Boostrap provided by Hasura --> <!-- Bootstrap? see https://getbootstrap.com-->
  <link rel="stylesheet" href="static/style.css">
  <!-- Font Awesome icon fonts for displaying icons on the page, learn more on http://fontawesome.io -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- some custom styling -->
  <style>
      html, body {
    height:100%;
    background-color: #eee;
    padding: 15px 5px;}

      .container {
    min-height: 100%; background-color:#fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

      .profile {
    position: relative;
    height: 175px;
    color: #fff;
    background: url("https://discourse.imad.hasura.io/uploads/default/original/2X/c/c49161a9c5b6fe38cb2386e6753d521c3b5e0855.jpg"); }

      .profile .fa {
    color: #fff !important;
    font-size: 24px;
    margin: 0 10px; }

      .profile-picture {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    padding: 10px;
    background: #fff;
    position: absolute; bottom: -25%; }

      .profile-content {
    position: absolute; left: 150px; bottom: 10px; }

      .content {
    margin-top: 60px;}
  </style>
</head>
<body>
  <!-- Rest of the page is styled using Bootstrap CSS Framework -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12 profile">
        <img alt="Profile Picture" class="profile-picture img-circle" src="https://avatars1.githubusercontent.com/u/17478576?v=4&u=cc4637482a45f3c5193157d551253be00bba6a13&s=100">
        <div class="profile-content">
          <h3 style="text-transform: uppercase;">Riyaz Ali Kagzi</h3><a href="https://github.com/riyaz-ali" target="_blank" title="Github Profile"><i class="fa fa-github"></i></a> <a href="https://stackoverflow.com/users/6611700/riyaz-ali" target="_blank" title="Stackoverflow Profile"><i class="fa fa-stack-overflow"></i></a> <a href="https://www.facebook.com/riyaz.kagzi" target="_blank" title="Facebook Profile"><i class="fa fa-facebook"></i></a> <a href="mailto:riyazkagzi17@gmail.com" target="_blank" title="Email Riyaz"><i class="fa fa-envelope-o"></i></a>
        </div>
      </div>
    </div>
    <div class="row content">
      <div class="col-xs-12 col-md-4">
        <ul class="list-group">
          <li class="list-group-item"><i class="fa fa-graduation-cap" style="margin-right: 5px;"></i> Student <span style="font-size: 0.8em">(BCA 2<sup>nd</sup> year)</span></li>
          <li class="list-group-item"><i class="fa fa-university" style="margin-right: 5px;"></i> MLSU</li>
          <li class="list-group-item"><i class="fa fa-map-marker" style="margin-right: 5px;"></i> Udaipur (Rajasthan)</li>
          <li class="list-group-item">
            <i class="fa fa-tasks" style="margin-right: 5px;"></i> Worked as a fullstack dev with <a href="https://my.homecampus.com.sg" target="_blank">Home Campus</a>
          </li>
        </ul>
      </div>
      <div class="col-xs-12 col-md-8">
        <p>Hello there! Thanks for taking time to checkout my IMAD profile.</p>
        <p>Let me introduce myself. I am <strong>Riyaz Ali</strong>, a <em>19-YO</em> teen from the beautiful city of lakes Udaipur. I am a self-taught developer with experience in Web-based technologies like Javascript, Python and frameworks such as AngularJS and Vuejs.</p>
        <p>I <i class="fa fa-heart" style="color: red; font-size:0.8em"></i> to code <i class="fa fa-code"></i>, listen to music <i class="fa fa-music"></i> and take a ride <i class="fa fa-bicycle"></i> around the beautiful <a href="https://en.wikipedia.org/wiki/Fateh_Sagar_Lake" target="_blank">Fatehsagar Lake</a>. In my free time, I also love to read and learn new things about computers and how new technologies are constantly changing our lives.</p>
        <p>I am currently pursuing Bachelors in Computer Applications from <a href="https://www.mlsu.ac.in/" target="_blank">Mohanlal Sukhadia University, Udaipur</a> and have completed my higher secondary education from <a href="http://www.stpaulsudaipur.com/" target="_blank">St. Paul's Udaipur</a>.</p>
        <p>Although, I've a good grasp on Web-related technologies, I have joined this course to dive into the really exiciting world of Mobile Technologies (<i class="fa fa-android" style="font-size: 1em; color: green;"></i> Yes, you android ;P) and I look forward in making good friends too! You can always reach out me on various platform links that I've shared above.</p>
        <p>Like my profile? Go ahead and share this page<br>
        <a class="twitter-share-button" data-show-count="false" data-size="large" data-text="Hey I just found this awesome profile on #imad! @HasuraEd. Check it out here -" href="https://twitter.com/intent/tweet">Tweet</a> <iframe frameborder="0" height="28" id="fb_share" name="fb_share" scrolling="no" src="" style="border:none;overflow:hidden" width="84"></iframe></p>
        <p>Curious one? Want to see the annotated code of this page? Check it out <a href="" target="_blank">here <i class="fa fa-external-link"></i></a></p>
      </div>
    </div>
  </div>
  <script async charset="utf-8" src="https://platform.twitter.com/widgets.js">
  </script>
  <script>
  var current_url = window.location.href;document.getElementById("fb_share").src="https://www.facebook.com/plugins/share_button.php?href="+current_url+"&layout=button_count&size=large&mobile_iframe=true&appId&width=84&height=28";
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Riyaz's IMAD Profile</title>
	<!-- some meta information about this page -->
	<meta charset="utf-8">
	<!-- prevent resizing the screen, used for mobile-first website -->
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

	<!-- Using Boostrap provided by Hasura --> <!-- Bootstrap? see https://getbootstrap.com-->
	<link rel="stylesheet" href="static/style.css">
	<!-- Font Awesome icon fonts for displaying icons on the page, learn more on http://fontawesome.io -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

	<!-- some custom styling -->
	<style>
	html, body {
	height:100%;
	background-color: #eee;
	padding: 15px 5px;}

	.container {
	min-height: 100%; background-color:#fff;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

	.profile {
	position: relative;
	height: 175px;
	color: #fff;
	background: url("https://discourse.imad.hasura.io/uploads/default/original/2X/c/c49161a9c5b6fe38cb2386e6753d521c3b5e0855.jpg"); }

	.profile .fa {
	color: #fff !important;
	font-size: 24px;
	margin: 0 10px; }

	.profile-picture {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	padding: 10px;
	background: #fff;
	position: absolute; bottom: -25%; }

	.profile-content {
	position: absolute; left: 150px; bottom: 10px; }

	.content {
	margin-top: 60px;}
	</style>
	</head>
	<body>
	<!-- Rest of the page is styled using Bootstrap CSS Framework -->
	<div class="container">
	<div class="row">
	<div class="col-xs-12 profile">
	<img alt="Profile Picture" class="profile-picture img-circle" src="https://avatars1.githubusercontent.com/u/17478576?v=4&u=cc4637482a45f3c5193157d551253be00bba6a13&s=100">
	<div class="profile-content">
	<h3 style="text-transform: uppercase;">Riyaz Ali Kagzi</h3><a href="https://github.com/riyaz-ali" target="_blank" title="Github Profile"><i class="fa fa-github"></i></a> <a href="https://stackoverflow.com/users/6611700/riyaz-ali" target="_blank" title="Stackoverflow Profile"><i class="fa fa-stack-overflow"></i></a> <a href="https://www.facebook.com/riyaz.kagzi" target="_blank" title="Facebook Profile"><i class="fa fa-facebook"></i></a> <a href="mailto:riyazkagzi17@gmail.com" target="_blank" title="Email Riyaz"><i class="fa fa-envelope-o"></i></a>
	</div>
	</div>
	</div>
	<div class="row content">
	<div class="col-xs-12 col-md-4">
	<ul class="list-group">
	<li class="list-group-item"><i class="fa fa-graduation-cap" style="margin-right: 5px;"></i> Student <span style="font-size: 0.8em">(BCA 2<sup>nd</sup> year)</span></li>
	<li class="list-group-item"><i class="fa fa-university" style="margin-right: 5px;"></i> MLSU</li>
	<li class="list-group-item"><i class="fa fa-map-marker" style="margin-right: 5px;"></i> Udaipur (Rajasthan)</li>
	<li class="list-group-item">
	<i class="fa fa-tasks" style="margin-right: 5px;"></i> Worked as a fullstack dev with <a href="https://my.homecampus.com.sg" target="_blank">Home Campus</a>
	</li>
	</ul>
	</div>
	<div class="col-xs-12 col-md-8">
	<p>Hello there! Thanks for taking time to checkout my IMAD profile.</p>
	<p>Let me introduce myself. I am <strong>Riyaz Ali</strong>, a <em>19-YO</em> teen from the beautiful city of lakes Udaipur. I am a self-taught developer with experience in Web-based technologies like Javascript, Python and frameworks such as AngularJS and Vuejs.</p>
	<p>I <i class="fa fa-heart" style="color: red; font-size:0.8em"></i> to code <i class="fa fa-code"></i>, listen to music <i class="fa fa-music"></i> and take a ride <i class="fa fa-bicycle"></i> around the beautiful <a href="https://en.wikipedia.org/wiki/Fateh_Sagar_Lake" target="_blank">Fatehsagar Lake</a>. In my free time, I also love to read and learn new things about computers and how new technologies are constantly changing our lives.</p>
	<p>I am currently pursuing Bachelors in Computer Applications from <a href="https://www.mlsu.ac.in/" target="_blank">Mohanlal Sukhadia University, Udaipur</a> and have completed my higher secondary education from <a href="http://www.stpaulsudaipur.com/" target="_blank">St. Paul's Udaipur</a>.</p>
	<p>Although, I've a good grasp on Web-related technologies, I have joined this course to dive into the really exiciting world of Mobile Technologies (<i class="fa fa-android" style="font-size: 1em; color: green;"></i> Yes, you android ;P) and I look forward in making good friends too! You can always reach out me on various platform links that I've shared above.</p>
	<p>Like my profile? Go ahead and share this page<br>
	<a class="twitter-share-button" data-show-count="false" data-size="large" data-text="Hey I just found this awesome profile on #imad! @HasuraEd. Check it out here -" href="https://twitter.com/intent/tweet">Tweet</a> <iframe frameborder="0" height="28" id="fb_share" name="fb_share" scrolling="no" src="" style="border:none;overflow:hidden" width="84"></iframe></p>
	<p>Curious one? Want to see the annotated code of this page? Check it out <a href="" target="_blank">here <i class="fa fa-external-link"></i></a></p>
	</div>
	</div>
	</div>
	<script async charset="utf-8" src="https://platform.twitter.com/widgets.js">
	</script>
	<script>
	var current_url = window.location.href;document.getElementById("fb_share").src="https://www.facebook.com/plugins/share_button.php?href="+current_url+"&layout=button_count&size=large&mobile_iframe=true&appId&width=84&height=28";
	</script>
	</body>
	</html>