english3183b.files.wordpress.com€¦ · web viewunlike a large pr firm that serves dozens of...
TRANSCRIPT
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>
</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;}
#navcontainer ul li a:hover{background-color: #369;color: #fff;}
Part 2<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="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.
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>
<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;}
img, embed, object, video {max-width: 100%;}
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;}
#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 { 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;}
#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>
</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 { display: inline; }
#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
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>
<div id="bottom1"><center>© 2015 Write Good</center></div></div>
Final CodeHTML
<html><head>
<link rel="stylesheet" href="fancysite.css" type="text/css">
<title>Dr. Will Kurlinkus</title>
</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>
<div id="bottom1"><center>© 2015 Write Good</center></div></div>
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: 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 { display: inline; }
#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';}