1 2 3 4 5
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 7 8
<title>How To</title> <link href="howto.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Allura| Calligraffitti|Give+You+Glory|Petit+Formal+Script|Zeyada" rel="styles heet"> </head> <body> <div id="header"> </div> <nav> <ul> <li><a href="howto.html" class="current">Home</a></li> <li><a href="howto.picking.html">Picking</a></li> <li><a href="howto.wrapping.html">Wrapping</a></li> <li><a href="howto.accents.html">Accents</a></li>
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
29 30 31 32 33 34 35 36
</ul> </nav> <div class="home"> <h3>The Perfect Gift</h3> <div class="present"> <img src="present.png" alt="present" > </div> <div id="quote"> <p>"Christmas is the spirit of giving without a thought of getting. It is happiness because we see joy in people. It is forgetting self and finding time for others. It is discarding the meaningless and stressing the true values."</p><p style="margin-left: 160px">Thomas S.Monson</p> </div> </div> <footer> Copyright Š CHristine Hansen </footer> </body> </html>
SKHD:Users:stephenkessler:Desktop:how to:howto.html: 1/1
1 2 3 4 5
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 7 8
<title>How To</title> <link href="howto.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Allura| Calligraffitti|Give+You+Glory|Petit+Formal+Script" rel="stylesheet"> </head> <body> <div id="header"> </div> <nav> <ul> <li><a href="howto.html">Home</a></li> <li><a href="howto.picking.html">Picking</a></li> <li><a href="howto.wrapping.html">Wrapping</a></li> <li><a href="howto.accents.html" class="current">Accents</a></li>
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
</ul> </nav> <div class="content"> <div class="tag"> <img src="tag.1.png" alt="wooden star tag"> </div> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc2"> <p>Use wood blocks to cut out a unique shape.</p> </div> </div> <div class="content"> <div class="tag"> <img src="tag.2.png" alt="dough ornament tag"> </div> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc2"> <p>An edible gift tag for someone with a sweet tooth.</p> </div> </div> <div class="content">
SKHD:Users:stephenkessler:Desktop:how to:howto.accents.html: 1/3
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
<div class="tag"> <img src="tag.3.png" alt="language gift tag"> </div> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc2"> <p>Say your message in another language.</p> </div> </div> <div class="content"> <div class="tag"> <img src="tag.4.png" alt="old fabric gift tag"> </div> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc2"> <p>Old fabric or cloth to give it a vitage home-made feel.</p> </div> </div> <div class="content"> <div class="tag"> <img src="tag.5.png" alt="dollies gift tag"> </div> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc2"> <p>Linen or paper dollies to make the gift more fancy.</p> </div> </div> <div class="content"> <div class="tag"> <img src="tag.6.png" alt="twigg gift tag"> </div> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc2"> <p>Natural is the way to go. Use organic items to add a little freshness to the mix</p> </div> </div> <footer> <a href="https://www.buzzfeed.com/peggy/51-seriouslyadorable-gift-tag-ideas?utm_term=.pw3l9o7Da#.brgB782LR"target="_blank " >Copyright Š </a>
SKHD:Users:stephenkessler:Desktop:how to:howto.accents.html: 2/3
78 79 80 81
</footer> </body> </html>
SKHD:Users:stephenkessler:Desktop:how to:howto.accents.html: 3/3
1 2 3 4 5
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 7 8
<title>How To</title> <link href="howto.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Allura| Calligraffitti|Give+You+Glory|Petit+Formal+Script" rel="stylesheet"> </head> <body> <div id="header"> </div> <nav> <ul> <li><a href="howto.html">Home</a></li> <li><a href="howto.picking.html" class="current">Picking</a></li> <li><a href="howto.wrapping.html">Wrapping</a></li> <li><a href="howto.accents.html">Accents</a></li>
9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
28 29 30 31 32
</ul> </nav> <div class="content"> <h2>What Do They Enjoy</h2> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc"> <p>This is the obvious place to start. Everyone has different things that they enjoy. Your partner might enjoy a particular television show or film. Your friend might have a hobby that they enjoy doing. Your colleague might have a pet that they are fond of. And don’t just think of obvious hobbies and interests – think as well about the little things they seem to get a kick out of. Do they love entertaining guests? Or maybe they’re very house proud? Taking the time to think about what your friend or family member gets real joy from will help to make the present buying experience more straightforward for you.</p> </div> </div> <div class="content"> <h2>Remember Shared Experiences</h2> <div class="img"><img src="mistletoe .png" alt="mistletoe design">
SKHD:Users:stephenkessler:Desktop:how to:howto.picking.html: 1/3
33 34
35 36 37 38 39 40 41
42 43 44 45 46 47 48 49
50 51 52 53 54 55
</div> <div class="desc"> <p>It is very touching to receive a gift from someone that you shared a particular experience with. Take some time to consider the times you have spent with your gift recipient. Over the past year you may have attended concerts together, been on holiday or enjoyed a great night out. Even moments spent at school or university can be a happy memory. Gifts which remind your recipient of the time you spent together are very thoughtful. Also remember the inside jokes or the stories that you have shared over the past year; these can be fun to relive or record for posterity.</p> </div> </div> <div class="content"> <h2>Events Are a Good Option</h2> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> <div class="desc"> <p>If you struggle to think of an item for your recipient then consider an event instead. This has the advantage of not taking up any space and if you do the event together then you will create a great new shared experience. Youâ&#x20AC;&#x2122;ll also get value simply from the anticipation of the forthcoming event!</p> </div> </div> </div> <div class="content"> <h2>Pay Attention to What They Say</h2> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc"> <p>More often than not your friends and family will mention the things they want or need in conversation. They might complain about things that are broken or needed. They might point out things that they like the look of. They may even focus on particular items time and again in their conversation. Listening to what your gift recipient says will help to guide you in your gift choice.</p> </div> </div> <div class="content"> <h2>Avoid ClichĂŠs</h2> <div class="img"> <img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc">
SKHD:Users:stephenkessler:Desktop:how to:howto.picking.html: 2/3
56
57 58 59 60 61 62 63
64 65 66 67 68 69 70 71
<p>Falling back on old favorite gift ideas can be very tempting when you are running out of gift ideas. Flowers, chocolates, gift cards, even perfume can be easy gifts to buy but run the risk of appearing to be easy choices; your recipient may be hurt that you did not put more though into their gift. Try to avoid clichéd gifts unless you are sure that your gift recipient would enjoy them and take the opportunity to think of something imaginative and unexpected.</p> </div> </div> <div class="content"> <h2>Ask For Help</h2> <div class="img"><img src="mistletoe .png" alt="mistletoe design"> </div> <div class="desc"> <p>If you are running out of ideas try asking friends or family members. They may approach your gift dilemma from another point of view and help you to think of a gift idea that you might not have thought of yourself. And if you’re really stuck? Ask the recipient themselves what they’d like. This way at least you know they’ll genuinely appreciate/be able to use what they receive!</p> </div> </div> <footer> <a href="http://www.psychology24.org/how-to-choose-the-rightgift-for-someone/" target="_blank">Copyright © </a> </footer> </body> </html>
SKHD:Users:stephenkessler:Desktop:how to:howto.picking.html: 3/3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
@charset "UTF-8"; /* CSS Document */ #header { width: 100%; height: 401px; background-color: #445FA2; background-image: url("background.winter.gif"); background-repeat: round; } nav { float: right; width: 100%; margin-bottom: 10px; background: #8CB2D9; letter-spacing: 3px; font-family: 'Give You Glory', cursive; border-radius: 0px 0px 10px 10px; } nav ul { margin: 0; padding: 0; } nav ul li { list-style-type: none; display: inline; font-size: 18pt; } nav li a { display: block; float: right; padding: 10px 15px; color: #fff; text-decoration: none;
SKHD:Users:stephenkessler:Desktop:how to:howto.css: 1/6
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
} nav li a:hover { background: #445FA2; } a.current:link, a.current:visited { background: #445FA2} .content { margin: 10px 5px 10px 5px; border: 2px solid #8CB2D9; border-radius: 15px; float: left; width: 300px; height: 600px; } .content:hover { border: 2px solid #FBAA19; border-radius: 15px; } .home { width:60%; min-width: 400px; margin: auto; margin-top: 80px; margin-bottom: 20px; background-color: #A6C0DA; border: 15px double #FBAA19; border-radius: 15px; } .wrapping { width: 75%; min-width: 350px; margin: auto; margin-top: 80px; margin-bottom: 20px; background-color: #A6C0DA; border: 15px double #FBAA19; border-radius: 15px; } table {
SKHD:Users:stephenkessler:Desktop:how to:howto.css: 2/6
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
width: 75%; min-width: 250px; border: 2px solid #445FA2; border-collapse: collapse; margin: auto; margin-bottom: 10px; } td { width: 200px; height: 150px; font-family: 'Zeyada', cursive; font-size: 18px; letter-spacing: 2px; padding: 8px; border-top: 2px solid #445FA2; } th { font-size: 24px; color: #445FA2; font-family: 'Allura', cursive; border-left: 2px solid #445FA2; } video { width: 35%; min-width: 300px; display: block; margin: auto; margin-top: 10px; margin-bottom: 5px; } .desc { font-family: 'Calligraffitti', cursive; font-size: 15px; padding: 0px 15px 15px 15px; text-align: left; line-height: 25px; letter-spacing: 1px;
SKHD:Users:stephenkessler:Desktop:how to:howto.css: 3/6
133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
} .desc2 { font-family: 'Calligraffitti', cursive; font-size: 24px; padding: 0px 15px 15px 15px; text-align: center; line-height: 35px; letter-spacing: 2px; } #quote { width: 350px; height: 400px; margin: auto; font-family: 'Zeyada', cursive; font-size: 22px; text-align: center; letter-spacing: 2px; } .tag { width: 275px; height: 230px; margin: auto; margin-top: 10px; } .present { width: 300px; display: block; margin: auto; } .img { display: block; margin: 0 auto;
}
SKHD:Users:stephenkessler:Desktop:how to:howto.css: 4/6
177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220
h2 { font-family: 'Allura', cursive; font-size: 28px; color: #445FA2; text-align: center; letter-spacing: 4px; } h3 { font-family: 'Allura', cursive; font-size: 60px; color: #445FA2; text-align: center; letter-spacing: 4px; } footer { padding: 20px; background-color: #445FA2; clear: left; text-align: center; font-size: 16px; color: #FCFCFC; } footer a { background-color: transparent; text-decoration: none; } footer a:visited { color: #8CB2D9; background-color: transparent; text-decoration: none; } footer a:hover { color: #8CB2D9; background-color: transparent; text-decoration: underline;
SKHD:Users:stephenkessler:Desktop:how to:howto.css: 5/6
221
}
SKHD:Users:stephenkessler:Desktop:how to:howto.css: 6/6