aestrea.github.io/scratch at master · aestrea/aestrea.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
97
98
99
100
101
102
103
104
105
106
107
108
109
<!--<div id="mantra" class="carousel slide">-->
                <!--&lt;!&ndash; Indicators &ndash;&gt;-->
                <!--<ol class="carousel-indicators">-->
                    <!--<li data-target="#mantra" data-slide-to="0" class="active"></li>-->
                    <!--<li data-target="#mantra" data-slide-to="1"></li>-->
                    <!--<li data-target="#mantra" data-slide-to="2"></li>-->
                <!--</ol>-->
                <!--<div class="carousel-inner">-->
                    <!--<div class="item active">-->
                        <!--<img src="images/sun.jpg"/>-->
                        <!--<div class="container">-->
                            <!--<div class="carousel-caption">-->
                                <!--<h1>Driven by Power.</h1>-->
                                <!--<div class="caption-subheader">-->
                                    <!--<div class="overlay"></div>-->
                                    <!--<p> Power is what we need to move things around. It is our catalyst.-->
                                        <!--What lies in our will is the creative power to make a positive and significant change to the world.-->
                                    <!--</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="item">-->
                        <!--<img src="images/fire.jpg"/>-->
                        <!--<div class="container">-->
                            <!--<div class="carousel-caption">-->
                                <!--<h1>Burning with Passion.</h1>-->
                                <!--<div class="caption-subheader">-->
                                    <!--<div class="overlay"></div>-->
                                    <!--<p> Passion energizes us. It is what carries our team to the top with boundless enthusiasm.-->
                                        <!--It is the fire that fuels us to keep moving forward and to do the best in whatever we do.-->
                                    <!--</p>-->
                                 <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="item">-->
                        <!--<img src="images/plant.jpg"/>-->
                        <!--<div class="container">-->
                            <!--<div class="carousel-caption">-->
                                <!--<h1>Desire to Create.</h1>-->
                                <!--<div class="caption-subheader">-->
                                    <!--<div class="overlay"></div>-->
                                    <!--<p>Our desire for creation and success can never be satisfied. When we desire, we aspire with our whole heart.-->
                                        <!--We create with quality and we deliver with character.-->
                                    <!--</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->


                <!--</div>-->

                <!--<a class="left carousel-control" href="#mantra" data-slide="prev">-->
                    <!--<span class="icon-prev"></span>-->
                <!--</a>-->
                <!--<a class="right carousel-control" href="#mantra" data-slide="next">-->
                    <!--<span class="icon-next"></span>-->
                <!--</a>-->
                <!--&lt;!&ndash; Controls &ndash;&gt;-->

            <!--</div>-->
            <!-- /.carousel -->

            .client {
          background-color: #ffffff;
          width: 300px;
          height: 300px;
          overflow: hidden;
          margin: 0 auto;

          .logo-holder {
            width: 600px;

            -webkit-transition:all 1.0s ease-in-out;
            -moz-transition:all 1.0s ease-in-out;
            -o-transition:all 1.0s ease-in-out;
            transition:all 1.0s ease-in-out;

            .logo {
              width: 300px;
              float: left;
              img {
                .grayscale;
              }
            }
            .description {
              width: 300px;
              height: 300px;
              fl
              color: #dddddd;: #ffffff;
            }
          }

          &:hover {

            .logo-holder {
             ransform: translateX(-300px);
              -webkit300ansform: translateX(-300px);

              .logo img {
                .grayscale.disabled;
              }
            }
          }

        }