Cartoonist Project Reflection

     In this project I worked with my colleagues Adriana and Tenzin to create a website for the cartoonist Sam E. Berland. For this project I was tasked with working on the contact and the biography page for the website. Also, I must note that my co-worker Tenzin assisted me on the contact page with the design in the top three boxes. As you can see below the biography page consists of his picture, his commissioned works, licensed works, his exhibitions and his educational background. Throughout the project we decided to keep things consistent by maintaining the same social media buttons, using the same logo on each page and using the same banner as well as having a white container box for each page to display all the content on.

For the Bio page I used various different forms of code including CSS, JS and Jquery. Here is the css that I used for the bio page:

a:link {
text-decoration: none;
color: #000000;
}

a:hover {
text-decoration: none;
color:#FDDD03;
}
a:active {
text-decoration: none;
}

/* simple style reset */
body, h1, h2, h3, p {
margin: 0;
padding: 0;
}

::selection {
background: #c00;
color:#fff;
}

::-moz-selection {
background: #c00;
color:#fff;
}

#par{
padding:15px;
color: #FDDD03;
}

/* general styles */
body {
background: #BDCFFB;
font:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;

}

a {
color:#c00;
text-decoration:none;
}

#wrapper {
width:1240px;
margin: 0 auto;

}



header {
text-align:center;
padding:70px 0;
}

header h1 {
color:#999;
font-size:40px;
}

header h2 {
display:inline-block;
border: 1px dashed #999;
padding: 2px 10px 5px;
margin: 10px 0 0;
border-radius: 5px;
font-size:20px;
}

nav {
background:#272BFD;
height: 60px;
width: 1240px;
line-height:50px;
position: relative;

}

nav:after {
position: absolute;
height:30px;
width:940px;
left:10px;
top:60px;
content:'';
}

nav p {
padding: 0 70px;
}

nav a {
color:#000000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
padding:20px 35px;

}

#content {
background: #fff;
height: 800px; /* presetting the height */
}

#content p {
padding:20px 60px;
}

.fixed {
position:fixed;
}

#pic{
padding:5px 0px;

}
#sam{
margin-left:10px;

}
/*john */

@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.svg#entypo') format('svg'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

.fc-slideshow {
position: relative;
width: 160px;
height: 150px;
box-shadow: inset 0 0 3px rgba(0,0,0,0.4), 0 0 0 10px #cc2724;
border-radius: 50%;
margin: 0 auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}

.fc-slideshow nav {
top: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 10000;
}

.fc-slideshow nav > div {
position: absolute;
height: 100%;
top: 0;
width: 50%;
}

.fc-slideshow nav .fc-left {
left: 0;
}

.fc-slideshow nav .fc-right {
right: 0;
}

.fc-slideshow nav > div span {
height: 33%;
width: 100%;
position: absolute;
left: 0;
cursor: pointer;
}



.fc-slideshow nav > div span:nth-child(2) {
top: 33%;
}

.fc-slideshow nav > div span:nth-child(3) {
top: 66%;
}

.fc-slideshow nav i,
.no-csstransforms3d .fc-slideshow nav > div span {
position: absolute;
width: 100%;
height: 40px;
top: 50%;
margin-top: -20px;
pointer-events: none;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.2s ease;
-moz-backface-visibility: hidden;
-moz-transition: all 0.2s ease;
backface-visibility: hidden;
transition: all 0.2s ease;
}

/* Some fallbacks */
.no-csstransforms3d .fc-slideshow nav > div span {
z-index: 1000;
width: 40px;
background: rgba(0,0,0,0);
}

.no-csstransforms3d .fc-slideshow nav .fc-left span {
left: -80px;
}

.no-csstransforms3d .fc-slideshow nav .fc-right span {
right: -80px;
left: auto;
}

.no-csstransforms3d .fc-slideshow nav i {
width: 40px;
cursor: pointer;
}

.fc-slideshow nav .fc-left i {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
transform-origin: 100% 50%;
text-align: left;
}

.fc-slideshow nav .fc-right i {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
text-align: right;
}

.fc-slideshow nav i.icon-arrow-left {
left: 0;
}

.no-csstransforms3d .fc-slideshow nav i.icon-arrow-left {
left: -100px;
}

.fc-slideshow nav i.icon-arrow-right {
right: 0;
}

.no-csstransforms3d .fc-slideshow nav i.icon-arrow-right {
right: -60px;
}

.icon-arrow-left:before,
.icon-arrow-right:before {
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-size: 20px;
background: #cc2724;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
margin: 0 20px;
border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;
-webkit-font-smoothing: antialiased;
}

.icon-arrow-left:before {
content: "\e002";
}

.icon-arrow-right:before {
content: "\e003";

}

ul.fc-slides {
list-style: none;
margin: 0;
padding: 0;
}

ul.fc-slides li {
display: none;
}

.no-js ul.fc-slides li {
display: block;
}

.fc-flip {
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.fc-flip div {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

.fc-flip .fc-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.fc-slideshow img {
border-radius: 50%;
}

.fc-slideshow h3 {
position: absolute;
color: #fff;
top: 50%;
margin-top: 30px;
line-height: 50px;
height: 50px;
left: 80px;
right: 80px;
background: #ff514c;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;
}

.fc-overlay-light,
.fc-overlay-dark {
opacity: 0;
}

.fc-overlay-light {
background: rgba(255,255,255,1);
}

.fc-overlay-dark {
background: rgba(0,0,0,1);
}

/* No JS fallback */

.no-js .fc-slideshow {
height: auto;
box-shadow: none;
}

.no-js .fc-slideshow h3 {
position: relative;
width: auto;
height: auto;
left: auto;
right: auto;
top: auto;
margin: 5px;
}


#wordsb{
font-weight:bold;

}


This Css is what allows the text to have certain fonts, the white container box to appear as well as to transition the links on the top to navigate through the whole site. I also incorporated java script called swfobject_modified.js which is what allows the menu buttons to change to yellow when I hover over each one.

For the contact page I used the same code with exception of some pieces of code due to the fact that I made the contact information in the form of flipping boxes. If you see below, those six boxes when clicked on will flip over to a box with different content inside, one has Sam Berland's professional address, one has a contact form, one has the phone # and fax # and three of them contain photos of me and my co-workers.

In this project I learned about team work as well as how to prioritize certain tasks. Though it was only a group of three I did find myself challenged to work my hardest to meet my own personal expectations and the expectations of my superior. With that being said, I do feel that I created quality work that because I put a lot of commitment to applying the code for the flipped circle for instance, I learned what each piece of code meant and what I could do to improve it.