Candy
sati
by Virtual
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.1/css/foundation.min.css">
<div id="body">
<div id="wrapper" class="row">
<div class="large-12 columns container">
<header id="header" class="clearfix">
<div id="headsearch">
<div id="tagline">Making your designs come alive through code!</div>
<form id="cref_iframe" class="searchbox" action="http://www.satinflame.com/search.php">
<input type="hidden" name="cref" value="http://www.satinflame.com/scripts/cref_cse.xml" />
<input type="hidden" name="cof" value="FORID:11" />
<input class="searchfield" type="text" name="q" size="25" value='Search this site' id="qsearch" onfocus="if (this.value == 'Search this site') this.value = '';" />
<input class="searchbutton button" type="submit" name="sa" value="Go" />
</form>
</div>
<h1><img src="http://www.satinflame.com/images/structure/logo-trans.png" width="296" alt="satinflame design" /></h1>
<div id="links">
<ul class="right button-group">
<li id="home"><a href="http://www.satinflame.com/index.php" class="button">home</a>
</li>
<li id="portfolio"><a href="http://www.satinflame.com/portfolio.php" class="button">portfolio</a>
</li>
<li id="skills"><a href="http://www.satinflame.com/skills.php" class="button">about</a>
</li>
<li><a href="http://www.distantlife.com/blog" class="button">blog </a>
</li>
<li id="contact"><a href="contact.php" class="button">contact</a>
...CSS
/* CSS stylesheet started in Notepad++ 05-2009 */
body {
background-color: #a71068;
background-image: url('http://www.satinflame.com/images/structure/bk.jpg');
background-position: top center;
background-repeat:repeat;
font-family: Arial, Helvetica, sans-serif;
color: #444;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Niconne', Georgia, "Times New Roman", Times, serif;
padding: 1em 0 .5em 0;
margin: 0;
}
h4, h5, h6 { font-family: Arial, Helvetica, sans-serif;}
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: #513054; }
h1 { font-size: 2.4em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.4em; }
h5, h6 { font-size: 12; }
a { color: #513054; }
a:link {
font-size: 1.0em;
text-decoration: none;
color: #513054;
}
a:visited {
font-size: 1.0em;
text-decoration: none;
color: #513054;
}
a:hover {
font-size: 1.0em;
text-decoration: underline;
color: #513054;
}
a:active {
font-size: 1.0em;
text-decoration: none;
color: #513054;
}
a img { border:0;}
#wrapper { padding: 10px 0 0 0; margin:5%; width:90%; background-color: #fff; border: 1px solid #A71068; }
.container
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
padding: 0px 32px 20px 32px;
margin: 0px auto;
}
#header {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
#header h1 {padding:0; margin:0; font-size: 3em;font-family:'Century Gothic', Arial,Helvetica,sans-serif; line-height: 1.2em; color: #222; }
#headsearch {
display: block;
float: right;
padding: 30px 65px 0 0;
text-align: right;
width: 50%;
}
#headsearch form { padding-left:5px;text-align:right; display:right;}
.searchbox input{font:normal 12px/100% Arial,Helvetica,sans-serif}
.searchbox .searchfield{background:#ebd2e0 !important; padding:3px 3px 3px 4px !important; border:solid 1px #a7286f !important; outline:none !important; font-family:'Century Gothic',...