index.html

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