init
oraan-basit
commit
2ae4ca6406
|
|
@ -0,0 +1,6 @@
|
|||
# My Resume
|
||||
|
||||
### Summary
|
||||
|
||||
My resume of CV I made using plain HTML5 & CSS.
|
||||
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>My Resume</title>
|
||||
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
|
||||
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
|
||||
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="resources/css/media.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="row">
|
||||
|
||||
<div class="col span-1-of-3 personal">
|
||||
<div class="personal-header">
|
||||
<img src="resources/img/profile_pic.png" alt="Profile picture">
|
||||
<h1>Basit Ali</h1>
|
||||
<p>Software Engineer</p>
|
||||
</div>
|
||||
<div class="personal-details">
|
||||
<div class="personal-info">
|
||||
<ion-icon name="mail"></ion-icon>
|
||||
<a href="mailto:rjbasitali@gmail.com" target="_blank">rjbasitali@gmail.com</a>
|
||||
</div>
|
||||
<div class="personal-info">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<a href="tel:0923348054216" target="_blank">+92 334 8054216</a>
|
||||
</div>
|
||||
<div class="personal-info">
|
||||
<ion-icon name="logo-linkedin"></ion-icon>
|
||||
<a href="https://www.linkedin.com/in/rjbasitali/" target="_blank">rjbasitali</a>
|
||||
</div>
|
||||
<div class="personal-info">
|
||||
<ion-icon name="logo-github"></ion-icon>
|
||||
<a href="https://github.com/rjbasitali" target="_blank">rjbasitali</a>
|
||||
</div>
|
||||
|
||||
<h3>Education</h3>
|
||||
<div class="personal-ed">
|
||||
<p class="personal-ed-bold">BS in Software Engineering</p>
|
||||
<p class="personal-ed-light">University of Karachi<br>2012 - 2015</p>
|
||||
</div>
|
||||
<div class="personal-ed">
|
||||
<p class="personal-ed-bold">Intermediate (Pre-Engineering)</p>
|
||||
<p class="personal-ed-light">PECHS College Karachi<br>2006 - 2008</p>
|
||||
</div>
|
||||
|
||||
<h3>Languages</h3>
|
||||
<div class="personal-ed">
|
||||
<p class="personal-ed-bold">Urdu <span>(Native)</span></p>
|
||||
<p class="personal-ed-bold">English <span>(Professional)</span></p>
|
||||
</div>
|
||||
|
||||
<h3>Interests</h3>
|
||||
<div class="personal-ed">
|
||||
<p class="personal-ed-light">Digital Painting</p>
|
||||
<p class="personal-ed-light">Football</p>
|
||||
<p class="personal-ed-light">Swimming</p>
|
||||
<p class="personal-ed-light">Games</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col span-2-of-3 professional">
|
||||
<div class="main-heading">
|
||||
<ion-icon name="person"></ion-icon>
|
||||
<h2>Career Profile</h2>
|
||||
</div>
|
||||
<p class="main-desc">I'm passionate about programming for its thrill of problem solving and to create something new and future proof. I love exploring and learning new technologies, frameworks and programming languages. Writing easy to read code, keeping it simple, and using best coding and architectural practices are my priorities when programming.
|
||||
</p>
|
||||
|
||||
<div class="main-heading">
|
||||
<ion-icon name="briefcase"></ion-icon>
|
||||
<h2>Experiences</h2>
|
||||
</div>
|
||||
|
||||
<div class="exp-head clearfix">
|
||||
<p class="exp-title">Design Engineer</p>
|
||||
<p class="exp-duration">April 2019 - Present</p>
|
||||
</div>
|
||||
<p class="exp-place">Oraan, Karachi</p>
|
||||
<p class="exp-desc">Oraan is a fin-tech startup that is bridging the gap between conventional saving mechanisms and financial
|
||||
technology to provide simpler financial access and money-management tools.<br>
|
||||
My role at Oraan is to gather business requirements and design workflows and architecture and implement them
|
||||
on backend using following technologies:</p>
|
||||
<ul class="exp-items">
|
||||
<li>Spring Boot</li>
|
||||
<li>PostgreSQL</li>
|
||||
<li>Hibernate</li>
|
||||
<li>Keycloak</li>
|
||||
<li>Google Cloud Platform</li>
|
||||
</ul>
|
||||
|
||||
<div class="exp-head clearfix">
|
||||
<p class="exp-title">Senior Application Engineer</p>
|
||||
<p class="exp-duration">May 2017 - April 2019</p>
|
||||
</div>
|
||||
<p class="exp-place">Health at Hand, Dubai</p>
|
||||
<p class="exp-desc">Health at Hand is a Dubai based telehealth startup where patients can take remote video consultations with
|
||||
doctors. I worked as the Lead Android Developer and helped my team solving critical problems like VoIP and creating a successful product.</p>
|
||||
<ul class="exp-items">
|
||||
<li><a href="https://play.google.com/store/apps/details?id=com.patient.myhealthathand" target="_blank">Health at Hand</a></li>
|
||||
<li><a href="https://play.google.com/store/apps/details?id=com.myhealthathand.livedoc" target="_blank">LiveDoc</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="exp-head clearfix">
|
||||
<p class="exp-title">Senior Application Engineer</p>
|
||||
<p class="exp-duration">April 2016 - April 2019</p>
|
||||
</div>
|
||||
<p class="exp-place">NextGenI, Karachi</p>
|
||||
<p class="exp-desc">Next Generation Innovations is a technology solutions company specializing in startups where I worked as Senior Android Developer on delivering various interesting and challenging products.</p>
|
||||
<ul class="exp-items">
|
||||
</ul>
|
||||
|
||||
<div class="exp-head clearfix">
|
||||
<p class="exp-title">Incubatee</p>
|
||||
<p class="exp-duration">June 2015 - Dec 2015</p>
|
||||
</div>
|
||||
<p class="exp-place">Nest I/O, Karachi</p>
|
||||
<p class="exp-desc">Incubated at Nest I/O for IOTechnica, a startup on IoT and home automation co-founded by me.</p>
|
||||
<ul class="exp-items">
|
||||
<li><a href="https://thenestio.com/?incubatee-teams-2=iotechnica" target="_blank">IOTechnica</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="main-heading">
|
||||
<ion-icon name="file-tray-full"></ion-icon>
|
||||
<h2>Projects</h2>
|
||||
</div>
|
||||
<p class="main-desc">Projects I worked on as an undergraduate and freelance</p>
|
||||
<div class="exp-projects">
|
||||
<div class="exp-project">
|
||||
<a href="#">PowerBot</a>
|
||||
<p>RuneScape is one of the most famous MMORPG (game), I developed scripts using java SE
|
||||
to be used by PowerBot to play RuneScape game as AI/bot for a freelance client.</p>
|
||||
</div>
|
||||
<div class="exp-project">
|
||||
<a href="#">Zohno</a>
|
||||
<p>Automation software for generating reports and stats for Active Directory, Exchange, Lync, Salesforce,
|
||||
Office 365 and WebEx and export it to excel or view it. Developed using .NET and C#.</p>
|
||||
</div>
|
||||
<div class="exp-project">
|
||||
<a href="#">MyCam</a>
|
||||
<p>Desktop app to record and save video through web cam. Developed using .NET and C#.</p>
|
||||
</div>
|
||||
<div class="exp-project">
|
||||
<a href="#">AWS CloudWatchLogs</a>
|
||||
<p>Desktop app to save specific logs to a text file from AWS CloudWatchLogs.</p>
|
||||
</div>
|
||||
<div class="exp-project">
|
||||
<a href="#">Kidsway</a>
|
||||
<p>Provides a platform for van drivers and parents where they can see and track their kids and their school
|
||||
vans. Developed using Java/Spring and WebSocket API.</p>
|
||||
</div>
|
||||
<div class="exp-project">
|
||||
<a href="https://www.facebook.com/RJBasitAli/videos/10208631775581946/" target="_blank">Cafuné</a>
|
||||
<p>App to share pictures, chat and more.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="main-heading">
|
||||
<ion-icon name="build"></ion-icon>
|
||||
<h2>Skills & Proficiency</h2>
|
||||
</div>
|
||||
|
||||
<div class="skills">
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
Java & Spring Boot
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 90%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
Android
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 90%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
Hibernate
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
GCP & AWS
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
JavaScript
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 70%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
HTML5 & CSS
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-container">
|
||||
<div class="col span-1-of-3 skill-title">
|
||||
Illustrator & Photoshop
|
||||
</div>
|
||||
<div class="col span-2-of-3 skill-bg">
|
||||
<div class="skill-fg" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.exp-duration {
|
||||
font-size: 60%;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.skill-title {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #eee;
|
||||
color: #555;
|
||||
font-family: 'Lato', 'Arial', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
text-rendering: optimizeLegibility;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
background-color: #42a8c0;
|
||||
box-shadow: -3px 3px 3px 0px rgba(200,200,200, 0.9);
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.professional {
|
||||
background-color: white;
|
||||
padding: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.personal {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.personal-header {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.personal-header img {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 160%;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: #42a8c0;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.personal-header p {
|
||||
font-size: 80%;
|
||||
font-weight: 100;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin: 5px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* .main-heading p {
|
||||
display: inline-block;
|
||||
color: #42a8c0;
|
||||
font-size: 120%;
|
||||
font-weight: 700;
|
||||
margin-left: 4px;
|
||||
} */
|
||||
|
||||
.main-heading ion-icon {
|
||||
display: inline-block;
|
||||
background-color: #42a8c0;
|
||||
border: 2px solid #42a8c0;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
padding: 2px;
|
||||
font-size: 80%;
|
||||
line-height: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.main-desc {
|
||||
font-size: 71%;
|
||||
line-height: 140%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.personal-details {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.personal-info {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.personal-info ion-icon {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
font-size: 90%;
|
||||
line-height: 120%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.personal-info a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 90%;
|
||||
color: white;
|
||||
margin-top: 60px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.personal-ed {
|
||||
margin-top: 20px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.personal-ed-bold {
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
font-size: 80%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.personal-ed-bold span {
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
.personal-ed-light {
|
||||
font-weight: 400;
|
||||
font-size: 80%;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.exp-head {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.exp-title {
|
||||
font-weight: 700;
|
||||
float: left;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.exp-duration {
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
float: right;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.exp-place {
|
||||
font-weight: 400;
|
||||
opacity: 0.7;
|
||||
font-size: 80%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.exp-desc {
|
||||
font-size: 71%;
|
||||
line-height: 140%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.exp-items {
|
||||
margin: 10px 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.exp-items li {
|
||||
font-size: 71%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.exp-items li a {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.exp-projects {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.exp-project {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.exp-project a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #42a8c0;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.exp-project p {
|
||||
font-size: 75%;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.skills {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.skills:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.skill-container {
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.skill-title {
|
||||
font-size: 75%;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skill-bg {
|
||||
background: #eee;
|
||||
margin: 0;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.skill-fg {
|
||||
background: #42a8c0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 273 KiB |
|
|
@ -0,0 +1,689 @@
|
|||
|
||||
/* SECTIONS ============================================================================= */
|
||||
|
||||
.section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/* GROUPING ============================================================================= */
|
||||
|
||||
.row {
|
||||
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
|
||||
}
|
||||
|
||||
.row:before,
|
||||
.row:after {
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
.row:after {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
/* GRID COLUMN SETUP ==================================================================== */
|
||||
|
||||
.col {
|
||||
display: block;
|
||||
float:left;
|
||||
margin: 1% 0 1% 1.6%;
|
||||
}
|
||||
|
||||
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
|
||||
|
||||
|
||||
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.col {
|
||||
/*margin: 1% 0 1% 0%;*/
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF TWO ============================================================================= */
|
||||
|
||||
|
||||
.span-2-of-2 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-1-of-2 {
|
||||
width: 49.2%;
|
||||
}
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-2-of-2 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-2 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF THREE ============================================================================= */
|
||||
|
||||
|
||||
.span-3-of-3 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-2-of-3 {
|
||||
width: 67.74%;
|
||||
}
|
||||
|
||||
.span-1-of-3 {
|
||||
width: 32.26%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-3-of-3 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-3 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-3 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* GRID OF FOUR ============================================================================= */
|
||||
|
||||
|
||||
.span-4-of-4 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-3-of-4 {
|
||||
width: 74.6%;
|
||||
}
|
||||
|
||||
.span-2-of-4 {
|
||||
width: 49.2%;
|
||||
}
|
||||
|
||||
.span-1-of-4 {
|
||||
width: 23.8%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-4-of-4 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-4 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-4 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-4 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF FIVE ============================================================================= */
|
||||
|
||||
|
||||
.span-5-of-5 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-4-of-5 {
|
||||
width: 79.68%;
|
||||
}
|
||||
|
||||
.span-3-of-5 {
|
||||
width: 59.36%;
|
||||
}
|
||||
|
||||
.span-2-of-5 {
|
||||
width: 39.04%;
|
||||
}
|
||||
|
||||
.span-1-of-5 {
|
||||
width: 18.72%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-5-of-5 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-5 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-5 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-5 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-5 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF SIX ============================================================================= */
|
||||
|
||||
|
||||
.span-6-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-5-of-6 {
|
||||
width: 83.06%;
|
||||
}
|
||||
|
||||
.span-4-of-6 {
|
||||
width: 66.13%;
|
||||
}
|
||||
|
||||
.span-3-of-6 {
|
||||
width: 49.2%;
|
||||
}
|
||||
|
||||
.span-2-of-6 {
|
||||
width: 32.26%;
|
||||
}
|
||||
|
||||
.span-1-of-6 {
|
||||
width: 15.33%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-6-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-6 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* GRID OF SEVEN ============================================================================= */
|
||||
|
||||
|
||||
.span-7-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-6-of-7 {
|
||||
width: 85.48%;
|
||||
}
|
||||
|
||||
.span-5-of-7 {
|
||||
width: 70.97%;
|
||||
}
|
||||
|
||||
.span-4-of-7 {
|
||||
width: 56.45%;
|
||||
}
|
||||
|
||||
.span-3-of-7 {
|
||||
width: 41.94%;
|
||||
}
|
||||
|
||||
.span-2-of-7 {
|
||||
width: 27.42%;
|
||||
}
|
||||
|
||||
.span-1-of-7 {
|
||||
width: 12.91%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-7-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-6-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-7 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF EIGHT ============================================================================= */
|
||||
|
||||
|
||||
.span-8-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-7-of-8 {
|
||||
width: 87.3%;
|
||||
}
|
||||
|
||||
.span-6-of-8 {
|
||||
width: 74.6%;
|
||||
}
|
||||
|
||||
.span-5-of-8 {
|
||||
width: 61.9%;
|
||||
}
|
||||
|
||||
.span-4-of-8 {
|
||||
width: 49.2%;
|
||||
}
|
||||
|
||||
.span-3-of-8 {
|
||||
width: 36.5%;
|
||||
}
|
||||
|
||||
.span-2-of-8 {
|
||||
width: 23.8%;
|
||||
}
|
||||
|
||||
.span-1-of-8 {
|
||||
width: 11.1%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-8-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-7-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-6-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-8 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF NINE ============================================================================= */
|
||||
|
||||
|
||||
.span-9-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-8-of-9 {
|
||||
width: 88.71%;
|
||||
}
|
||||
|
||||
.span-7-of-9 {
|
||||
width: 77.42%;
|
||||
}
|
||||
|
||||
.span-6-of-9 {
|
||||
width: 66.13%;
|
||||
}
|
||||
|
||||
.span-5-of-9 {
|
||||
width: 54.84%;
|
||||
}
|
||||
|
||||
.span-4-of-9 {
|
||||
width: 43.55%;
|
||||
}
|
||||
|
||||
.span-3-of-9 {
|
||||
width: 32.26%;
|
||||
}
|
||||
|
||||
.span-2-of-9 {
|
||||
width: 20.97%;
|
||||
}
|
||||
|
||||
.span-1-of-9 {
|
||||
width: 9.68%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-9-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-8-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-7-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-6-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-9 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF TEN ============================================================================= */
|
||||
|
||||
|
||||
.span-10-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-9-of-10 {
|
||||
width: 89.84%;
|
||||
}
|
||||
|
||||
.span-8-of-10 {
|
||||
width: 79.68%;
|
||||
}
|
||||
|
||||
.span-7-of-10 {
|
||||
width: 69.52%;
|
||||
}
|
||||
|
||||
.span-6-of-10 {
|
||||
width: 59.36%;
|
||||
}
|
||||
|
||||
.span-5-of-10 {
|
||||
width: 49.2%;
|
||||
}
|
||||
|
||||
.span-4-of-10 {
|
||||
width: 39.04%;
|
||||
}
|
||||
|
||||
.span-3-of-10 {
|
||||
width: 28.88%;
|
||||
}
|
||||
|
||||
.span-2-of-10 {
|
||||
width: 18.72%;
|
||||
}
|
||||
|
||||
.span-1-of-10 {
|
||||
width: 8.56%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-10-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-9-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-8-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-7-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-6-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-10 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF ELEVEN ============================================================================= */
|
||||
|
||||
.span-11-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-10-of-11 {
|
||||
width: 90.76%;
|
||||
}
|
||||
|
||||
.span-9-of-11 {
|
||||
width: 81.52%;
|
||||
}
|
||||
|
||||
.span-8-of-11 {
|
||||
width: 72.29%;
|
||||
}
|
||||
|
||||
.span-7-of-11 {
|
||||
width: 63.05%;
|
||||
}
|
||||
|
||||
.span-6-of-11 {
|
||||
width: 53.81%;
|
||||
}
|
||||
|
||||
.span-5-of-11 {
|
||||
width: 44.58%;
|
||||
}
|
||||
|
||||
.span-4-of-11 {
|
||||
width: 35.34%;
|
||||
}
|
||||
|
||||
.span-3-of-11 {
|
||||
width: 26.1%;
|
||||
}
|
||||
|
||||
.span-2-of-11 {
|
||||
width: 16.87%;
|
||||
}
|
||||
|
||||
.span-1-of-11 {
|
||||
width: 7.63%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-11-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-10-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-9-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-8-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-7-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-6-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-11 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* GRID OF TWELVE ============================================================================= */
|
||||
|
||||
.span-12-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span-11-of-12 {
|
||||
width: 91.53%;
|
||||
}
|
||||
|
||||
.span-10-of-12 {
|
||||
width: 83.06%;
|
||||
}
|
||||
|
||||
.span-9-of-12 {
|
||||
width: 74.6%;
|
||||
}
|
||||
|
||||
.span-8-of-12 {
|
||||
width: 66.13%;
|
||||
}
|
||||
|
||||
.span-7-of-12 {
|
||||
width: 57.66%;
|
||||
}
|
||||
|
||||
.span-6-of-12 {
|
||||
width: 49.2%;
|
||||
}
|
||||
|
||||
.span-5-of-12 {
|
||||
width: 40.73%;
|
||||
}
|
||||
|
||||
.span-4-of-12 {
|
||||
width: 32.26%;
|
||||
}
|
||||
|
||||
.span-3-of-12 {
|
||||
width: 23.8%;
|
||||
}
|
||||
|
||||
.span-2-of-12 {
|
||||
width: 15.33%;
|
||||
}
|
||||
|
||||
.span-1-of-12 {
|
||||
width: 6.86%;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.span-12-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-11-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-10-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-9-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-8-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-7-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-6-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-5-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-4-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-3-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-2-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.span-1-of-12 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in New Issue