From c008df582fe0d967a89c05986ea11606361fa896 Mon Sep 17 00:00:00 2001 From: Leonardo Menezes Vaz Date: Sun, 14 Jan 2024 21:25:05 -0300 Subject: [PATCH] Tchelinux Website --- favicon.ico | Bin 0 -> 3366 bytes index.html | 111 +++++++++++ style.css | 554 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 665 insertions(+) create mode 100644 favicon.ico create mode 100644 index.html create mode 100644 style.css diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..f48665f514c16d0478ab872700ed5ba1b914b2c7 GIT binary patch literal 3366 zcmd6pdsI~Q7RP_ggBc$%BM*l_7-%ja10n)GfMGxaM1^Ej6hU3L7{p}El0v&YEL=X8 zX?QKyO|zE0ySI`umzj03g=Ooe*9w$;@ESs18u*xCoPqh?eGU$3Ya;opyJzjQ&-tCb zKYO1&zu)g1#+;addHFH2{;XvjV?m5DKR*Fo(})ve&f^)IOk-Z88dA>her0YaB4@Va zsmX14TiIf(8hf;L;YhJ#&zftLKfx5)j+YZUz?H&u-53suY=khX8HU+yI6~uXX2&lKw=v{ z54wzGE{|`W_4L#xK>HJrLF|VqM_dOGN-;{(h+{wE#Id7jYHC75Lj$U-t6?x0AeYI& z1R{)UxQ7ppucbKRTinj!`AO$(m1^>tMZHL&y6O2akMd|cfxxrZ5EP?DZCxFHD`(D} z!OW>sAozLp@2O96I7>nE;nm9p8uCob2D?`Rk?& z^%(or)uH~=GpA7PT>W?WW_c~*#-21)di^la6L`UfX_O<5a-`5ROn>(?o*fvSisC(o z(0lWiqa3z?ANp(g1I+|C|Vpbo$7@HE(*5a)dVm(U;5+ zE4&dHm5i*Cx3J*pSMkB|Q;zshpSQrDY9He{k*~*R!BX!3z07e#8@M4_A79>L?0A<* z{>{x($~rUL^iMrI7*9&?h}w!P&N>%-;Shb4q$rWE__>0&2udM>k8L2PK%0!pHc~-P{%*9!Q$%fs7nxeg!TmCj8^t({=JxyZA(zmLhz!Vb~ix9OM5()K)F-QI3 zQ&JDRg5x!a+O5H?16pWaNkqhkS%`jgi9@=@Vlids=2)}|T7*vxhg2%t~%`33g;y%|D59rpc$76~Ya)r^m-K5Wg&%|*(b zRLE%0AjYaYjFC(r-8Ajoy15^=KJ0wqD8|bUVN$?x%$;{0?Ty#a_j3>BF!iRV&+iTl z3WB?b2iKeba!_Yy=aJatv{b$S3DglsuwzRd9`OGZAz?L0oc%rW^H2Bq z_ki`SL^QkefKYOBuzHyU94?gEx%eg%a`6`Y+vgSXF%HnEtW zGn?;|IqW8p=FW2wyoQh7_-1ffLobpWZ{l3bMWC||A0K$P+f!OG=;C?;B60Ak;h<5S zXg$)h*44`YeQl7Pya85k1*3htw4>8n{KV>ZLO~|l4o^kn)KOu7b@paO`@0xT7iJ|j zlinch2RutExOD`vAmE~pWe-5rIR-tVBPHfv$jx~?v*!iO>T$`E4W-Q`95qOEt$(h?{ zwR9sXDIRjUD_UFY(eraNLe(lef2-a3kE~XgH|&z9(>c5OOW@=m)?=IEmaT7^p0fc_%Qhk)E)(A2@$e3dh3~XPsAAF) zmi7o@R+M9AZZT#pE4me*{rKs`C50pA;CgSDRDG$-yw$sBgg=qnp0K_Q^Pk*{j3-~l z{Pi#4p`tB_d^``zHSyJKYY^<@)M^UCgP)3Ni@4A1kYVcRn5C+zZu>%j-`;Gqg;&WPD`eN1gjX|JGn26aQX5n93YI{VV3Px- kWl!S+ + + + + + + + + + + + Tchelinux + + + + + + + +
+
+

Tchelinux

+
+
+ + +
+
+

+ Sobre +

+

+ + A paixão pelo Software Livre assim como o desejo de compartilhar conhecimentos fez com que um grupo de usuários se reunisse e trabalhasse junto na organização de eventos para a divulgação de ferramentas e da filosofia open source em instituições educacionais do Rio Grande do Sul. Aproveitando a ideia de voluntariado, o grupo decidiu que os eventos seriam sempre gratuitos, porém os participantes são encorajados a doar de alimentos não-perecíveis para instituições de caridade nas cidades onde os evento ocorrem.
+
+ Entre 2006 e 2019 o Tchelinux realizou mais de uma centena de eventos presenciais com auxílio de milhares de voluntários, que ajudaram na organização e apresentando 1658 palestras que foram assistidas por quase 13 mil participantes que 18.5 toneladas de alimentos para instituições de caridade.
+
+ Em 2020, por conta da pandemia o Tchelinux precisou se reinventar e desde então viemos realizando eventos 100% online, que resultaram em centenas de horas de conteúdo gratuito no nosso Canal no YouTube, permitindo com que o Tchelinux superasse barreiras geográficas e de tempo, alcançando um público ainda maior no Brasil e em vários lugares do mundo. + + +

+
+ +
+

+ Contato +

+

+ Caso você tenha dúvidas, por favor, envie um e-mail para a equipe de organização + clicando aqui. +

+
+
+
+
+ +
+
+

Copyright © Tchelinux 1997-2024

+
+
+ + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..00668d5 --- /dev/null +++ b/style.css @@ -0,0 +1,554 @@ +* { + margin: 0; + padding: 0; + display: border-box; + font-family: 'Montserrat', sans-serif; + /* border: 1px solid red; */ +} + +html { + scroll-behavior: smooth; +} + +body { + background-image: url("./images/bgbottom.png"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center top; + background-attachment: fixed; + max-width: 1280px; + margin: 0 auto; + color: #2c2c2c; + padding: 0 40px 40px 40px +} + +a { + color: #2c2c2c; +} + +a:hover { + color: #2c2c2c; +} + +a > b:hover { + color: red; +} + +a:link { + color: #2c2c2c; + text-decoration: none; +} + +ul { + list-style-type: none; +} + +.nav-item a { + margin: 8px; + border-bottom: 5px solid transparent; +} + +nav { + margin-top: 15px; +} + +nav > ul > li> a:hover { + border-bottom: 5px red solid; +} + +section { + width: 100%; + height: 30%; + display: flex; + align-items: center; + justify-content: center; +} + +.hexagonCE { + width: 25px; + padding-bottom: 3px; +} + +.talk-underline { + border-bottom: 2px solid red; +} + +.sponsor__container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + margin: 75px 0; +} + +.sponsor__container-platinum { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin: 75px 0; +} + +.sponsor__logo-platinum { + max-width: 70%; + height: auto; +} + +.sponsor__logo-gold { + max-width: 150px; + height: auto; +} + +.sponsor__logo-silver { + max-width: 150px; + height: auto; +} + +.sponsor__logo-support { + max-width: 150px; + height: auto; +} + +.sponsor__logo-os { + width: 50%; + height: 50%; + display: flex; + justify-content: center; +} + +.sponsor__logo-regular { + max-width: 100px; + height: auto; +} + +.sponsor__logo-get-up { + max-width: 150px; + height: auto; +} + +section > .logo-hero { + display: flex; + align-items: center; + position: relative; + margin-top: 10px; +} + +section > div > .logo-hero__text { + font-size: 40px; + position: absolute; + right: -3px; + top: 0; +} + +section > div > div > .logo-hero__icon { + position: absolute; + top: 2px; + left: 31.5px; + width: 25px; + height: 25px; +} + +section > div > h1.logo-hero__tchelinux { + font-size: 160px; + font-weight: bold; + text-align: right; + margin-top: 10px; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(to bottom, rgb(192,0,0), rgb(255,0,0)); +} + +section > div > span.logo-hero__youtube { + position: absolute; + right: 0; + bottom: -26px; + text-align: right; + font-size: 35px; +} + +article > div > h2.article__title { + color: red; + margin-top: 30px; +} + +article > div > p { + font-size: 18px; + margin-top: 20px; + text-align: justify; +} + +article > div > ul { + font-size: 18px; + margin-top: 20px; + margin-left: 20px; + text-align: justify; + list-style-type: disc; +} + +article > div > ul > li { + margin: 3px 0; +} + +.video-display { + width: 56%; + height: 60%; + min-height: 350px; + margin-left: 16em; + margin-top: 2em; +} + +@media screen and (max-width: 1024px) { + body { + background-image: url("./images/bgbottom.png"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center center; + background-attachment: fixed; + max-width: 100%; + margin: 0 auto; + color: #2c2c2c; + padding: 0 40px; + } + + .nav-item a { + margin-left: 3px; + border-bottom: 5px solid transparent; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: 2px; + left: 31.5px; + width: 25px; + height: 25px; + } + + .video-display { + width: 56%; + height: 60%; + min-height: 350px; + margin-left: 12em; + margin-top: 2em; + } +} + +@media screen and (max-width: 768px) { + body { + background-image: url("./images/bgbottom.png"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center center; + background-attachment: fixed; + max-width: 100%; + margin: 0 auto; + color: #2c2c2c; + padding: 0 40px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: 2px; + left: 32.5px; + width: 25px; + height: 25px; + } + + .video-display { + width: 100%; + height: 50%; + min-height: 350px; + margin-top: 2em; + margin-left: 0; + } +} + +@media screen and (max-width: 540px) { + body { + background-image: url("./images/bgbottom.png"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center center; + background-attachment: fixed; + max-width: 100%; + margin: 0 auto; + color: #2c2c2c; + padding: 0 20px; + } + + section > div > .logo-hero__text { + font-size: 39.5px; + position: absolute; + right: -3px; + top: 8px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: -6px; + left: 16px; + width: 25px; + height: 25px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: -4px; + left: 17px; + width: 25px; + height: 25px; + } + + section > div > h1.logo-hero__tchelinux { + font-size: 90px; + font-weight: bold; + text-align: right; + margin-top: 20px; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(to bottom, rgb(192,0,0), rgb(255,0,0)); + } + + section > div > span.logo-hero__youtube { + position: absolute; + right: 0; + bottom: -7px; + font-size: 24px; + } + + article > div > p { + font-size: 18px; + margin-top: 20px; + text-align: left; + } + + + article > div > ul { + font-size: 18px; + margin-top: 20px; + text-align: left; + } + + .video-display { + width: 100%; + height: 50%; + min-height: 250px; + margin-top: 2em; + margin-left: 0; + } + + .sponsor__container { + display: flex; + flex-direction: column; + margin: 75px 0; + } + + .sponsor__logo-platinum { + max-width: 100%; + height: auto; + } + + .sponsor__logo-os { + width: 100%; + margin: 40px 0; + } + + .sponsor__logo-gold { + width: 100%; + margin: 40px 0; + } + + .sponsor__logo-silver { + width: 100%; + margin: 40px 0; + } + + .sponsor__logo-support { + width: 100%; + margin: 40px 0; + } +} + +@media screen and (max-width: 414px), +(max-width: 411px) { + section > div > .logo-hero__text { + font-size: 31px; + position: absolute; + right: -3px; + top: 8px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: 2px; + left: 32.5px; + width: 25px; + height: 25px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: -8px; + left: 10.5px; + width: 25px; + height: 25px; + } + + section > div > h1.logo-hero__tchelinux { + font-size: 70px; + font-weight: bold; + text-align: right; + margin-top: 20px; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(to bottom, rgb(192,0,0), rgb(255,0,0)); + } + + section > div > span.logo-hero__youtube { + position: absolute; + right: 0; + bottom: -7px; + font-size: 18px; + } + + .video-display { + width: 100%; + height: 50%; + min-height: 180px; + margin-top: 2em; + margin-left: 0; + } +} + +@media screen and (max-width: 375px) { + section > div > .logo-hero__text { + font-size: 27px; + position: absolute; + right: -3px; + top: 10px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: -10px; + left: 7.5px; + width: 25px; + height: 25px; + } + + section > div > h1.logo-hero__tchelinux { + font-size: 60px; + font-weight: bold; + text-align: right; + margin-top: 20px; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(to bottom, rgb(192,0,0), rgb(255,0,0)); + } + + section > div > span.logo-hero__youtube { + position: absolute; + right: 0; + bottom: -2px; + font-size: 15px; + } + + .video-display { + width: 100%; + height: 50%; + min-height: 160px; + margin-top: 2em; + margin-left: 0; + } +} + +@media screen and (max-width: 360px) { + section > div > .logo-hero__text { + font-size: 27px; + position: absolute; + right: -3px; + top: 10px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + top: -10px; + left: 7.5px; + width: 25px; + height: 25px; + } + + section > div > h1.logo-hero__tchelinux { + font-size: 60px; + font-weight: bold; + text-align: right; + margin-top: 20px; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(to bottom, rgb(192,0,0), rgb(255,0,0)); + } + + section > div > span.logo-hero__youtube { + position: absolute; + right: 0; + bottom: -2px; + font-size: 16px; + } + + .video-display { + width: 100%; + height: 50%; + min-height: 150px; + margin-top: 2em; + margin-left: 0; + } +} + +@media screen and (max-width: 280px) { + section > div > .logo-hero__text { + font-size: 20px; + position: absolute; + right: -3px; + top: 12px; + } + + section > div > div > .logo-hero__icon { + position: absolute; + + top: -11px; + left: 2.5px; + + width: 25px; + height: 25px; + } + + section > div > h1.logo-hero__tchelinux { + font-size: 45px; + font-weight: bold; + text-align: right; + margin-top: 20px; + color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-image: linear-gradient(to bottom, rgb(192,0,0), rgb(255,0,0)); + } + + section > div > span.logo-hero__youtube { + position: absolute; + right: 0; + bottom: -2px; + font-size: 12px; + } + + .video-display { + width: 100%; + height: 50%; + min-height: 100px; + margin-top: 1em; + margin-left: 0; + } +}