Skip to content

Instantly share code, notes, and snippets.

@jitinics

jitinics/freelancer.css

Created January 25, 2015 14:02
Show Gist options
  • Save jitinics/8374a3189666e285b089 to your computer and use it in GitHub Desktop.
Save jitinics/8374a3189666e285b089 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
freelancer.css
/*!
* Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
/*overflow-x: hidden;*/
}
p {
font-size: 20px;
}
p.small {
font-size: 16px;
}
a,
a:hover,
a:focus,
a:active,
a.active {
outline: 0;
color: #18bc9c;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
hr.star-light,
hr.star-primary {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 5px;
text-align: center;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-light:after {
color: #fff;
background-color: #18bc9c;
}
hr.star-primary {
border-color: #2c3e50;
}
hr.star-primary:after {
color: #2c3e50;
background-color: #fff;
}
.img-centered {
margin: 0 auto;
}
header {
text-align: center;
color: #fff;
background: url(C:/Users/NICs/Desktop/startbootstrap-freelancer-1.0.2/img/ed.png) no-repeat;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
header img {
text-align: left;
margin: 0 auto 20px;
}
header .intro-text .name {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 2em;
font-weight: 700;
}
header .intro-text .skills {
text-align: left;
font-size: 1.25em;
font-weight: 300;
}
@media(min-width:768px) {
header .container {
padding-top: 200px;
padding-bottom: 100px;
}
header .intro-text .name {
font-size: 4.75em;
}
header .intro-text .skills {
font-size: 1.75em;
}
}
@media(min-width:768px) {
.navbar-fixed-top {
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-fixed-top .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-fixed-top.navbar-shrink {
padding: 10px 0;
}
.navbar-fixed-top.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.navbar {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.navbar a:focus {
outline: 0;
}
.navbar .navbar-nav {
letter-spacing: 1px;
}
.navbar .navbar-nav li a:focus {
outline: 0;
}
.navbar-default,
.navbar-inverse {
border: 0;
}
section {
padding: 100px 0;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
color: #fff;
background: rgb(217,91,67);
}
section.education {
color: #fff;
background: rgb(236,208,120);
}
section.program {
color: #fff;
background: rgb(192,41,66);
}
section.exp {
color: #fff;
background: rgb(84,36,55);
}
section f {
font-size: 1em;
}
@media(max-width:767px) {
section {
padding: 75px 0;
}
section.first {
padding-top: 75px;
}
}
#portfolio .portfolio-item {
right: 0;
margin: 0 0 15px;
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
margin: 0 auto;
max-width: 400px;
}
#portfolio .portfolio-item .portfolio-link .caption {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(24,188,156,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
position: absolute;
top: 50%;
width: 100%;
height: 20px;
margin-top: -12px;
text-align: center;
font-size: 20px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media(min-width:767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
.btn-outline {
margin-top: 15px;
border: solid 2px #fff;
font-size: 20px;
color: #fff;
background: 0 0;
transition: all .3s ease-in-out;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
border: solid 2px #fff;
color: #18bc9c;
background: #fff;
}
.floating-label-form-group {
position: relative;
margin-bottom: 0;
padding-bottom: .5em;
border-bottom: 1px solid #eee;
}
.floating-label-form-group input,
.floating-label-form-group textarea {
z-index: 1;
position: relative;
padding-right: 0;
padding-left: 0;
border: 0;
border-radius: 0;
font-size: 1.5em;
background: 0 0;
box-shadow: none!important;
resize: none;
}
.floating-label-form-group label {
display: block;
z-index: 0;
position: relative;
top: 2em;
margin: 0;
font-size: .85em;
line-height: 1.764705882em;
vertical-align: middle;
vertical-align: baseline;
opacity: 0;
-webkit-transition: top .3s ease,opacity .3s ease;
-moz-transition: top .3s ease,opacity .3s ease;
-ms-transition: top .3s ease,opacity .3s ease;
transition: top .3s ease,opacity .3s ease;
}
.floating-label-form-group::not(:first-child) {
padding-left: 14px;
border-left: 1px solid #eee;
}
.floating-label-form-group-with-value label {
top: 0;
opacity: 1;
}
.floating-label-form-group-with-focus label {
color: #18bc9c;
}
form .row:first-child .floating-label-form-group {
border-top: 1px solid #eee;
}
footer {
color: #fff;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2c3e50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
.btn-social {
display: inline-block;
width: 50px;
height: 50px;
border: 2px solid #fff;
border-radius: 100%;
text-align: center;
font-size: 20px;
line-height: 45px;
}
.btn:focus,
.btn:active,
.btn.active {
outline: 0;
}
.scroll-top {
z-index: 1049;
position: fixed;
right: 2%;
bottom: 2%;
width: 50px;
height: 50px;
}
.scroll-top .btn {
width: 50px;
height: 50px;
border-radius: 100%;
font-size: 20px;
line-height: 28px;
}
.scroll-top .btn:focus {
outline: 0;
}
.portfolio-modal .modal-content {
padding: 100px 0;
min-height: 100%;
border: 0;
border-radius: 0;
text-align: center;
background-clip: border-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.portfolio-modal .modal-content h2 {
margin: 0;
font-size: 3em;
}
.portfolio-modal .modal-content img {
margin-bottom: 30px;
}
.portfolio-modal .modal-content .item-details {
margin: 30px 0;
}
.portfolio-modal .close-modal {
position: absolute;
top: 25px;
right: 25px;
width: 75px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
.portfolio-modal .close-modal:hover {
opacity: .3;
}
.portfolio-modal .close-modal .lr {
z-index: 1051;
width: 1px;
height: 75px;
margin-left: 35px;
background-color: #2c3e50;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.portfolio-modal .close-modal .lr .rl {
z-index: 1052;
width: 1px;
height: 75px;
background-color: #2c3e50;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.portfolio-modal .modal-backdrop {
display: none;
opacity: 0;
}
Raw
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#page-top">Profile</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a href="#page-top"></a>
</li>
<li class="page-scroll">
<a href="#education">Euducation</a>
</li>
<li class="page-scroll">
<a href="#english">English Skill</a>
</li>
<li class="page-scroll">
<a href="#Program">Programing Skill</a>
</li>
<li class="page-scroll">
<a href="#Work">Work&Exprience</a>
</li>
<li class="page-scroll">
<a href="#foot">Certificate</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Header -->
<header id="#profile">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-text">
<div class="row"><div class="col-md-4">
<img src="img/pro.png" alt="" class="img-circle">
</div>
<div class="col-md-8">
<span class="name">Profile</span>
<hr>
<span class="skills">
<center><table class="table table-condensed">
<tr>
<td>
ชื่อ
</td>
<td>
จิตรนันท์ ทิพย์บุญดี
</td>
</tr>
<tr>
<td>
ที่อยู่
</td>
<td>
149 หมู่ 5 ตำบลเนินหอม อำเภอ เมืองปราจีนบุรี <br>จังหวัดปราจีนบุรี, 25230
</td>
</tr>
<tr>
<td>
อีเมลล์
</td>
<td>
[email protected]
</td>
</tr>
<tr>
<td>
โทร.
</td>
<td>
0863494238
</td>
</tr>
</table>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Portfolio Grid Section -->
<section class="education" id="education">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Education</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<img src="img/hv.png" alt="" class="img-circle">
</div>
<div class="col-sm-4 text-center">
<img src="img/kkwind.png" alt="" class="img-circle">
</div>
<div class="col-sm-4 text-center">
<img src="img/kmutnb.png" alt="" class="img-circle">
</div>
</div>
<div class="row">
<div class="col-sm-4 text-center">
<p>2543-2551<br>
โรงเรียนหัวหินวิทยาลัย
<br>ปฐมศึกษาและมัธยมต้น</p>
</div>
<div class="col-sm-4 text-center">
<p>2552-2554<br>
วิทยาลัยการอาชีพวังไกลกังวล
<br>ประกาศนียบัตรวิชาชีพ สาขาช่างอิเล็กทรอนิกส์</p>
</div>
<div class="col-sm-4 text-center">
<p>2555-ปัจจุบัน<br>มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ
<br>คณะ : เทคโนโลยีและการจัดการอุตสาหกรรม
<br>สาขา : เทคโนโลยีสารสนเทศ แขนงวิทยาการสารสนเทศ</p>
</div>
</div>
</section>
<!-- About Section -->
<section class="success" id="english">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>English Skill</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4 text-right">ฟัง</div>
<div class="col-md-8">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
<div class="col-md-4 text-right">พูด</div>
<div class="col-md-8">
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
<div class="col-md-4 text-right">อ่าน</div>
<div class="col-md-8">
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
<div class="col-md-4 text-right">เขียน</div>
<div class="col-md-8">
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="program" id="Program">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Programing Skill</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-3 "><img src="img/1.png" alt=""> </div>
<div class="col-md-3 "><img src="img/2.png" alt="" class="img-circle"> </div>
<div class="col-md-3 "><img src="img/3.png" alt="" class="img-circle"> </div>
<div class="col-md-3 "><img src="img/4.png" alt="" class="img-circle"> </div>
</div>
<div class="row text-center">
<div class="col-md-3 "><p>JSP </p></div>
<div class="col-md-3 "><p>C++ </p></div>
<div class="col-md-3 "><p>C# </p></div>
<div class="col-md-3 "><p>PHP </p></div>
</div>
</div>
</section>
<section class="exp" id="Work">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Work&Exprience</h2>
<hr>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 "><img src="img/hotei.png" alt="" class="img-circle"> </div>
<div class="col-md-6 "><img src="img/golden.png" alt="" class="img-circle"> </div>
</div>
<div class="row text-center">
<div class="col-md-6 "><p>ฝึกงานที่บริษัท ปราณบุรีโฮเตอิ จำกัด<br>
ตำแหน่งงาน IT Support และ ช่าง calibrate</p>
</div>
<div class="col-md-6 "><p>Part Time ที่ บริษัท สุวรรณชาด จํากัด</p></div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center">
<div class="footer-above">
<div class="container">
<div class="row">
<div class="footer-col col-md-4">
<h3>KMUTNB@PRACHIN</h3>
<p>129 ม.21 ตำบลเนินหอม อำเภอเมือง<br> จังหวัดปราจีนบุรี 25230</p>
</div>
<div class="footer-col col-md-4">
<h3>FACEBOOK</h3>
<ul class="list-inline">
<li>
<a href="https://www.facebook.com/jittarnan.tipboondee" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
</li>
</ul>
</div>
<div class="footer-col col-md-4" id="foot">
<h3>Certificate</h3>
<p>Oracle PL/SQL</p>
</div>
</div>
</div>
</div>
<div class="footer-below">
<div class="container">
<div class="row">
<div class="col-lg-12">
Copyright &copy; My CV Website
</div>
</div>
</div>
</div>
</footer>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visble-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- Portfolio Modals -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment