Skip to content

Instantly share code, notes, and snippets.

@qjf

qjf/about.html

Last active September 6, 2015 05:25
Show Gist options
  • Save qjf/81cc078d6a14dcf3fef5 to your computer and use it in GitHub Desktop.
Save qjf/81cc078d6a14dcf3fef5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/about_styles.css" rel="stylesheet">
<title>qijing fan</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>UX/Visual Designer</h1>
</div>
<div class="image">
<img src="img/me.jpg" alt="cloud">
</div>
<div class="colum">
<h2>Introduction</h2>
<p>An UX/UI designer with empathy and psychological logic for creating user centered design. My design experience including creating high quality UX/UI results. My professional skills and knowledge coupled with my ability to absorb new technologies makes me an exemplary candidate for any challenging position</p>
</div>
<div class="skills colum"></div>
<h3>My Skills</h3>
<ul id="skill-list">
<li>Wireframes, User Research, Usability Testing, Persona, Ethnographic Studies, Use Cases</li>
<li> Competitive Analysis, Comparative Analysis, Card Sorting, Information Architecture</li>
<li>HTML/CSS/- jQuery Prototyping, Mobile User </li>
<li>Visual Design, Conceptual Development</li>
<li>Firebase</li>
</ul>
<div class="main-text"></div>
<h3>My story</h3>
<p>Chillwave flannel wolf whatever seitan butcher meggings, 8-bit semiotics four loko fanny pack drinking vinegar Bushwick kogi. Food truck tote bag pug, cray cliche Pinterest actually Helvetica bicycle rights biodiesel Vice retro Austin beard mumblecore. Brunch authentic wayfarers sartorial street art lmvbersexual, asymmetrical Carles gentrify tilde aesthetic Etsy gastropub kitsch. Gentrify church-key meh, DIY pug Schlitz cred taxidermy trust fund. </p>
</div>
<!-- end container -->
</body>
</html>
Raw
about_styles.css
.container{
width: 80%;
margin:0 auto;
}
img{
border-radius: 50%;
height: 150px;
width: 150px;
}
.image{
display: inline-block;
}
.header h1{
text-align: center;
}
.colum{
display: inline-block;
}
Raw
contact.html
<!DOCTYPE html>
<html lan="en">
<html>
<head>
<mata charset="utf8">
<link href="css/contact_style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<div class="all content">
<div class="container">
<div class="header">
<h1>LET'S DISCUSS</h1>
</div>
<div class="title">
<h2>Say Hello!</h2>
<h4>Email me at <a href="mailto:[email protected]">[email protected]</a></h4>
<div class="connect">
<p>Get Connected!</p>
<i class="fa fa-heart"></i>
<p>San Francisco, CA. United States</p>
</div>
<div class="contact form">
</div>
<ul class="social">
<li>
<a href="https://www.behance.net/qfan">
<i class="fa fa-behance fa-2x"></i>
</li>
<li>
<a href="heeps://www.linkedin.com/qijingfan/en">
<i class="fa fa-linkedin fa-2x"></i>
</li>
</p>
</div>
</div>
</div>
</body>
</html>
Raw
contact_style.css
body{
background-image: url("../image/banner1.png");
width: 100%;
}
.container{
font-family: 'Open Sans', sans-serif;
width: 80%;
margin:0 auto;
text-align: center;
}
.container h2{
font-weight: 600;
color: #333;
}
.title a{
text-decoration: none;
color: #2c91c0;
}
.service li{
color: #8C5E58;
font-weight: 500;
}
.business a{
text-decoration: none;
color: #2c91c0;;
}
.all{
background-image: url("../image/background.jpg");
position: relative;
margin:40px;
padding:10px;
}
.all h1,
.title p,
.business p,
.title h4{
color: #333;
}
.social li{
display: inline-block;
padding: 20px;
line-height: 1em;
text-align: bottom;
line-height: 20px;
}
.fa{
line-height: 10px;
vertical-align: middle;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Qijing Fan</title>
<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalbel=no">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template go here -->
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Work+Sans:400,800' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<body data-spy="scroll" data-target=".navbar">
<!--navbar starts here-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" datda-toggle="collapse" data-taget=".navbar-collapse">
<span class="sr-only">navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#skill">Skills</a>
</li>
<li><a href="#work">Work</a>
</li>
<li><a href="#resume">Resume</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div><!--nav ends here-->
<!--bootstrap carousel hero image-->
<div class="container-fluid" style="padding-left:0; padding-right:0;">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/portfolioheroimage3.png" alt="banner">
<div class="carousel-caption">
<h1><span>Meet</span> Qijing Fan!</h1>
<p>/ Visual Design<br></p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage1.png" alt="banner2">
<div class="carousel-caption">
<h1><span>Meet</span> Qijing Fan!</h1>
<p>/ User Experience<br></p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage2.png" alt="banner3">
<div class="carousel-caption">
<h1><span>Meet</span> Qijing Fan!</h1>
<p>/ Web Development</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--carousel image ends-->
<!--About me section begins-->
<div class="container-about" id="about">
<h2>Hi, I'm Qijing Fan , a <span class="name"><a href="#resume">web designer</a></span> specializing in <span class="ux"><a href="#work">user experience</a></span> , <span class="ui"><a href="#work">user interface</a></span> and development with an eye for detail. Below are example of projects I've completed.</h2>
</div><!--About me ends-->
<div class="skills" id="skill">
<!-- skills -->
<div class="row">
<div class="col-md-4 col-xs-8">
<h2>Ux</h2>
<p>Proto.io, Wireframes, User Research, Usability Testing, Persona, Ethnographic Studies, Use Cases, Competitive Analysis, Comparative Analysis, Card Sorting, Information Architecture, HTML/CSS/jQuery Prototyping </p>
<p><a class="btn btn-default" href="#" role="button">Design + Empathy &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-8">
<h2>Visual</h2>
<p>Typography,Color, Layout, Grid, Branding, Conceputual development </p>
<p><a class="btn btn-default" href="#" role="button">Design + Details &raquo;</a></p>
</div>
<div class="col-md-4 col-xs-8">
<h2>Code</h2>
<p>HTML, CSS, Bootstrap, jQuery /jQuery Mobile, JS, Firebase</p>
<p><a class="btn btn-default" href="#" role="button">Design + Interaction &raquo;</a></p>
</div>
</div>
</div><!--skills ends-->
<hr>
<!--Work section begins-->
<div class="container work" id="work">
<div class="row" id="mywork">
<h3>My work</h3>
<div class="col-md-3 col-xs-6"><img src="img/spaceweb.png" class="img-responsive" alt="spacecolony"></div>
<div class="col-md-3 col-xs-6"><img src="img/kikker2.png" class="img-responsive"alt="kikker"></div>
<div class="col-md-3 col-xs-6"><img src="img/experiencemap.png" class="img-responsive"></div>
<div class="col-md-3 col-xs-6"><img src="img/experiencemap.png" class="img-responsive"></div>
<div class="col-md-3 col-xs-6"><img src="img/experiencemap.png" class="img-responsive"></div>
</div>
</div>
<!-- Work section fisnish-->
</div> <!-- /container -->
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
</body>
</html>
Raw
style.css
body{
font-family: 'Open Sans', sans-serif;
position: relative;
margin: 0 auto;
}
.container p{
font-weight: 700;
text-align: center;
font-size: 30px;
color: #5AE8B8;
-webkit-font-smoothing:antialiased;
}
.skills{
margin-left: 100px;
}
.container span{
font-weight: 100;
-webkit-font-smoothing:antialiased;
}
.nav ul li{
display: inline-block;
-webkit-font-smoothing:antialiased;
}
.nav{
background-color: rgba(16, 22, 54, 0.2);
width: 100%;
padding-top: 25px;
padding-bottom: 15px;
position: fixed;
z-index: 1;
top: 0;
}
.nav ul{
padding-right: 350px;
float: right;
}
.nav ul li a {
color: #fff;
text-transform:uppercase;
letter-spacing: 0.05em;
padding: 20px;
font-family: 'Open Sans',sans-serif;
text-decoration: none;
}
.nav a:hover {
color: #5AE8B8;
transition: color 500ms;
-webkit-transition: color 500ms;
}
.carousel h1{
font-family: 'Work Sans',sans-serif;
font-size: 40px;
font-weight: 800;
-webkit-font-smoothing:antialiased;
}
.carousel p{
font-size: 30px;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
-webkit-font-smoothing:antialiased;
}
.carousel{
width: 100%;
}
hr{
text-align: center;
margin: 5em;
}
.container-about h2{
text-align: left;
font-size: 2em;
line-height: 2em;
margin-left: 5em;
margin-right: 5em;
-webkit-font-smoothing:antialiased;
color: #999;
}
.container-about{
padding-top: 3em;!important
}
.container-about span,
.container-about a{
color: #0084FF;
cursor: pointer;
-webkit-font-smoothing:antialiased;
font-weight: 500;
}
.container-about a:hover{
color: #5AE8B8;
transition: color 500ms;
-webkit-transition: color 500ms;
text-decoration: none;
transition:opacity 377ms;
}
.nav.navbar-nav{
position: inherit;
padding: 5px;
}
.container-fluid{
float: right;
padding-left: 0;!important
padding-right:0;!important
}
@media screen and(min-width: 1200px){
.container-about h2{
font-size: 2em;
-webkit-font-smoothing:antialiased;
}
}
@media screen and(min-width: 768) and (max-width: 979px) {
.container-about h2{
font-size: 1.5em;
-webkit-font-smoothing:antialiased;
}
}
@media screen and(min-width:400px){
.container-about h2{
font-size: 1em;
-webkit-font-smoothing:antialiased;
}
}
.img-responsive{
display: block;
max-width: 100%;
height: auto;
text-align: center;
margin-right: 1em; !important
margin-left: 1em;
}
#mywork{
padding-top: 4em;
}
.row{
padding-top: 5em;
}
.row h3{
text-align: center;
padding-bottom: 2em;
color: #999;
}
.nav.navbar-nav li{
padding-bottom: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment