iamsquare.github.io/index.html at master · iamsquare/iamsquare.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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>I am Square</title>
    <link rel="favicon" type="image/x-icon" sizes="16x16" href="favicon.ico"/>
    <link rel="favicon" type="image/x-icon" sizes="16x16" href="images/favicon-16x16.png"/>
    <link rel="favicon" type="image/x-icon" sizes="32x32" href="images/favicon-32x32.png"/>
    <link rel="favicon" type="image/x-icon" sizes="96x96" href="images/favicon-96x96.png"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/devicons.min.css"/>
    <link rel="stylesheet" href="css/alot.min.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
  </head>
  <body>
    <div id="main">
      <div class="container">
        <div id="main-logo"></div>
        <h1>Hi, <span class="accent">I am Square</span>. I've always been interested in <span class="accent">Digital Graphic</span> and <span class="accent">Web Design</span>. When I am given a task be <span class="accent">damn sure</span> I will put <a href="http://hyperboleandahalf.blogspot.it/2010/04/alot-is-better-than-you-at-everything.html" target="_blank"><span class="accent">alot <i class="alot"></i></span></a> of effort into it.</h1>
        <div id="main-nav"><a class="button button-important" href="https://github.com/squaremarco/" target="_blank"><i class="fa fa-github-alt"></i> Check my repos</a><a class="button" href="mailto:sq@iamsquare.it/" target=""><i class="fa fa-envelope"></i> sq@iamsquare.it</a><a class="button" href="https://www.linkedin.com/in/squaree" target="_blank"><i class="fa fa-linkedin"></i> </a><a class="button" href="https://www.facebook.com/iamsquar3" target="_blank"><i class="fa fa-facebook"></i> </a>
        </div>
      </div>
    </div>
    <div id="how">
      <div class="container">
        <div class="flex-col">
          <div class="text-container">
            <h2>How did you do that?</h2>
          </div>
        </div>
        <div class="flex-col">
          <div class="text-container">
            <h3>Brainstorm</h3>
            <p>I gather as many infos as possible about my client needs and desires. This allows to establish a collaborative relationship between the two parts.</p>
          </div>
          <div class="icon-container" id="icon-brainstorm"></div>
        </div>
        <div class="flex-col">
          <div class="text-container">
            <h3>Draft</h3>
            <p>Just like a building, the designing phase is as important as the realization. It is much easier to work following a plan rather than jumping towards an unknown goal.</p>
          </div>
          <div class="icon-container" id="icon-draft"></div>
        </div>
        <div class="flex-col">
          <div class="text-container">
            <h3>Refining</h3>
            <p>Colors and fonts are carefully selected to create harmony and make navigation enjoyable. Each page has a dynamic layout, necessary for cross-platform browsing.</p>
          </div>
          <div class="icon-container" id="icon-refining"></div>
        </div>
        <div class="flex-col">
          <div class="text-container">
            <h3>Shipping</h3>
            <p>Before handing over the site to the customer I always make sure that everything is pixel perfect, reputation is everything to me!</p>
          </div>
          <div class="icon-container" id="icon-shipping"></div>
        </div>
      </div>
    </div>
    <div id="description">
      <div class="container">
        <div id="portrait"></div>
        <h1><span class="accent">Back in 2004</span> my family decided to subscribe to a DSL plan. I was twelve and from that moment <span class="accent">my life completely changed</span>. Since then it has been <span class="accent">entirely dedicated to the web</span> and its various components. Currently I'm a CE graduate that likes to <span class="accent random"></span>.</h1>
      </div>
    </div>
    <div id="powered">
      <div class="container">
        <p>Powered by:&nbsp;<i class="devicons devicons-html5"></i><i class="devicons devicons-css3"></i><a href="http://sass-lang.com/" target="_blank"><i class="devicons devicons-sass"></i></a><i class="devicons devicons-js"></i><a href="http://jquery.com/" target="_blank"><i class="devicons devicons-jquery"></i></a><a href="https://angularjs.org/" target="_blank"><i class="devicons devicons-angular"></i></a><a href="http://www.adobe.com/products/photoshop.html" target="_blank"><i class="devicons devicons-photoshop"></i></a><a href="http://www.adobe.com/products/illustrator.html" target="_blank"><i class="devicons devicons-illustrator"></i></a><a href="http://gulpjs.com/" target="_blank"><i class="devicons devicons-gulp"></i></a><a href="https://www.npmjs.com/" target="_blank"><i class="devicons devicons-npm"></i></a>
        </p>
      </div>
    </div>
    <div id="footer">
      <div class="container">
        <div class="col"><a class="button" href="https://github.com/squaremarco/" target="_blank"><i class="fa fa-github-alt"></i> </a><a class="button" href="mailto:sq@iamsquare.it" target=""><i class="fa fa-envelope"></i> sq@iamsquare.it</a><a class="button" href="https://www.linkedin.com/in/squaree" target="_blank"><i class="fa fa-linkedin"></i> </a><a class="button" href="https://www.facebook.com/iamsquar3/" target="_blank"><i class="fa fa-facebook"></i> </a>
        </div>
        <div class="col">
          <p>iamsquare.it &copy;&nbsp;<span class="date"></span></p>
        </div>
      </div>
    </div>
    <script src="js/vendor.bundle.js"></script>
    <script src="js/app.bundle.js"></script>
  </body>
</html>