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