Example Responsive Resume

Developer
Andy Hullinger
Size
5,526 Kb
Views
18,216
  1. Example Responsive Resume Previews
  2. Example Responsive Resume HTML Codes
  3. Example Responsive Resume CSS Codes

How do I make an example responsive resume?

Showing the proper use and clever structure of the Skeleton CSS framework for a responsive resume. . What is a example responsive resume? How do you make a example responsive resume? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Example Responsive Resume Previews
IQ Test

Example Responsive Resume - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Example Responsive Resume</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Cinzel+Decorative' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://s.cdpn.io/1412/base.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/andyhullinger/pen/KItHD.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================	#Site Styles	#Page Styles	#Media Queries	#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
a{ text-decoration: none;
}
h1{ margin-top: 50px; font-family: 'Cinzel Decorative', serif;
}
.contact-info p{ margin-bottom: 0px;
}
h2{ font-size: 2em; border-bottom: 1px solid grey; padding-bottom: 10px;
}
h3 { font-size: 1.25em;
}
h4{ font-size: .8em; text-align: right;
}
.row{ margin-bottom: 0px;
}
.resume{ margin-top: 60px;
}
.button{ margin-top: 30px;
}
/* #Media Queries
================================================== */	/* Smaller than standard 960 (devices and browsers) */	@media only screen and (max-width: 959px) {}	/* Tablet Portrait size to standard 960 (devices and browsers) */	@media only screen and (min-width: 768px) and (max-width: 959px) { h1{font-size: 2.75em;}	}	/* All Mobile Sizes (devices and browser) */	@media only screen and (max-width: 767px) {}	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */	@media only screen and (min-width: 480px) and (max-width: 767px) {	.contact-info, h2, h3, h4{text-align: center;}	.list-wrap li{	display: inline;	padding-right: 20px;	}	h2{	font-size:2.5em;	border-bottom: none;	padding-bottom: 0px;	color: grey;	}	h3{	font-size: 1.5em;	line-height:1em;	}	h4{	font-size: 1em;	}	}	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */	@media only screen and (max-width: 479px) {	.contact-info, h2, h3, h4{text-align: center;}	.list-wrap li{	display: inline;	padding-right: 20px;	}	h2{	font-size:2.5em;	border-bottom: none;	padding-bottom: 0px;	color: grey;	}	h3{	font-size: 1.5em;	line-height:1em;	}	h4{	font-size: 1em;	}	}
/* #Font-Face
==================================================
*/
/*	This is the proper syntax for an @font-face file	Just create a "fonts" folder at the root,	copy your FontName into code below and remove	comment brackets */
/*	@font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; }
*/ </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Add/Remove my custom CSS rule "showgrid"
the main container <DIV> to make Skeleton's
grid visible when designing layouts-->
<div class="container .showgrid"> <div class="four columns contact-info"> <h1>Abe Lincoln</h1> <p>1441 Monument Ave</p> <p>Springfield, IL 62702</p> <p><a href="tel:1-217-782-2717">217.782.2717</a></p> <p><a class="button" href="http://www.alplm.org">website</a></p> </div> <div class="twelve columns resume"> <h2>EXPERIENCE</h2> <div class="row"> <h3 class="seven columns alpha">16th U.S. PRESIDENT</h3> <h4 class="five columns omega">Washington, <em>DC 1861-1865</em></h4> </div> <ul> <li>Served as the first Republican Party president and built the Republican Party into a powerful national organization.</li> <li>Defended and preserved the unity of the United States by defeating the secessionist Confederacy in the Civil War, and instituted a formal Reconstruction Plan to reunite the nation after the war.</li> <li>Supervised all aspects of the war effort and selected top generals (including Ulysses S. Grant) to lead military campaigns</li> <li>Issued the Emancipation Proclamation in 1863, freeing slaves within the Confederacy. Endorsed the 13th Amendment to the Constitution, which totally abolished slavery.</li> <li>Delivered the Gettysburg Address, the most famous speech in American history.</li> <li>Signed landmark legislation, including the National Banking Act, legislation that protected American industry, and a bill that chartered the first transcontinental railroad.</li> <li>Supported the Federal Homestead Law (1862), which allowed poor people in the east to acquire land in the west.</li> </ul> <div class="row"> <h3 class="seven columns alpha">ILLINOIS STATE REPRESENTATIVE</h3> <h4 class="five columns omega">Vandalia - Springfield, IL <em>1834-1842</em></h4> </div> <ul> <li>Led the Long Nine group of seven legislators and two senators in moving the state capital from Vandalia to Springfield</li> <li>Helped pass a bill to build better roads and construct a system of canals and railroads making Illinois a more progressive and accessible state. </li> </ul> <div class="row"> <h3 class="seven columns alpha">ATTORNEY AT LAW</h3> <h4 class="five columns omega">Springfield, IL <em>1836-1861</em></h4> </div> <ul> <li>Prepared cases for federal courts, the Illinois Supreme Court and the state’s Eighth Judicial Circuit. Admitted to practice in United States Circuit Court in 1839</li> <li>Joined the Republican Party in 1856 and gained national attention by challenging Stephen A. Douglas to a series of debates in 1858</li> </ul> <div class="row"> <h3 class="seven columns alpha">POSTMASTER</h3> <h4 class="five columns omega">New Salem, IL <em>1833-1836</em></h4> </div> <ul> <li>Worked diligently to serve and please customers. Routinely walked several miles to deliver mail when I know that someone is waiting for an important letter.</li> </ul> <div class="row"> <div class="six columns alpha"> <h2>EDUCATION</h2> <ul> <li>Honorary Doctor of Laws <strong>Princeton University <em>1864</em></strong></li> <li>Honorary Degree <strong>Columbia <em>1861</em></strong></li> <li>Knox College's First Honorary Doctorate <strong>Knox College <em>1860</em></strong></li> </ul> </div> <div class="six columns omega list-wrap"> <h2>SKILLS</h2> <ul> <li>Accomplished storyteller</li> <li>Excellent writing ability</li> <li>Works well with people</li> <li>Moderate abolitionist</li> <li>Only US president to own a patent, granted in 1849 for device to lift boats over shoals.</li> </ul> </div> </div> </div> <!-- container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Example Responsive Resume - Script Codes CSS Codes

/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================	#Site Styles	#Page Styles	#Media Queries	#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
a{ text-decoration: none;
}
h1{ margin-top: 50px; font-family: 'Cinzel Decorative', serif;
}
.contact-info p{ margin-bottom: 0px;
}
h2{ font-size: 2em; border-bottom: 1px solid grey; padding-bottom: 10px;
}
h3 { font-size: 1.25em;
}
h4{ font-size: .8em; text-align: right;
}
.row{ margin-bottom: 0px;
}
.resume{ margin-top: 60px;
}
.button{ margin-top: 30px;
}
/* #Media Queries
================================================== */	/* Smaller than standard 960 (devices and browsers) */	@media only screen and (max-width: 959px) {}	/* Tablet Portrait size to standard 960 (devices and browsers) */	@media only screen and (min-width: 768px) and (max-width: 959px) { h1{font-size: 2.75em;}	}	/* All Mobile Sizes (devices and browser) */	@media only screen and (max-width: 767px) {}	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */	@media only screen and (min-width: 480px) and (max-width: 767px) {	.contact-info, h2, h3, h4{text-align: center;}	.list-wrap li{	display: inline;	padding-right: 20px;	}	h2{	font-size:2.5em;	border-bottom: none;	padding-bottom: 0px;	color: grey;	}	h3{	font-size: 1.5em;	line-height:1em;	}	h4{	font-size: 1em;	}	}	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */	@media only screen and (max-width: 479px) {	.contact-info, h2, h3, h4{text-align: center;}	.list-wrap li{	display: inline;	padding-right: 20px;	}	h2{	font-size:2.5em;	border-bottom: none;	padding-bottom: 0px;	color: grey;	}	h3{	font-size: 1.5em;	line-height:1em;	}	h4{	font-size: 1em;	}	}
/* #Font-Face
==================================================
*/
/*	This is the proper syntax for an @font-face file	Just create a "fonts" folder at the root,	copy your FontName into code below and remove	comment brackets */
/*	@font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; }
*/
Example Responsive Resume - Script Codes
Example Responsive Resume - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 3
Size 5,526 Kb
Views 18,216
Do you need developer help for Example Responsive Resume?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hullinger (andyhullinger) Script Codes
Name
Solved By Flexbox - an excerpt
Presentation Template with Animation
Mageractive Week 1
Clean SVG Map of USA
Simple example infographic pen
Simple photo captions
CSS type and layout - discrete elements
Simple animated infographic
Hello Kitty Puppet Example TweenMax
Mageractive Class 1
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!