Kupas Tuntas HTML dan CSS


1.      Deskripsi masing-masing fungsi HTML

HTML

Fungsi

<html> </html> Membuat dokumen HTML
<head> </head> Informasi header seperti judul, meta, styleshet source, javascript source dll.
<link> </link> Untuk membuat link
<style> </style> Untuk mengatur letak, font, ukuran font, dan sebagainya supaya dapat tersusun dengan rapih dan menarik
<script> </script> Untuk menampilkan fungsi.
<body> <body> Area sebuah halaman web yang dapat ditampilkan pada interface yang diinginkan.
<div> <div> Untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya
<ul> </ul> Membuat bullet. Pada line berikutnya harus ditulis < li> sebelum mengetik
<li> </li> Untuk membuat list symbol.
<h> </h> Script untuk ukuran font pada title.
<p> </p> Script untuk pemberian paragraf.
  1. Deskripsi masing-masing fungis CSS

CSS

Fungsi

Body Membuat dokumen HTML. Body tidak terkena dampak dari style sheet CSS.
Clearfix Untuk membersihkan grid.
Container Untuk membuat linebreak secara default.
Header Untuk membuat tampilan web friendly.
  1. 3.      Perbedaan menggunakan clearfix dan tidak pada CSS
  • Yang menggunakan clearfix
  • Yang tidak menggunakan clearfix

Dari kedua gambar di atas, dapat dijelaskan bahwa dengan menggunakan clearfix akan membuat tampilan sebuah web lebih rapi karena funfsi dari clearfix adalah untuk membersihkan “grid”. Grid adalah susunan kerangka yang dibangun atas garis dengan posisi vertikal dan horizontal.

  1. 4.      Hasil ubahan warna layout dan penambahan gambar dan logo.

Skrip yang di ubah:

Hasil:

  1. 5.      Hasil ubahan posisi sidebar

Skrip yang di ubah:

  1. 6.      Replica layout

Skrip:

<!DOCTYPE html><html dir=”ltr” lang=”en-US”>

<head>

<!– Theme version: 1.0 –>

<meta charset=”UTF-8″ />

<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>

<title>AcidRain | Home page | Just another WordPress site</title>

<!– Custom favicon –>

<!– Custom Apple Touch Icon –>

<link rel=”profile” href=”http://gmpg.org/xfn/11&#8243; />

<link rel=”pingback” href=”http://andreagandino.com/themes/acidrain/xmlrpc.php&#8221; />

<meta name=”viewport” content=”width=device-width, maximum-scale=1.0″>

<!– Main stylesheets –>

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/style.css&#8221; />

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/reset.css&#8221; />

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/framework.css&#8221; />

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/layout.css&#8221; />

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/print.css&#8221; />

<!– Plugins stylesheets –>

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/prettyPhoto.css&#8221; />

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/flexslider.css&#8221; />

<!– Custom stylesheets –>

<link rel=”stylesheet” media=”all” href=”http://andreagandino.com/themes/acidrain?thb_custom_resource=1&amp;resource_uri=custom-styles&#8221; id=”custom-styles” />

<!–[if IE 7]>

<link rel=”stylesheet” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/ie.css&#8221; type=”text/css”>

<![endif]–>

<!–[if IE 8]>

<link rel=”stylesheet” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/css/ie8.css&#8221; type=”text/css”>

<![endif]–>

<!–[if lt IE 9]>

<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;

<![endif]–><link rel=”alternate” type=”application/rss+xml” title=”AcidRain &raquo; Feed” href=”http://andreagandino.com/themes/acidrain/?feed=rss2&#8243; />

<link rel=”alternate” type=”application/rss+xml” title=”AcidRain &raquo; Comments Feed” href=”http://andreagandino.com/themes/acidrain/?feed=comments-rss2&#8243; />

<link rel=”alternate” type=”application/rss+xml” title=”AcidRain &raquo; Home page Comments Feed” href=”http://andreagandino.com/themes/acidrain/?feed=rss2&page_id=1124&#8243; />

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-includes/js/jquery/jquery.js?ver=1.7.2′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/js/jquery.easing.1.3.js?ver=1.0′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/js/jquery.flexslider-min.js?ver=3.1.3′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/js/jquery.cycle.all.min.js?ver=3.1.3′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/js/jquery.prettyPhoto.js?ver=3.1.3′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/framework/frontend/js/thb.lib.js?ver=1.0′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-includes/js/swfobject.js?ver=2.2-20120417′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/framework/frontend/js/froogaloop.js?ver=3.4.1′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/js/jquery.mobilemenu.js?ver=1.0′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/js/script.js?ver=1.0′></script&gt;

<script type=’text/javascript’ src=’http://andreagandino.com/themes/acidrain/wp-includes/js/comment-reply.js?ver=3.4.1′></script&gt;

<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://andreagandino.com/themes/acidrain/xmlrpc.php?rsd&#8221; />

<link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://andreagandino.com/themes/acidrain/wp-includes/wlwmanifest.xml&#8221; />

<link rel=’prev’ title=’Portfolio 3 cols’ href=’http://andreagandino.com/themes/acidrain/?page_id=824&#8242; />

<link rel=’next’ title=’404′ href=’http://andreagandino.com/themes/acidrain/?page_id=1262&#8242; />

<meta name=”generator” content=”WordPress 3.4.1″ />

<link rel=’canonical’ href=’http://andreagandino.com/themes/acidrain/&#8217; />

<style type=”text/css”>.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>

<style type=”text/css” id=”custom-background-css”>

body.custom-background { background-color: #f7f7f7; }

</style>

<!– Custom feed URL –>

</head>

<body id=”top”>

<div id=”top-container” >

<div >

<div >

Say ‘hello’ to our new theme: “AcidRain”. On sale at ThemeForest at <a href=””>only 45$</a>!                           </div>

<div >

<ul>

<li>

<a href=”http://twitter.com/thehappybit”&gt;

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/config/widgets/social/icons/twitter.png&#8221; alt=”” />

</a>

</li>

<li>

<a href=”http://facebook.com/thehappybit”&gt;

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/config/widgets/social/icons/facebook.png&#8221; alt=”” />

</a>

</li>

<li>

<a href=”http://dribbble.com/thehappybit”&gt;

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/config/widgets/social/icons/dribbble.png&#8221; alt=”” />

</a>

</li>

</ul>

</div>

</div>

</div>

<!– Page header –>

<div id=”header-wrapper” >

<!– Header ==================================================================== –>

<header id=”header”>

<h1 id=”logo”>

<a href=”http://andreagandino.com/themes/acidrain/&#8221; title=”AcidRain” rel=”home”>AcidRain</a>

</h1>

<nav id=”main-nav”>

<ul id=”menu-primary”><li id=”menu-item-1463″><a href=”http://andreagandino.com/themes/acidrain/”>Home</a></li&gt;

<li id=”menu-item-853″><a>Appearance</a>

<ul >

<li id=”menu-item-1121″><a href=”http://andreagandino.com/themes/acidrain?acd_logo_position=left”>Logo on the left</a></li>

<li id=”menu-item-1122″><a href=”http://andreagandino.com/themes/acidrain?acd_logo_position=center”>Logo centered</a></li>

<li id=”menu-item-1123″><a href=”http://andreagandino.com/themes/acidrain?acd_logo_position=right”>Logo on the right</a></li>

<li id=”menu-item-1224″><a href=”#”>Slideshow</a>

<ul >

<li id=”menu-item-911″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_caption_effects=fade”>Caption effects</a>

<ul >

<li id=”menu-item-912″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_caption_effects=fade”>Fade</a></li&gt;

<li id=”menu-item-913″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_caption_effects=fastslide”>Slide in</a></li>

</ul>

</li>

<li id=”menu-item-906″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=fade”>Transitions</a&gt;

<ul >

<li id=”menu-item-907″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=fade”>Fade</a></li&gt;

<li id=”menu-item-908″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=scrollUp”>Scroll up</a></li>

<li id=”menu-item-909″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=scrollDown”>Scroll down</a></li>

<li id=”menu-item-910″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=scrollLeft”>Scroll left</a></li>

<li id=”menu-item-920″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=scrollRight”>Scroll right</a></li>

<li id=”menu-item-921″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=wipe”>Wipe</a></li&gt;

<li id=”menu-item-975″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_effects=uncover”>Uncover</a></li&gt;

</ul>

</li>

<li id=”menu-item-903″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_el=post”>Slideshow w/ latest posts</a></li>

<li id=”menu-item-902″><a href=”http://andreagandino.com/themes/acidrain/?acd_slideshow_el=works”>Slideshow w/ latest works</a></li>

</ul>

</li>

<li id=”menu-item-1462″><a href=”#”>Layout</a>

<ul >

<li id=”menu-item-905″><a href=”http://andreagandino.com/themes/acidrain/?acd_layout_type=1″>Extended</a></li&gt;

<li id=”menu-item-904″><a href=”http://andreagandino.com/themes/acidrain/?acd_layout_type=0″>Boxed</a></li&gt;

<li id=”menu-item-836″><a href=”http://andreagandino.com/themes/acidrain/?acd_footer_columns_number=0″>w/out footer sidebar</a></li>

<li id=”menu-item-850″><a href=”http://andreagandino.com/themes/acidrain/?acd_top_bar=0″>w/out top bar</a></li>

</ul>

</li>

<li id=”menu-item-1429″><a href=”#”>Skins</a>

<ul >

<li id=”menu-item-1630″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1603″>Pale blue</a></li>

<li id=”menu-item-1629″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1606″>Red</a></li&gt;

<li id=”menu-item-1628″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1609″>White green</a></li>

<li id=”menu-item-1627″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1612″>Dark blue</a></li>

<li id=”menu-item-1626″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1615″>White blue</a></li>

<li id=”menu-item-1625″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1618″>Dark desatured orange</a></li>

<li id=”menu-item-1624″><a href=”http://andreagandino.com/themes/acidrain/?page_id=1621″>Black yellow</a></li>

</ul>

</li>

</ul>

</li>

<li id=”menu-item-786″><a href=”http://andreagandino.com/themes/acidrain/?page_id=759″>Pages</a&gt;

<ul >

<li id=”menu-item-789″ ><a href=”http://andreagandino.com/themes/acidrain/?page_id=728″>Page w/ left sidebar</a></li>

<li id=”menu-item-790″><a href=”http://andreagandino.com/themes/acidrain/?page_id=732″>Page w/ right sidebar</a></li>

<li id=”menu-item-788″><a href=”http://andreagandino.com/themes/acidrain/?page_id=736″>Contact</a></li&gt;

<li id=”menu-item-792″><a href=”http://andreagandino.com/themes/acidrain/?page_id=744″>Testimonials bubble style</a></li>

<li id=”menu-item-793″><a href=”http://andreagandino.com/themes/acidrain/?page_id=748″>Testimonials quote style</a></li>

<li id=”menu-item-787″><a href=”http://andreagandino.com/themes/acidrain/?page_id=753″>Archives</a></li&gt;

</ul>

</li>

<li id=”menu-item-1020″><a href=”#”>Shortcodes</a>

<ul >

<li id=”menu-item-815″><a href=”http://andreagandino.com/themes/acidrain/?page_id=730″>Typography</a></li&gt;

<li id=”menu-item-805″><a href=”http://andreagandino.com/themes/acidrain/?page_id=734″>Dropcaps</a></li&gt;

<li id=”menu-item-801″><a href=”http://andreagandino.com/themes/acidrain/?page_id=751″>Accordion</a></li&gt;

<li id=”menu-item-814″><a href=”http://andreagandino.com/themes/acidrain/?page_id=755″>Toggle</a></li&gt;

<li id=”menu-item-812″><a href=”http://andreagandino.com/themes/acidrain/?page_id=749″>Tabs</a></li&gt;

<li id=”menu-item-802″><a href=”http://andreagandino.com/themes/acidrain/?page_id=738″>Buttons</a></li&gt;

<li id=”menu-item-803″><a href=”http://andreagandino.com/themes/acidrain/?page_id=722″>Columns</a></li&gt;

<li id=”menu-item-804″><a href=”http://andreagandino.com/themes/acidrain/?page_id=782″>Contact</a></li&gt;

<li id=”menu-item-810″><a href=”http://andreagandino.com/themes/acidrain/?page_id=765″>Pricing table</a></li>

<li id=”menu-item-808″><a href=”http://andreagandino.com/themes/acidrain/?page_id=741″>Messages</a></li&gt;

<li id=”menu-item-806″><a href=”http://andreagandino.com/themes/acidrain/?page_id=794″>Flickr & Twitter</a></li>

<li id=”menu-item-807″><a href=”http://andreagandino.com/themes/acidrain/?page_id=773″>Maps</a></li&gt;

<li id=”menu-item-809″><a href=”http://andreagandino.com/themes/acidrain/?page_id=779″>Posts & Works</a></li>

<li id=”menu-item-811″><a href=”http://andreagandino.com/themes/acidrain/?page_id=784″>Social</a></li&gt;

<li id=”menu-item-813″><a href=”http://andreagandino.com/themes/acidrain/?page_id=776″>Testimonials</a></li&gt;

<li id=”menu-item-816″><a href=”http://andreagandino.com/themes/acidrain/?page_id=758″>Video</a></li&gt;

</ul>

</li>

<li id=”menu-item-1707″><a href=”http://andreagandino.com/themes/acidrain/?page_id=817″>Blog</a&gt;

<ul >

<li id=”menu-item-859″><a href=”http://andreagandino.com/themes/acidrain/?page_id=798″>Blog with big thumbnails</a>

<ul >

<li id=”menu-item-868″><a href=”http://andreagandino.com/themes/acidrain/?page_id=798&amp;acd_sidebar_post=”>Blog w/ big thumbnails wout/ sidebar</a></li>

<li id=”menu-item-874″><a href=”http://andreagandino.com/themes/acidrain/?page_id=798&amp;acd_sidebar_position=left”>Blog w/ big thumbnails + left sidebar</a></li>

</ul>

</li>

<li id=”menu-item-860″><a href=”http://andreagandino.com/themes/acidrain/?page_id=817″>Blog with image on top</a>

<ul >

<li id=”menu-item-870″><a href=”http://andreagandino.com/themes/acidrain/?page_id=817&amp;acd_sidebar_post=”>Blog w/ img on top wout/ sidebar</a></li>

<li id=”menu-item-877″><a href=”http://andreagandino.com/themes/acidrain/?page_id=817&amp;acd_sidebar_position=left”>Blog w/ img on top + left sidebar</a></li>

</ul>

</li>

<li id=”menu-item-858″><a href=”http://andreagandino.com/themes/acidrain/?page_id=796″>Blog with left thumb</a>

<ul >

<li id=”menu-item-872″ ><a href=”http://andreagandino.com/themes/acidrain/?page_id=796&amp;acd_sidebar_position=left”>Blog with left thumb w/ left sidebar</a></li>

<li id=”menu-item-1460″><a href=”http://andreagandino.com/themes/acidrain/?page_id=796″>Blog with left thumb w/ right sidebar</a></li>

</ul>

</li>

<li id=”menu-item-867″><a href=”http://andreagandino.com/themes/acidrain/?page_id=817&amp;acd_sidebar_post=”>Blog wout/ sidebar</a></li>

</ul>

</li>

<li id=”menu-item-861″><a href=”http://andreagandino.com/themes/acidrain/?page_id=819″>Portfolio</a&gt;

<ul >

<li id=”menu-item-862″><a href=”http://andreagandino.com/themes/acidrain/?page_id=822″>Portfolio 2 cols</a></li>

<li id=”menu-item-863″><a href=”http://andreagandino.com/themes/acidrain/?page_id=824″>Portfolio 3 cols</a></li>

<li id=”menu-item-1459″><a href=”http://andreagandino.com/themes/acidrain/?page_id=819″>Portfolio 4 cols</a></li>

<li id=”menu-item-1461″><a href=”http://andreagandino.com/themes/acidrain/?page_id=819&amp;acd_works_ajax_portfolio=0″>Portfolio w/out AJAX</a></li>

<li id=”menu-item-883″><a href=”http://andreagandino.com/themes/acidrain/?works=mattis”>Single work</a></li>

</ul>

</li>

</ul>                            </nav>

</header>

</div>

<!– Slideshow ==================================================================== –>

<div >

<ul id=”background_slider”>

<li data-index=”0″>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/08/officefurniture.jpg&#8221; alt=”” data-url=”” style=”opacity: 0″>

</li>

<li data-index=”1″>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/08/blur2.jpg&#8221; alt=”” data-url=”” style=”opacity: 0″>

</li>

<li data-index=”2″>

<img src=”http://b.vimeocdn.com/ts/508/596/50859608_640.jpg&#8221; alt=””Colosseo”” data-url=”http://vimeo.com/9971247&#8243; style=”opacity: 0;”>

</li>

</ul>

<div>

<div >

<div >

<p><img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/09/slide1.png”></p&gt;

</div>

</div>

<div >

<div >

<p><img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/08/slide2.png”></p&gt;

</div>

</div>

<div >

<h1 >

<span>

<a href=’http://vimeo.com/9971247′>                                                                                     “Colosseo”                                                                               </a>                                                                             </span>

</h1>

<div >

<p>A video by Cameron Moll</p>

</div>

<a href=”#” data-index=”2″ data-text-play=”Play” data-text-pause=”Pause”>Play</a>

</div>

<div >

<div >

<ul >

<li><a href=”#” title=”Previous slide”>d</a></li>

<li><a href=”#” title=”Next slide”>a</a></li>

</ul>

</div>

</div>

</div>

<div></div>

<script type=”text/javascript” src=”http://andreagandino.com/themes/acidrain?thb_custom_resource=1&amp;resource_uri=custom-slideshow”></script&gt;

</div>

<div id=”subheader-wrapper” >

<div id=”subheader”>

<header >

<p>Meet AcidRain: the powerful & responsive WordPress theme</p>

<p style=”font-family:Helvetica; font-weight: normal; font-size: 16px; line-height: 1.25em; margin-top: 10px;”>Enjoy complete creative control at your fingertips over colors, fonts and layout, without any code skill required.</p>

</header>

</div>

</div>

<!– Main content ==================================================================== –>

<div id=”main-container-wrapper” >

<div id=”main-container” >

<section >

<div >                             <div >

<div ></p>

<p><div ><img src=”http://cdn5.iconfinder.com/data/icons/WPZOOM_Developer_Icon_Set/48/iphone.png&#8221; alt=””  /><h2>Mobile ready</h2>This theme features a fully responsive layout. No matter what the device, from large desktops to small mobile phones, you’ll get the <strong>best</strong> out of your site display.</div></p>

<p></div>

<div ></p>

<p><div ><img src=”http://cdn5.iconfinder.com/data/icons/WPZOOM_Developer_Icon_Set/48/pencil.png&#8221; alt=””  /><h2>Create your style</h2>Unleash your creativity and enjoy endless possibilities, with full control over <strong>skins</strong>, <strong>colors</strong> and <strong>typography</strong> (more than 90 fonts from Google, and you can upload your own too!).</div></p>

<p></div>

<div ></p>

<p><div ><img src=”http://cdn1.iconfinder.com/data/icons/WPZOOM_Developer_Icon_Set/48/buoy.png&#8221; alt=””  /><h2>Top notch support</h2>Feeling in trouble? Head over to our support forum, where you’ll find prompt support for your problem. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div></p>

<p></div>

<span ></span>

<div ><div ><header><h3>Latest posts</h3></header><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?p=1566″&gt;

<span ></span>

<span >c</span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/08/paukair-Business_Card-330×250.jpeg&#8221; alt=”” />

</a>

<div >

<h4><a href=”http://andreagandino.com/themes/acidrain/?p=1566″>Post format example: Gallery</a></h4>

<p>August 29, 2012</p>

</div>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?p=1091″&gt;

<span ></span>

<span >c</span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/04/InstaGenius-Artua-330×250.png&#8221; alt=”” />

</a>

<div >

<h4><a href=”http://andreagandino.com/themes/acidrain/?p=1091″>Maecenas faucibus mollis interdum</a></h4>

<p>April 20, 2012</p>

</div>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?p=1″&gt;

<span ></span>

<span >c</span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/04/dribbble_cupcake-icon_hres-romanjusdado-330×250.jpeg&#8221; alt=”” />

</a>

<div >

<h4><a href=”http://andreagandino.com/themes/acidrain/?p=1″>Morbi leo risus, porta ac consectetur ac, vestibulum at eros</a></h4>

<p>April 19, 2012</p>

</div>

</div>

</div>

<div ></p>

<p><div ><header><h3>Latest works</h3></header><div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?works=mattis”&gt;

<span ></span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/01/08-04-2012-everydayswiss-60×60.jpeg&#8221; alt=”” />

</a>

<div >

<h4>

<a href=”http://andreagandino.com/themes/acidrain/?works=mattis&#8221; title=”Click for more details”>

Mattis                                      </a>

</h4>

<p>Illustration</p>

</div>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?works=purus-nullam-lorem-malesuada-adipiscing”&gt;

<span ></span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/01/full-preview-Dash-60×60.jpeg&#8221; alt=”” />

</a>

<div >

<h4>

<a href=”http://andreagandino.com/themes/acidrain/?works=purus-nullam-lorem-malesuada-adipiscing&#8221; title=”Click for more details”>

Glass Logo Concept                                       </a>

</h4>

<p>Illustration</p>

</div>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?works=ultricies-euismod”&gt;

<span ></span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/01/wallpaper-Dash-60×60.jpeg&#8221; alt=”” />

</a>

<div >

<h4>

<a href=”http://andreagandino.com/themes/acidrain/?works=ultricies-euismod&#8221; title=”Click for more details”>

Ultricies Euismod                                           </a>

</h4>

<p>Illustration</p>

</div>

</div>

</div>

</div></p>

<p></div>

<div ></p>

<p>                              <div >                                      <header><h3>                                                               <a href=”http://flickr.com/photos/76466518@N00&#8243; target=”_blank” rel=”nofollow”>Flickr</a>

</h3></header>                      <div id=”flickr_wrapper”>

<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=12&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=76466518@N00″></script&gt;

</div>

<span></span>

</div>        </p>

<p></div>

<div ></p>

<p><div ><header><h3>                                            <a href=”http://twitter.com/thehappybit&#8221; target=”_blank” rel=”nofollow”>

Twitter                                               </a>

</h3></header>                                  <div id=”twitter_update_list”>

<ul>

<li id=”twitter-load”>…loading Twitter Stream</li>

</ul>

</div>

<script src=”http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js&#8221; type=”text/javascript”></script>

<script type=”text/javascript”>

jQuery(document).ready(function() {

getTwitters(‘twitter_update_list’, {

id: ‘thehappybit’,

count: 3,

enableLinks: true,

ignoreReplies: true,

clearContents: true,

template: ‘<a href=”http://twitter.com/%user_screen_name%/statuses/%id_str%/”>%time%</a&gt; <span>”%text%”</span>’

});

});

</script>

</div></p>

<p></div>

</div>

</div><!– closing the content section –>

<section>

<section id=”comments”>

</section>

<div >

</div>

</section>

</section><!– closing the content-wrapper section –>

</div><!– closing #main-container –>

</div><!– closing #main-container-wrapper –>

<!– Footer sidebar ==================================================================== –>

<div id=”footer-sidebar-wrapper” >

<div id=”footer-sidebar”>

<section>

<section >

<div ><header><h3>Blogroll</h3></header>

<ul class=’xoxo blogroll’>

<li><a href=”http://codex.wordpress.org/”>Documentation</a></li&gt;

<li><a href=”http://wordpress.org/extend/plugins/”>Plugins</a></li&gt;

<li><a href=”http://wordpress.org/extend/ideas/”>Suggest Ideas</a></li>

<li><a href=”http://wordpress.org/support/”>Support Forum</a></li>

<li><a href=”http://wordpress.org/extend/themes/”>Themes</a></li&gt;

<li><a href=”http://wordpress.org/news/”>WordPress Blog</a></li>

<li><a href=”http://planet.wordpress.org/”>WordPress Planet</a></li>

</ul>

</div>

</section>

<section >

<div ><header><h3>Popular posts</h3></header>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?p=149″&gt;

<span ></span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2008/05/tag_heuer_dof-rayfaustino-60×60.png&#8221; alt=”” />

</a>

<div >

<h4><a href=”http://andreagandino.com/themes/acidrain/?p=149″>Comment Test</a></h4>

<p>March 3, 2008</p>

</div>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?p=1″&gt;

<span ></span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/04/dribbble_cupcake-icon_hres-romanjusdado-60×60.jpeg&#8221; alt=”” />

</a>

<div >

<h4><a href=”http://andreagandino.com/themes/acidrain/?p=1″>Morbi leo risus, porta ac consectetur ac, vestibulum at eros</a></h4>

<p>April 19, 2012</p>

</div>

</div>

<div >

<a href=”http://andreagandino.com/themes/acidrain/?p=494″&gt;

<span ></span>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2008/05/preview2-rayfaustino-60×60.jpeg&#8221; alt=”” />

</a>

<div >

<h4><a href=”http://andreagandino.com/themes/acidrain/?p=494″>Cras mattis consectetur purus sit amet fermentum.</a></h4>

<p>May 6, 2008</p>

</div>

</div>

</div>                                                 </section>

<section >

<div ><header><h3>Our clients</h3></header>                                  <div ><img src=”http://andreagandino.com/themes/acidrain/wp-content/uploads/2012/08/logos.png”></div&gt;

</div>                                                 </section>

<section >

<div ><header><h3>Contact us</h3></header>

<div >

<p>22 A. Avenue,<br />

London, A022 LC.</p>

<dl>

<dt>Tel</dt>

<dd>+44 270 200 2270</dd>

<dt>Mobile</dt>

<dd>+44 270 200 2270</dd>

<dt>Fax</dt>

<dd>+44 270 200 2271</dd>

<dt>Email</dt>

<dd><a href=”mailto:acid@rain.com”>acid@rain.com</a></dd>

</dl>

</div>

</div><div >      <ul id=”social”>

<li>

<a href=”http://twitter.com/thehappybit”&gt;

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/config/widgets/social/icons/twitter.png&#8221; alt=”” />

</a>

</li>

<li>

<a href=”http://facebook.com/thehappybit”&gt;

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/config/widgets/social/icons/facebook.png&#8221; alt=”” />

</a>

</li>

<li>

<a href=”http://dribbble.com/thehappybit”&gt;

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/config/widgets/social/icons/dribbble.png&#8221; alt=”” />

</a>

</li>

</ul>

<span ></span></div>                                                    </section>

</section>

</div>

</div><!– closing #footer-sidebar-wrapper –>

<!– Footer ==================================================================== –>

<div id=”footer-wrapper” >

<div >

<footer id=”footer”>

<small id=”copyright”>

<a href=”http://andreagandino.com/themes/acidrain/&#8221; title=”AcidRain” rel=”home”>AcidRain</a>

<span>&copy; 2012</span>

</small>

<nav id=”sub-nav”>

<ul id=”menu-secondary”><li id=”menu-item-1100″><a href=”http://andreagandino.com/themes/acidrain/?page_id=753″>Archives</a></li&gt;

<li id=”menu-item-1099″><a href=”http://andreagandino.com/themes/acidrain/?page_id=796″>Blog</a></li&gt;

<li id=”menu-item-1790″><a href=”http://andreagandino.com/themes/acidrain/?page_id=744″>Testimonials</a></li&gt;

<li id=”menu-item-1101″><a href=”http://andreagandino.com/themes/acidrain/?page_id=736″>Contact</a></li&gt;

</ul>                                        </nav>

</footer>

</div>

</div><!– closing #footer-wrapper –>

<script type=”text/javascript” src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/jquery.miniColors.min.js”></script&gt;

<link rel=”stylesheet” href=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/jquery.miniColors.css&#8221; />

<script type=”text/javascript”>

var theme = “http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain&#8221;;

</script>

<script type=”text/javascript”>

$j(document).ready(function() {

$j(“#switcher .handle”).click(function() {

$j(“#switcher”).toggleClass(“open”);

});

$j(“#switcher .skins li”).click(function() {

var colors = $j(this).attr(“data-value”);

$j(“#skin”).val(colors);

$j(“#skin”).trigger(‘change’);

$j(“#switcher .skins li”).removeClass(“selected”);

$j(this).addClass(“selected”);

});

$j(“#switcher input.color”).miniColors();

$j(“.switcher-input”).change(function() {

// Colors

var skin = jQuery.parseJSON( $j(“#skin”).val() );

// Fonts

var textfont = $j(“#text-font”).val();

var menufont = $j(“#menu-font”).val();

var pagetitlefont = $j(“#pagetitle-font”).val();

var pagesubtitlefont = $j(“#pagesubtitle-font”).val();

var loader = $j(“#loader”);

var body = $j(“body”);

var query = “http://andreagandino.com/themes/acidrain/?thb_custom_resource=1&amp;resource_uri=custom-styles&#8221;;

if( skin ) {

for( key in skin ) {

query += “&amp;acd” + key + “=”+skin[key];

}

}

query += “&amp;acd_maincontent_font=”+textfont;

query += “&amp;acd_menu_font=”+menufont;

query += “&amp;acd_pagetitle_font=”+pagetitlefont;

query += “&amp;acd_pagesubtitle_font=”+pagesubtitlefont;

var link = $j(“<link rel=’stylesheet’ href='”+query+”‘ id=’custom-styles’/>”);

setTimeout(function() {

$j(‘head #custom-styles’).replaceWith(link);

}, 500);

return false;

});

});

</script>

<style type=”text/css”>

#switcher {

background: #fff;

color: #333;

font: normal 12px/1.5 Helvetica, Arial, sans-serif;

padding: 20px;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-right: 1px solid #ccc;

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

position: fixed;

top: 80px;

left: -441px;

width: 400px;

z-index: 999999;

box-shadow: 0 2px 0 rgba(0,0,0,.10);

-webkit-transition: all .4s ease-in-out;

-moz-transition: all .4s ease-in-out;

}

#switcher.open {

left: 0;

}

#switcher .handle {

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

height: 32px;

width: 33px;

padding: 5px;

display: block;

cursor: pointer;

position:absolute;

right: -44px;

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

background: #fff url(http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/images/colorwheel.png) 6px center no-repeat;

box-shadow: 0 2px 0 rgba(0,0,0,.10);

}

#switcher div {

clear: both;

}

#switcher p {

clear: both;

color: #888;

margin-bottom: 1.5em;

}

#switcher p strong {

font-weight: bold;

color: #222;

}

#switcher h1 {

font-size: 18px;

font-weight: bold;

margin-bottom: 12px;

}

#switcher h2 {

font-weight: bold;

margin: 24px 0 12px 0;

border-bottom: 1px solid #ddd;

font-size: 20px;

}

#switcher label {

float: left;

width: 180px;

color: #888;

margin-top: 3px;

}

#switcher select {

float: left;

margin-top: 3px;

}

#switcher .swrow {

clear: both;

display: block;

margin-bottom: 8px;

}

#switcher input {

/*display: none;*/

border: 1px solid #ccc;

color: #888;

font-size: 11px;

padding: 3px 2px;

letter-spacing: 1px;

text-transform: uppercase;

font-family: inherit;

}

#switcher .skins li {

cursor: pointer;

display: inline-block;

margin-bottom: 5px;

margin-right: 5px;

}

#switcher .skins li img {

border: 2px solid #eaeaea;

}

#switcher .skins li.selected {

font-weight: bold;

}

#switcher .skins li.selected img {

border: 2px solid red;

}

</style>

<div id=”switcher”>

<span></span>

<h1>Pick your own style!</h1>

<p>Hi there! Have fun picking your own style for AcidRain, and keep in mind that these are only few of the <strong>many customization options</strong> available (including lots fonts from the Google Webfonts library, and the ability to upload your own)!</p>

<div>

<h2>Skins</h2>

<span >

<input type=”hidden” id=”skin” value=”” >

<ul >

<li data-value='{“_main_color”:”F9623D”,”_topbar_background_color”:”282322″,”_topbar_text_color”:”EAEADE”,”_topbar_links_color”:”EAEADE”,”_topbar_links_hover_color”:”F9623D”,”_mainheader_background_color”:”FFFFFF”,”_logo_text_color”:”282322″,”_menu_links_color”:”282322″,”_menu_links_hover_color”:”F9623D”,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”282322″,”_submenu_links_hover_color”:”F9623D”,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”F9623D”,”_pageheader_background_color”:”53B4A5″,”_pagetitle_text_color”:”FFFFFF”,”_pagesubtitle_text_color”:”EAEADE”,”_slogan_background_color”:”53B4A5″,”_slogan_text_color”:”FFFFFF”,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”282322″,”_maincontent_links_color”:”282322″,”_maincontent_links_hover_color”:”F9623D”,”_maincontent_headings_color”:”282322″,”_mainsidebar_text_color”:”282322″,”_mainsidebar_links_color”:”282322″,”_mainsidebar_links_hover_color”:”F9623D”,”_mainsidebar_headings_color”:”282322″,”_footersidebar_background_color”:”EAEADE”,”_footersidebar_text_color”:”282322″,”_footersidebar_links_color”:”282322″,”_footersidebar_links_hover_color”:”F9623D”,”_footersidebar_headings_color”:”282322″,”_footer_background_color”:”282322″,”_footer_text_color”:”EAEADE”,”_footer_links_color”:”EAEADE”,”_footer_links_hover_color”:”F9623D”}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-1.png&#8221; alt=””>

</li>

<li data-value='{“_main_color”:”64B6B1″,”_topbar_background_color”:”34322b”,”_topbar_text_color”:”FFFFFF”,”_topbar_links_color”:”FFFFFF”,”_topbar_links_hover_color”:”64B6B1″,”_mainheader_background_color”:”FFFFFF”,”_logo_text_color”:”34322b”,”_menu_links_color”:”34322b”,”_menu_links_hover_color”:”64B6B1″,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”34322b”,”_submenu_links_hover_color”:”64B6B1″,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”64B6B1″,”_pageheader_background_color”:”CE534D”,”_pagetitle_text_color”:”FFFFFF”,”_pagesubtitle_text_color”:”EEE3E3″,”_slogan_background_color”:”CE534D”,”_slogan_text_color”:”FFFFFF”,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”34322b”,”_maincontent_links_color”:”34322b”,”_maincontent_links_hover_color”:”64B6B1″,”_maincontent_headings_color”:”34322b”,”_mainsidebar_text_color”:”34322b”,”_mainsidebar_links_color”:”34322b”,”_mainsidebar_links_hover_color”:”64B6B1″,”_mainsidebar_headings_color”:”34322b”,”_footersidebar_background_color”:”E9E9E9″,”_footersidebar_text_color”:”34322b”,”_footersidebar_links_color”:”34322b”,”_footersidebar_links_hover_color”:”64B6B1″,”_footersidebar_headings_color”:”34322b”,”_footer_background_color”:”34322b”,”_footer_text_color”:”FFFFFF”,”_footer_links_color”:”FFFFFF”,”_footer_links_hover_color”:”64B6B1″}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-2.png&#8221; alt=””>

</li>

<li data-value='{“_main_color”:”86C543″,”_topbar_background_color”:”86C543″,”_topbar_text_color”:”FFFFFF”,”_topbar_links_color”:”FFFFFF”,”_topbar_links_hover_color”:”34302D”,”_mainheader_background_color”:”FFFFFF”,”_logo_text_color”:”34302D”,”_menu_links_color”:”34302D”,”_menu_links_hover_color”:”86C543″,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”34302D”,”_submenu_links_hover_color”:”86C543″,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”86C543″,”_pageheader_background_color”:”EDEAE3″,”_pagetitle_text_color”:”34302D”,”_pagesubtitle_text_color”:”98918C”,”_slogan_background_color”:”EDEAE3″,”_slogan_text_color”:”34302D”,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”34302D”,”_maincontent_links_color”:”34302D”,”_maincontent_links_hover_color”:”86C543″,”_maincontent_headings_color”:”34302D”,”_mainsidebar_text_color”:”34302D”,”_mainsidebar_links_color”:”34302D”,”_mainsidebar_links_hover_color”:”86C543″,”_mainsidebar_headings_color”:”34302D”,”_footersidebar_background_color”:”E6E6E6″,”_footersidebar_text_color”:”34302D”,”_footersidebar_links_color”:”34302D”,”_footersidebar_links_hover_color”:”86C543″,”_footersidebar_headings_color”:”34302D”,”_footer_background_color”:”34302D”,”_footer_text_color”:”FFFFFF”,”_footer_links_color”:”FFFFFF”,”_footer_links_hover_color”:”86C543″}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-3.png&#8221; alt=””>

</li>

<li data-value='{“_main_color”:”BDC58F”,”_topbar_background_color”:”373C3F”,”_topbar_text_color”:”FFFFFF”,”_topbar_links_color”:”FFFFFF”,”_topbar_links_hover_color”:”BDC58F”,”_mainheader_background_color”:”586164″,”_logo_text_color”:”FFFFFF”,”_menu_links_color”:”FFFFFF”,”_menu_links_hover_color”:”BDC58F”,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”586164″,”_submenu_links_hover_color”:”BDC58F”,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”BDC58F”,”_pageheader_background_color”:”DEE4E6″,”_pagetitle_text_color”:”373C3F”,”_pagesubtitle_text_color”:”586164″,”_slogan_background_color”:”DEE4E6″,”_slogan_text_color”:”373C3F”,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”373C3F”,”_maincontent_links_color”:”373C3F”,”_maincontent_links_hover_color”:”BDC58F”,”_maincontent_headings_color”:”373C3F”,”_mainsidebar_text_color”:”373C3F”,”_mainsidebar_links_color”:”373C3F”,”_mainsidebar_links_hover_color”:”BDC58F”,”_mainsidebar_headings_color”:”373C3F”,”_footersidebar_background_color”:”DEE4E6″,”_footersidebar_text_color”:”373C3F”,”_footersidebar_links_color”:”373C3F”,”_footersidebar_links_hover_color”:”BDC58F”,”_footersidebar_headings_color”:”373C3F”,”_footer_background_color”:”373C3F”,”_footer_text_color”:”FFFFFF”,”_footer_links_color”:”FFFFFF”,”_footer_links_hover_color”:”BDC58F”}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-4.png&#8221; alt=””>

</li>

<li data-value='{“_main_color”:”FF4757″,”_topbar_background_color”:”4B6572″,”_topbar_text_color”:”FFFFFF”,”_topbar_links_color”:”FFFFFF”,”_topbar_links_hover_color”:”FF4757″,”_mainheader_background_color”:”FFFFFF”,”_logo_text_color”:”34454E”,”_menu_links_color”:”34454E”,”_menu_links_hover_color”:”FF4757″,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”34454E”,”_submenu_links_hover_color”:”FF4757″,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”FF4757″,”_pageheader_background_color”:”DDE2E5″,”_pagetitle_text_color”:”34454E”,”_pagesubtitle_text_color”:”9AA8B0″,”_slogan_background_color”:”DDE2E5″,”_slogan_text_color”:”34454E”,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”34454E”,”_maincontent_links_color”:”34454E”,”_maincontent_links_hover_color”:”FF4757″,”_maincontent_headings_color”:”34454E”,”_mainsidebar_text_color”:”34454E”,”_mainsidebar_links_color”:”34454E”,”_mainsidebar_links_hover_color”:”FF4757″,”_mainsidebar_headings_color”:”34454E”,”_footersidebar_background_color”:”DDE2E5″,”_footersidebar_text_color”:”34454E”,”_footersidebar_links_color”:”34454E”,”_footersidebar_links_hover_color”:”FF4757″,”_footersidebar_headings_color”:”34454E”,”_footer_background_color”:”4B6572″,”_footer_text_color”:”FFFFFF”,”_footer_links_color”:”FFFFFF”,”_footer_links_hover_color”:”FF4757″}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-5.png&#8221; alt=””>

</li>

<li data-value='{“_main_color”:”CC4A32″,”_topbar_background_color”:”343642″,”_topbar_text_color”:”FFFFFF”,”_topbar_links_color”:”FFFFFF”,”_topbar_links_hover_color”:”CC4A32″,”_mainheader_background_color”:”FFFFFF”,”_logo_text_color”:”343642″,”_menu_links_color”:”343642″,”_menu_links_hover_color”:”CC4A32″,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”343642″,”_submenu_links_hover_color”:”CC4A32″,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”CC4A32″,”_pageheader_background_color”:”F5F3F0″,”_pagetitle_text_color”:”343642″,”_pagesubtitle_text_color”:”BCBBBD”,”_slogan_background_color”:”F5F3F0″,”_slogan_text_color”:”343642″,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”343642″,”_maincontent_links_color”:”343642″,”_maincontent_links_hover_color”:”CC4A32″,”_maincontent_headings_color”:”343642″,”_mainsidebar_text_color”:”343642″,”_mainsidebar_links_color”:”343642″,”_mainsidebar_links_hover_color”:”CC4A32″,”_mainsidebar_headings_color”:”343642″,”_footersidebar_background_color”:”F5F3F0″,”_footersidebar_text_color”:”343642″,”_footersidebar_links_color”:”343642″,”_footersidebar_links_hover_color”:”CC4A32″,”_footersidebar_headings_color”:”343642″,”_footer_background_color”:”343642″,”_footer_text_color”:”FFFFFF”,”_footer_links_color”:”FFFFFF”,”_footer_links_hover_color”:”CC4A32″}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-6.png&#8221; alt=””>

</li>

<li data-value='{“_main_color”:”FFE400″,”_topbar_background_color”:”FFFFFF”,”_topbar_text_color”:”000000″,”_topbar_links_color”:”000000″,”_topbar_links_hover_color”:”FFE400″,”_mainheader_background_color”:”000000″,”_logo_text_color”:”FFFFFF”,”_menu_links_color”:”FFFFFF”,”_menu_links_hover_color”:”FFE400″,”_submenu_background_color”:”FFFFFF”,”_submenu_links_color”:”000000″,”_submenu_links_hover_color”:”FFE400″,”_slideshow_heading_color”:”FFFFFF”,”_slideshow_caption_color”:”FFFFFF”,”_slideshow_links_color”:”FFFFFF”,”_slideshow_links_hover_color”:”FFE400″,”_pageheader_background_color”:”FFE400″,”_pagetitle_text_color”:”000000″,”_pagesubtitle_text_color”:”666666″,”_slogan_background_color”:”FFE400″,”_slogan_text_color”:”000000″,”_maincontent_background_color”:”FFFFFF”,”_maincontent_text_color”:”000000″,”_maincontent_links_color”:”000000″,”_maincontent_links_hover_color”:”FFE400″,”_maincontent_headings_color”:”000000″,”_mainsidebar_text_color”:”000000″,”_mainsidebar_links_color”:”000000″,”_mainsidebar_links_hover_color”:”FFE400″,”_mainsidebar_headings_color”:”000000″,”_footersidebar_background_color”:”000000″,”_footersidebar_text_color”:”FFFFFF”,”_footersidebar_links_color”:”FFFFFF”,”_footersidebar_links_hover_color”:”FFE400″,”_footersidebar_headings_color”:”FFFFFF”,”_footer_background_color”:”333333″,”_footer_text_color”:”FFFFFF”,”_footer_links_color”:”FFFFFF”,”_footer_links_hover_color”:”FFE400″}’>

<img src=”http://andreagandino.com/themes/acidrain/wp-content/themes/acidrain/switcher/skin/skin-7.png&#8221; alt=””>

</li>

</ul>

</span>

</div>

<p>And if you need even <strong>more</strong> customization, you can modify pretty much <strong>every color</strong> in the theme! Super cool!</p>

<div>

<h2>Fonts</h2>

<span >

<label for=””>Text font</label>

<select id=”text-font”>

<optgroup label=’Sans’><option value=’Helvetica’ >Helvetica</option><option value=’Verdana’ >Verdana</option><option value=’Tahoma’ >Tahoma</option><option value=’Trebuchet MS’ >Trebuchet MS</option><option value=’Asap’ >Asap</option><option value=’Dosis’ >Dosis</option><option value=’Droid+Sans’ >Droid Sans</option><option value=’Exo’ >Exo</option><option value=’Open+Sans’ selected>Open Sans</option><option value=’Open+Sans+Condensed’ >Open Sans Condensed</option><option value=’Yanone+Kaffeesatz’ >Yanone Kaffeesatz</option><option value=’PT+Sans’ >PT Sans</option><option value=’PT+Sans+Caption’ >PT Sans Caption</option><option value=’Ubuntu’ >Ubuntu</option><option value=’Ubuntu+Condensed’ >Ubuntu Condensed</option><option value=’Lato’ >Lato</option><option value=’Abel’ >Abel</option><option value=’Anton’ >Anton</option><option value=’Amaranth’ >Amaranth</option><option value=’Muli’ >Muli</option><option value=’Varela+Round’ >Varela Round</option><option value=’Questrial’ >Questrial</option><option value=’Montserrat’ >Montserrat</option><option value=’Paytone+One’ >Paytone One</option><option value=’Quicksand’ >Quicksand</option><option value=’Quattrocento+Sans’ >Quattrocento Sans</option><option value=’Josefin+Sans’ >Josefin Sans</option><option value=’Raleway’ >Raleway</option><option value=’Six+Caps’ >Six Caps</option><option value=’Maven+Pro’ >Maven Pro</option><option value=’Cabin’ >Cabin</option><option value=’Cabin+Condensed’ >Cabin Condensed</option><option value=’Snippet’ >Snippet</option><option value=’Oswald’ >Oswald</option><option value=’Actor’ >Actor</option><option value=’Signika’ >Signika</option></optgroup><optgroup label=’Serif’><option value=’Georgia’ >Georgia</option><option value=’Alegreya’ >Alegreya</option><option value=’Alfa+Slab+One’ >Alfa Slab One</option><option value=’Arvo’ >Arvo</option><option value=’Bree+Serif’ >Bree Serif</option><option value=’Crimson+Text’ >Crimson Text</option><option value=’Droid+Serif’ >Droid Serif</option><option value=’Gentium+Basic’ >Gentium Basic</option><option value=’Trocchi’ >Trocchi</option><option value=’Mate+SC’ >Mate SC</option><option value=’Cutive’ >Cutive</option><option value=’PT+Serif’ >PT Serif</option><option value=’Ultra’ >Ultra</option><option value=’Bitter’ >Bitter</option><option value=’Neuton’ >Neuton</option><option value=’Quattrocento’ >Quattrocento</option><option value=’Vollkorn’ >Vollkorn</option><option value=’Prociono’ >Prociono</option><option value=’Rokkitt’ >Rokkitt</option><option value=’Bevan’ >Bevan</option><option value=’Lora’ >Lora</option><option value=’Copse’ >Copse</option><option value=’Kreon’ >Kreon</option><option value=’Josefin+Slab’ >Josefin Slab</option><option value=’Patua+One’ >Patua One</option><option value=’Merriweather’ >Merriweather</option><option value=’Quando’ >Quando</option><option value=’Crete+Round’ >Crete Round</option></optgroup><optgroup label=’Script and decorative’><option value=’Cookie’ >Cookie</option><option value=’Leckerli+One’ >Leckerli One</option><option value=’Lobster’ >Lobster</option><option value=’Lobster+Two’ >Lobster Two</option><option value=’Parisienne’ >Parisienne</option><option value=’Pinyon+Script’ >Pinyon Script</option><option value=’Crushed’ >Crushed</option><option value=’Cabin+Sketch’ >Cabin Sketch</option><option value=’Special+Elite’ >Special Elite</option><option value=’Fugaz+One’ >Fugaz One</option><option value=’Sansita+One’ >Sansita One</option><option value=’Nixie+One’ >Nixie One</option><option value=’Bangers’ >Bangers</option><option value=’Metamorphous’ >Metamorphous</option><option value=’UnifrakturMaguntia’ >UnifrakturMaguntia</option><option value=’Sarina’ >Sarina</option></optgroup><optgroup label=’Handwritten’><option value=’Coming+Soon’ >Coming Soon</option><option value=’Crafty+Girls’ >Crafty Girls</option><option value=’Rock+Salt’ >Rock Salt</option><option value=’Shadows+Into+Light’ >Shadows Into Light</option><option value=’Pacifico’ >Pacifico</option><option value=’Sunshiney’ >Sunshiney</option><option value=’Permanent+Marker’ >Permanent Marker</option><option value=’Architects+Daughter’ >Architects Daughter</option><option value=’Indie+Flower’ >Indie Flower</option><option value=’Neucha’ >Neucha</option><option value=’Satisfy’ >Satisfy</option><option value=’Amatic+SC’ >Amatic SC</option><option value=’Sue+Ellen+Francisco’ >Sue Ellen Francisco</option><option value=’Patrick+Hand’ >Patrick Hand</option><option value=’Over+the+Rainbow’ >Over the Rainbow</option><option value=’Delius+Swash+Caps’ >Delius Swash Caps</option><option value=’Walter+Turncoat’ >Walter Turncoat</option></optgroup><optgroup label=’Custom’><option value=’AbrahamLincolnRegular’ >AbrahamLincolnRegular</option><option value=’LavanderiaSturdySturdy’ >LavanderiaSturdySturdy</option><option value=’EdmondsansBoldRegular’ >EdmondsansBoldRegular</option><option value=’EdmondsansRegularRegular’ >EdmondsansRegularRegular</option><option value=’GearedSlabRegular’ >GearedSlabRegular</option><option value=’GearedSlabThin’ >GearedSlabThin</option></optgroup>                                    </select>

</span>

<span >

<label for=””>Menu font</label>

<select id=”menu-font”>

<optgroup label=’Sans’><option value=’Helvetica’ >Helvetica</option><option value=’Verdana’ >Verdana</option><option value=’Tahoma’ >Tahoma</option><option value=’Trebuchet MS’ >Trebuchet MS</option><option value=’Asap’ >Asap</option><option value=’Dosis’ >Dosis</option><option value=’Droid+Sans’ >Droid Sans</option><option value=’Exo’ >Exo</option><option value=’Open+Sans’ selected>Open Sans</option><option value=’Open+Sans+Condensed’ >Open Sans Condensed</option><option value=’Yanone+Kaffeesatz’ >Yanone Kaffeesatz</option><option value=’PT+Sans’ >PT Sans</option><option value=’PT+Sans+Caption’ >PT Sans Caption</option><option value=’Ubuntu’ >Ubuntu</option><option value=’Ubuntu+Condensed’ >Ubuntu Condensed</option><option value=’Lato’ >Lato</option><option value=’Abel’ >Abel</option><option value=’Anton’ >Anton</option><option value=’Amaranth’ >Amaranth</option><option value=’Muli’ >Muli</option><option value=’Varela+Round’ >Varela Round</option><option value=’Questrial’ >Questrial</option><option value=’Montserrat’ >Montserrat</option><option value=’Paytone+One’ >Paytone One</option><option value=’Quicksand’ >Quicksand</option><option value=’Quattrocento+Sans’ >Quattrocento Sans</option><option value=’Josefin+Sans’ >Josefin Sans</option><option value=’Raleway’ >Raleway</option><option value=’Six+Caps’ >Six Caps</option><option value=’Maven+Pro’ >Maven Pro</option><option value=’Cabin’ >Cabin</option><option value=’Cabin+Condensed’ >Cabin Condensed</option><option value=’Snippet’ >Snippet</option><option value=’Oswald’ >Oswald</option><option value=’Actor’ >Actor</option><option value=’Signika’ >Signika</option></optgroup><optgroup label=’Serif’><option value=’Georgia’ >Georgia</option><option value=’Alegreya’ >Alegreya</option><option value=’Alfa+Slab+One’ >Alfa Slab One</option><option value=’Arvo’ >Arvo</option><option value=’Bree+Serif’ >Bree Serif</option><option value=’Crimson+Text’ >Crimson Text</option><option value=’Droid+Serif’ >Droid Serif</option><option value=’Gentium+Basic’ >Gentium Basic</option><option value=’Trocchi’ >Trocchi</option><option value=’Mate+SC’ >Mate SC</option><option value=’Cutive’ >Cutive</option><option value=’PT+Serif’ >PT Serif</option><option value=’Ultra’ >Ultra</option><option value=’Bitter’ >Bitter</option><option value=’Neuton’ >Neuton</option><option value=’Quattrocento’ >Quattrocento</option><option value=’Vollkorn’ >Vollkorn</option><option value=’Prociono’ >Prociono</option><option value=’Rokkitt’ >Rokkitt</option><option value=’Bevan’ >Bevan</option><option value=’Lora’ >Lora</option><option value=’Copse’ >Copse</option><option value=’Kreon’ >Kreon</option><option value=’Josefin+Slab’ >Josefin Slab</option><option value=’Patua+One’ >Patua One</option><option value=’Merriweather’ >Merriweather</option><option value=’Quando’ >Quando</option><option value=’Crete+Round’ >Crete Round</option></optgroup><optgroup label=’Script and decorative’><option value=’Cookie’ >Cookie</option><option value=’Leckerli+One’ >Leckerli One</option><option value=’Lobster’ >Lobster</option><option value=’Lobster+Two’ >Lobster Two</option><option value=’Parisienne’ >Parisienne</option><option value=’Pinyon+Script’ >Pinyon Script</option><option value=’Crushed’ >Crushed</option><option value=’Cabin+Sketch’ >Cabin Sketch</option><option value=’Special+Elite’ >Special Elite</option><option value=’Fugaz+One’ >Fugaz One</option><option value=’Sansita+One’ >Sansita One</option><option value=’Nixie+One’ >Nixie One</option><option value=’Bangers’ >Bangers</option><option value=’Metamorphous’ >Metamorphous</option><option value=’UnifrakturMaguntia’ >UnifrakturMaguntia</option><option value=’Sarina’ >Sarina</option></optgroup><optgroup label=’Handwritten’><option value=’Coming+Soon’ >Coming Soon</option><option value=’Crafty+Girls’ >Crafty Girls</option><option value=’Rock+Salt’ >Rock Salt</option><option value=’Shadows+Into+Light’ >Shadows Into Light</option><option value=’Pacifico’ >Pacifico</option><option value=’Sunshiney’ >Sunshiney</option><option value=’Permanent+Marker’ >Permanent Marker</option><option value=’Architects+Daughter’ >Architects Daughter</option><option value=’Indie+Flower’ >Indie Flower</option><option value=’Neucha’ >Neucha</option><option value=’Satisfy’ >Satisfy</option><option value=’Amatic+SC’ >Amatic SC</option><option value=’Sue+Ellen+Francisco’ >Sue Ellen Francisco</option><option value=’Patrick+Hand’ >Patrick Hand</option><option value=’Over+the+Rainbow’ >Over the Rainbow</option><option value=’Delius+Swash+Caps’ >Delius Swash Caps</option><option value=’Walter+Turncoat’ >Walter Turncoat</option></optgroup><optgroup label=’Custom’><option value=’AbrahamLincolnRegular’ >AbrahamLincolnRegular</option><option value=’LavanderiaSturdySturdy’ >LavanderiaSturdySturdy</option><option value=’EdmondsansBoldRegular’ >EdmondsansBoldRegular</option><option value=’EdmondsansRegularRegular’ >EdmondsansRegularRegular</option><option value=’GearedSlabRegular’ >GearedSlabRegular</option><option value=’GearedSlabThin’ >GearedSlabThin</option></optgroup>                                    </select>

</span>

<span >

<label for=””>Page title font</label>

<select id=”pagetitle-font”>

<optgroup label=’Sans’><option value=’Helvetica’ >Helvetica</option><option value=’Verdana’ >Verdana</option><option value=’Tahoma’ >Tahoma</option><option value=’Trebuchet MS’ >Trebuchet MS</option><option value=’Asap’ >Asap</option><option value=’Dosis’ >Dosis</option><option value=’Droid+Sans’ >Droid Sans</option><option value=’Exo’ >Exo</option><option value=’Open+Sans’ >Open Sans</option><option value=’Open+Sans+Condensed’ >Open Sans Condensed</option><option value=’Yanone+Kaffeesatz’ >Yanone Kaffeesatz</option><option value=’PT+Sans’ >PT Sans</option><option value=’PT+Sans+Caption’ >PT Sans Caption</option><option value=’Ubuntu’ >Ubuntu</option><option value=’Ubuntu+Condensed’ >Ubuntu Condensed</option><option value=’Lato’ >Lato</option><option value=’Abel’ >Abel</option><option value=’Anton’ >Anton</option><option value=’Amaranth’ >Amaranth</option><option value=’Muli’ >Muli</option><option value=’Varela+Round’ >Varela Round</option><option value=’Questrial’ >Questrial</option><option value=’Montserrat’ >Montserrat</option><option value=’Paytone+One’ >Paytone One</option><option value=’Quicksand’ >Quicksand</option><option value=’Quattrocento+Sans’ >Quattrocento Sans</option><option value=’Josefin+Sans’ >Josefin Sans</option><option value=’Raleway’ >Raleway</option><option value=’Six+Caps’ >Six Caps</option><option value=’Maven+Pro’ >Maven Pro</option><option value=’Cabin’ >Cabin</option><option value=’Cabin+Condensed’ >Cabin Condensed</option><option value=’Snippet’ >Snippet</option><option value=’Oswald’ >Oswald</option><option value=’Actor’ >Actor</option><option value=’Signika’ >Signika</option></optgroup><optgroup label=’Serif’><option value=’Georgia’ >Georgia</option><option value=’Alegreya’ >Alegreya</option><option value=’Alfa+Slab+One’ >Alfa Slab One</option><option value=’Arvo’ >Arvo</option><option value=’Bree+Serif’ >Bree Serif</option><option value=’Crimson+Text’ >Crimson Text</option><option value=’Droid+Serif’ >Droid Serif</option><option value=’Gentium+Basic’ >Gentium Basic</option><option value=’Trocchi’ >Trocchi</option><option value=’Mate+SC’ >Mate SC</option><option value=’Cutive’ >Cutive</option><option value=’PT+Serif’ >PT Serif</option><option value=’Ultra’ >Ultra</option><option value=’Bitter’ >Bitter</option><option value=’Neuton’ >Neuton</option><option value=’Quattrocento’ >Quattrocento</option><option value=’Vollkorn’ >Vollkorn</option><option value=’Prociono’ >Prociono</option><option value=’Rokkitt’ >Rokkitt</option><option value=’Bevan’ >Bevan</option><option value=’Lora’ >Lora</option><option value=’Copse’ >Copse</option><option value=’Kreon’ >Kreon</option><option value=’Josefin+Slab’ >Josefin Slab</option><option value=’Patua+One’ selected>Patua One</option><option value=’Merriweather’ >Merriweather</option><option value=’Quando’ >Quando</option><option value=’Crete+Round’ >Crete Round</option></optgroup><optgroup label=’Script and decorative’><option value=’Cookie’ >Cookie</option><option value=’Leckerli+One’ >Leckerli One</option><option value=’Lobster’ >Lobster</option><option value=’Lobster+Two’ >Lobster Two</option><option value=’Parisienne’ >Parisienne</option><option value=’Pinyon+Script’ >Pinyon Script</option><option value=’Crushed’ >Crushed</option><option value=’Cabin+Sketch’ >Cabin Sketch</option><option value=’Special+Elite’ >Special Elite</option><option value=’Fugaz+One’ >Fugaz One</option><option value=’Sansita+One’ >Sansita One</option><option value=’Nixie+One’ >Nixie One</option><option value=’Bangers’ >Bangers</option><option value=’Metamorphous’ >Metamorphous</option><option value=’UnifrakturMaguntia’ >UnifrakturMaguntia</option><option value=’Sarina’ >Sarina</option></optgroup><optgroup label=’Handwritten’><option value=’Coming+Soon’ >Coming Soon</option><option value=’Crafty+Girls’ >Crafty Girls</option><option value=’Rock+Salt’ >Rock Salt</option><option value=’Shadows+Into+Light’ >Shadows Into Light</option><option value=’Pacifico’ >Pacifico</option><option value=’Sunshiney’ >Sunshiney</option><option value=’Permanent+Marker’ >Permanent Marker</option><option value=’Architects+Daughter’ >Architects Daughter</option><option value=’Indie+Flower’ >Indie Flower</option><option value=’Neucha’ >Neucha</option><option value=’Satisfy’ >Satisfy</option><option value=’Amatic+SC’ >Amatic SC</option><option value=’Sue+Ellen+Francisco’ >Sue Ellen Francisco</option><option value=’Patrick+Hand’ >Patrick Hand</option><option value=’Over+the+Rainbow’ >Over the Rainbow</option><option value=’Delius+Swash+Caps’ >Delius Swash Caps</option><option value=’Walter+Turncoat’ >Walter Turncoat</option></optgroup><optgroup label=’Custom’><option value=’AbrahamLincolnRegular’ >AbrahamLincolnRegular</option><option value=’LavanderiaSturdySturdy’ >LavanderiaSturdySturdy</option><option value=’EdmondsansBoldRegular’ >EdmondsansBoldRegular</option><option value=’EdmondsansRegularRegular’ >EdmondsansRegularRegular</option><option value=’GearedSlabRegular’ >GearedSlabRegular</option><option value=’GearedSlabThin’ >GearedSlabThin</option></optgroup>                             </select>

</span>

<span >

<label for=””>Page subtitle font</label>

<select id=”pagesubtitle-font”>

<optgroup label=’Sans’><option value=’Helvetica’ >Helvetica</option><option value=’Verdana’ >Verdana</option><option value=’Tahoma’ >Tahoma</option><option value=’Trebuchet MS’ >Trebuchet MS</option><option value=’Asap’ >Asap</option><option value=’Dosis’ >Dosis</option><option value=’Droid+Sans’ >Droid Sans</option><option value=’Exo’ >Exo</option><option value=’Open+Sans’ selected>Open Sans</option><option value=’Open+Sans+Condensed’ >Open Sans Condensed</option><option value=’Yanone+Kaffeesatz’ >Yanone Kaffeesatz</option><option value=’PT+Sans’ >PT Sans</option><option value=’PT+Sans+Caption’ >PT Sans Caption</option><option value=’Ubuntu’ >Ubuntu</option><option value=’Ubuntu+Condensed’ >Ubuntu Condensed</option><option value=’Lato’ >Lato</option><option value=’Abel’ >Abel</option><option value=’Anton’ >Anton</option><option value=’Amaranth’ >Amaranth</option><option value=’Muli’ >Muli</option><option value=’Varela+Round’ >Varela Round</option><option value=’Questrial’ >Questrial</option><option value=’Montserrat’ >Montserrat</option><option value=’Paytone+One’ >Paytone One</option><option value=’Quicksand’ >Quicksand</option><option value=’Quattrocento+Sans’ >Quattrocento Sans</option><option value=’Josefin+Sans’ >Josefin Sans</option><option value=’Raleway’ >Raleway</option><option value=’Six+Caps’ >Six Caps</option><option value=’Maven+Pro’ >Maven Pro</option><option value=’Cabin’ >Cabin</option><option value=’Cabin+Condensed’ >Cabin Condensed</option><option value=’Snippet’ >Snippet</option><option value=’Oswald’ >Oswald</option><option value=’Actor’ >Actor</option><option value=’Signika’ >Signika</option></optgroup><optgroup label=’Serif’><option value=’Georgia’ >Georgia</option><option value=’Alegreya’ >Alegreya</option><option value=’Alfa+Slab+One’ >Alfa Slab One</option><option value=’Arvo’ >Arvo</option><option value=’Bree+Serif’ >Bree Serif</option><option value=’Crimson+Text’ >Crimson Text</option><option value=’Droid+Serif’ >Droid Serif</option><option value=’Gentium+Basic’ >Gentium Basic</option><option value=’Trocchi’ >Trocchi</option><option value=’Mate+SC’ >Mate SC</option><option value=’Cutive’ >Cutive</option><option value=’PT+Serif’ >PT Serif</option><option value=’Ultra’ >Ultra</option><option value=’Bitter’ >Bitter</option><option value=’Neuton’ >Neuton</option><option value=’Quattrocento’ >Quattrocento</option><option value=’Vollkorn’ >Vollkorn</option><option value=’Prociono’ >Prociono</option><option value=’Rokkitt’ >Rokkitt</option><option value=’Bevan’ >Bevan</option><option value=’Lora’ >Lora</option><option value=’Copse’ >Copse</option><option value=’Kreon’ >Kreon</option><option value=’Josefin+Slab’ >Josefin Slab</option><option value=’Patua+One’ >Patua One</option><option value=’Merriweather’ >Merriweather</option><option value=’Quando’ >Quando</option><option value=’Crete+Round’ >Crete Round</option></optgroup><optgroup label=’Script and decorative’><option value=’Cookie’ >Cookie</option><option value=’Leckerli+One’ >Leckerli One</option><option value=’Lobster’ >Lobster</option><option value=’Lobster+Two’ >Lobster Two</option><option value=’Parisienne’ >Parisienne</option><option value=’Pinyon+Script’ >Pinyon Script</option><option value=’Crushed’ >Crushed</option><option value=’Cabin+Sketch’ >Cabin Sketch</option><option value=’Special+Elite’ >Special Elite</option><option value=’Fugaz+One’ >Fugaz One</option><option value=’Sansita+One’ >Sansita One</option><option value=’Nixie+One’ >Nixie One</option><option value=’Bangers’ >Bangers</option><option value=’Metamorphous’ >Metamorphous</option><option value=’UnifrakturMaguntia’ >UnifrakturMaguntia</option><option value=’Sarina’ >Sarina</option></optgroup><optgroup label=’Handwritten’><option value=’Coming+Soon’ >Coming Soon</option><option value=’Crafty+Girls’ >Crafty Girls</option><option value=’Rock+Salt’ >Rock Salt</option><option value=’Shadows+Into+Light’ >Shadows Into Light</option><option value=’Pacifico’ >Pacifico</option><option value=’Sunshiney’ >Sunshiney</option><option value=’Permanent+Marker’ >Permanent Marker</option><option value=’Architects+Daughter’ >Architects Daughter</option><option value=’Indie+Flower’ >Indie Flower</option><option value=’Neucha’ >Neucha</option><option value=’Satisfy’ >Satisfy</option><option value=’Amatic+SC’ >Amatic SC</option><option value=’Sue+Ellen+Francisco’ >Sue Ellen Francisco</option><option value=’Patrick+Hand’ >Patrick Hand</option><option value=’Over+the+Rainbow’ >Over the Rainbow</option><option value=’Delius+Swash+Caps’ >Delius Swash Caps</option><option value=’Walter+Turncoat’ >Walter Turncoat</option></optgroup><optgroup label=’Custom’><option value=’AbrahamLincolnRegular’ >AbrahamLincolnRegular</option><option value=’LavanderiaSturdySturdy’ >LavanderiaSturdySturdy</option><option value=’EdmondsansBoldRegular’ >EdmondsansBoldRegular</option><option value=’EdmondsansRegularRegular’ >EdmondsansRegularRegular</option><option value=’GearedSlabRegular’ >GearedSlabRegular</option><option value=’GearedSlabThin’ >GearedSlabThin</option></optgroup>                                    </select>

</span>

<br><br><p>And many others over which you’ll have full control (<strong>size</strong>, <strong>weight</strong>, <strong>style</strong>, <strong>case</strong> and <strong>color</strong>)!</p>

</div>

</div>                         </body>

</html>

Hasil:

KESIMPULAN

Dari modul yang diberikan ini, dapat disimpulkan bahawa mahasiswa akan mampu membuat tampilan sebuah wab dengan menggunakan PHP dan CSS.

Beli T-Shirt, Raglan dan Kids T-Shirt Original Ocean Seven

  1. T-Shirt, Raglan dan Kids T-Shirt Anime, Manga, Gamers dan Cartoon World (OceanSeven)
  2. T-Shirt, Raglan dan Kids T-Shirt Footbal Series (OceanSeven)
  3. T-Shirt, Raglan dan Kids T-Shirt Music Series (OceanSeven)
  4. T-Shirt, Raglan dan Kids T-Shirt OceanSeven – Custom dan Basic Tees (OceanSeven)
  5. T-Shirt, Raglan dan Kids T-Shirt OceanSeven -Kids Collections (OceanSeven)
  6. T-Shirt, Raglan dan Kids T-Shirt OceanSeven -Signature Serues (OceanSeven)
  7. T-Shirt, Raglan dan Kids T-Shirt  Social Media dan Photography (OceanSeven)
  8. T-Shirt, Raglan dan Kids T-Shirt Sport, Automotive dan Adventure (OceanSeven)
  9. T-Shirt, Raglan dan Kids T-Shirt Superheroes dan Movies (OceanSeven)

Satu pemikiran pada “Kupas Tuntas HTML dan CSS

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s