diff --git a/assets/css/my-style.css b/assets/css/my-style.css new file mode 100644 index 0000000..0b4b77f --- /dev/null +++ b/assets/css/my-style.css @@ -0,0 +1,188 @@ +body { + margin: 0; + padding: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} +body header { + display: flex; + justify-content: space-between; + padding: 0.3em 0 0.3em 0.3em; +} +body header .logo { + display: block; + margin: 0 0.7em; +} +body header .logo h1 { + text-align: justify; + text-transform: uppercase; +} +body header .logo h1 a { + text-decoration: none; + color: #fff; +} +body header .logo h1 a span { + margin: 0; + line-height: 0; +} +body header .logo h1 a .front { + display: block; + font-size: 16px; +} +body header .logo h1 a .chave { + font-size: 60px; +} +body header .btn-hamb { + height: 0.8em; + width: 30px; + margin: 1.7em 1em 0 0; + cursor: pointer; +} +body header .btn-hamb .linha-1 { + display: block; + background: #fff; + width: 2em; + height: 0.2em; + border-radius: 3px; + margin-bottom: 0.3em; +} +body header .btn-hamb .linha-2 { + display: block; + background: #fff; + width: 2em; + height: 0.2em; + border-radius: 3px; +} +body header .menu a { + display: none; +} +body h2, body h3 { + color: #8888dd; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; +} +body header, body footer, body .btn-github { + background: #8888dd; +} +body .ver-tudo { + background: #ffffff; + border: 2px solid #7777dd; + border-radius: 4px; + text-transform: uppercase; + padding: 0.3em 0; + margin: 0 5em; +} +body .ver-tudo a { + text-decoration: none; + font-size: 14px; + font-weight: 700; + color: #8888dd; +} +body section { + margin: 3em 0; +} +body section .conteudo { + text-align: center; +} +body .inicio .intro { + text-transform: uppercase; + margin: 0 2em; +} +body .inicio .intro p { + color: #888888; + font-size: 12px; +} +body .inicio .intro span { + color: #333333; + font-weight: 600; + font-size: 20px; +} +body .inicio .box { + display: flex; + justify-content: center; + height: 12em; + width: 100; + margin: 2.5em; + border-radius: 8px; + box-shadow: 0 0 0.5em #00000030; + z-index: 1; +} +body .inicio .box a { + text-decoration: none; + margin: 0; + width: 100%; +} +body .inicio .box img { + display: block; + height: 83%; + width: 100%; + background: #aaa; + border-radius: 8px 8px 0 0; +} +body .inicio .box p { + position: relative; + background-color: #0099ff; + color: #ffffff; + width: 100%; + font-size: 12px; + font-weight: 600; + padding: 0.7em 0; + margin: 0; + opacity: 0.7; + border-radius: 0 0 8px 8px; +} +body .inicio .descricao { + margin: 0 2em; + font-size: 14px; +} +body .inicio .descricao p { + color: #555555; + font-weight: 100; +} +body .inicio .descricao p span { + font-weight: 600; +} +body .inicio .btn-github { + margin: 0 3em; + border-radius: 5px; + padding: 0.4em 0; +} +body .inicio .btn-github a { + display: flex; + justify-content: center; + text-decoration: none; +} +body .inicio .btn-github a img { + background: #fff; + width: 12px; + height: 12px; + align-self: center; + margin-right: 0.7em; +} +body .inicio .btn-github a p { + color: #fff; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; +} +body footer { + color: #fff; + text-align: center; +} +body footer .parag-1 { + font-weight: bold; + font-size: 16px; + margin: 0; + padding-top: 1em; +} +body footer .parag-2 { + font-size: 14px; + margin: 0; + padding-bottom: 1em; +} +body footer .parag-2 span { + font-size: 20px; + color: #ff0000; +} + +/*# sourceMappingURL=my-style.css.map */ diff --git a/assets/css/my-style.css.map b/assets/css/my-style.css.map new file mode 100644 index 0000000..c24d4b5 --- /dev/null +++ b/assets/css/my-style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/my-style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAOJ;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAKJ;EACA;;AAKR;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;;AACA;EACI;;AAKJ;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAQhB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA","file":"my-style.css"} \ No newline at end of file diff --git a/assets/css/old_style.css b/assets/css/old_style.css new file mode 100644 index 0000000..c37209c --- /dev/null +++ b/assets/css/old_style.css @@ -0,0 +1,188 @@ +body { + margin: 0; + padding: 0; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} +body .header { + display: flex; + justify-content: space-between; + padding: 0.3em 0 0.3em 0.3em; +} +body .header .logo { + display: block; + margin: 0 0.7em; +} +body .header .logo h1 { + text-align: justify; + text-transform: uppercase; +} +body .header .logo h1 a { + text-decoration: none; + color: #fff; +} +body .header .logo h1 a span { + margin: 0; + line-height: 0; +} +body .header .logo h1 a .front { + display: block; + font-size: 16px; +} +body .header .logo h1 a .chave { + font-size: 60px; +} +body .header .btn-hamb { + height: 0.8em; + width: 30px; + margin: 1.7em 1em 0 0; + cursor: pointer; +} +body .header .btn-hamb .linha-1 { + display: block; + background: #fff; + width: 2em; + height: 0.2em; + border-radius: 3px; + margin-bottom: 0.3em; +} +body .header .btn-hamb .linha-2 { + display: block; + background: #fff; + width: 2em; + height: 0.2em; + border-radius: 3px; +} +body .header .menu a { + display: none; +} +body h2, body h3 { + color: #8888dd; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; +} +body header, body footer, body .btn-github { + background: #8888dd; +} +body .ver-tudo { + background: #ffffff; + border: 2px solid #7777dd; + border-radius: 4px; + text-transform: uppercase; + padding: 0.3em 0; + margin: 0 5em; +} +body .ver-tudo a { + text-decoration: none; + font-size: 14px; + font-weight: 700; + color: #8888dd; +} +body section { + margin: 3em 0; +} +body section .conteudo { + text-align: center; +} +body .inicio .intro { + text-transform: uppercase; + margin: 0 2em; +} +body .inicio .intro p { + color: #888888; + font-size: 12px; +} +body .inicio .intro span { + color: #333333; + font-weight: 600; + font-size: 20px; +} +body .inicio .box { + display: flex; + justify-content: center; + height: 12em; + width: 100; + margin: 2.5em; + border-radius: 8px; + box-shadow: 0 0 0.5em #00000030; + z-index: 1; +} +body .inicio .box a { + text-decoration: none; + margin: 0; + width: 100%; +} +body .inicio .box img { + display: block; + height: 83%; + width: 100%; + background: #aaa; + border-radius: 8px 8px 0 0; +} +body .inicio .box p { + position: relative; + background-color: #0099ff; + color: #ffffff; + width: 100%; + font-size: 12px; + font-weight: 600; + padding: 0.7em 0; + margin: 0; + opacity: 0.7; + border-radius: 0 0 8px 8px; +} +body .inicio .descricao { + margin: 0 2em; + font-size: 14px; +} +body .inicio .descricao p { + color: #555555; + font-weight: 100; +} +body .inicio .descricao p span { + font-weight: 600; +} +body .inicio .btn-github { + margin: 0 3em; + border-radius: 5px; + padding: 0.4em 0; +} +body .inicio .btn-github a { + display: flex; + justify-content: center; + text-decoration: none; +} +body .inicio .btn-github a img { + background: #fff; + width: 12px; + height: 12px; + align-self: center; + margin-right: 0.7em; +} +body .inicio .btn-github a p { + color: #fff; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; +} +body footer { + color: #fff; + text-align: center; +} +body footer .parag-1 { + font-weight: bold; + font-size: 16px; + margin: 0; + padding-top: 1em; +} +body footer .parag-2 { + font-size: 14px; + margin: 0; + padding-bottom: 1em; +} +body footer .parag-2 span { + font-size: 20px; + color: #ff0000; +} + +/*# sourceMappingURL=old_style.css.map */ diff --git a/assets/css/old_style.css.map b/assets/css/old_style.css.map new file mode 100644 index 0000000..3c63314 --- /dev/null +++ b/assets/css/old_style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/old_style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAOJ;EACI;;AAMhB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAKJ;EACA;;AAKR;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIR;EACI;;AACA;EACI;;AAKJ;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAQhB;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA","file":"old_style.css"} \ No newline at end of file diff --git a/assets/css/palettes.css b/assets/css/palettes.css new file mode 100644 index 0000000..de485fd --- /dev/null +++ b/assets/css/palettes.css @@ -0,0 +1,34 @@ +/* colors */ +:root { + --main-color: #8888dd; + --main-color-dark: #6666dd; + --main-color-darkest: #0000cc; + --second-color: #f9f9f9; + --third-color: #888888; +} + +.text-main { + color: var(--main-color); +} + +.text-second { + color: var(--second-color); +} + +.text-third { + color: var(--third-color); +} + +.bg-main { + background-color: var(--main-color); +} + +.bg-second { + background-color: var(--second-color); +} + +.bg-third { + background-color: var(--third-color); +} + +/*# sourceMappingURL=palettes.css.map */ diff --git a/assets/css/palettes.css.map b/assets/css/palettes.css.map new file mode 100644 index 0000000..756ddc4 --- /dev/null +++ b/assets/css/palettes.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/palettes.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"palettes.css"} \ No newline at end of file diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 0000000..e618a4c --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,64 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +.mp-reset { + margin: 0; + padding: 0; +} + +.a-reset { + text-decoration: none; +} + +/*# sourceMappingURL=reset.css.map */ diff --git a/assets/css/reset.css.map b/assets/css/reset.css.map new file mode 100644 index 0000000..be44c78 --- /dev/null +++ b/assets/css/reset.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/reset.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaC;EACA;EACA;EACA;EACA;EACA;;;AAED;AACA;AAAA;EAEC;;;AAED;EACC;;;AAED;EACC;;;AAED;EACC;;;AAED;AAAA;EAEC;EACA;;;AAED;EACC;EACA;;;AAGD;EACE;EACA;;;AAGF;EACE","file":"reset.css"} \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index c831eaa..c6c9b80 100755 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,89 +1,363 @@ -article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block} -audio,canvas,video{display:inline-block;*display:inline;*zoom:1} -audio:not([controls]){display:none} -[hidden]{display:none} -html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%} -body{margin:0} -body,button,input,select,textarea{font-family:sans-serif} -a:hover,a:active{outline:0} -abbr[title]{border-bottom:1px dotted} -b,strong{font-weight:bold} -blockquote{margin:1em 40px} -dfn{font-style:italic} -mark{background:#ff0;color:#000} -pre,code,kbd,samp{font-family:monospace,monospace;_font-family:'courier new',monospace;font-size:1em} -q{quotes:none} -q:before,q:after{content:'';content:none} -small{font-size:75%} -sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} -sup{top:-.5em} -sub{bottom:-.25em} -ul,ol{margin:1em 0;padding:0 0 0 40px} -dd{margin:0 0 0 40px} -nav ul,nav ol{list-style:none;list-style-image:none} -img{border:0;-ms-interpolation-mode:bicubic} -svg:not(:root){overflow:hidden} -figure{margin:0} -form{margin:0} -fieldset{margin:0 2px;padding:.35em .625em .75em} -legend{border:0;*margin-left:-7px} -button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle} -button,input{line-height:normal;*overflow:visible} -table button,table input{*overflow:auto} -button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button} -input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} -input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} -input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} -button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0} -textarea{overflow:auto;vertical-align:top} -table{border-collapse:collapse;border-spacing:0} -*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} -body{font-size:15px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;background:#fff;border-top:4px solid #949db2} -h1,h2,h3,h4,h5,h6{color:#2f3339;font-family:"Lato",sans-serif;font-weight:400;text-transform:uppercase} -h1{font-size:36px} -h2{font-size:32px} -h3{font-size:24px} -h4{font-size:21px} -h1{margin:0} -p{color:#515b6a;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:23px} -a{transition:all .2s linear;color:#3396d1;font-size:15px;text-decoration:none;border-bottom:1px dashed #3396d1;} -a:hover{color:#2679aa;border-bottom:1px dashed #2679aa} -ul,ol{margin:0;padding:0;list-style-type:none;} -ul li,ol li{color:#515b6a;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:23px} -img{max-width:100%} -body{width:100%;*zoom:1;} -body:before,body:after{content:"";display:table} -body:after{clear:both} -display block{width:102.08333333333333%;margin:0 -1.0416666666666665%;*width:102.08333333333333% -correction;*margin:0 -1.0416666666666665% -correction} -.header,.content,.footer{*zoom:1;} -.header:before,.content:before,.footer:before,.header:after,.content:after,.footer:after{content:"";display:table} -.header:after,.content:after,.footer:after{clear:both} -.header .logo{display:block;text-align:center;margin:20px auto;width:300px;max-width:100%} -.header .lead-title{margin-top:0;text-align:center;padding:20px;font-size:18px;color:#515b6a} -.content{margin:40px auto} -.section{display:inline;float:left;overflow:hidden;width:81.25%;margin:0 1.0416666666666665%;*width:81.25% -correction;*margin:0 1.0416666666666665% -correction;margin-left:9.375%} -.footer{margin:20px auto;border-top:1px solid #e3e3e3;} -.footer p,.footer a{text-align:center;color:#49525f} -.nav-main{width:100%;display:table;margin:20px auto} -.nav-structure{width:100%;display:table;margin:20px auto} -.nav-list{list-style-image:none;list-style-type:none;margin:0;padding:0;} -.nav-list .nav-item{display:inline;float:left;overflow:hidden;width:31.25%;margin:0 1.0416666666666665%;*width:31.25% -correction;*margin:0 1.0416666666666665% -correction;} -@media screen and (max-width: 767px){.nav-list .nav-item{display:inline;float:left;overflow:hidden;width:97.91666666666666%;margin:0 1.0416666666666665%;*width:97.91666666666666% -correction;*margin:0 1.0416666666666665% -correction} -}.nav-list .nav-item .nav-link{display:block;margin:10px auto;text-align:center;text-transform:uppercase;letter-spacing:.0625em;color:#ecf0f1} -.btn{background:#78839e;color:btn-link;padding:16px 24px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;border-bottom:2px solid #717a8f;text-shadow:0 1px 1px #373d4c;} -@media screen and (max-width: 767px){.btn{display:inline;float:left;overflow:hidden;width:97.91666666666666%;margin:0 1.0416666666666665%;*width:97.91666666666666% -correction;*margin:0 1.0416666666666665% -correction} -}.btn:hover{background:#66728e;color:btn-link;padding:16px 24px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;border-bottom:2px solid #717a8f} -.title{border-bottom:1px solid #ecf0f1} -.sub-title{color:#515b6a;border-left:2px solid #515b6a;padding-left:10px} -.box{padding:20px;display:block;width:300px;max-width:100%;margin:60px auto;border:2px solid #8bc1e5;color:#5ca9db;text-align:center;text-transform:uppercase;font-size:13px;font-weight:700;} -.box:hover{border:2px solid #459cd6} -.centered-parent{position:relative;height:100vh} -.centered-child{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);} -@media screen and (max-width: 767px){.centered-child{width:80%} -}@media screen and (max-width: 767px){.header,.footer,.content,.section{float:none;display:block;width:96%;margin:0 auto} -.header .logo{width:180px} -.header .lead-title{font-size:13px} -.header .nav-link{margin:5px auto} -.btn{padding:5px;} -.btn:hover{padding:5px} -} \ No newline at end of file +@import './palettes.css'; +@import './variables.css'; +.body { + font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; + background-color: #fdfdfd; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-xxs); +} + +.sub-title { + font-weight: 600; + font-size: 16px; + margin-bottom: var(--space-xxs); + color: var(--main-color); +} + +.logo { + height: 70px; + width: 100%; +} + +.check { + display: none; +} + +.menu { + position: absolute; + left: -1000px; + top: 85px; + transition-duration: 0.5s; +} + +.menu-item { + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--main-color); + height: var(--space-md); + width: 100vw; + border-top: 1px solid var(--main-color-dark); +} + +.btn-hamb { + display: flex; + padding: 0 var(--space-xs); + height: 35px; + width: 35px; +} + +/* show navbar */ +#check:checked ~ .menu { + transform: translateX(1000px); + transition-duration: 0.3s; +} + +.text-center { + text-align: center; +} + +.container { + margin: var(--space-md) 0; +} + +.text-upper { + text-transform: uppercase; +} + +.text-bold { + font-weight: bold; +} + +.line-w-sm { + line-height: var(--space-sm); +} + +.main-box { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + margin: auto 0; +} + +.background-stripes { + width: 18vw; + z-index: -1; + opacity: 0.9; +} + +.s-left { + position: relative; +} + +.s-right { + transform: rotateY(180deg); + position: relative; +} + +.stripes-l { + height: calc(var(--space-sm) - 20px); + margin: var(--space-xxs) 0; + border: 0; + border-radius: 0 10px 10px 0; +} + +.stripes-r { + height: calc(var(--space-sm) - 20px); + margin: var(--space-xxs) 0; + border: 0; + border-radius: 0 10px 10px 0; +} + +.s-size-sm { + width: 60%; +} + +.s-size-md { + width: 80%; +} + +.s-size-lg { + width: 100%; +} + +.s-first-color { + background-color: green; + position: relative; +} + +.s-second-color { + background-color: yellow; +} + +.s-third-color { + background-color: blue; + position: relative; +} + +.intro { + font-size: 16px; +} + +.intro__parag { + font-size: 12px; +} + +.box-image { + border-radius: 5px; + box-shadow: 0 0 3px #22222250; + margin: var(--space) auto; + width: calc(100% - var(--space)); + height: calc(100% - var(--space-xxs)); +} + +.box-image__photo { + border-radius: 5px; + width: calc(100% - var(--space)); + height: calc(100% - var(--space-xxs)); +} + +.box-image__title { + padding: var(--space-xs) 0; + border-radius: 0 0 5px 5px; + font-size: 12px; + background-color: var(--main-color); + opacity: 0.9; + z-index: 10; +} + +.description { + font-size: 14px; + line-height: calc(var(--space-xs) + 5px); + padding-bottom: var(--space-xxs); +} + +.btn-link { + font-size: 14px; + padding: var(--space-xxs) var(--space-xs); + border: 2px solid var(--main-color-dark); + border-radius: 5px; +} + +.box { + display: flex; + justify-content: center; + margin-top: var(--space-sm); +} + +.box__item { + margin: var(--space-xxs); +} + +.btn-github { + display: flex; + padding: var(--space-xs); + margin: var(--space-sm) auto; + width: 70vw; + justify-content: center; + align-items: center; + font-size: 14px; + border-radius: 5px; +} + +.git-icon { + width: var(--space-sm); + height: var(--space-sm); + margin-right: var(--space-xxs); +} + +.footer { + padding: var(--space-xs) 0; + font-size: 14px; +} + +.heart { + color: #ff0000; +} + +/* Tablets */ +@media only screen and (min-width: 768px) { + .logo { + margin-left: var(--space-xs); + } + + .menu { + position: static; + margin-right: var(--space-xs); + } + + .menu-list__item { + display: inline; + margin: var(--space-xxs); + } + + .menu-item { + display: inline; + border: 0; + } + + .btn-hamb { + display: none; + } + + .intro__parag { + font-size: var(--space-sm); + } + + .intro__second { + margin: var(--space-xs); + font-size: var(--space); + line-height: var(--space); + } + + .sub-title { + line-height: var(--space); + font-size: var(--space); + } + + .description { + line-height: var(--space); + font-size: calc(var(--space-sm) - 5px); + margin-bottom: var(--space-xxs); + } + + .btn-github { + width: 40vw; + } + + .other { + font-size: var(--space-sm); + } + + .stripes-l { + height: calc(var(--space-sm) - 15px); + margin: var(--space-xs) 0; + } + + .stripes-r { + height: calc(var(--space-sm) - 15px); + margin: var(--space-xs) 0; + } +} +@media only screen and (min-width: 1280px) { + .logo { + height: 100px; + width: 250px; + margin-left: var(--space-lg); + } + + .menu { + margin-right: var(--space-lg); + } + + .menu-list__item { + margin-right: var(--space-md); + } + + .menu-item:hover { + color: #222; + } + + .box-image { + width: 60vw; + } + + .btn-github { + width: 15vw; + transition-duration: 0.3s; + } + + .btn-github:hover { + background-color: var(--main-color-darkest); + transition-duration: 0.3s; + } + + .btn-link:hover { + background-color: var(--main-color); + color: var(--second-color); + transition-duration: 0.3s; + } + + .description { + margin-left: var(--screen-xs); + margin-right: var(--screen-xs); + } + + .box__item { + margin: auto var(--space-xs); + } + + .box-link:hover { + box-shadow: 0 0 10px var(--main-color-darkest); + } + + .box-link { + margin: auto var(--space-xxs); + padding: var(--space-xs); + border-radius: 3px; + box-shadow: 0 0 3px #22222299; + } + + .container { + margin: var(--space-lg) 0; + } + + .stripes-l { + height: calc(var(--space-sm) - 8px); + margin: var(--space-xs) 0; + } + + .stripes-r { + height: calc(var(--space-sm) - 8px); + margin: var(--space-xs) 0; + } +} + +/*# sourceMappingURL=style.css.map */ diff --git a/assets/css/style.css.map b/assets/css/style.css.map new file mode 100644 index 0000000..7f9f44c --- /dev/null +++ b/assets/css/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/style.scss"],"names":[],"mappings":"AAAQ;AACA;AAER;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EAEE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;IACE;;;EAGF;IACE;IACA;;;EAGF;IACE;IACA;;;EAGF;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;;;EAGF;IACE;IACA;;;EAGF;IACE;IACA;IACA;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;;;EAGF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;IACA;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;;;EAGF;IACE;IAEA;;;EAGF;IACE;IACA;IACA;;;EAGF;IACE;IACA;;;EAGF;IACE;;;EAGF;IACE;;;EAGF;IACE;IACA;IACA;IACA;;;EAGF;IACE;;;EAGF;IACE;IACA;;;EAGF;IACE;IACA","file":"style.css"} \ No newline at end of file diff --git a/assets/css/variables.css b/assets/css/variables.css new file mode 100644 index 0000000..85450fd --- /dev/null +++ b/assets/css/variables.css @@ -0,0 +1,19 @@ +/* spaces */ +:root { + --space-xxs: .4rem; + --space-xs: .8rem; + --space-sm: 1.6rem; + --space: 2.4rem; + --space-md: 3.2rem; + --space-lg: 4.8rem; + --space-xlg: 6.4rem; + --space-xxlg: 9.6rem; + /* media queries */ + --screen-xs: 360px; + --screen-sm: 768px; + --screen-md: 960px; + --screen-lg: 1280px; + --screen-xlg: 1920px; +} + +/*# sourceMappingURL=variables.css.map */ diff --git a/assets/css/variables.css.map b/assets/css/variables.css.map new file mode 100644 index 0000000..9294e44 --- /dev/null +++ b/assets/css/variables.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/variables.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEF;EACE;EACA;EACA;EACA;EACA","file":"variables.css"} \ No newline at end of file diff --git a/assets/images/btn-hamb.svg b/assets/images/btn-hamb.svg new file mode 100644 index 0000000..0c952e0 --- /dev/null +++ b/assets/images/btn-hamb.svg @@ -0,0 +1 @@ +Asset 1 \ No newline at end of file diff --git a/assets/images/compra-e-venda.png b/assets/images/compra-e-venda.png new file mode 100644 index 0000000..e841d87 Binary files /dev/null and b/assets/images/compra-e-venda.png differ diff --git a/assets/images/doe-um-livro.png b/assets/images/doe-um-livro.png new file mode 100644 index 0000000..46ff71f Binary files /dev/null and b/assets/images/doe-um-livro.png differ diff --git a/assets/images/doe-um-livro2.png b/assets/images/doe-um-livro2.png new file mode 100644 index 0000000..0c04437 Binary files /dev/null and b/assets/images/doe-um-livro2.png differ diff --git a/assets/images/front-end-start.png b/assets/images/front-end-start.png new file mode 100644 index 0000000..ea95b0d Binary files /dev/null and b/assets/images/front-end-start.png differ diff --git a/assets/images/github.png b/assets/images/github.png new file mode 100644 index 0000000..708dc5b Binary files /dev/null and b/assets/images/github.png differ diff --git a/assets/images/logo-600px--horizontal--white.png b/assets/images/logo-600px--horizontal--white.png new file mode 100644 index 0000000..5eca151 Binary files /dev/null and b/assets/images/logo-600px--horizontal--white.png differ diff --git a/assets/images/me-contrata.png b/assets/images/me-contrata.png new file mode 100644 index 0000000..53a0b28 Binary files /dev/null and b/assets/images/me-contrata.png differ diff --git a/assets/sass/my-style.scss b/assets/sass/my-style.scss new file mode 100644 index 0000000..b5ffc2e --- /dev/null +++ b/assets/sass/my-style.scss @@ -0,0 +1,230 @@ +body { + margin: 0; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + + header { + display: flex; + justify-content: space-between; + padding: .3em 0 .3em .3em; + + .logo { + display: block; + margin: 0 .7em; + + h1 { + text-align: justify; + text-transform: uppercase; + + a { + text-decoration: none; + color: #fff; + + span { + margin: 0; + line-height: 0; + } + + .front { + display: block; + font-size: 16px; + } + + .Brasil { + + } + + .chave { + font-size: 60px; + } + } + } + } + + .btn-hamb { + height: 0.8em; + width: 30px; + margin: 1.7em 1em 0 0; + cursor: pointer; + + .linha-1 { + display: block; + background: #fff; + width: 2em; + height: .2em; + border-radius: 3px; + margin-bottom: .3em; + } + + .linha-2 { + display: block; + background: #fff; + width: 2em; + height: .2em; + border-radius: 3px; + } + } + + .menu { + a { + display: none; + } + } + } + + h2,h3 { + color: #8888dd; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + } + + header, footer, .btn-github { + background: #8888dd; + } + + .ver-tudo { + background: #ffffff; + border: 2px solid #7777dd; + border-radius: 4px; + text-transform: uppercase; + padding: .3em 0; + margin: 0 5em; + + a { + text-decoration: none; + font-size: 14px; + font-weight: 700; + color: #8888dd; + } + } + + section { + margin: 3em 0; + .conteudo { + text-align: center; + } + } + + .inicio { + .intro { + text-transform: uppercase; + margin: 0 2em; + + p { + color: #888888; + font-size: 12px; + } + + span { + color: #333333; + font-weight: 600; + font-size: 20px; + } + } + + .box { + display: flex; + justify-content: center; + height: 12em; + width: 100; + margin: 2.5em; + border-radius: 8px; + box-shadow: 0 0 .5em #00000030; + z-index: 1; + + a{ + text-decoration: none; + margin: 0; + width: 100%; + } + + img { + display: block; + height: 83%; + width: 100%; + background: #aaa; + border-radius: 8px 8px 0 0; + } + + p { + position: relative; + background-color: #0099ff; + color: #ffffff; + width: 100%; + font-size: 12px; + font-weight: 600; + padding: 0.7em 0; + margin: 0; + opacity: 0.7; + border-radius: 0 0 8px 8px; + } + } + + .descricao { + margin: 0 2em; + font-size: 14px; + + p { + color: #555555; + font-weight: 100; + + span { + font-weight: 600; + } + } + } + + .btn-github { + margin: 0 3em; + border-radius: 5px; + padding: 0.4em 0; + + a { + display: flex; + justify-content: center; + text-decoration: none; + + img { + background: #fff; + width: 12px; + height: 12px; + align-self: center; + margin-right: 0.7em; + } + + p { + color: #fff; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; + } + } + + } + + } + + footer { + color: #fff; + text-align: center; + + .parag-1 { + font-weight: bold; + font-size: 16px; + margin: 0; + padding-top: 1em; + } + + .parag-2 { + font-size: 14px; + margin: 0; + padding-bottom: 1em; + + span { + font-size: 20px; + color: #ff0000; + } + } + } +} \ No newline at end of file diff --git a/assets/sass/old_style.scss b/assets/sass/old_style.scss new file mode 100644 index 0000000..a4a7377 --- /dev/null +++ b/assets/sass/old_style.scss @@ -0,0 +1,230 @@ +body { + margin: 0; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + + .header { + display: flex; + justify-content: space-between; + padding: .3em 0 .3em .3em; + + .logo { + display: block; + margin: 0 .7em; + + h1 { + text-align: justify; + text-transform: uppercase; + + a { + text-decoration: none; + color: #fff; + + span { + margin: 0; + line-height: 0; + } + + .front { + display: block; + font-size: 16px; + } + + .Brasil { + + } + + .chave { + font-size: 60px; + } + } + } + } + + .btn-hamb { + height: 0.8em; + width: 30px; + margin: 1.7em 1em 0 0; + cursor: pointer; + + .linha-1 { + display: block; + background: #fff; + width: 2em; + height: .2em; + border-radius: 3px; + margin-bottom: .3em; + } + + .linha-2 { + display: block; + background: #fff; + width: 2em; + height: .2em; + border-radius: 3px; + } + } + + .menu { + a { + display: none; + } + } + } + + h2,h3 { + color: #8888dd; + font-size: 16px; + font-weight: 600; + text-transform: uppercase; + } + + header, footer, .btn-github { + background: #8888dd; + } + + .ver-tudo { + background: #ffffff; + border: 2px solid #7777dd; + border-radius: 4px; + text-transform: uppercase; + padding: .3em 0; + margin: 0 5em; + + a { + text-decoration: none; + font-size: 14px; + font-weight: 700; + color: #8888dd; + } + } + + section { + margin: 3em 0; + .conteudo { + text-align: center; + } + } + + .inicio { + .intro { + text-transform: uppercase; + margin: 0 2em; + + p { + color: #888888; + font-size: 12px; + } + + span { + color: #333333; + font-weight: 600; + font-size: 20px; + } + } + + .box { + display: flex; + justify-content: center; + height: 12em; + width: 100; + margin: 2.5em; + border-radius: 8px; + box-shadow: 0 0 .5em #00000030; + z-index: 1; + + a{ + text-decoration: none; + margin: 0; + width: 100%; + } + + img { + display: block; + height: 83%; + width: 100%; + background: #aaa; + border-radius: 8px 8px 0 0; + } + + p { + position: relative; + background-color: #0099ff; + color: #ffffff; + width: 100%; + font-size: 12px; + font-weight: 600; + padding: 0.7em 0; + margin: 0; + opacity: 0.7; + border-radius: 0 0 8px 8px; + } + } + + .descricao { + margin: 0 2em; + font-size: 14px; + + p { + color: #555555; + font-weight: 100; + + span { + font-weight: 600; + } + } + } + + .btn-github { + margin: 0 3em; + border-radius: 5px; + padding: 0.4em 0; + + a { + display: flex; + justify-content: center; + text-decoration: none; + + img { + background: #fff; + width: 12px; + height: 12px; + align-self: center; + margin-right: 0.7em; + } + + p { + color: #fff; + font-weight: 700; + font-size: 12px; + text-transform: uppercase; + } + } + + } + + } + + footer { + color: #fff; + text-align: center; + + .parag-1 { + font-weight: bold; + font-size: 16px; + margin: 0; + padding-top: 1em; + } + + .parag-2 { + font-size: 14px; + margin: 0; + padding-bottom: 1em; + + span { + font-size: 20px; + color: #ff0000; + } + } + } +} \ No newline at end of file diff --git a/assets/sass/palettes.scss b/assets/sass/palettes.scss new file mode 100644 index 0000000..19f8621 --- /dev/null +++ b/assets/sass/palettes.scss @@ -0,0 +1,32 @@ +/* colors */ +:root{ + --main-color: #8888dd; + --main-color-dark: #6666dd; + --main-color-darkest: #0000cc; + --second-color: #f9f9f9; + --third-color: #888888; +} + +.text-main { + color: var(--main-color); +} + +.text-second { + color: var(--second-color); +} + +.text-third { + color: var(--third-color); +} + +.bg-main { + background-color: var(--main-color); +} + +.bg-second { + background-color: var(--second-color); +} + +.bg-third { + background-color: var(--third-color); +} \ No newline at end of file diff --git a/assets/sass/reset.scss b/assets/sass/reset.scss new file mode 100644 index 0000000..7913a93 --- /dev/null +++ b/assets/sass/reset.scss @@ -0,0 +1,57 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +.mp-reset { + margin: 0; + padding: 0; +} + +.a-reset { + text-decoration: none; +} \ No newline at end of file diff --git a/assets/sass/style.scss b/assets/sass/style.scss new file mode 100644 index 0000000..aca31a5 --- /dev/null +++ b/assets/sass/style.scss @@ -0,0 +1,365 @@ +@import './palettes.css'; +@import './variables.css'; + +.body { + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + background-color: #fdfdfd; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-xxs); +} + +.sub-title { + font-weight: 600; + font-size: 16px; + margin-bottom: var(--space-xxs); + color: var(--main-color); +} + +.logo { + height: 70px; + width: 100%; +} + +.check { + display: none; +} + +.menu { + position: absolute; + left: -1000px; + top: 85px; + transition-duration: 0.5s; +} + +.menu-item { + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--main-color); + height: var(--space-md); + width: 100vw; + border-top: 1px solid var(--main-color-dark); +} + +.btn-hamb { + display: flex; + padding: 0 var(--space-xs); + height: 35px; + width: 35px; +} + +/* show navbar */ +#check:checked ~ .menu { + transform: translateX(1000px); + transition-duration: 0.3s; +} + +.text-center { + text-align: center; +} + +.container { + margin: var(--space-md) 0; +} + +.text-upper { + text-transform: uppercase; +} + +.text-bold { + font-weight: bold; +} + +.line-w-sm { + line-height: var(--space-sm); +} + +.main-box { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + margin: auto 0; +} + +.background-stripes { + width: 18vw; + z-index: -1; + opacity: 0.9; +} + +.s-left{ + position: relative; +} + +.s-right{ + transform: rotateY(180deg); + position: relative; +} + +.stripes-l { + height: calc(var(--space-sm) - 20px); + margin: var(--space-xxs) 0; + border: 0; + border-radius: 0 10px 10px 0; +} + +.stripes-r{ + height: calc(var(--space-sm) - 20px); + margin: var(--space-xxs) 0; + border: 0; + border-radius: 0 10px 10px 0; +} + +.s-size-sm { + width: 60%; +} + +.s-size-md { + + width: 80%; +} + +.s-size-lg { + width: 100%; +} + +.s-first-color { + background-color: green; + position: relative; +} + +.s-second-color { + background-color: yellow; +} + +.s-third-color { + background-color: blue; + position: relative; +} + +.intro { + font-size: 16px; +} + +.intro__parag { + font-size: 12px; +} + +.box-image { + border-radius: 5px; + box-shadow: 0 0 3px #22222250; + margin: var(--space) auto; + width: calc(100% - var(--space)); + height: calc(100% - var(--space-xxs)); +} + +.box-image__photo { + border-radius: 5px; + width: calc(100% - var(--space)); + height: calc(100% - var(--space-xxs)); +} + +.box-image__title { + padding: var(--space-xs) 0; + border-radius: 0 0 5px 5px; + font-size: 12px; + background-color: var(--main-color); + opacity: 0.9; + z-index: 10; +} + +.description { + font-size: 14px; + line-height: calc(var(--space-xs) + 5px); + padding-bottom: var(--space-xxs); +} + +.btn-link { + font-size: 14px; + padding: var(--space-xxs) var(--space-xs); + border: 2px solid var(--main-color-dark); + border-radius: 5px; +} + +.box { + display: flex; + justify-content: center; + margin-top: var(--space-sm); +} + +.box__item { + margin: var(--space-xxs); +} + +.btn-github { + display: flex; + padding: var(--space-xs); + margin: var(--space-sm) auto; + width: 70vw; + justify-content: center; + align-items: center; + font-size: 14px; + border-radius: 5px; +} + +.git-icon { + width: var(--space-sm); + height: var(--space-sm); + margin-right: var(--space-xxs); +} + +.footer { + padding: var(--space-xs) 0; + font-size: 14px; +} + +.heart { + color: #ff0000; +} + +/* Tablets */ +@media only screen and (min-width: 768px) { + .logo { + margin-left: var(--space-xs); + } + + .menu { + position: static; + margin-right: var(--space-xs); + } + + .menu-list__item { + display: inline; + margin: var(--space-xxs); + } + + .menu-item { + display: inline; + border: 0; + } + + .btn-hamb { + display: none; + } + + .intro__parag { + font-size: var(--space-sm); + } + + .intro__second { + margin: var(--space-xs); + font-size: var(--space); + line-height: var(--space); + } + + .sub-title { + line-height: var(--space); + font-size: var(--space); + } + + .description { + line-height: var(--space); + font-size: calc(var(--space-sm) - 5px); + margin-bottom: var(--space-xxs); + } + + .btn-github { + width: 40vw; + } + + .other { + font-size: var(--space-sm); + } + + .stripes-l { + height: calc(var(--space-sm) - 15px); + margin: var(--space-xs) 0; + } + + .stripes-r{ + height: calc(var(--space-sm) - 15px); + margin: var(--space-xs) 0; + } +} + +@media only screen and (min-width: 1280px) { + .logo { + height: 100px; + width: 250px; + margin-left: var(--space-lg); + } + + .menu { + margin-right: var(--space-lg); + } + + .menu-list__item { + margin-right: var(--space-md); + } + + .menu-item:hover { + color: #222; + } + + .box-image { + width: 60vw; + } + + .btn-github { + width: 15vw; + transition-duration: 0.3s; + } + + .btn-github:hover { + background-color: var(--main-color-darkest); + + transition-duration: 0.3s; + } + + .btn-link:hover { + background-color: var(--main-color); + color: var(--second-color); + transition-duration: 0.3s; + } + + .description { + margin-left: var(--screen-xs); + margin-right: var(--screen-xs); + } + + .box__item { + margin: auto var(--space-xs); + } + + .box-link:hover { + box-shadow: 0 0 10px var(--main-color-darkest); + } + + .box-link { + margin: auto var(--space-xxs); + padding: var(--space-xs); + border-radius: 3px; + box-shadow: 0 0 3px #22222299; + } + + .container { + margin: var(--space-lg) 0; + } + + .stripes-l { + height: calc(var(--space-sm) - 8px); + margin: var(--space-xs) 0; + } + + .stripes-r{ + height: calc(var(--space-sm) - 8px); + margin: var(--space-xs) 0; + } +} \ No newline at end of file diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss new file mode 100644 index 0000000..9100579 --- /dev/null +++ b/assets/sass/variables.scss @@ -0,0 +1,18 @@ +/* spaces */ +:root{ + --space-xxs : .4rem; + --space-xs : .8rem; + --space-sm : 1.6rem; + --space : 2.4rem; + --space-md : 3.2rem; + --space-lg : 4.8rem; + --space-xlg : 6.4rem; + --space-xxlg : 9.6rem; + +/* media queries */ + --screen-xs : 360px; // xExtra small screen / phone + --screen-sm : 768px; // Extra small screen / phone + --screen-md : 960px; // Small screen / tablet + --screen-lg : 1280px; // Medium screen / desktop + --screen-xlg : 1920px; // Extra Large screen / wide desktop +} \ No newline at end of file diff --git a/index.html b/index.html index 18800b5..4d3e5c7 100755 --- a/index.html +++ b/index.html @@ -1,94 +1,173 @@ - - - - Front-End Brasil - Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) para issues. - - - - - - - - - - -
-
-
- -

Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) para issues.

- + + + + + Front-End Brasil - Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) para issues. + + + + + + + + + + + + +
+
+
+
+
+
+
+
+

Sobre a organização front-end Brasil

+

Portando discussões feitas em grupos para issues

+
+
+
+
+
+
+
+
+ Foto da página inicial da Front-End Brasil no Github +

Organização Front-End Brasil no Github

+
+ +
+

A ideia do Front-end Brasil é portar e iniciar discussões através de + issues. + Estando no GitHub, fica mais fácil procurar respostas e perguntas já respondidas por esses grupos. +

+
+ + + Ícone do Github + Front-End Brasil no Github + +
+
+ +
+
+

Fórum

+

Portando discussões feitas em grupos (Facebook, Google Groups, + Slack, + Disqus) pra issues.

+ Ver todos os tópicos +
+
+ +
+
+

Vagas Publicadas

+

Espaço para divulgação de vagas para front-enders.

+ Ver todas as vagas +
+
+ +
+
+

Open Source

+

Quer uma ajuda para seu projeto? Crie uma issue!

+ Ver todos os projetos +
+
+ +
+
+

Sugestões

+

Sugestões ou comentários sobre nossa organização ou dos outros + repositórios.

+ Enviar sugestões +
+
+ +
+
+

Outras iniciativas do Front-end Brasil

+
+ + +
+ Ícone da iniciativa Me Contrata +

Me Contrata

+
+ + + +
+ Ícone da iniciativa Doe um Livro +

Doe um Livro

+
+ + + +
+ Ícone da iniciativa Compra e Venda +

Compra e Venda

+
+
-
-
- - -
-

Sobre

-

Olá, seja bem-vindo!

-

Alguns posts em grupos de front-end em redes sociais geram bastante conteúdo bacana que poderia ser disponibilizado de forma mais fácil.

-

A busca do Facebook em grupos, por exemplo, tem vários problemas. Discussões épicas foram perdidas, e pessoas que ingressam agora nos grupos não tem mais acesso a esses posts.

-

A ideia desse repositório é portar ou iniciar essas discussões nas issues. Estando no Github, fica mais fácil procurar respostas a perguntas já respondidas por esses grupos.

-

O objetivo maior é unificar todas as discussões em um só local e o Github foi o escolhido para isso.

-
- - -
-

Estrutura

- - -
- - -
- - Clique aqui para enviar uma sugestão! - -
- -
- - - - - + + + + + + + + \ No newline at end of file