diff --git a/styles/styles.css b/styles/styles.css index 74ec992..0355269 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1,287 +1,298 @@ -a{ - text-decoration: none; +a { + text-decoration: none; } -body{ - /* font-family: 'Lato', sans-serif;*/ - font-family: 'Signika Negative', sans-serif; +body { + /* font-family: 'Lato', sans-serif;*/ + font-family: "Signika Negative", sans-serif; } -.content figure{ - margin: 0; +.content figure { + margin: 0; } -h1,h2,h3,h4,h5,h6{ - font-family: 'Raleway', sans-serif; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Raleway", sans-serif; } -.content h1{ - font-family: 'Kaushan Script', cursive; - color: #D74942; - font-size: 50px; - text-shadow: 4px 4px 5px rgba(0,0,0,0.5); +.content h1 { + font-family: "Kaushan Script", cursive; + color: #d74942; + font-size: 50px; + text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5); } -.content{ - text-align: center; +.content { + text-align: center; } -.cover{ - position: relative; - background: url(../images/background-1.jpg); - background-size: cover; - background-attachment: fixed; - background-repeat: no-repeat; - align-items: center; - display: flex; - height: 100vh; - justify-content: center; +.cover { + position: relative; + background: url(../images/background-1.jpg); + background-size: cover; + background-attachment: fixed; + background-repeat: no-repeat; + align-items: center; + display: flex; + height: 100vh; + justify-content: center; } -.content .icon{ - animation: float 1.5s ease-out infinite; - color: white; - font-size: 80px; +.content .icon { + animation: float 1.5s ease-out infinite; + color: white; + font-size: 80px; } -.info{ - background-color: #1c1c1d; - color: white; - padding: 20px; +.info { + background-color: #1c1c1d; + color: white; + padding: 20px; } -.info-2{ - background-color: #2196F3; - color: white; - padding: 40px; +.info-2 { + background-color: #2196f3; + color: white; + padding: 40px; } -.info-3{ - background-color: #B6B6B6; - color: white; - padding: 24px; +.info-3 { + background-color: #b6b6b6; + color: white; + padding: 24px; } .info-3 .block { - background-color: #2196F3; - margin-bottom: 1em; - padding: 1em; - border-radius: 4px; + background-color: #2196f3; + margin-bottom: 1em; + padding: 1em; + border-radius: 4px; } .info ul li { - list-style: decimal inside; - font-size: 3em; - padding: 0.4em; - background-color: #2196F3; - margin: 20px 0; + list-style: decimal inside; + font-size: 3em; + padding: 0.4em; + background-color: #2196f3; + margin: 20px 0; } .lista { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } -.lista ul li a{ - color: white; +.lista ul li a { + color: white; } .info a { - color: white; + color: white; + font-size: 20px; } -.info h2{ - font-family: 'Signika Negative', sans-serif; - text-shadow: 4px 4px 5px rgba(0,0,0,0.5); - font-size: 50px; - margin: 15px 0; - text-align: center; - text-transform: uppercase; - letter-spacing: 5px; +.info h2 { + font-family: "Signika Negative", sans-serif; + text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5); + font-size: 50px; + margin: 15px 0; + text-align: center; + text-transform: uppercase; + letter-spacing: 5px; } -.infoContent{ - display: flex; - flex-wrap: wrap; - justify-content: space-around; - text-align: center; +.infoContent { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + text-align: center; } -.infoContent .block h3{ - font-family: 'Signika Negative', sans-serif; - font-size: 25px; - margin: 5px 0 10px 0; - text-transform: uppercase; - letter-spacing: 5px; +.infoContent .block h3 { + font-family: "Signika Negative", sans-serif; + font-size: 25px; + margin: 5px 0 10px 0; + text-transform: uppercase; + letter-spacing: 5px; } .infoContent .block h3 a { - color: #ffffff; - text-shadow: 2px 2px 3px black; + color: #ffffff; + text-shadow: 2px 2px 3px black; } -.infoContent .block{ - padding: 8px; - width: 100%; +.infoContent .block { + padding: 8px; + width: 100%; } -.infoContent .block .icon-social{ - font-size: 70px; +.infoContent .block .icon-social { + font-size: 70px; } -.btn{ - font-family: 'Signika Negative', sans-serif; - padding: 10px 50px; - border-radius: 30px; - border: 2px solid #D74932; - background-color: transparent; - color: white; - font-weight: 600; - margin: 10px 0; - display: inline-block; - transition: 0.3s; - box-shadow: 0px 1px 3px black; +.btn { + font-family: "Signika Negative", sans-serif; + padding: 10px 50px; + border-radius: 30px; + border: 2px solid #d74932; + background-color: transparent; + color: white; + font-weight: 600; + margin: 10px 0; + display: inline-block; + transition: 0.3s; + box-shadow: 0px 1px 3px black; } -.btn-pint{ - color: blue; +.btn-pint { + color: blue; } -.btn:hover{ - transform: scale(1.2); - letter-spacing: 3px; - background-color: #D74932; - color: white; +.btn:hover { + transform: scale(1.2); + letter-spacing: 3px; + background-color: #d74932; + color: white; } -.fa:hover{ - transition: 0.3s; - transform: scale(1.4); - +.fa:hover { + transition: 0.3s; + transform: scale(1.4); } /*Footer*/ -footer{ - width: 100%; - clear: both; - color: #666; - background: #141419; - line-height: 40px; - overflow: hidden; +footer { + width: 100%; + clear: both; + color: #666; + background: #141419; + line-height: 40px; + overflow: hidden; } -footer .left{ - float: left; - margin-left: 20px; +footer .left { + float: left; + margin-left: 20px; } -footer .right{ - float: right; - margin-right: 20px; +footer .right { + float: right; + margin-right: 20px; } -footer ul{ - list-style: none; +footer ul { + list-style: none; } -footer ul li{ - display: inline-block; - margin-right: 5px; +footer ul li { + display: inline-block; + margin-right: 5px; } -footer ul li a{ +footer ul li a { color: #666; } -footer ul li a:hover{ - color: #666; - text-decoration: underline; +footer ul li a:hover { + color: #666; + text-decoration: underline; } -.logo{ - padding: 10px; - position: absolute; - top: 10px; - left: 10px; +.logo { + padding: 10px; + position: absolute; + top: 10px; + left: 10px; } -.git-logo, .github-logo{ - display: inline-block; - vertical-align: middle; - width: 40%; +.git-logo, +.github-logo { + display: inline-block; + vertical-align: middle; + width: 40%; } -.imagen{ - width: 60%; +.imagen { + width: 60%; } -.simbolo-mas{ - display: inline-block; - font-size: 8em; - vertical-align: middle; - color: white; +.simbolo-mas { + display: inline-block; + font-size: 8em; + vertical-align: middle; + color: white; } /* Estilos de perfil del tutor*/ .cajas { - width: 40%; - float: left; - height: 300px; - margin:2em 0; - top: 0; + width: 40%; + float: left; + height: 300px; + margin: 2em 0; + top: 0; } .cajas a { - color: white; - margin-left: 0.4em; + color: white; + margin-left: 0.4em; } .imagen { - text-align: center; + text-align: center; } .imagen img { - width: 280px; - padding: 10px; - background-color: white; - border-radius: 4px; - text-align: center; - + width: 280px; + padding: 10px; + background-color: white; + border-radius: 4px; + text-align: center; } .relleno { - clear: both; + clear: both; } .margin-left { - margin-left: 2em; + margin-left: 2em; } /* Estilos de las clases*/ .clase h3 a { - color: #FF5722 !important; + color: #ff5722 !important; } /*Animación*/ @keyframes float { - 50% { - transform: translate(0, 20px); - } + 50% { + transform: translate(0, 20px); + } } /* Media queries*/ -@media all and (min-width: 769px){ - .content h1{ - font-size: 100px; - } +@media all and (min-width: 769px) { + .content h1 { + font-size: 100px; + } - .infoContent .block{ - width: 30%; - } + .infoContent .block { + width: 30%; + } } -@media only screen and (max-width : 320px) -{ - .cajas{width: 100%} - .info{word-break: break-word} +@media only screen and (max-width: 320px) { + .cajas { + width: 100%; + } + .info { + word-break: break-word; + } } -/* Extra Small Devices, Phones */ -@media only screen and (max-width : 480px) -{ - .cajas{width: 100%} - .info{word-break: break-word} +/* Extra Small Devices, Phones */ +@media only screen and (max-width: 480px) { + .cajas { + width: 100%; + } + .info { + word-break: break-word; + } }