├── about.html
├── contact.html
├── css
├── base
│ └── index.css
├── components
│ └── navigation-jacks.css
└── generic
│ └── reset.css
└── index.html
/about.html:
--------------------------------------------------------------------------------
1 | About
2 |
--------------------------------------------------------------------------------
/contact.html:
--------------------------------------------------------------------------------
1 | Contact
2 |
--------------------------------------------------------------------------------
/css/base/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #f9f9f9;
3 | font-family: "Roboto", Arial, Verdana, Tahoma, sans-serif;
4 | }
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Home Los Jacks
5 |
6 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/css/components/navigation-jacks.css:
--------------------------------------------------------------------------------
1 | .navigation-jacks {
2 | font-size: 14px;
3 | }
4 |
5 | .navigation-jacks > .action {
6 | display: inline-block;
7 | color: #333;
8 | text-decoration: none;
9 | font-weight: 400;
10 | position: relative;
11 | }
12 |
13 | .navigation-jacks > .action::after {
14 | content: "";
15 | height: 1px;
16 | width: 100%;
17 | background-color: #2d9cdb;
18 | position: absolute;
19 | bottom: -4px;
20 | left: 0;
21 | transform-origin: left center;
22 | transform: scaleX(0);
23 |
24 | transition: 200ms transform linear;
25 | }
26 |
27 | .navigation-jacks > .action.-active::after {
28 | transform: scaleX(0.4);
29 |
30 | transition-duration: 150ms;
31 | }
32 |
33 | .navigation-jacks > .action:hover::after {
34 | transform: scaleX(1);
35 | }
36 |
--------------------------------------------------------------------------------
/css/generic/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html,
7 | body,
8 | div,
9 | span,
10 | applet,
11 | object,
12 | iframe,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | h6,
19 | p,
20 | blockquote,
21 | pre,
22 | a,
23 | abbr,
24 | acronym,
25 | address,
26 | big,
27 | cite,
28 | code,
29 | del,
30 | dfn,
31 | em,
32 | img,
33 | ins,
34 | kbd,
35 | q,
36 | s,
37 | samp,
38 | small,
39 | strike,
40 | strong,
41 | sub,
42 | sup,
43 | tt,
44 | var,
45 | b,
46 | u,
47 | i,
48 | center,
49 | dl,
50 | dt,
51 | dd,
52 | ol,
53 | ul,
54 | li,
55 | fieldset,
56 | form,
57 | label,
58 | legend,
59 | table,
60 | caption,
61 | tbody,
62 | tfoot,
63 | thead,
64 | tr,
65 | th,
66 | td,
67 | article,
68 | aside,
69 | canvas,
70 | details,
71 | embed,
72 | figure,
73 | figcaption,
74 | footer,
75 | header,
76 | hgroup,
77 | menu,
78 | nav,
79 | output,
80 | ruby,
81 | section,
82 | summary,
83 | time,
84 | mark,
85 | audio,
86 | video {
87 | margin: 0;
88 | padding: 0;
89 | border: 0;
90 | font-size: 100%;
91 | font: inherit;
92 | vertical-align: baseline;
93 | }
94 | /* HTML5 display-role reset for older browsers */
95 | article,
96 | aside,
97 | details,
98 | figcaption,
99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 | display: block;
107 | }
108 | body {
109 | line-height: 1;
110 | }
111 | ol,
112 | ul {
113 | list-style: none;
114 | }
115 | blockquote,
116 | q {
117 | quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 | content: "";
124 | content: none;
125 | }
126 | table {
127 | border-collapse: collapse;
128 | border-spacing: 0;
129 | }
130 |
--------------------------------------------------------------------------------