Skip to content

Instantly share code, notes, and snippets.

@ChR2

ChR2/main.css

Created August 12, 2013 15:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ChR2/6212014 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ChR2/6212014 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
main.css
.container {
/*
If you have a block-level element of a certain width, margin: 0 auto;
will how you center it inside its parent container.
See: http://bluerobot.com/web/css/center1.html
Don't change the container width.
*/
margin: 0 auto;
width: 720px;
}
#registration {
text-align: center;
border: 1px solid gray;
border-radius: 4px;
padding: 15px;
width: 300px;
/*display: inline-block;*/
margin-right: auto;
margin-left: auto;
/*background-color: blue;*/
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.2, rgb(63,61,102)),
color-stop(0.6, rgb(148,132,143))
);
}
.password {
width: 125px;
margin-top: 5px;
margin-right: 6px;
}
.button {
background-color: rgb(58, 57, 57);
color: white;
border-radius: 4px;
box-shadow: 0px 0px 1px rgba(255, 255, 255, 1);
}
Raw
product.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--
normalize.css removes cross-browser differences in defaults, e.g.,
differences in how form elements appear between Firefox and IE
See: http://necolas.github.com/normalize.css/
-->
<link rel="stylesheet" href="normalize.css">
<!-- Put your challenge-specific CSS in here -->
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<h1>My Super SaaS</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tour</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<br clear="all">
</nav>
<div class="content">
<h2>You are so totally going to love this application.</h2>
<div id="registration">
<form name="sign_up" action="#" method="post">
<input type="text" placeholder="Email" name="email"><br>
<input type="password" class="password"placeholder="Password"name="password">
<button type="submit" class="button">Sign Up</button>
</form>
</div>
<div id="buzz">
<h3>Check out our buzz:</h3>
<blockquote>
Probably the coolest thing I've ever seen in my entire life.
<br><cite>- Ghandi</cite>
</blockquote>
<blockquote>
I can't believe I ever got by without this. What a lifesaver!
<br><cite>- Cleopatra</cite>
</blockquote>
<blockquote>
This is the most amazing creation ever imagined by humanity.
<br><cite>- Some guy on the street</cite>
</blockquote>
</div>
<div id="tour">
<h2>Tour</h2>
<h3>Some of the super features</h3>
<div class="feature">
<h4>Zip</h4>
<img src="http://f.cl.ly/items/3e332b2e0B3d311a1U1X/wargames.jpg">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="feature">
<h4>Zap</h4>
<img src="http://f.cl.ly/items/2h0Q3P0t0B3Q0N370u43/businessdude.jpg">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="feature">
<h4>Zop</h4>
<img src="http://f.cl.ly/items/3i2V2V0D3n293d0y2y0U/tron.jpg">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="pricing">
<h2>Pricing</h2>
<dl>
<dt>Basic</dt>
<dd>$19.99 / mo.</dd>
<dt>Pro</dt>
<dd>$39.99 / mo.</dd>
<dt>Platinum</dt>
<dd>$99.99 / mo.</dd>
</dl>
</div>
<div id="about">
<h2>About</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="contact">
<h2>Contact</h2>
<table>
<tbody>
<tr>
<td>Email</td>
<td>supersass@example.com</td>
</tr>
<tr>
<td>Twitter</td>
<td>@supersass</td>
</tr>
<tr>
<td>Phone</td>
<td>555-867-5309</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="footer">
Copyright &copy; 2013 Awesome People, Inc.
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment