git.sur5r.net Git - i3/i3.github.io/blob - screenshots/index.html

   1 ---
   2 layout: default
   3 title: Screens
   4 group: Screens
   5 require_jquery: true
   6 javascript: gallery.min.2.js
   7 js_callback: initGallery();
   8 ---
   9 <div id="mask">
  10 </div>
  11
  12 <div id="loading">
  13 </div>
  14
  15 <div id="bigimg">
  16     <div id="maskouter">
  17         <div id="maskinner">
  18             <div id="imgleft">
  19             </div>
  20             <div id="imgright">
  21             </div>
  22             <div id="imgdesc">
  23             <span class="filename">i3-2.png</span>
  24             <span class="description">VIM, MPlayer</span>
  25             </div>
  26         </div>
  27     </div>
  28 </div>
  29
  30 <div id="content">
  31
  32 <h2>Latest Videos</h2>
  33
  34 <div id="screencasts">
  35     <div class="video clearfix">
  36         <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU" title="Watch i3 screencast v4.1 on YouTube">
  37         <img src="/img/screencast-3.d.thumb.png" width="240" height="150" border="0" alt="Screencast thumbnail" style="float: left">
  38         </a>
  39         <div style="float: left">
  40             <strong>Screencast of v4.1</strong>
  41             <p>
  42             This video (5 min) shows the basic features of i3:
  43             </p>
  44             <ul>
  45                 <li>Layouts, Focus, Moving, Workspaces</li>
  46                 <li>dmenu, Floating Windows, Resizing</li>
  47             </ul>
  48             <p>
  49             <a href="http://www.youtube.com/watch?v=Wx0eNaGzAZU">Watch it on YouTube</a> or <a href="/screenshots/screencast-4.1.mp4">download it (18 MB)</a>.
  50             </p>
  51         </div>
  52     </div>
  53
  54     <br style="clear: both">
  55     <br>
  56
  57     <div class="video clearfix">
  58         <a href="http://www.youtube.com/watch?v=AWA8Pl57UBY" title="Watch i3 container and tree data structure screencast on YouTube">
  59         <img src="/img/screencast-cons.thumb.jpg" width="240" height="135" border="0" alt="tech talk thumbnail" style="float: left">
  60         </a>
  61         <div style="float: left">
  62             <strong>Screencast: Containers and tree data structure</strong>
  63             <p style="white-space: pre">Explains how i3 works internally so
  64 that you can fully understand what's going on. I expect you to have
  65 watched the screencast on v4.1 already.</p>
  66             <p>
  67             <a href="http://www.youtube.com/watch?v=AWA8Pl57UBY">Watch it on YouTube</a>
  68             </p>
  69         </div>
  70     </div>
  71
  72     <br style="clear: both">
  73     <br>
  74
  75     <div class="video clearfix">
  76         <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM" title="Watch i3 google tech talk on YouTube">
  77         <img src="/img/techtalk.thumb.jpg" width="240" height="135" border="0" alt="tech talk thumbnail" style="float: left">
  78         </a>
  79         <div style="float: left">
  80             <strong>Google Tech Talk about i3</strong>
  81             <p style="white-space: pre">This video (1 hour) is an introduction to i3, explaining our
  82 motivation, a bit of history, some cool features and how we
  83 develop.</p>
  84             <p>
  85             <a href="http://www.youtube.com/watch?v=QnYN2CTb1hM">Watch it on YouTube</a>
  86             </p>
  87         </div>
  88     </div>
  89 </div>
  90
  91 <h2>Screenshots</h2>
  92
  93 <p>
  94 To get a quick impression of i3, have a look at these screenshots.
  95 </p>
  96
  97 <div class="screenshots clearfix">
  98 {% include screenshot.html link="/screenshots/i3-1.png" thumb="/screenshots/i3-1.thumb.png" description="Vimperator, VIM, MPlayer, dzen2" %}
  99 {% include screenshot.html link="/screenshots/i3-2.png" thumb="/screenshots/i3-2.thumb.png" description="Vimperator, VIM, xpdf, bc" %}
 100 {% include screenshot.html link="/screenshots/i3-3.png" thumb="/screenshots/i3-3.thumb.png" description="PCManFM, ROXTerm, evince" %}
 101 <br>
 102 {% include screenshot.html link="/screenshots/i3-4.png" thumb="/screenshots/i3-4.thumb.png" description="i3 logo out of terminals" %}
 103 {% include screenshot.html link="/screenshots/i3-6.png" thumb="/screenshots/i3-6.thumb.png" description="VIM, zsh, i3status (FreeBSD)" %}
 104 {% include screenshot.html link="/screenshots/i3-7.png" thumb="/screenshots/i3-7.thumb.png" description="GIMP, urxvt (both floating)" %}
 105 <br>
 106 {% include screenshot.html link="/screenshots/i3-5.png" thumb="/screenshots/i3-5.thumb.png" description="mc, xosview, MPlayer, irssi, gajim" %}
 107 {% include screenshot.html link="/screenshots/i3-8.jpg" thumb="/screenshots/i3-8.thumb.jpg" description="git, synergy, htop, urxvt" %}
 108 {% include screenshot.html link="/screenshots/i3-9.png" thumb="/screenshots/i3-9.thumb.png" description="VIM, git, MPlayer, i3bar" %}
 109 <br>
 110 {% include screenshot.html link="/screenshots/i3-10.png" thumb="/screenshots/i3-10.thumb.png" description="Right-to-left titles" %}
 111 {% include screenshot.html link="/screenshots/i3-11.jpg" thumb="/screenshots/i3-11.thumb.jpg" description="dzen2, VIM, bash, top" %}
 112 </div>
 113
 114 </div>