Getting your
work online
behance.net | cargo collective | krop | coroflot |
behance online presence
behance.net has a free and pro version. The free version is
fine for getting internships.
Free Version
Pros
networked into AIGA
linked to LinkedIn
Cons
looks ok but not great
limited customization
when including a link to your online website in an e-mail use
the /frame url...
http://www.behance.net/lukelisi/frame
Pro Version
networked into AIGA
costs $11 a month
linked to LinkedIn
Served sites
Easy (very easy no CSS to costomize)
Looks good
Can switch from pro to free and back any time
examples of pro sites
http://www.brucemaudesign.com/
http://maartendeckers.com/
http://portfolio.emilymaye.com/
cargo online presence
cargocollective.com is free (up to 12 projects). To start a cargo
site you need to get an account. Go to Contact Us and apply.
Talk sweetly to them...
There are a number of advantages to a Cargo site. It is free for up to
12 projects. Looks professional. Many templates to choose from. You
can edit the css.
examples
http://thea2.com/
http://jordanjacobson.com/
http://www.brianrio.com/
http://www.megancollins-design.com/
http://www.jaclynco.com/
tips
Type of files : both cargo and behance take jpgs. Import
motion as .mov file or embed vimeo. Use issuu.com to embed
pdfs. SWF files you need to post onto a webserver. I can help
you with that if you have a .swf file you want to upload.
Sizing photos : size your images in photoshop opposed to
letting behance or cargo do it for you. Use 72 (or 150 dpi).
Width: 400 – 700 px (depends on your layout/template)
Height: max 800 px
Determine max width and max height (images should be as large as they can be but you do
not want to scroll to see the image on a laptop. Some of your work will be at the max height
and some at the max width and sometimes both. Save as jpgs. png files are good but usually
file size is too large
ISSUU.com is a great place to upload pdfs (process books)
and can be embedded into Cargo or Behance.
*Upload as SINGLE page pdfs (not spreads)
Helpful Cargo tips
how-to-make-a-great-thumbnail
how-to-make-thumbnail-hover-states
setting-up-a-custom-url
how-to-use-slideshow-captions
CSS
hex colors: 6 digit numbers or combo of letters and numbers
system fonts: web design requires you use system fonts*
*in some cases you can embed fonts. if you want a non-system font for project titles, etc you
can use Typekit.com. I think you may have to be have a pro account to use typekit.
margin, padding.....
10/27/11 7:25 PM
/* Global California styles
***********************************************************************************************************/
body, html {
margin: 0px;
padding: 0px;
}
body {
background: #D9D8D3;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
line-height: 1.5;
width: 100%;
word-spacing: 1px;
}
/* Header / Navigation
***********************************************************************************************************/
.header_img {
position: fixed;
left: 20px; top: 0px;
z-index: 11;
}
.nav_container {
background: #ffffff;
line-height: 1.8;
margin: 0px;
padding: 20px 0 20px 20px;
position: fixed;
top: 130px; left: 20px;
white-space: nowrap;
width: 200px;
z-index: 12;
}
.nav_container.horizontal {
left: auto;
padding: 35px 0 20px 35px;
position: relative;
top: auto;
width: 670px;
z-index: 25;
}
about:blank
/* Enabled via Display Options */
Page 1 of 14
10/27/11 7:25 PM
.nav_container.horizontal div {
float: left;
padding-right: 10px;
}
#nav_loadspin {
display: none;
position: fixed;
top: 37px; left: 40px;
z-index: 100;
}
/* Navigation > Links
***************************************************************************************************/
.nav_container a {
font-size: 12px;
text-decoration: none;
}
/* Applied to each navigation link */
.project_link a { color: #000000; }
.project_link a:hover { color: #ff3333; }
.project_link a:active { color: #999999; }
.page_link a { color: #999999; }
.page_link a:hover { color: #ff3333; }
.page_link a:active { color: #000000; }
.link_link a { color: #999999; text-decoration: underline; }
.link_link a:hover { color: #ff3333; }
.link_link a:active { color: #000000; }
.nav_active a { color: #000000; font-weight: bold; }
.nav_active a:active { color: #999999; }
.pagination
.pagination
.pagination
.pagination
{ color: #999999; font-size: 11px; z-index:11; }
a { color: #00AF8A; }
a:hover { background: #ffff00; color: #222222; }
a:active { background: #000000; color: #ffffff; }
.nav_follow
.nav_follow
.nav_follow
.nav_follow
{ color: #999999; font-size: 11px; z-index: 11; }
a { color: #999999; font-size: 11px; text-decoration: underline; }
a:hover { color: #333333; }
a:active { color: #000000; }
.view_tag_info { color: #999999; padding-left: 3px; font-size: 11px; }
.view_tag_info a { color: #0066ff; }
.view_tag_info a:hover { background: #ffff00; color: #000000; }
.view_tag_info a:active { background: #000000; color: #ffffff; }
about:blank
Page 2 of 14
10/27/11 7:25 PM
/* Content
***********************************************************************************************************/
#content_container {
background: #ffffff;
left: 250px;
margin-bottom: 20px;
padding: 10px 0px 0px 10px;
position: relative;
top: 20px;
width: 680px;
z-index:11;
}
/* Content > Project content
***************************************************************************************************/
#maincontainer {
display: none;
margin: 0 0 35px 0;
width: 690px;
}
.bodycopy a { color: #000000; text-decoration: underline; }
.bodycopy a:hover { background: #ffff00; color: #000000; text-decoration: none; }
.bodycopy a:active { background: #000000; color: #ffffff; }
.project_content {
width: 560px;
}
.project_title {
color: #000000;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.5;
margin: -4px 0 0 0;
padding: 0 0 53px 0;
}
/* Project content > Header
about:blank
Page 3 of 14
10/27/11 7:25 PM
*******************************************************************************************/
.project_header {
position: absolute;
top: 10px; right: 10px;
z-index: 99;
}
.project_header div {
float: right;
}
.project_header a {
color: #999999;
font-size: 12px;
text-decoration: none;
}
.project_header a:hover {
background: none !important;
color: #000000;
}
.project_header a:active {
background: #000000!important;
color: #ffffff;
}
.project_divider {
color: #bbbbbb;
float: right;
}
/* Styling of default typographic headers and elements */
h1 {
font-size: 22px;
line-height: 165%;
}
h2 {
font-size: 16px;
line-height: 165%;
}
h3 {
font-size: 14px;
line-height: 150%;
}
blockquote {
color: #666666;
margin-top: 0;
margin-bottom: 0;
about:blank
Page 4 of 14
10/27/11 7:25 PM
}
.project_content img {
margin: 0px 10px 10px 0px;
}
/* Project content > Slideshows
*******************************************************************************************/
#slideshow_container img {
margin: 0px;
}
.slideshow_caption {
clear: both;
display: block;
font-size: 11px;
padding: 5px 0 5px 0;
}
.slideshow_wrapper {
clear: both;
margin: 0 10px 10px 0px;
}
.slideshow_wrapper a, .slideshow_wrapper a:hover, .slideshow_wrapper a:active {
background: none !important;
}
.slideshow_nav {
clear: both;
color: #999999;
margin: -24px 0 0 0;
padding-bottom: 6px;
font-size: 12px;
}
.slideshow_nav a {
background: none !important;
color: #999999;
text-decoration: none;
}
.slideshow_nav a:hover {
background: none !important;
color: #000000;
text-decoration: none;
}
about:blank
Page 5 of 14
10/27/11 7:25 PM
.slideshow_count {
color: #999999;
}
ul.slideshow_thumbs {
margin: 0;
padding: 0;
}
.slideshow_thumb {
float: left;
list-style: none;
margin: -3px 7px 7px -3px;
}
.slideshow_thumb a {
background: none !important;
border: 1px solid transparent;
display: block;
padding: 2px;
}
.slideshow_thumb a:hover {
background: none !important;
border: 1px solid #ccc;
}
a.activeSlide {
background: none;
border: 1px solid #ccc;
}
.slideshow_thumb a:active, a.activeSlide:active {
background: none !important;
border: 1px solid #666;
}
.slideshow_thumb img {
border: 0;
display: block;
margin: 0;
height: 60px;
}
/* Project content > Project footer
*******************************************************************************************/
.project_footer {
color: #999999;
clear: both;
about:blank
Page 6 of 14
10/27/11 7:25 PM
font-size: 11px;
padding: 20px 0px 0px 0px;
}
.footer_title_type {
color: #000000;
font-weight: bold;
}
.project_views {
color: #999999;
font-style: italic;
}
/* Project Footer Links */
.project_footer .permalink a { color: #999999; }
.project_footer .permalink a:hover { color: #333333; }
.project_footer .permalink a:active { color: #000000; }
.tags { color: #999999; }
.tags a { color: #999999; text-decoration: underline; }
.tags a:hover { color: #000000; }
.tags a:active { color: #000000; }
.project_footer .editlink a { color: #0aaf86; text-decoration: underline; }
.project_footer .editlink a:hover { color: #000000; }
.project_footer .editlink a:active { color: #ff3333; }
.project_bottom {
clear: both;
height: 9px;
width: 670px;
}
/* Content > Thumbnails
***************************************************************************************************/
.project_thumb {
float: left;
margin: 10px 15px 10px 10px;
position: relative;
}
.project_thumb .hover {
cursor: pointer;
text-decoration: none;
}
.project_thumb .nohover {
about:blank
Page 7 of 14
10/27/11 7:25 PM
text-decoration: none;
}
.project_thumb .hover .thumb_title span {
color: #ff3333;
}
.project_thumb .hover .cardimgcrop {
border: 5px solid #dddddd;
}
.project_thumb.active .cardimgcrop {
border: 5px solid #dddddd;
}
.project_thumb.active .thumb_title span {
color: #ff3333;
}
.cardimgcrop {
border: 5px solid transparent;
margin: -5px -5px 5px -5px;
position: relative;
min-width: 200px;
min-height: 134px;
}
.loader_holder {
display: none;
position: absolute;
text-align: center;
top: 8px; left: 8px;
z-index: 3;
}
.thumb_title {
overflow: hidden;
white-space: nowrap;
text-align: left;
width: 200px;
}
.thumb_title .text {
color: #000000;
font-size: 11px;
font-weight: bold;
line-height: 12px;
overflow: hidden;
white-space: nowrap;
}
.thumb_tag {
color: #999999;
height: 3em;
about:blank
Page 8 of 14
10/27/11 7:25 PM
line-height: 15px;
overflow: hidden;
width: 200px;
}
.thumb_tag a {
color: #999999;
font-size: 11px;
line-height: 1.5em;
text-decoration: none;
}
.thumb_tag a:hover {
text-decoration: underline;
}
.thumb_tag.notitle {
margin-top: 12px;
}
/* Search results
*******************************************************************************************/
#search_form {
position: fixed;
bottom: 45px; left: 20px;
}
#search_form #search_term {
background: #D9D8D3;
color: #666666;
border: 1px solid #adaca8;
font-size: 12px;
width: 160px;
}
#search_form_results {
padding-bottom: 90px;
}
.search_header {
color: #000000;
float: left;
font-size: 14px;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 5px 0;
width: 145px;
}
about:blank
Page 9 of 14
10/27/11 7:25 PM
#search_term {
background: #ffffff;
border: 1px solid #cccccc;
color: #000000;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 5px;
width: 220px;
}
#search_results {
float: left;
}
.result {
clear: both;
font-size: 14px;
line-height: 22px;
margin-bottom: 60px;
}
.search_thumb {
float: left;
margin: 4px 25px 35px 0px;
}
.search_thumb img {
width: 120px; height: auto;
}
.search_text {
width: 500px;
margin-left: 145px;
}
.search_title a {
color: #000000;
font-weight: bold;
text-decoration: underline;
}
.search_title a:hover {
background: #ffff00;
color: #000000;
text-decoration: none;
}
.search_title a:active {
background: #000000;
color: #ffffff;
text-decoration: none;
about:blank
Page 10 of 14
10/27/11 7:25 PM
}
.search_tags {
color: #999999;
font-size: 11px;
}
.search_tags a {
color: #999999;
text-decoration: none;
}
.search_tags a:hover {
background: none;
color: #000000;
text-decoration: underline;
}
.search_tags a:active {
color: #666666;
}
/* Footer
***********************************************************************************************************/
.bottompad {
clear: both;
position: relative;
height: 35px;
margin: 35px 0 0 0;
width: 705px;
}
/* Video component
***********************************************************************************************************/
.video_component {
float: left;
margin: 0 15px 15px 0;
}
/* Audio component
about:blank
Page 11 of 14
10/27/11 7:25 PM
***********************************************************************************************************/
.audio_component {
color: #777777;
font-family: 'Droid Sans Mono', Monaco, Monospace, Arial, san-serif;
font-size: 10px;
height: 30px;
line-height: 26px;
width: 300px;
}
.audio_component div {
height: 26px;
}
.audio_component .border {
border: 2px solid #aaaaaa;
opacity: 0.5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
.audio_component .vertical_border {
background: #aaaaaa;
opacity: 0.50;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
.audio_component .controls {
top: 2px; left: 2px;
}
.audio_component .play_pause {
background: url("/_gfx/playpause.png");
}
.audio_component .spectrum .spectrum_bar {
background: #666666;
}
.audio_component .loading {
background: #bbbbbb;
opacity: 0.25;
filter: alpha(opacity=25);
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
about:blank
Page 12 of 14
10/27/11 7:25 PM
}
.audio_component .progress {
background: #bbbbbb;
border-right: 1px dotted #333333;
opacity: 0.25;
filter: alpha(opacity=25);
-moz-opacity: 0.25;
-khtml-opacity: 0.25;
}
.audio_component .volume_slide.hover {
background: #bbbbbb;
opacity: 0.3;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
}
/* Other
***********************************************************************************************************/
.toolset {
*/
position: fixed;
top: 10px; right: 10px;
z-index: 9999;
}
/* Admin and following icons — only seen by members
.cargo_link {
*/
color: #666666;
font-size: 11px;
line-height:165%;
position: fixed;
bottom: 15px; left: 20px;
z-index:99;
}
/* "Running on Cargo"
.cargo_link a { color: #666666; text-decoration: underline; }
.cargo_link a:hover { color: #cccccc; text-decoration: underline; }
.cargo_link a:active { color: #ffffff; }
/* In-browser code editing made "almost bearable" by CodeMirror: http://marijn.haverbeke.nl/codemirror
about:blank
Page 13 of 14