├── .gitattributes ├── .gitignore ├── README.md ├── images ├── banner.jpg ├── cs-1.png ├── cs-2.png ├── cs-3.png ├── head.png ├── logo-sprite.png ├── logo.png ├── map.png └── quote.png ├── index.html └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # PSD-to-HTML-1 2 | Source code for TheNetNinja tutorial playlist - PSD to HTML & CSS Series 1 (unresponsive) 3 | 4 | Yo ninjas, this is the final code from the YouTube NetNinjas playlist - PSD to HTML & CSS Series 1 (unresponsive). 5 | 6 | You can view the playlist at https://www.youtube.com/playlist?list=PL4cUxeGkcC9jjVlRiZnRnAGFSCK3Lu_i- 7 | -------------------------------------------------------------------------------- /images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/banner.jpg -------------------------------------------------------------------------------- /images/cs-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/cs-1.png -------------------------------------------------------------------------------- /images/cs-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/cs-2.png -------------------------------------------------------------------------------- /images/cs-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/cs-3.png -------------------------------------------------------------------------------- /images/head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/head.png -------------------------------------------------------------------------------- /images/logo-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/logo-sprite.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/logo.png -------------------------------------------------------------------------------- /images/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/map.png -------------------------------------------------------------------------------- /images/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshaunjp/PSD-to-HTML-1/0f8c209003f5fb82142efae8c24fc9839b9ed305/images/quote.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Green Design 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Green Design

13 | 23 |
24 |
25 | 26 |
27 | lead banner 28 | 35 |
36 | 37 |
38 | 39 |
40 |
41 |

Points of Sale

42 |
    43 |
  • 44 | web design 45 |

    Web Design

    46 |

    quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem

    47 |
    • 48 |
  • 49 | e-commerce 50 |

    E-commerce

    51 |

    quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem

    52 |
    • 53 |
  • 54 | seo 55 |

    SEO

    56 |

    quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et laboribusam endi rerum as minullorent officiatum non cuscium quuntem

    57 |
    • 58 |
59 |
60 |
61 |

What Our Clients Say

62 | quote 63 |
quatis alique mos et aut occae cum, veliquaspit quo quam, si idem reprorisqui doluptatur accum si sunt ut officiisto enecab id et aut es et l
64 |
65 |
66 |

Drop Us A Line

67 |
    68 |
  • 555 555 5555
    • 69 |
  • hello@whatever.com
    • 70 |
  • 71 | Leaf Studios 72 | Times Square 73 | NY 74 |
    • 75 |
76 | map 77 | 83 |
84 |
85 | 86 |
87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | abbr, address, cite, code, 4 | del, dfn, em, img, ins, kbd, q, samp, 5 | small, strong, sub, sup, var, 6 | b, i, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, figcaption, figure, 11 | footer, header, hgroup, menu, nav, section, summary, 12 | time, mark, audio, video { 13 | margin:0; 14 | padding:0; 15 | border:0; 16 | outline:0; 17 | font-size:100%; 18 | vertical-align:baseline; 19 | background:transparent; 20 | font-family: arial; 21 | } 22 | 23 | body { 24 | line-height:1; 25 | } 26 | 27 | article,aside,details,figcaption,figure, 28 | footer,header,hgroup,menu,nav,section { 29 | display:block; 30 | } 31 | 32 | nav ul { 33 | list-style:none; 34 | } 35 | 36 | blockquote, q { 37 | quotes:none; 38 | } 39 | 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content:''; 43 | content:none; 44 | } 45 | 46 | a { 47 | margin:0; 48 | padding:0; 49 | font-size:100%; 50 | vertical-align:baseline; 51 | background:transparent; 52 | } 53 | 54 | /* change colours to suit your needs */ 55 | ins { 56 | background-color:#ff9; 57 | color:#000; 58 | text-decoration:none; 59 | } 60 | 61 | /* change colours to suit your needs */ 62 | mark { 63 | background-color:#ff9; 64 | color:#000; 65 | font-style:italic; 66 | font-weight:bold; 67 | } 68 | 69 | del { 70 | text-decoration: line-through; 71 | } 72 | 73 | abbr[title], dfn[title] { 74 | border-bottom:1px dotted; 75 | cursor:help; 76 | } 77 | 78 | table { 79 | border-collapse:collapse; 80 | border-spacing:0; 81 | } 82 | 83 | /* change border colour to suit your needs */ 84 | hr { 85 | display:block; 86 | height:1px; 87 | border:0; 88 | border-top:1px solid #cccccc; 89 | margin:1em 0; 90 | padding:0; 91 | } 92 | 93 | input, select { 94 | vertical-align:middle; 95 | } 96 | 97 | /*//////////// end css reset //////////*/ 98 | 99 | .wrapper{ 100 | width: 100%; 101 | max-width: 960px; 102 | margin: 0 auto; 103 | } 104 | 105 | header{ 106 | background: #151515; 107 | } 108 | 109 | header:after{ 110 | content: ""; 111 | display: block; 112 | clear: both; 113 | } 114 | 115 | #logo{ 116 | background: url(images/logo.png) no-repeat; 117 | height: 70px; 118 | width: 280px; 119 | float: left; 120 | text-indent: -10000px; 121 | } 122 | 123 | header nav{ 124 | float: right; 125 | margin-top: 30px; 126 | margin-right: 10px; 127 | } 128 | 129 | header nav a{ 130 | color: #fff; 131 | text-decoration: none; 132 | font-family: arial; 133 | } 134 | 135 | header nav h2{ 136 | height: 0; 137 | text-indent: -10000px; 138 | } 139 | 140 | header nav li{ 141 | float: left; 142 | margin-left: 20px; 143 | } 144 | 145 | header nav span{ 146 | color: green; 147 | margin-left: 20px; 148 | } 149 | 150 | #lead-banner img{ 151 | width: 100%; 152 | } 153 | 154 | #lead-banner{ 155 | max-height: 440px; 156 | overflow: hidden; 157 | position: relative; 158 | } 159 | 160 | .banner-overlay{ 161 | position: absolute; 162 | top: 20%; 163 | width: 100%; 164 | } 165 | 166 | .banner-title{ 167 | color: #fff; 168 | text-transform: uppercase; 169 | font-size: 72px; 170 | } 171 | 172 | #lead-banner p{ 173 | color: #fff; 174 | font-size: 24px; 175 | max-width: 600px; 176 | margin-top: 10px; 177 | } 178 | 179 | #lead-banner a{ 180 | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#51b205+0,3c9e0a+100 */ 181 | background: #51b205; /* Old browsers */ 182 | background: -moz-linear-gradient(top, #51b205 0%, #3c9e0a 100%); /* FF3.6+ */ 183 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#51b205), color-stop(100%,#3c9e0a)); /* Chrome,Safari4+ */ 184 | background: -webkit-linear-gradient(top, #51b205 0%,#3c9e0a 100%); /* Chrome10+,Safari5.1+ */ 185 | background: -o-linear-gradient(top, #51b205 0%,#3c9e0a 100%); /* Opera 11.10+ */ 186 | background: -ms-linear-gradient(top, #51b205 0%,#3c9e0a 100%); /* IE10+ */ 187 | background: linear-gradient(to bottom, #51b205 0%,#3c9e0a 100%); /* W3C */ 188 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51b205', endColorstr='#3c9e0a',GradientType=0 ); /* IE6-9 */ 189 | color: #fff; 190 | display: block; 191 | width: 200px; 192 | font-size: 18px; 193 | text-align: center; 194 | padding: 16px 0; 195 | text-decoration: none; 196 | border-radius: 5px; 197 | text-transform: uppercase; 198 | margin-top: 30px; 199 | box-shadow: 1px 1px 6px rgba(0,0,0,0.4) 200 | 201 | } 202 | 203 | section{ 204 | margin: 40px 0 60px; 205 | } 206 | 207 | section:after{ 208 | content: ""; 209 | display: block; 210 | clear: both; 211 | } 212 | 213 | section#points-of-sale ul{ 214 | list-style-type: none; 215 | } 216 | 217 | #points-of-sale h2{ 218 | height: 0; 219 | text-indent: -10000px; 220 | } 221 | 222 | #points-of-sale li{ 223 | float: left; 224 | width: 32%; 225 | } 226 | 227 | #points-of-sale li:nth-child(2){ 228 | margin: 0 2%; 229 | } 230 | 231 | #points-of-sale li h3{ 232 | text-align: center; 233 | color: #888; 234 | font-size: 24px; 235 | font-weight: normal; 236 | margin-bottom: 10px; 237 | } 238 | 239 | #points-of-sale p{ 240 | text-align: center; 241 | width: 80%; 242 | margin: 0 10%; 243 | font-size: 14px; 244 | color: #888; 245 | line-height: 1.4em; 246 | } 247 | 248 | #clients, #contact{ 249 | border-top: 1px solid #ccc; 250 | padding-top: 30px 251 | } 252 | 253 | #clients h2, #contact h2{ 254 | background: green; 255 | color: #fff; 256 | padding: 8px; 257 | text-align: center; 258 | width: 250px; 259 | text-transform: uppercase; 260 | position: relative; 261 | top: -45px; 262 | margin: 0 auto; 263 | border-left: 16px solid #fff; 264 | border-right: 16px solid #fff; 265 | } 266 | 267 | #clients img{ 268 | float: left; 269 | width: 30%; 270 | } 271 | 272 | #clients blockquote{ 273 | float: right; 274 | width: 66%; 275 | margin-top: 20px; 276 | text-align: center; 277 | font-style: italic; 278 | line-height: 1.6em; 279 | color: #888; 280 | padding-top: 50px; 281 | background: url(images/quote.png) no-repeat top left; 282 | } 283 | 284 | #contact-methods{ 285 | float: left; 286 | } 287 | 288 | #contact-methods li{ 289 | list-style-type: none; 290 | color: #888; 291 | line-height: 30px; 292 | clear: left; 293 | } 294 | 295 | #contact-methods li:before{ 296 | content: ""; 297 | display: block; 298 | width: 40px; 299 | height: 40px; 300 | float: left; 301 | margin-right: 10px; 302 | background: url(images/logo-sprite.png) no-repeat; 303 | } 304 | 305 | #contact-methods li:nth-child(1):before{ 306 | background-position: -158px 0; 307 | } 308 | 309 | #contact-methods li:nth-child(2):before{ 310 | background-position: -198px 0; 311 | } 312 | 313 | #contact-methods li:nth-child(3):before{ 314 | background-position: -238px 0; 315 | } 316 | 317 | #contact img{ 318 | float: right; 319 | } 320 | 321 | #social-nav{ 322 | clear: both; 323 | position: relative; 324 | top: -40px; 325 | } 326 | 327 | #social-nav li{ 328 | list-style-type: none; 329 | float: left; 330 | width: 40px; 331 | height: 30px; 332 | background: url(images/logo-sprite.png) no-repeat; 333 | text-indent: -10000px; 334 | } 335 | 336 | #social-nav li:nth-child(2){ 337 | background-position: -40px 0; 338 | } 339 | 340 | #social-nav li:nth-child(3){ 341 | background-position: -80px 0; 342 | } 343 | 344 | #social-nav li:nth-child(4){ 345 | background-position: -120px 0; 346 | } 347 | 348 | #social-nav a{ 349 | display: block; 350 | width: 100%; 351 | height: 100%; 352 | } 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | --------------------------------------------------------------------------------