Showing
4 changed files
with
65 additions
and
11 deletions
... | ... | @@ -11,9 +11,10 @@ App.init = -> |
11 | 11 | App.scroll = -> |
12 | 12 | v_scroll = $(document).scrollTop() |
13 | 13 | section = Math.floor(v_scroll / $(window).innerHeight()) |
14 | + bg_pos = (v_scroll-(section*$(window).innerHeight()))/2 | |
14 | 15 | $($(".section")[section]).css( |
15 | - "background-position", "center -" + | |
16 | - (v_scroll-(section*$(window).innerHeight()))/2 + "px") | |
16 | + "background-position", | |
17 | + "center -" + bg_pos + "px") | |
17 | 18 | |
18 | 19 | $(document).on "page:change", -> |
19 | 20 | App.init() |
... | ... |
... | ... | @@ -5,6 +5,7 @@ |
5 | 5 | |
6 | 6 | * { |
7 | 7 | font-family: Verdana, sans-serif; |
8 | + color: rgb(41, 49, 51); | |
8 | 9 | margin: 0; |
9 | 10 | padding: 0; |
10 | 11 | } |
... | ... | @@ -86,21 +87,60 @@ a:visited { |
86 | 87 | width: 100%; |
87 | 88 | height: 100%; |
88 | 89 | } |
89 | - | |
90 | 90 | #section1 { |
91 | 91 | background: image_url("resized/blown.jpg") fixed; |
92 | 92 | background-position: center top; |
93 | 93 | } |
94 | - | |
94 | +#section1,#section3 .content { | |
95 | + color: rgb(214,206,204); | |
96 | +} | |
95 | 97 | #section2,#section4 { |
96 | 98 | background-color: rgb(255,255,255); |
97 | 99 | } |
98 | - | |
99 | 100 | #section3 { |
100 | 101 | background: image_url("resized/beach3.jpg") fixed; |
101 | 102 | background-position: center top; |
102 | 103 | } |
103 | 104 | |
105 | +#footer { | |
106 | + background: rgb(22, 27, 28); | |
107 | + | |
108 | + position: relative; | |
109 | + width: 100%; | |
110 | + height: 40px; | |
111 | + | |
112 | + color: rgb(255,255,255); | |
113 | +} | |
114 | + | |
115 | +#about { | |
116 | + display: block; | |
117 | + list-style: none; | |
118 | + text-align: justify; | |
119 | + width: 100%; | |
120 | + height: 30%; | |
121 | + top: 50%; | |
122 | + transform: translate(0, -50%); | |
123 | + position: absolute; | |
124 | +} | |
125 | +#about:after { | |
126 | + display: inline-block; | |
127 | + width: 100%; | |
128 | + height: 0; | |
129 | + content: ''; | |
130 | +} | |
131 | +#about .box { | |
132 | + display: inline-block; | |
133 | + width: 30%; | |
134 | + height: 100%; | |
135 | + overflow: hidden; | |
136 | + border-style: solid; | |
137 | + border-color: rgba(100,190,12,0.7); | |
138 | + border-radius: 10px; | |
139 | + border-width: 3px; | |
140 | + background-color: rgba(255,255,255,0.7); | |
141 | + box-shadow: 10px 10px 10px rgba(0,0,0,0.7); | |
142 | +} | |
143 | + | |
104 | 144 | .section { |
105 | 145 | position: relative; |
106 | 146 | height: 100%; |
... | ... | @@ -110,9 +150,11 @@ a:visited { |
110 | 150 | |
111 | 151 | .content { |
112 | 152 | position: absolute; |
153 | + width: 90%; | |
154 | + height: 90%; | |
113 | 155 | top: 50%; |
114 | - height: 400px; | |
115 | - padding: 30px; | |
156 | + left: 50%; | |
157 | + transform: translate(-50%, -50%); | |
116 | 158 | z-index: 1; |
117 | 159 | } |
118 | 160 | .text { |
... | ... |
1 | 1 | <div id="section1" class="section"> |
2 | 2 | <div class="content text"> |
3 | - <h1>About</h1> | |
4 | - <p> | |
5 | - Some other stuff here... | |
6 | - </p> | |
3 | + <div id="about"> | |
4 | + <div class="box"> | |
5 | + <h1>Free as in "Free speach"</h1> | |
6 | + </div> | |
7 | + <div class="box"> | |
8 | + <h1>Custom Code</h1> | |
9 | + </div> | |
10 | + <div class="box"> | |
11 | + <h1>Linux Consulting</h1> | |
12 | + </div> | |
13 | + </div> | |
7 | 14 | </div> |
8 | 15 | </div> |
9 | 16 | <div id="section2" class="section"> |
... | ... |
Please
register
or
login
to post a comment