xtutor.github.io/index.html at master · xtutor/xtutor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
    <title>XTUTOR</title>
    <meta name="description" content="XTUTOR" />
    <meta name="keywords" content="XTUTOR,X导师"/>
    <link href="/githuber/assets/fonts/roboto/v14/stylesheet.css" rel="stylesheet"/>
    <style>
        *, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        .clearfix:before,
        .clearfix:after {
            display: block;
            content: " ";
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        html,body{
            height:100%;
            display:block;
        }
        body{
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            color:#FFF;
            font-size:16px;
            background:#23232e;
            padding:30px 0;
        }
        a{color:#48b983;}
        img{
            max-width:100%;
        }
        ol{
            list-style:decimal inside;
        }
        h1,h2,h3,h4{font-family:robotothin;font-weight:100;text-transform:uppercase;}
        h1 {font-size:3.2em;}
        h2 {font-size:2.4em;margin-bottom:10px;}
        h3{font-size:2em;margin-bottom:10px;}
        h4{margin-bottom:10px;}
        .pull-left{float:left;display:inline;}
        .pull-right{float:right;display:inline;}
        .main{max-width:750px;margin:0 auto;padding:15px;}
        .vcard{padding:10px;border:1px solid #ddd;background:#f6f6f6;color:#333;margin-bottom:20px;}
        .sec{margin-bottom:20px;}
        .pic {width:180px;margin-right:15px;}
        .data {max-width:500px;}
        .pic img{width:100%;border-radius:50%;border:1px solid rgba(0,0,0,.1);}
    </style>
</head>
<body>

    <div class="main">
        <div class="sec vcard clearfix">
            <div class="pull-left pic">
                <img src="assets/img/brainstorm.jpg" alt="brainstrom xtutor"/></a>
            </div>
            <div class="pull-left data">
                <h1>XTUTOR</h1>
                <h3>Shenzhen, China</h3>
                <h4><a href="http://xtutor.github.io/">xtutor.github.io</a></h4>
                <p>
                    A series of tutorials for web front-end development, freelance and open source.
                </p>
            </div>
        </div>
        <div class="sec projects">
            <h2>Tutorials</h2>
            <ol>
                <li>Dec. 2014, <a href="/githuber">《Githuber》</a>, by LV.SAMA</li>
                <li>Feb. 2015, <a href="/vim">《VIM Cheat Sheet》</a>, coming soon.</li>
            </ol>
        </div>
        <div class="sec joinus">
            <h2>Join us</h2>
            <ol>
                <li>Fork our github project <a href="https://github.com/xtutor/xtutor.github.io.git" target="_blank">xtutor.github.io</a></li>
                <li>Add your tutorial's link in index.html</li>
                <li>Commit, push and make a pull request</li>
            </ol>
        </div>
    </div>

</body>
</html>