<!DOCTYPE HTML>
<!--
Read Only by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Hangrui Cao</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
<!-- Header -->
<section id="header">
<header>
<span class="image avatar"><img src="images/chravatar.png" alt="" /></span>
<h1 id="logo"><a href="#">Hangrui Cao</a></h1>
<p></p>
</header>
<nav id="nav">
<ul>
<li><a href="#one" class="active">About</a></li>
<li><a href="#two">Education</a></li>
<li><a href="#work">Work Experience</a></li>
<li><a href="#three">Researches</a></li>
<li><a href="#extra">Selected Projects</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#four">Contact</a></li>
</ul>
</nav>
<footer>
<ul class="icons">
<li><a href="https://twitter.com/hangrui_cao" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/profile.php?id=100056007477914" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="https://www.instagram.com/hangruic/" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="https://www.linkedin.com/in/hangrui-cao-40a936193/" class="icon brands fa-linkedin"><span class="label">Email</span></a></li>
<li><a href="https://github.com/DiegoCao/" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="mailto: hangrui@umich.edu" class="icon solid fa-envelope"><span class="label">Email</span></a></li>
</ul>
</footer>
</section>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<!-- One -->
<section id="one">
<div class="image main" data-position="center">
<img src="images/xueshan2.jpg" alt="" />
</div>
<div class="container">
<header class="major">
<h2>Hangrui Cao</h2>
</header>
<p>I am a graduate student major in <b>Computational Data Science</b> at Carnegie Mellon University, School of Computer Science.
I graduated with a bachelor degree in <b>Computer Science</b>, minor in <b>Mathematics</b> at University of Michigan and a dual degree in
<b>Electrical and Computer Engineering</b> and Shanghai Jiao Tong University. My intersted fields include <b>Machine Learning & Data Analysis</b>,
<b>Full-stack Engineering</b>, <b>Database</b>, <b>Web & App Development</b>
</p>
<p>
Links: <li><a href="files/Hangrui_Cao_CV_2021_Nov.pdf" class="button">CV (Nov 2021)</a></li>
</p>
</div>
</section>
<!-- Two -->
<section id="two">
<div class="container">
<h3>Experience</h3>
<h4>
Carnegie Mellon University, Pittsburgh, PA, US
</h4>
<i>
M.S in Computational Data Science in School of Computer Science | GPA : 4.0/4.0 | May 2022 - Dec 2023(Expected)
</i><br>
<div class="row">
<div class="column">
Selected Courses:
<span style="font-size: small; "><ul class="alt">
<li>
Intro to Computing Systems(A)
</li>
<li>Search Engine (Ongoing)</li>
<li>Machine Learning (Ongoing)</li>
<li>Foundations of Computational Data Science(Ongoing)</li>
</ul></span>
</div>
</div>
<h4>
University of Michigan, Ann Arbor, US
</h4>
<i> B.S.E in Computer Science | Minor in Mathematics | GPA: 3.98/4.00 | Sept 2020 - May 2022</i><br>
<div class="row">
<div class="column">
Artificial Intelligence:
<span style="font-size: small; "><ul class="alt">
<li>Computer Vision (A)</li>
<li>Intro to Machine Learning (A)</li>
<li>Conversation AI (A)</li>
<li>Human Computer Interaction(A+)</li>
<li>Natural Language Processing(A)</li>
</ul></span>
</div>
<div class="column">
System & Programming
<span style="font-size: small; "><ul class="alt">
<li>Database and Management System (A+)</li>
<li>Foundations of Computer Science (A)</li>
<li>Data Structure and Algorithms (A)</li>
<li>Intro to Computer Organization (A)</li>
<li>Computer Networks (A+)</li>
</ul></span>
</div>
<div class="column">
Mathematics
<span style="font-size: small; "><ul class="alt">
<li>Numerical Analysis (A)</li>
<li>Matrix Theory (A)</li>
<li>Algorithms (A)</li>
<!-- <li>Probability Theory (A)</li> -->
</ul></span>
</div>
</div>
<h4>
Shanghai Jiao Tong University, Shanghai, China
</h4>
<i> B.S.E in Electrical and Computer Engineering | GPA: 3.874/4.00 | Sept 2018 - Aug 2022</i><br>
<div class="row">
<div class="column">
Electrical and Computer Engineering
<span style="font-size: small; "><ul class="alt">
<li>Programming and Data Structure (A+)</li>
<li>Logic Design (A)</li>
<li>Electronic Circuits(A)</li>
</ul></span>
</div>
<div class="column">
Engineering Foundations
<span style="font-size: small; "><ul class="alt">
<li>
Introduction to Engineering(A+)
</li>
<li>
Introduction to Computer and Programming (A+)
</li>
<li>
Probablistic Methods in Engineering (A)
</li>
<li></li>
</ul></span>
</div>
<div class="column">
Mathematics & Physic
<span style="font-size: small; "><ul class="alt">
<li>Discrete Mathematics (A)</li>
<li>Honors Mathematics II-IV (A-, A+)</li>
<li>Honors Physics I & II(A, A+)</li>
</ul></span>
</div>
</div>
<h4>
Ritsumeikan University
</h4>
<i>Winter Program | Jan 2020 - Feb 2020 </i>
<!-- <ul class="feature-icons">
<li class="icon solid fa-code">Write all the code</li>
<li class="icon solid fa-cubes">Stack small boxes</li>
<li class="icon solid fa-book">Read books and stuff</li>
<li class="icon solid fa-coffee">Drink much coffee</li>
<li class="icon solid fa-bolt">Lightning bolt</li>
<li class="icon solid fa-users">Shadow clone technique</li>
</ul> -->
</div>
</section>
<section id = "work">
<div class="container">
<h3>Work Experience</h3>
<div class="features">
<article>
<a href="images/Zoo.png" class="image fit thumb">
<img src="images/Zoo.png" alt="" />
</a>
<div class="inner">
<h4>Deep Learning Software Intern at Intel</h4>
<p>
[<a href="https://github.com/DiegoCao/analytics-zoo">Public Code</a>]
</p>
<ul>
<li>
Implemented machine learning models such as XGBoost and ResNet with Scala and Java which enhanced training speed by 9.8%
</li>
<li>
Developed model inference pipeline with Python and OpenVino and designed YOLOv3 model to detect cigarettes in photos
</li>
<li>
Engineered and revised PPML module, docker file and unit tests to effectively support new graphene version 1.2RC and Intel-sgx
</li>
<li>
Deployed federated learning framework (FATE) in Intel-sgx and tested model inference for cluster serving with Flink & Spark
</li>
</div>
</article>
<article>
<a href="images/MDP_cover.png" class="image fit thumb">
<img src="images/MDP_cover.png" alt="" />
</a>
<div class="inner">
<h4>Machine Learning Intern & Research Assistant at Transportation Research Institute, University of Michigan</h4>
<p>
[<a href="files/Shaky_ground_truth_presentation.pdf"> Introductary Slides</a>]
</p>
<ul>
<li>Instructed by Professor <a href="https://umtri.umich.edu/people/flannagan-carol/">Carol Flannagan</a>.</li>
<li>Developed a light-weight multi-class CNN model to classify drivers' behavior with OpenCV and achieved 90.2% accuracy</li>
<li>
Designed loss functions, confident learning and probability model to resolve the uncertainty problem “Shaky Ground Truth”
</li>
<li>
Implemented Bayesian CNN to consider probabilities distribution for weights and obtained Aleatoric uncertainty 0.0162
</li>
<li>
Investigate different eye gaze software and built a system to gather labeler and drivers’ eye gaze data with PyGaze
</li>
</ul>
</div>
</article>
</div>
</div>
</section>
<!-- Three -->
<section id="three">
<div class="container">
<h3>Personal Projects</h3>
<p>I've participated in research projects related to machine learning, distributed systems, mobile computing, data analysis</p>
<div class="features">
<article>
<a href="images/pic.png" class="image fit thumb">
<img src="images/pic.png" alt="" />
</a>
<div class="inner">
<h4>Birds of a Feather Help: Context-aware Client Selection for Efficient Federated
Learning</h4>
<p>
[<a href="files/Dependence_aware_client_selection_for_FL_.pdf">Paper</a>] Accepted by <a href="https://federated-learning.org/fl-aaai-2022/">FL-AAAI-22</a> for oral presentation
</p>
<ul>
<li>Instructed by Professor <a href="https://sites.ji.sjtu.edu.cn/yifei-zhu/">Yifei Zhu</a>.</li>
<li>Invent a novel neural combinatorial contextual bandit (NCCB) to intelligently select clients in each federated round
meanwhile ensures the privacy requirement in federated learning. The method surpassed the state-of-art client selection(Oort) in terms
of speed and final accuracy.</li>
</ul>
</div>
</article>
<article>
<a href="images/emoji_sample.png" class="image fit thumb">
<img src="images/emoji_sample.png" alt="" />
</a>
<div class="inner">
<h4>Large data analysis and group work pattern recognition with Github Archive Dataset </h4>
<!-- <p>
[<a href="files/Dependence_aware_client_selection_for_FL_.pdf">Paper in Submission</a>]
</p> -->
<ul>
<li>Instructed by Professor <a href="http://www-personal.umich.edu/~qmei/">Qiaozhu Mei</a>.</li>
<li>
Present a large-scale empirical study to how sentimental emoji and text usage relates to Github workers' behaviour with different metrics,
Methods include GNN (for social graph embedding), LINE(Large-scale information network embedding), Regression, Cluster, NLP processing.
</li>
</ul>
</div>
</article>
<article>
<a href="images/cac.jpg" class="image fit thumb">
<img src="images/cac.jpg" alt="" />
</a>
<div class="inner">
<h4>Networked Control System Under Denial-of-Service Attack Simluation</h4>
<p>
[<a href="files/2020CACpaper.pdf">Paper in CAC 2020</a>]
</p>
<ul>
<li>Instructed by Professor <a href="https://www.researchgate.net/profile/Jing-Wu-159">Jing Wu</a>.</li>
<li>Implemented a networked control system, simulation of DoS Attack in Networked Control System Using TrueTime</li>
</ul>
</div>
</article>
</div>
</div>
</section>
<section id = "extra">
<div class="container">
<h3>Selected Course Projects</h3>
<div class="features">
<article>
<a href="images/442photo.png" class="image fit thumb">
<img src="images/442photo.png" alt="" />
</a>
<div class="inner">
<h4>Automatic Image Colorization with CNN and GAN</h4>
<p>
[<a href="https://web.eecs.umich.edu/~justincj/teaching/eecs442/projects/WI2021/pdfs/068.pdf">Course Paper</a>]
[<a href="https://github.com/DiegoCao/eecs442_proj.git">Code</a>]
</p>
<ul>
<li>I implemented GAN(Generative Adversial Networks) for image colorization and compared it with classification approaches in terms of PSNR and SSIM. </li>
</div>
</article>
<article>
<a href="images/dashboard.png" class="image fit thumb">
<img src="images/dashboard.png" alt="" />
</a>
<div class="inner">
<h4>Real-time Carbon Emission Evaluation and Optimization for Future Low-Carbon Buildings</h4>
<p>
[<a href="https://diegocao-streamweb-app-ucjt6n.streamlitapp.com/">Website</a>]
</p>
<ul>
<li>
In this project, we use reinforcement learning based method to control carbon emission and power consumption in Large Buildings
</li>
<li>
Researched multiple software for building carbon emission simulation
</li>
<li>
Implemented simulation, data processing and analyzing pipeline and built a real-time database backend
</li>
<li>
Dveloped a website with Real-time tracking dashboard function to track our strategies performance.
</li>
</div>
</article>
<article>
<a href="images/emai_voice.png" class="image fit thumb">
<img src="images/emai_voice.png" alt="" />
</a>
<div class="inner">
<h4>Email Voice Assistant </h4>
<p>
[<a href="https://web.eecs.umich.edu/~justincj/teaching/eecs442/projects/WI2021/pdfs/068.pdf">Course Paper</a>]
[<a href="https://github.com/DiegoCao/email-voice-assistant">Code</a>]
</p>
<ul>
<li>
Designed interface for smart voice email control with React.js, and backend pipeline to process email request with Flask
</li>
<li>
Developed speech-to-text model with 7.8% WER and generated smart reply to users with Dialogflow and Rasa
</li>
</div>
</article>
</div>
</div>
</section>
<!-- Four -->
<section id="four">
<div class="container">
<h3>Contact Me</h3>
<p>Feel Free to leave your message here!</p>
<form method="post" action="#">
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall"><input type="text" name="name" id="name" placeholder="Name" /></div>
<div class="col-6 col-12-xsmall"><input type="email" name="email" id="email" placeholder="Email" /></div>
<div class="col-12"><input type="text" name="subject" id="subject" placeholder="Subject" /></div>
<div class="col-12"><textarea name="message" id="message" placeholder="Message" rows="6"></textarea></div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" class="primary" value="Send Message" /></li>
<li><input type="reset" value="Reset Form" /></li>
</ul>
</div>
</div>
</form>
</div>
<!-- <div>
<script type="text/javascript" id="clustrmaps" src="//cdn.clustrmaps.com/map_v2.js?cl=b7bbce&w=a&t=n&d=BdM4F6rm-cbia-mSJD86LvnTCb-KIWmzSzcrrruhefk&co=ffffff&cmn=fff200&cmo=ff0000&ct=000000"></script>
</div> -->
</section>
<!-- Five -->
<!--
<section id="five">
<div class="container">
<h3>Elements</h3>
<section>
<h4>Text</h4>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
<hr />
<header>
<h4>Heading with a Subtitle</h4>
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
</header>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
<header>
<h5>Heading with a Subtitle</h5>
<p>Lorem ipsum dolor sit amet nullam id egestas urna aliquam</p>
</header>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr />
<h5>Blockquote</h5>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h5>Preformatted</h5>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
</section>
<section>
<h4>Lists</h4>
<div class="row">
<div class="col-6 col-12-xsmall">
<h5>Unordered</h5>
<ul>
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Sagittis adipiscing lorem eleifend.</li>
<li>Felis enim feugiat dolore viverra.</li>
</ul>
<h5>Alternate</h5>
<ul class="alt">
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Sagittis adipiscing lorem eleifend.</li>
<li>Felis enim feugiat dolore viverra.</li>
</ul>
</div>
<div class="col-6 col-12-xsmall">
<h5>Ordered</h5>
<ol>
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Etiam vel felis at lorem sed viverra.</li>
<li>Felis enim feugiat dolore viverra.</li>
<li>Dolor pulvinar etiam magna etiam.</li>
<li>Etiam vel felis at lorem sed viverra.</li>
<li>Felis enim feugiat dolore viverra.</li>
</ol>
<h5>Icons</h5>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
<li><a href="#" class="icon brands fa-dribbble"><span class="label">Dribbble</span></a></li>
<li><a href="#" class="icon brands fa-tumblr"><span class="label">Tumblr</span></a></li>
</ul>
</div>
</div>
<h5>Actions</h5>
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt">Default</a></li>
</ul>
<ul class="actions small">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
<li><a href="#" class="button alt small">Small</a></li>
</ul>
<div class="row">
<div class="col-3 col-6-medium col-12-xsmall">
<ul class="actions stacked">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt">Default</a></li>
</ul>
</div>
<div class="col-3 col-6 col-12-xsmall">
<ul class="actions stacked">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
<li><a href="#" class="button alt small">Small</a></li>
</ul>
</div>
<div class="col-3 col-6-medium col-12-xsmall">
<ul class="actions stacked">
<li><a href="#" class="button primary fit">Default</a></li>
<li><a href="#" class="button fit">Default</a></li>
<li><a href="#" class="button alt fit">Default</a></li>
</ul>
</div>
<div class="col-3 col-6-medium col-12-xsmall">
<ul class="actions stacked">
<li><a href="#" class="button primary small fit">Small</a></li>
<li><a href="#" class="button small fit">Small</a></li>
<li><a href="#" class="button alt small fit">Small</a></li>
</ul>
</div>
</div>
</section>
<section>
<h4>Table</h4>
<h5>Default</h5>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h5>Alternate</h5>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<section>
<h4>Buttons</h4>
<ul class="actions">
<li><a href="#" class="button primary">Primary</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt">Alternate</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary large">Large</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button alt small">Small</a></li>
</ul>
<ul class="actions fit">
<li><a href="#" class="button primary fit">Fit</a></li>
<li><a href="#" class="button fit">Fit</a></li>
<li><a href="#" class="button alt fit">Fit</a></li>
</ul>
<ul class="actions fit small">
<li><a href="#" class="button primary fit small">Fit + Small</a></li>
<li><a href="#" class="button fit small">Fit + Small</a></li>
<li><a href="#" class="button alt fit small">Fit + Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
<li><a href="#" class="button icon solid fa-download">Icon</a></li>
<li><a href="#" class="button alt icon solid fa-check">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button primary disabled">Primary</span></li>
<li><span class="button disabled">Default</span></li>
<li><span class="button alt disabled">Alternate</span></li>
</ul>
</section>
<section>
<h4>Form</h4>
<form method="post" action="#">
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall">
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
</div>
<div class="col-6 col-12-xsmall">
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
</div>
<div class="col-12">
<select name="demo-category" id="demo-category">
<option value="">- Category -</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
<div class="col-4 col-12-medium">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low Priority</label>
</div>
<div class="col-4 col-12-medium">
<input type="radio" id="demo-priority-normal" name="demo-priority">
<label for="demo-priority-normal">Normal Priority</label>
</div>
<div class="col-4 col-12-medium">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High Priority</label>
</div>
<div class="col-6 col-12-medium">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy of this message</label>
</div>
<div class="col-6 col-12-medium">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">I am a human and not a robot</label>
</div>
<div class="col-12">
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
<li><input type="reset" value="Reset" class="alt" /></li>
</ul>
</div>
</div>
</form>
</section>
<section>
<h4>Image</h4>
<h5>Fit</h5>
<span class="image fit"><img src="images/banner.jpg" alt="" /></span>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
</div>
</div>
<h5>Left & Right</h5>
<p><span class="image left"><img src="images/avatar.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
<p><span class="image right"><img src="images/avatar.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
</section>
</div>
</section>
-->
</div>
<!-- Footer -->
<section id="footer">
<div class="container">
<ul class="copyright">
<li>© Hangrui Cao. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>