first commit

1 files changed, 228 insertions, 0 deletions

diff --git a/templates/sass/_front.sass b/templates/sass/_front.sass
new file mode 100644
index 0000000..4448941
--- /dev/null
+++ b/templates/sass/_front.sass
@@ -0,0 +1,228 @@
+body
+    background: #fff
+    font-family: "Open Sans", sans-serif
+    font-size: 16px
+
+.contenedor
+    width: 90%
+    max-width: 1000px
+    margin: auto
+    overflow: hidden
+
+/* ---- ---- HEADER ---- ---- */
+
+header
+    background: url("./../images/BG.jpg") #68bdea
+    background-repeat: no-repeat
+    background-position: center
+    max-height: 600px
+    .menu
+        margin: 40px 0px
+        text-align: right
+        a
+            margin: 0px 20px
+            color: #fff
+            padding-bottom: 9px
+            display: inline-block
+            text-decoration: none
+            border-bottom: 2px solid transparent
+            font-size: 1rem
+            &:hover
+                border-bottom: 2px solid #fff
+    .contenedor-texto
+        display: flex
+        justify-content: center
+        align-content: center
+        margin: 190px 0px
+        .texto
+            border: 2px solid rgba(255, 255, 255, 0.5)
+            border-radius: 3px
+            display: inline-block
+            text-align: center
+            padding: 20px 60px
+            h1, h2
+                color: #fff
+                font-weight: 300
+                margin: 0px
+            .nombre
+                margin-bottom: 10px
+                font-size: 3.125rem
+                line-height: 50px
+            .profesion
+                font-size: 1.5rem
+                line-height: 25px
+
+/* ---- ---- MAIN ---- ---- */
+
+main
+    .contenedor
+        overflow: visible
+    .acerca-de
+        text-align: center
+        .foto
+            margin-top: -60px
+            img
+                vertical-align: top
+                border-radius: 50%
+                border: 5px solid rgba(255, 255, 255, 0.2)
+        .texto
+            color: #5a5a5a
+            font-weight: 600
+            font-size: 1rem
+            line-height: 30px
+            width: 80%
+            margin: 40px auto 60px auto
+            .titulo
+                font-size: 2.125rem
+                margin-bottom: 40px
+                font-weight: 300
+                color: #dd820d
+                text-align: center
+            .bold
+                color: #3895ea
+                text-decoration: underline
+    .trabajos
+        background: #f2f2f2
+        padding: 60px 0
+        .contenedor
+            overflow: hidden
+        .titulo
+            font-size: 2.125rem
+            line-height: 34px
+            margin-bottom: 40px
+            font-weight: 300
+            color: #323068
+            text-align: center
+        .contenedor-trabajos
+            display: flex
+            flex-direction: row
+            flex-wrap: wrap
+            justify-content: space-between
+            .trabajo
+                width: 23%
+                margin-bottom: 40px
+                .thumb
+                    width: 100%
+                    margin-bottom: 10px
+                    img
+                        width: 100%
+                        vertical-align: top
+                        border-radius: 3px
+                .descripcion
+                    text-align: center
+                    .nombre
+                        font-weight: 700
+                        color: #3895ea
+                        margin-bottom: 10px
+                        a
+                            text-decoration: none
+                            color: #3895ea
+                    .categoria
+                        font-size: 0.8rem
+                        color: #636363
+
+/* ---- ---- FOOTER ---- ---- */
+
+footer
+    .contacto
+        padding: 60px 0
+        .titulo
+            font-size: 2.125rem
+            line-height: 34px
+            margin-bottom: 40px
+            font-weight: 300
+            color: #3895ea
+            text-align: center
+        .formulario
+            display: flex
+            flex-wrap: wrap
+            justify-content: space-between
+            input
+                &[type="text"], &[type="email"]
+                    background: #f3f4f7
+                    border: 2px solid #cecece
+                    border-radius: 5px
+                    padding: 15px 20px
+                    font-size: 1.125rem
+                    color: #a4a4a4
+            textarea
+                background: #f3f4f7
+                border: 2px solid #cecece
+                border-radius: 5px
+                padding: 15px 20px
+                font-size: 1.25rem
+                color: #a4a4a4
+            input
+                &[type="text"]:focus, &[type="email"]:focus
+                    border: 2px solid #3895ea
+            textarea:focus
+                border: 2px solid #3895ea
+            input
+                &[type="text"], &[type="email"]
+                    width: 45%
+                    margin-bottom: 15px
+            textarea
+                width: 100%
+                height: 100px
+                max-width: 100%
+                min-height: 100px
+                max-height: 300px
+                margin-bottom: 15px
+            .error
+                display: none
+                margin-top: 20px
+                border-radius: 3px
+                background: #fc636b
+                color: #fff
+                padding: 15px 10px
+                padding-left: 40px
+                width: 100%
+            .boton
+                margin: auto
+                background: #3895ea
+                color: #fff
+                border: none
+                border-radius: 3px
+                padding: 15px 40px
+                cursor: pointer
+                &:hover
+                    background: #387bea
+    .redes-sociales-libres
+        background: #1e2b38
+        padding: 60px 0
+        .contenedor
+            display: flex
+            justify-content: center
+        a
+            color: #fff
+            text-align: center
+            width: 100px
+            display: block
+            padding: 15px 0
+            border-radius: 3px
+            font-size: 1.8rem
+            margin: 0 20px
+        .diaspora:hover
+            background: #010101
+        .gnusocial:hover
+            background: #a42833
+        .gitlab:hover
+            background: #e24329
+        .libregit:hover
+            background: #333333
+        .mediagoblin:hover
+            background: #775fa3
+        .notabug:hover
+            background: #244664
+        .peertube:hover
+            background: #f1680d
+    .copyleft
+        background: #192633
+        padding: 5px 0
+        p
+            color: #fff
+            text-align: center
+            font-size: 0.75rem
+            a
+                color: #3895ea
+                text-decoration: none