├── myjs.js ├── mystyles.css └── index.html /myjs.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | $('a[href*="#"]:not([href="#"])').click(function() { 3 | if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 4 | var target = $(this.hash); 5 | target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 6 | if (target.length) { 7 | $('html, body').animate({ 8 | scrollTop: target.offset().top 9 | }, 1000); 10 | return false; 11 | } 12 | } 13 | }); 14 | }); -------------------------------------------------------------------------------- /mystyles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: rgba(250, 160, 100, .2); 3 | } 4 | 5 | .wrapper { 6 | width: 90%; 7 | margin: 0 auto; 8 | background-image: url("http://bestanimations.com/Books/pretty-book-bench-nature-water-outdoors-animated-gif.gif"); 9 | background-repeat: no-repeat; 10 | background-position: center; 11 | background-attachment: fixed; 12 | background-size: cover; 13 | background-origin: padding-box; 14 | box-shadow: 7px 0px 10px rgba(0, 0, 0, .3), -7px 0px 10px rgba(0, 0, 0, .3); 15 | } 16 | 17 | #headerImage img { 18 | width: 120px; 19 | height: 110px; 20 | border: 12px solid rgba(200, 80, 70, .3); 21 | border-radius: 50%; 22 | display: block; 23 | margin-left: auto; 24 | margin-right: auto; 25 | margin-top: 25px; 26 | margin-bottom: 25px; 27 | } 28 | 29 | .store { 30 | background: rgba(40, 80, 100, .2); 31 | } 32 | 33 | h1 { 34 | text-align: center; 35 | font-family: Monospace; 36 | display: block; 37 | color: #fff; 38 | font-size: 48px; 39 | background: #8a6f3a; 40 | width: 340px; 41 | margin: auto; 42 | } 43 | 44 | nav { 45 | text-align: center; 46 | margin: 25px; 47 | } 48 | 49 | nav a { 50 | text-align: center; 51 | padding: .7% 2%; 52 | margin: 1.5% 1%; 53 | text-decoration: none; 54 | background-color: rgba(200, 80, 70, .7); 55 | color: white; 56 | display: inline block; 57 | } 58 | 59 | nav a:hover { 60 | box-shadow: 0 1px 1px #fff; 61 | text-shadow: 0 1px 1px #fff; 62 | } 63 | 64 | section { 65 | padding: 1%; 66 | background: rgba(200, 120, 40, .45); 67 | text-align: center; 68 | font-size: 18px; 69 | } 70 | 71 | h2 { 72 | font-size: 30px; 73 | font-family: Helvetica, cursive; 74 | color: #fff; 75 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | My Book Store 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Book Store

14 |
15 | book logo 16 |
17 | 18 |
19 | 27 |
28 |
29 | 30 |
31 |

About us

32 |
33 |

34 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 35 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."There are many variations of passages of Lorem Ipsum 36 | available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything 37 | embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined 38 | with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 39 | 40 | 41 |

42 |
43 |
44 | 45 |
46 |

Genres

47 |
48 |

49 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 50 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."There are many variations of passages of Lorem Ipsum 51 | available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything 52 | embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined 53 | with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 54 | 55 | 56 |

57 |
58 |
59 | 60 |
61 |

Gallery

62 |
63 |

64 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 65 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."There are many variations of passages of Lorem Ipsum 66 | available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything 67 | embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined 68 | with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 69 | 70 | 71 |

72 |
73 |
74 | 75 |
76 |

Contact Book Store

77 |
78 |

79 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 80 | in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."There are many variations of passages of Lorem Ipsum 81 | available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything 82 | embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined 83 | with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. 84 | 85 | 86 |

87 |
88 |
89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | --------------------------------------------------------------------------------