english3183b.files.wordpress.com€¦ · web viewunlike a large pr firm that serves dozens of...

Instructions to Build the Fancy Website

Part 11. Create a new folder on your desktop. Name it without capitals or spaces.2. Create a folder inside that folder. Name it images.3. Find four background images on flickr.com and save them in your images folder.

Rename these images so there’s no spaces in the names and so the names are meaningful.

For bonus points use the licenses dropdown menu on the upper left hand side and select “commercial use allowed.”

Click on the image and then click on the download button (an arrow pointing down towards a line in the lower right corner under the image).

6. Create a logo in photoshop with an erased background (looks like a gray checkerboard). Save this logo as a .png 4. Create a new html and css file and save them into your website folder.5. Make your basic HTML and CSS starting layouts

HTML<html><head>

<link rel="stylesheet" href="fancysite.css" type="text/css">

<title>Dr. Will Kurlinkus</title>

</head>

<body>

<div id="navcontainer"><ul id="navlist"><li id="active"><a href="#" id="current">Item one</a></li><li><a href="#">Item two</a></li><li><a href="#">Item three</a></li><li><a href="#">Item four</a></li><li><a href="#">Item five</a></li></ul></div>

<div id="container"></div>

William Kurlinkus, 11/16/15,

All your code goes in the html opening and closing tags


these hashtags are where you place the links to your other pages. You can tell because they are styled as links “a href=”


Where it says item 1, 2, 3, is the text that displays in the navigation bar. So change it to whatever you want to appear.


Though this looks fancy (not so basic) it is pulled straight from the listamatic website we’ve discussed in class:http://css.maxdesign.com.au/listamatic/horizontal03.htmNote that all this is, is a bulleted list that’s been placed inside a div. The CSS makes it horizontal, colored, etc. For more on how to make this navbar from scratch, visit:http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm


The title is what appears at the top of the browser window


Remember to change this bit of code to be the name of your css file

</body></html>

CSS body, h1, h2, h3, h4, h4, p, div, ul, li {margin: 0; padding: 0;}

img, embed, object, video {max-width: 100%;}

body {background-color: blue;}

#container{background-color: white;min-height: 100%;margin: auto auto;}

#navcontainer ul{padding-left: 0;margin-left: 0;background-color: #036;color: White;float: left;width: 100%;font-family: arial, helvetica, sans-serif;}

#navcontainer ul li { display: inline; }

#navcontainer ul li a{padding: 0.2em 1em;background-color: #036;color: White;text-decoration: none;float: left;border-right: 1px solid #fff;}


Adds the white line between buttons


Turns off the bullet points


Background color of the button


Amount of space between the buttons


This styles the individual links


Makes the list appear horizontal rather than vertical


Sets the font for the navigation bar


Makes the navigation bar span across the entire screen


Makes the buttons start on the left


Sets the font color to white


This is the long blue box that the individual links appear in


Again, all this navcontainer stuff is taken directly from the listamatic website.


The big empty box that we’ll put our sections in


Min-height means that we always want the container to fill the entire window.


The background color for our website. It won’t matter because we’re putting pictures over it.


these two lines of CSS tell the browser to not pre-style our code.


this is simply an empty div that will be the big box that our entire website goes in.

#navcontainer ul li a:hover{background-color: #369;color: #fff;}

Part 2<html><head>



</head>

<body>

<div id="navcontainer"><ul id="navlist"><li id="active"><a href="index.html" id="current">Write|Good</a></li><li><a href="ourteam.html">Our Team</a></li><li><a href="whatwedo.html">What We Do</a></li><li><a href="learning.html">Learning Community</a></li></ul></div>

<div id="container">

<div id="home1"><div id="text"><h1> Don't Write Well. Write Good.</h1>

<br><br>

<div id="blackbox">

<p>Write Good is a national consulting firm specializing in communications and development for nonprofits and businesses serving the greater good.


This is the body text.


This is the transparent black box that the text is inside of.


This just adds a little bit of extra space between the heading and the text box.


This is the heading in each section.


This is just an empty div that I will use to style the text later


This website has four different backgrounds as you scroll down. So you have to add a div for each one of those four boxes. I’ve named them home1, home2, home 3 home 4


The a:hover property makes things change when you hover over them. So, this changes the background color.

Our experienced team is passionate about growing community engagement with your organization.</p>

</div></div></div>

<div id="home2"><div id="text">

<h1>Our Mission</h1>

<br><br>

<div id="blackbox">

<p>Write Good is driven by the needs of organizations that serve the greater good. We seek out fledgling and struggling organizations that have socially responsible missions but have not quite found their footing. Since we are small, we keep our costs low and pass those savings on to you.</p>

<p>Unlike a large PR firm that serves dozens of giant corporations, we focus solely on the needs of small organizations, especially nonprofits and startups, with an emphasis on building community engagement, a strong donor base, and a well-rounded grant portfolio. Not only will we help you do these things, we'll teach you how to do them yourself so you can become self-sufficient.</p>

<p>Above all, our goal is not to create customers who must rely on us for all of their development and communications needs, but strong organizations that can go it on their own and return to us during their next big growth period.</p>

</div></div></div>

<div id="home3" ><div id="text"><h1>Our Values</h1>


Each one of these next sections are duplicates of the first one. All that’s changed is the name of the div, the content of the h1, and the content of the paragraphs


Closing home1 tag


Closing text tag


closing blackbox tag

<br><br>

<div id="blackbox"><p>Pulitizer prize-winning author Alice Walker said, "Activism is my rent for living on the planet." Write Good operates on this principle, finding joy in helping others further their own activist and advocacy causes. Although many organizations shy away from this language, we don't. We passionately support the ideals of social justice and social responsibility in everything that we do.</p>

<p>At Write Good, we understand from experience the challenge of sustaining a nonprofit or small business. So when you place your trust in us to increase your organization's community engagement and financial stability, you can expect excellence. Our team holds ourselves to the highest standards, demonstrating a deep commitment to helping our clients fulfill their organization's full potential. There is nothing we love more than ensuring your success and doing our part in contributing to the greater good.</p>

</div></div></div>

<div id="home4"><div id="text"><h1>Our Strategies</h1>

<br><br>

<div id="blackbox">

<p>Write Good provides a concentrated yet wide array of services, focusing on everything a nonprofit or small business needs to be successful. Most public relations firms fail in this respect because they focus solely on communications strategies and never become involved in development efforts. At Write Good, we recognize these two pieces of your organization are inseparable, not just within your organizational structure but within the way we design our services. When we create a fundraising plan for your organization, we not only design a media relations campaign, we create a comprehensive development and communications plan that integrates all levels of community engagement. Because most of our clients are small, we are experienced in managing concentrated development efforts,

identifying new grant and donor opportunities, and building communities of support from the ground up.</p> </div></div></div>

<div id="bottombar">

<div id="bottom1"><center>© 2015 Write Good</center></div></div>

</div></body></html>

CSS

body, h1, h2, h3, h4, h4, p, div, ul, li {margin: 0; padding: 0;}


body {background-color: white;}

#container {background-color: white;min-height: 100%;margin: auto auto;}

#home1 {background-image: url(images/yosemite.jpg);background-size: cover;background-repeat: no-repeat;width: 100%;min-height: 80%;font: arial;padding-bottom: 5%;


I’m using this min-height property to make sure that a little bit of home2 shows so that users know to scroll down. If I set it to 100% you wouldn’t see the next box.


width 100% of the page


background images default setting is to repeat and wall paper across your entire site. You don’t want this ugliness. So, tell it no-repeat


this is telling the background-images to cover the entire screen even if it resizes. For more on background images, see: http://www.w3schools.com/cssref/css3_pr_background-size.asp


This creates the background image for home 1. yosemite.jpg is the name of one of the images I downloaded from flickr


Closing container symbol


Some special html code that you have to have for symbols. This one is the copyright symbol. For more symbols see: http://www.w3schools.com/html/html_symbols.asp


This is a div I’ve added at the bottom of the site so that I can have social media icons and a copyright notice

padding-top: 5%;margin-bottom: 2%;}

#home2 {background-image: url(images/door.jpg);background-size: cover;background-repeat: no-repeat;background-color: #006666;width: 100%;min-height: 95%;font: arial;padding-bottom: 5%;margin-bottom: 2%;}

#home3 {background-image: url(images/graffiti1.jpg);background-size: cover;background-repeat: no-repeat;background-color: #660000;width: 100%;min-height: 95%;font: arial;padding-bottom: 5%;margin-bottom: 2%;}

#home4 {background-image: url(images/blueprint.jpg);background-size: cover;background-repeat: no-repeat;background-color: #cc9900;width: 100%;min-height: 95%;padding-bottom: 5%;margin-bottom: 2%;}

#text {color: white;max-width: 50%;margin: auto auto;font-size: 100%;font-family: arial;}


Setting the font size


Centering the text square in the black box.


Styling how wide the text square appears


This is styling the box the text appears in


These are basically styled exactly the same as home 1, the only thing that differs is the min-height. There’s no real reason. I just liked how it looked.


This adds the space between backgrounds. The white that is showing is the background color of the container


These two padding tags are used to add some padding when the window is shrunk super small. Without it, the text in the black boxes would touch the bottom of the screen. To see what it does, drag your screen to as small as it goes. Then delete the padding tags and refresh.

p {line-height: 120%;margin-bottom: 4%;}

#blackbox {margin: auto auto;background-color: black;opacity: 0.7;padding: 5%;}

h1{color: white;text-align: center;padding-top: 20%;font-family: arial;}

#navcontainer ul{padding-left: 0;margin-left: 0;background-color: #036;color: White;float: left;width: 100%;font-family: arial, helvetica, sans-serif;padding-top: 2%;height: 5%;}


#navcontainer ul li a{padding: 0.2em 1em;background-color: #036;color: White;text-decoration: none;float: left;border-right: 1px solid #fff;}


Adds space between the edge of the black box and the text


Makes the black box slightly see through



Makes the box black


Centers the box in the middle


Makes the black box the text is in


Sets the space between individual paragraphs


Sets the spacing between the individual lines of text

#navcontainer ul li a:hover{background-color: #369;color: #fff;}

#bottombar{background-color: #222222;color: white;width: 100%;height: 25%;min-height: 110px;padding-top: 3%;position: relative;}

#bottom1 {margin-top: 3%;}

Step 3Step three is basically just making the nav bar look good. So, we’re only going to be looking at the nav bar code.

HTML

<div id="navcontainer"><ul id="navlist">

<img src="images/writegoodlogo2.png" height="47" width="85" style="float: left; margin-top: -19px; margin-left: 10px;">

<li id="active"><a href="index.html" id="current" style="margin-left: -5px; color: white;">Write | Good</a></li>

<li><a href="ourteam.html" style="margin-left: 5%; font-size: 90%; margin-right: -2%;">Our Team</a></li>

<li><a href="whatwedo.html" style="font-size: 90%; margin-right: -2%;" >What We Do</a></li>

<li><a href="learning.html" style="font-size: 90%; margin-right: -2%;" >Learning Community</a></li>


All these other links have this same CSS style code added to them. To shrink them and make them closer together


I added some individual CSS to my first link to differentiate it from the others. I decided to make it closer to the logo that the other links to serve as a title. So I did a negative margin-left.


I can also add CSS to individual tags for small element styling


A negative margin-top moves things up on the page


I can size my logo in htl using height and width tags


Here, I’m adding my logo


Sets the CSS for the bar at the bottom

</ul></div>

CSS#navcontainer ul{padding-left: 0;margin-left: 0;background-color: #1a1a1a;color: White;float: left;width: 100%;font-family: arial, helvetica, sans-serif;padding-top: 2%;padding-bottom: 1%;height: 3%;}


#navcontainer ul li a{padding: 0.2em 1em;background-color: #1a1a1a;color: gray;text-decoration: none;float: left;margin-left: 2%;margin-top: -5px;}

#navcontainer ul li a:hover{color: white;}

Step 4Here, we’re going to deal with just that bottom bar to add some social media icons. To do so, we’re going to go to a special code generator that adds some animations:http://perfecticons.com


Now when I scroll over the links they light up white text


Again I messed around with these numbers until things looked right


I changed the link colors to gray


I adjusted all these paddings, heights, and margins, to make my logo fit in the nav bar.


I changed my background color to a more stylish dark dark gray

http://perfecticons.com/

I’m going to choose three icons and mess with the settings (I made circle icons and did a floating hover effect). Feel free to do whatever you want here. Follow the instructions in the right hand menu on this website.

1. Download the socicon.zip file and take all the files from that folder and put them in your website folder. To keep things clean I made a folder inside my website folder (similar to the images folder) that I called code

2. I copied the CSS like the site told me and pasted it at the bottom of my CSS file. Because I put the files in step one in a folder called code, I changed everything that said PATH_TO to the word code. Just like how we tell the browser to look in the images folder for our images.

3. Finally, I pasted the HTML into my bottom bar div.

<div id="bottombar"><center><ul class="soc" style="padding-top: 2%;"> <li><a class="soc-twitter" href="#wkurlinkus"></a></li> <li><a class="soc-facebook" href="#wkurlinkus"></a></li> <li><a class="soc-instagram soc-icon-last" href="#wkurlinkus"></a></li></ul></center>


Final CodeHTML

<html><head>




Closing center tag


I added this extra padding on the top because my div was cutting off the icons when they floated.


Opening center tag to center the icons

</head>

<body>

<div id="navcontainer"><ul id="navlist"><img src="images/writegoodlogo2.png" height="47" width="85" style="float: left; margin-top: -19px; margin-left: 10px;"><li id="active"><a href="index.html" id="current" style="margin-left: -5px; color: white;">Write | Good</a></li>

<li><a href="ourteam.html" style="margin-left: 5%; font-size: 90%; margin-right: -2%;">Our Team</a></li><li><a href="whatwedo.html" style="font-size: 90%; margin-right: -2%;" >What We Do</a></li><li><a href="learning.html" style="font-size: 90%; margin-right: -2%;" >Learning Community</a></li></ul></div>

<div id="container">

<div id="home1"><div id="text"><h1 style="margin-bottom: 4%;"> Don't Write Well. Write Good.</h1><div id="blackbox">

<p>Write Good is a national consulting firm specializing in communications and development for nonprofits and businesses serving the greater good.Our experienced team is passionate about growing community engagement with your organization.</p>

</div></div></div>

<div id="home2"><div id="text" style="padding-top: 10%;">

<h1>Our Mission</h1>

<br>

<br>

<div id="blackbox">

<p>Write Good is driven by the needs of organizations that serve the greater good. We seek out fledgling and struggling organizations that have socially responsible missions but have not quite found their footing. Since we are small, we keep our costs low and pass those savings on to you.</p>

<p>Unlike a large PR firm that serves dozens of giant corporations, we focus solely on the needs of small organizations, especially nonprofits and startups, with an emphasis on building community engagement, a strong donor base, and a well-rounded grant portfolio. Not only will we help you do these things, we'll teach you how to do them yourself so you can become self-sufficient.</p>

<p>Above all, our goal is not to create customers who must rely on us for all of their development and communications needs, but strong organizations that can go it on their own and return to us during their next big growth period.</p>

</p></div></div></div>

<div id="home3" style="padding-top: 10%;"><div id="text"><h1>Our Values</h1>

<br><br><p><div id="blackbox"><p>Pulitizer prize-winning author Alice Walker said, "Activism is my rent for living on the planet." Write Good operates on this principle, finding joy in helping others further their own activist and advocacy causes. Although many organizations shy away from this language, we don't. We passionately support the ideals of social justice and social responsibility in everything that we do.</p>

<p>At Write Good, we understand from experience the challenge of sustaining a nonprofit or small business. So when you place your trust in us to increase your organization's community engagement and financial stability, you can expect excellence. Our team holds ourselves to the highest standards, demonstrating a deep commitment to helping our clients fulfill their organization's full potential. There is nothing we love more than ensuring your success and doing our part in contributing to the greater good.</p> </div>

</div></div>

<div id="home4"><div id="text"><h1>Our Strategies</h1>

<br><br>

<div id="blackbox"><p><p>Write Good provides a concentrated yet wide array of services, focusing on everything a nonprofit or small business needs to be successful. Most public relations firms fail in this respect because they focus solely on communications strategies and never become involved in development efforts. At Write Good, we recognize these two pieces of your organization are inseparable, not just within your organizational structure but within the way we design our services. When we create a fundraising plan for your organization, we not only design a media relations campaign, we create a comprehensive development and communications plan that integrates all levels of community engagement. Because most of our clients are small, we are experienced in managing concentrated development efforts, identifying new grant and donor opportunities, and building communities of support from the ground up.</p> </div></div></div>

<div id="bottombar"><center><ul class="soc" style="padding-top: 2%;"> <li><a class="soc-twitter" href="#wkurlinkus"></a></li> <li><a class="soc-facebook" href="#wkurlinkus"></a></li> <li><a class="soc-instagram soc-icon-last" href="#wkurlinkus"></a></li></ul></center>


CSS

body, h1, h2, h3, h4, h4, p, div, ul, li {margin: 0; padding: 0;}


body {background-color: white;}

#container {background-color: white;min-height: 100%;margin: auto auto;}

#home1 {background-image: url(images/yosemite.jpg);background-size: cover;background-repeat: no-repeat;width: 100%;min-height: 80%;font: arial;padding-bottom: 5%;padding-top: 5%;margin-bottom: 2%;}

#home2 {background-image: url(images/door.jpg);background-size: cover;background-repeat: no-repeat;background-color: #006666;width: 100%;min-height: 95%;font: arial;padding-bottom: 5%;margin-bottom: 2%;}

#home3 {background-image: url(images/graffiti1.jpg);background-size: cover;background-repeat: no-repeat;background-color: #660000;width: 100%;min-height: 95%;

font: arial;padding-bottom: 5%;margin-bottom: 2%;}

#home4 {background-image: url(images/blueprint.jpg);background-size: cover;background-repeat: no-repeat;background-color: #cc9900;width: 100%;min-height: 95%;padding-bottom: 5%;margin-bottom: 2%;}

#text {color: white;max-width: 50%;margin: auto auto;font-size: 100%;font-family: arial;}

p {line-height: 120%;margin-bottom: 4%;}

#blackbox {

margin: auto auto;background-color: black;opacity: 0.7;padding: 5%;}

h1{color: white;text-align: center;padding-top: 20%;font-family: arial;}

#text h2

{font-size: 150%;font: arial;}

#navcontainer ul{padding-left: 0;margin-left: 0;background-color: #1a1a1a;color: White;float: left;width: 100%;font-family: arial, helvetica, sans-serif;padding-top: 2%;padding-bottom: 1%;height: 3%;}


#navcontainer ul li a{padding: 0.2em 1em;background-color: #1a1a1a;color: gray;text-decoration: none;float: left;margin-left: 2%;margin-top: -5px;}

#navcontainer ul li a:hover{color: white;}

#bottombar{background-color: #222222;color: white;width: 100%;height: 25%;min-height: 110px;padding-top: 3%;position: relative;

}

#bottom1 {margin-top: 3%;}

@font-face { font-family: 'si'; src: url('code/socicon.eot'); src: url('code/socicon.eot?#iefix') format('embedded-opentype'), url('code/socicon.woff') format('woff'), url('code/socicon.ttf') format('truetype'), url('code/socicon.svg#icomoonregular') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family:si; src: url(code/socicon.svg) format(svg); }}

.soc { overflow:hidden; margin:0; padding:0; list-style:none;}

.soc li { display:inline-block; *display:inline; zoom:1;}

.soc li a { font-family:si!important; font-style:normal; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;

-ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;

-o-transition:.1s; -ms-transition:.1s; -moz-transition:.1s; -webkit-transition:.1s; transition:.1s; -webkit-transition-property: transform; transition-property: transform; -webkit-transform: translateZ(0); transform: translateZ(0);

overflow:hidden; text-decoration:none; text-align:center; display:block; position: relative; z-index: 1; width: 66px; height: 66px; line-height: 66px; font-size: 36px; -webkit-border-radius: 48px; -moz-border-radius: 48px; border-radius: 48px; margin-right: 21px; color: #ffffff; background-color: none;}

.soc a:hover { z-index: 2; -webkit-transform: translateY(-5px); transform: translateY(-5px);}

.soc-icon-last{ margin:0 !important;}

.soc-twitter { background-color: #4da7de;}.soc-twitter:before {

content:'a';}.soc-facebook { background-color: #3e5b98;}.soc-facebook:before { content:'b';}.soc-instagram { background-color: #9c7c6e;}.soc-instagram:before { content:'x';}

english3183b.files.wordpress.com€¦ · web viewunlike a large pr firm that serves dozens of...

Documents