lozanotux.github.io/index.html at master · lozanotux/lozanotux.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0001, minimum-scale=1.0001, maximum-scale=1.0001, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>J&J Systems</title>
    <link rel="apple-touch-icon" href="imgs/apple-touch-57px.png"/>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" href="css/estilos.css">
	<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <!--MOBILE MENU-->
    <nav class="navbar navbar-inverse visible-xs" id="mobile-nav">
      <div class="">
        <div class="navbar-header">
            <center>
                <div class="mobile-header">
                </div>
            </center>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a id="activo" href="/">J&J Systems</a></li>
            <li><a href="/nosotros"><i class="fa fa-users margen-icon" aria-hidden="true"></i> Nosotros</a></li>
            <li><a href="/portfolio"><i class="fa fa-suitcase"></i> Portfolio</a></li>
            <li><a href="/contacto"><i class="fa fa-envelope margen-icon" aria-hidden="true"></i> Contacto</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- MENU DESKTOP AND TABLET -->
    <div class="menu">
        <nav class="padding-largo text-center visible-sm visible-md visible-lg" id="navegacion">
            <div class="navegacion a-la-izquierda">
                <a href="/">J&J Systems</a>
            </div>
            <ul class="sin-lista a-la-derecha arriba-detodo">
                <li class="inline-block espacio-derecha"><a href="/nosotros"><i class="fa fa-users margen-icon" aria-hidden="true"></i>
 Nosotros</a></li>
                <li class="inline-block espacio-derecha"><a href="/portfolio"><i class="fa fa-suitcase"></i> Portfolio</a></li>
                <li class="inline-block"><a href="/contacto"><i class="fa fa-envelope margen-icon" aria-hidden="true"></i>
 Contacto</a></li>
            </ul>
        </nav>
    </div>
    <div class="main ten-sombra-interna ten-imagen-fondo">
        <div class="col-xs-12 col-sm-10 col-md-8 center-block quitar-float espacio-arriba text-center">
            <h1 class="pacifico muy-grande margen-compensador animated zoomInDown visible-sm visible-md visible-lg">J&J</h1>
            <h1 class="pacifico muy-grande margen-compensador-m animated zoomInDown visible-xs">J&J</h1>
            <h2 class="pacifico grande sin-espacio-arriba animated fadeInDown retrasar-1s visible-sm visible-md visible-lg">Systems</h2>
            <h2 class="pacifico grande-m sin-espacio-arriba animated fadeInDown retrasar-1s visible-xs">Systems</h2>
            <div class="animated fadeInDown margen-arriba retrasar-1p5s">
                <h2>Las Mejores Paginas Web A Su Medida</h2>
                <h3>Generando Tu Conexión A La <a class="se-azul sin-decoracion brillar-en-azul" href="#Tecnologia">Tecnología</a></h3>
            </div>
        </div>
    </div>
    <div id="Tecnologia" class="container text-center">
        <h1 class="margen-interlineado"><strong>Trabajamos Con Tecnología De Punta</strong></h1>
        <div class="">
                <div class="col-sm-6 col-md-4">
                    <img src="imgs/html5.png" alt="HTML5" class="img-responsive img-centro" width="128">
                    <p class="justificado">
                        HTML5 mejora la estructura de la información, amplia las funcionalidades de formularios, la capacidad de
                        incluir elementos multimedia y gráficos de manera nativa (sin necesidad de <a href="http://www.adobe.com/es/products/flashplayer.html" target="_blank">Flash</a>). Esto conlleva un poder
                        y una capacidad enorme que hace que su página sea mas portable entre diversos dispositivos.
                    </p>
                </div>
        <div class="col-xs-12 separador visible-xs"></div>
                <div class="col-sm-6 col-md-4">
                    <img src="imgs/css3.png" alt="CSS3" class="img-responsive img-centro" width="128">
                    <p class="justificado">
                        CSS3 mejora la visualización y permite que su página web sea mucho más atractiva y adaptable a todo tipo de dispositivos (tablets, smartphones, PC, etc). Lo que permite un comportamiento <a href="https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=es-419" target="_blank">responsivo</a> y dinámico haciendo
                        más accesible el modo en que el contenido se muestra.
                    </p>
                </div>
        <div class="col-xs-12 separador visible-xs"></div>
        <div class="col-sm-12 separador visible-sm"></div>
                <div class="col-sm-6 col-md-4">
                    <img src="imgs/js.png" alt="JS" class="img-responsive img-centro" width="128">
                    <p class="justificado">
                        JavaScript permite que usted goce de interactividad y excelentes efectos especiales en su página web lo que abre un abanico de posibilidades y un sin fin de recursos que dan paso a la creatividad para transmitir mejor los mensajes que usted desea hacer llegar a sus lectores.
                    </p>
                </div>
        <div class="col-xs-12 separador visible-xs"></div>
        <div class="col-md-12 separador visible-md visible-lg"></div>
                <div class="col-sm-6 col-md-4">
                    <img src="imgs/bootsrap.png" alt="Bootstrap" class="img-responsive img-centro" width="128">
                    <p class="justificado">
                        Bootstrap (de la mano de <a href="https://twitter.com/?lang=es" target="_blank">Twitter</a>) una manera inteligente de construir su página web con un diseño innovador
                        y organización de los elementos de una manera estratégica para estar al frente de sus necesidades y sacar el mejor provecho. Vive la mejor experiencia con interfaces de usuarios extraordinarias!
                    </p>
                </div>
        <div class="col-xs-12 separador visible-xs"></div>
        <div class="col-sm-12 separador visible-sm"></div>
                <div class="col-sm-6 col-md-4">
                    <img src="imgs/php.png" alt="PHP" class="img-responsive img-centro" width="128">
                    <p class="justificado">
                        PHP se utiliza para generar páginas web dinámicas, para interactuar con el usuario. Necesita guardar información en una base de datos? O hacer un motor de búsquedas? o tal vez formularios para que
                        los usuarios aporten datos? elija PHP y aproveche todo el potencial que ofrece.
                    </p>
                </div>
        <div class="col-xs-12 separador visible-xs"></div>
                <div class="col-sm-6 col-md-4">
                    <img src="imgs/google.png" alt="Google" class="img-responsive img-centro" width="128">
                    <p class="justificado">
                        Usamos todas las <a href="https://cloud.google.com/?hl=es-ar&utm_source=google&utm_medium=cpc&utm_campaign=latam-AR-all-pt-dr-bkws-all-all-trial-b-latam-1002243-LUAC0000361&utm_content=text-ad-none-any-DEV_c-CRE_204791176530-ADGP_BKWS%20%7C%20Multi%20~%20Google%20Services-KWID_43700022305035335-kwd-332718162164-userloc_1001773&utm_term=KW_%2Bgoogle%20%2Bservices-ST_%2Bgoogle%20%2Bservices&dclid=CJ6z7O_vn9YCFUYoHwodGKoBnw" target="_blank">tecnologías que brinda Google</a> para sacar el máximo partido a la web. Aproveche los servicios
                        de Posicionamiento en Buscadores, Geolocalización y Mapas, Traducción e Idiomas, Tipografía y Fuentes, Paleta de Colores, etc. No se quede atrás!
                    </p>
                </div>
        </div>
    </div>
    <!--FOOTER DESKTOP-->
    <footer id="pie" class="container-fluid text-center">
            <p>Copyright &copy;
                <script language="JavaScript" type="text/javascript">
                    now = new Date
                    theYear=now.getYear()
                    if (theYear < 1900)
                    theYear=theYear+1900
                    document.write(theYear)
                </script>
                Todos los derechos reservados por Juan Pablo Lozano</p>
    </footer>
</body>
</html>