index.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <meta charset="UTF-8" />
   5 <title>Welcome to Ext JS</title>
   6 <style type="text/css">
   7
   8 * {
   9         margin: 0;
  10         padding: 0;
  11 }
  12
  13 body {
  14         background: #f7f7f7 url(welcome/images/bg-x.png) repeat-x 0 0;
  15         color: #999;
  16         font: normal 11px/1.3 Verdana, sans-serif;
  17         margin: 0 auto 0;
  18         padding: 0;
  19         width: 740px;
  20 }
  21
  22 p {
  23         margin: 0 0 1em;
  24 }
  25
  26 a:link,
  27 a:visited {
  28         color: #0464BB;
  29         text-decoration: none;
  30 }
  31
  32 a:hover,
  33 a:focus,
  34 a:active {
  35         color: #0464BB;
  36         text-decoration: underline;
  37 }
  38
  39 h1,h2,h3,h4,h5,h6 {
  40         color: #222;
  41         font-family: "Myriad Pro","Trebuchet MS","Helvetica Neue",Arial,Verdana, sans-serif;
  42         font-size: 24px;
  43         font-weight: normal;
  44         line-height: 24px;
  45         margin-bottom: 0;
  46         padding-bottom: 0;
  47 }
  48
  49 #page {
  50         background: url(welcome/images/header.png) no-repeat 50% 0;
  51 }
  52
  53 #header {
  54     display: block;
  55         height: 328px;
  56         margin: 0 auto;
  57         padding: 0;
  58         width: 620px;
  59
  60         overflow: hidden;
  61         text-indent: 150%;
  62         white-space: nowrap;
  63 }
  64
  65 div#container {
  66         margin: 0 auto;
  67         overflow: hidden;
  68         width: 740px;
  69 }
  70
  71 .section {
  72         float: left;
  73         margin-right: 40px;
  74         width: 220px;
  75 }
  76
  77 .section h2 {
  78         height: 30px;
  79         line-height: 30px;
  80         margin: 0;
  81         padding: 0;
  82         width: 100px;
  83
  84         overflow: hidden;
  85         text-indent: 150%;
  86         white-space: nowrap;
  87
  88 }
  89
  90 #learn h2 {
  91         background: url(welcome/images/h_learn.png) no-repeat 0 0;
  92 }
  93
  94 #engage h2 {
  95         background: url(welcome/images/h_engage.png) no-repeat 0 0;
  96 }
  97
  98 #license h2 {
  99         background: url(welcome/images/h_license.png) no-repeat 0 0;
 100 }
 101
 102 #engage ul li {
 103     height: 16px;
 104     line-height: 16px;
 105 }
 106
 107 #engage ul#social li a {
 108     color: #777;
 109     display: block;
 110     height: 16px;
 111     line-height: 16px;
 112     margin: 6px 0 0;
 113     padding-left: 22px;
 114     text-decoration: none;
 115 }
 116
 117 #engage ul#social li a span {
 118     color: #0464BB;
 119     font-weight: bold;
 120     text-decoration: none;
 121 }
 122
 123 #engage ul#social li a:hover {
 124     color: #777;
 125     text-decoration: none;
 126 }
 127
 128 #engage ul#social li a:hover span {
 129     color: #0464BB;
 130     text-decoration: underline;
 131 }
 132
 133 #engage a#join_us {
 134     background: url(welcome/images/button_join_us.png) no-repeat 0 0;
 135     display: block;
 136     height: 27px;
 137
 138     margin: 0 32px 16px 0;
 139     padding: 0;
 140
 141     width: 81px;
 142
 143     overflow: hidden;
 144     text-indent: 150%;
 145     white-space: nowrap;
 146 }
 147
 148 #engage a#join_us:hover,
 149 #engage a#join_us:active {
 150     background: url(welcome/images/button_join_us.png) no-repeat 0 -27px;
 151 }
 152
 153 #engage a#twitter {
 154     background: url(welcome/images/social_sprite.gif) no-repeat 0 0;
 155 }
 156
 157 #engage a#twitter:hover {
 158     background: url(welcome/images/social_sprite.gif) no-repeat 0 -16px;
 159 }
 160
 161 #engage a#tumblr {
 162     background: url(welcome/images/social_sprite.gif) no-repeat 0 -32px;
 163 }
 164
 165 #engage a#tumblr:hover {
 166     background: url(welcome/images/social_sprite.gif) no-repeat 0 -48px;
 167 }
 168
 169 #engage a#facebook {
 170     background: url(welcome/images/social_sprite.gif) no-repeat 0 -64px;
 171 }
 172
 173 #engage a#facebook:hover {
 174     background: url(welcome/images/social_sprite.gif) no-repeat 0 -80px;
 175 }
 176
 177 #engage a#linkedin {
 178     background: url(welcome/images/social_sprite.gif) no-repeat 0 -128px;
 179 }
 180
 181 #engage a#linkedin:hover {
 182     background: url(welcome/images/social_sprite.gif) no-repeat 0 -144px;
 183 }
 184
 185 #engage a#blog {
 186     background: url(welcome/images/social_sprite.gif) no-repeat 0 -96px;
 187 }
 188
 189 #engage a#blog:hover {
 190     background: url(welcome/images/social_sprite.gif) no-repeat 0 -112px;
 191 }
 192
 193 #license {
 194         margin-right: 0;
 195 }
 196
 197 ul,
 198 ul li {
 199         list-style: none;
 200         margin: 0;
 201         padding: 0;
 202 }
 203
 204 #learn ul li,
 205 #license ul li {
 206         background: url(welcome/images/li.png) no-repeat 1px 2px;
 207         padding: 0 0 0.5em 10px;
 208         margin-left: 0px;
 209 }
 210
 211 div#communication {
 212         background: url(welcome/images/comm.png) no-repeat 50% 0;
 213         height: 40px;
 214         margin: 18px auto 0;
 215         padding: 18px 0 32px;
 216         text-align: center;
 217         width: 720px;
 218 }
 219
 220 div#communication p {
 221         color: #222;
 222         font-family: "Myriad Pro","Trebuchet MS","Helvetica Neue",Arial,Verdana, sans-serif;
 223         font-size: 13px;
 224         font-weight: normal;
 225         height: 16px;
 226         line-height: 16px;
 227 }
 228
 229 div#communication p span {
 230         display: block;
 231         height: 28px;
 232         margin-right: 12px;
 233 }
 234
 235 div#communication input#MERGE0 {
 236         padding: 2px;
 237 }
 238
 239 div#jobs p {
 240         font-family: "Myriad Pro","Trebuchet MS","Helvetica Neue",Arial,Verdana, sans-serif;
 241         font-size: 13px;
 242         font-weight: normal;
 243         height: 12px;
 244         line-height: 12px;
 245         margin: 22px auto;
 246         text-align: center;
 247         width: 720px;
 248 }
 249
 250 div#jobs p strong {
 251         color: #222;
 252 }
 253
 254 </style>
 255
 256 <!--[if lte IE 6]>
 257 <style type="text/css">
 258
 259 body {
 260         background: #f7f7f7;
 261 }
 262
 263 #page {
 264         background: url(welcome/images/header_ie6.png) no-repeat 50% 0;
 265 }
 266
 267 #learn h2 {
 268         background: url(welcome/images/h_learn_ie6.png) no-repeat 0 0;
 269 }
 270
 271 #engage h2 {
 272         background: url(welcome/images/h_engage_ie6.png) no-repeat 0 0;
 273 }
 274
 275 #license h2 {
 276         background: url(welcome/images/h_license_ie6.png) no-repeat 0 0;
 277 }
 278
 279
 280 </style>
 281 <![endif]-->
 282
 283 </head>
 284 <body>
 285 <div id="page">
 286 <a id="header" class="png" href="http://www.extjs.com/"><strong>Welcome to Ext JS</strong>&nbsp;Thank you for downloading Ext JS. With a community of over one million developers and our robust family of Extware products, Ext JS is the leader in Javascript application development.</a>
 287
 288 <div id="container">
 289 <div id="learn" class="section">
 290         <h2>Learn</h2>
 291         <p>Use the included files to <a href="examples/index.html">view samples</a> and our <a href="http://www.extjs.com/deploy/dev/docs/">API documentation</a>.</p>
 292         <p>For advanced, hands-on support, please see our premium <a href="http://extjs.com/store">support subscriptions</a>. Larger organizations can use <a href="http://www.extjs.com/support/">our enterprise training and services</a>.</p>
 293         <ul>
 294                 <li><a href="examples/index.html" target="_blank">Samples</a></li>
 295                 <li><a href="http://extjs.com/learn" target="_blank">Wiki</a></li>
 296                 <li><a href="http://extjs.com/learn/Ext_FAQ" target="_blank">FAQ</a></li>
 297         </ul>
 298 </div>
 299
 300 <div id="engage" class="section">
 301         <h2>Engage</h2>
 302         <p>Our <a href="http://www.extjs.com/forum/">community forums</a> have over 100,000 registered users and are a great place to ask questions and interact with other Ext JS developers.</p>
 303
 304         <a href="http://www.extjs.com/forum/" id="join_us">Join Us</a>
 305
 306         <ul id="social">
 307                 <li><a href="http://twitter.com/extjs" id="twitter"><span>Follow @extjs</span> on Twitter</a></li>
 308                 <li><a href="http://extjs.tumblr.com/" id="tumblr"><span>Check out</span> our new Tumblog</a></li>
 309                 <li><a href="http://www.facebook.com/pages/Ext-JS/96223925772" id="facebook"><span>Become a fan</span> on Facebook</a></li>
 310                 <li><a href="http://j.mp/ext-in" id="linkedin"><span>Network with us</span> on LinkedIn</a></li>
 311         <li><a href="http://www.extjs.com/blog/" id="blog"><span>Subscribe</span> to the official blog</a></li>
 312         </ul>
 313 </div>
 314
 315 <div id="license" class="section">
 316         <h2>License</h2>
 317         <p>Ext JS is <a href="http://www.extjs.com/company/dual.php">dual licensed</a>. This means:</p>
 318         <ul>
 319                 <li>Free to use and test in your local development environment.</li>
 320                 <li>Free to use in your open source projects.</li>
 321                 <li>Purchase a developer license if you don&rsquo;t plan on releasing your website or application&rsquo;s code as open source.</li>
 322         </ul>
 323         <p>To purchase a commercial license, please see our <a href="http://www.extjs.com/store/extjs/">pricing page</a>.</p>
 324 </div>
 325 </div>
 326
 327 <div id="communication">
 328     <form action="http://extjs.us1.list-manage.com/subscribe/post" method="post">
 329         <p><label for="MERGE0"><span>Sign up to stay in the loop:</span>
 330             <input name="u" type="hidden" value="fb30e9d0e8ab5e66a19398a14" />
 331             <input name="id" type="hidden" value="0d77ae4ac0" />
 332             <input name="orig-lang" type="hidden" value="1" />
 333             <input id="MERGE0" name="MERGE0" type="email" autofocus="true" placeholder="johndoe@example.com" size="25" />
 334             <input id="submit" name="submit" type="submit" value="Subscribe" />
 335         </label></p>
 336     </form>
 337 </div>
 338
 339 <div id="jobs">
 340         <p><strong>Looking for a job?</strong> Check out our <a href="http://jobs.extjs.com/">Ext Job Board</a>, where companies worldwide seek Ext developers.</p>
 341 </div>
 342 </div>
 343 </body>
 344 </html>