Andrew in Week 2

Week 2 - Columns and Positioning

GoCloud3: Multi-Columns with Horizontal Nav

Download these files before proceeding

Code Snippets

<h2>Collaborate</h2>
<p>We offer the best collaboration tools on the planet. Our tools will improve your team's 
productivity by 100% guaranteed!</p>

<h2>Visualize</h2>
<p>Profit comes when you can take an idea all the way through to a product. Our tools will 
help your team achieve their goals.</p>

<h2>Get Started Today!</h2>
<img src="images/button.png" alt="button">

<h2>Share</h2>
<p>Sharing is at the heart of the creative process and the lifeblood of the creative team. 
Our tools will allow your team to share their creative process in real time.</p>

<h2>Brainstorm</h2>
<p>Go Cloud includes the best tools int he world for brainstorming and idea generation. If 
you have a problem to solve, this is the place to start.</p>

<p>copyright and trademark information go in the footer</p>

/***************** Colors for elements ***************/

Body text color: #424242
UL BG color: #9bafc7
BG color for hovering links: #506e91
Footer BG color: #550e01
H2 color: #ee2600

/**************** CSS Rule for Anchor tags *************/

nav ul li a {
    display:block;
    height:64px;
    line-height:64px;
    font-size:24px;
    font-weight:bold;
    color:#d9e4ee;
    padding:0 40px;
    border-right:1px solid #b7c6d7;
    text-decoration:none;
}

GoCloud4: Multi-Column Practice

Practice the techniques we discussed when we did part 3 above.

Download these files before proceeding


GoCloud5: Faux Columns

Download these files before proceeding

Code Snippets

/************ CSS RESET **************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
    body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/************* End CSS RESET *****************/

/*********** Navigation HTML ************/

<nav id="mainnav">
<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">download</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">contact us</a></li>
</ul>
</nav>

<nav id="widget">
<h2>recent posts</h2>
<ul>
    <li><a href="#">We Are Hiring</a></li>
    <li><a href="#">Version 1.2 Released!</a></li>
    <li><a href="#">Looking for Beta Testers...</a></li>
    <li><a href="#">Thanks to SxSW!</a></li>
</ul>
</nav>

/************** First Blog Post Content ***************/

We Are Hiring...

posted on July 17, 2013

Join our team! As our company grows and gains momentum, we are in dire need of fresh 
talent to round out our excellent team. We need both developer and designers. We are 
really proud of the team we have so far and we are looking for the best talent we can 
find to work with us. To find out how to join us read more...

/***************** Other three blog posts marked up *****************/

<!-- Post 2 -->
<article>
<h2>Version 1.2 Released!</h2>
<p>posted on July 10, 2013</p>
<p><img src="images/software.jpg" alt="software" class="alignright">Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dictum velit. Morbi nunc 
felis, imperdiet sed lacinia non, luctus vitae tellus. Vestibulum eu risus euismod, 
ultricies erat vel, lacinia lacus. Fusce eu lectus justo. Sed nec odio ut erat elementum 
feugiat ac id tortor. Nulla ultricies porta <a href="#">read more...</a></p>
</article>

<!-- Post 3 -->
<article>
<h2>Looking for Beta Testers...</h2>
<p>posted on July 3, 2013</p>
<p><img src="images/beta.png" alt="beta" class="alignright">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. Fusce et dictum velit. Morbi nunc felis, imperdiet 
sed lacinia non, luctus vitae tellus. Vestibulum eu risus euismod, ultricies erat vel, 
lacinia lacus. Fusce eu lectus justo. Sed nec odio ut erat elementum feugiat ac id tortor. 
Nulla ultricies porta <a href="#">read more...</a></p>
</article>

<!-- Post 4 -->
<article>
<h2>Thanks to SxSW!</h2>
<p>posted on June 20, 2013</p>
<p><img src="images/sxsw.jpg" alt="sxsw" class="alignright">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit. Fusce et dictum velit. Morbi nunc felis, imperdiet 
sed lacinia non, luctus vitae tellus. Vestibulum eu risus euismod, ultricies erat vel, 
lacinia lacus. Fusce eu lectus justo. Sed nec odio ut erat elementum feugiat ac id tortor. 
Nulla ultricies portas <a href="#">read more...</a></p>
</article>

/**************** Footer Markup **************/

<p>copyright and trademark information go in the footer</p>

/*************** Sidebar Main Nav Rules ************/

#mainnav ul li {
    border-bottom:4px solid #166c6e;
    height:64px;
    line-height:64px;
    padding-left:15px;
}

#mainnav ul li a {
    font-size:24px;
    color: #3e3023;
    font-weight:bold;
}

/*************** Widget Type rules ***************/

#widget h2 {
    font-weight:bold;
    font-size:20px;
    color: #3e3023;
    border-bottom: 3px solid #166c6e;
    padding-bottom:6px;
    margin-bottom: 6px;
}

#widget a {
    font-weight:bold;
    color: #3e3023;
    font-size:14px;
}

/******** Image Styles  **********/
p img {
    max-width: 100%;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
}

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
}

.alignright {
    float: right;
}

.alignleft {
    float: left;
}

/************* Text Rules for Main Section ****************/

.post h2 {
    color:#166c6e;
    font-size:36px;
    font-weight:bold;
    margin-bottom:.5em;
}

.post p {
    line-height:1.3em;
}

p.date {
    color:#bc8b03;
    font-size:14px;
    margin-bottom:1em;
}

.post a {
    color:#166c6e;
    font-weight:bold;
}

GoCloud6: Faux Column Practice

Practice the techniques we discussed when we did part 5 above.

Download these files before proceeding