From 7e85ccfcf4aa49f653674b2346aeb49b71b9dd75 Mon Sep 17 00:00:00 2001 From: "alpe@pc" Date: Tue, 27 Jun 2023 11:57:20 -0300 Subject: [PATCH] First quest --- .gitignore | 1 + .../index.html | 44 ++++++++ .../src/css/reset.css | 16 +++ .../src/css/responsive.css | 47 ++++++++ .../src/css/style.css | 101 ++++++++++++++++++ .../src/images/bg-desktop.svg | 1 + .../src/images/bg-mobile.svg | 1 + .../src/images/favicon-32x32.png | Bin 0 -> 1063 bytes .../src/images/illustration-mockups.svg | 1 + .../src/images/logo-facebook.svg | 6 ++ .../src/images/logo-instagram.svg | 1 + .../src/images/logo-twitter.svg | 1 + .../src/images/logo.svg | 1 + 13 files changed, 221 insertions(+) create mode 100644 .gitignore create mode 100644 1-huddle-landing-page-with-single-introductory-section/index.html create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/css/reset.css create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/css/responsive.css create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/css/style.css create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/bg-desktop.svg create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/bg-mobile.svg create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/favicon-32x32.png create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/illustration-mockups.svg create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/logo-facebook.svg create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/logo-instagram.svg create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/logo-twitter.svg create mode 100644 1-huddle-landing-page-with-single-introductory-section/src/images/logo.svg diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3439db7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +_project \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/index.html b/1-huddle-landing-page-with-single-introductory-section/index.html new file mode 100644 index 0000000..27ac23e --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + Huddle + + +
+
+
+ Imagem do serviço +
+
+

Build The Community Your Fans Will Love

+

Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as you engage in genuine discussion.

+ Register +
+
+ +

+ Challenge by Frontend Mentor. + Coded by Your Name Here. +

+ + diff --git a/1-huddle-landing-page-with-single-introductory-section/src/css/reset.css b/1-huddle-landing-page-with-single-introductory-section/src/css/reset.css new file mode 100644 index 0000000..61de5e8 --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/css/reset.css @@ -0,0 +1,16 @@ +*{ + margin: 0; + padding: 0; + border: none; + outline: none; + box-sizing: border-box; +} + +a{ + text-decoration: none; + color: black; +} + +img{ + max-width: 100%; +} \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/css/responsive.css b/1-huddle-landing-page-with-single-introductory-section/src/css/responsive.css new file mode 100644 index 0000000..2b319a3 --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/css/responsive.css @@ -0,0 +1,47 @@ +@media (max-width: 600px){ + body { + background: hsl(257, 40%, 49%) url("../images/bg-mobile.svg") top/contain no-repeat; + margin: 38px 40px; + } + header { + margin-bottom: 64px; + } + header .logo { + height: 38px; + } + main { + flex-direction: column; + text-align: center; + } + main .info { + margin-top: 12px; + padding-right: unset; + font-size: 19px; + } + main .info .title { + font-size: 28px; + margin-bottom: 20px; + } + main .info .description { + margin-bottom: 28px; + } + main .info .register { + margin-left: auto; + margin-right: auto; + margin-bottom: 56px; + width: 240px; + height: 48px; + font-size: 14px; + } + footer { + align-self: center; + } + footer a.social { + height: 36px; + width: 36px; + } + footer a.social img { + height: 16px; + width: 16px; + } +} \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/css/style.css b/1-huddle-landing-page-with-single-introductory-section/src/css/style.css new file mode 100644 index 0000000..f492b18 --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/css/style.css @@ -0,0 +1,101 @@ +html { + font-family: 'Poppins', sans-serif; + color:white; +} + +body { + background: hsl(257, 40%, 49%) url("../images/bg-desktop.svg") no-repeat; + display:flex; + flex-direction: column; + justify-content: space-between; + margin: 54px 72px; +} + +header { + margin-bottom: 80px; +} +header .logo { + height: 52px; +} + +main { + display: flex; + justify-content: center; + gap: 50px; + margin-bottom: 16px; +} +main .appimg-container { + align-self: center; + flex: 1 0 55%; +} +main .info { + margin-top: 44px; + font-size: 18px; + padding-right: 16px; +} +main .info .title { + font-weight: 600; + font-size: 40px; + margin-bottom: 20px; +} +main .info .description { + font-family: 'Open Sans', sans-serif; + margin-bottom: 24px; + line-height: 150%; +} +main .info .register { + background-color: white; + color: hsl(228, 45%, 44%); + width: 200px; + height: 56px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 50px; +} +main .info .register:hover { + color: white; + background-color: rgb(233, 128, 231); +} + +footer { + align-self: flex-end; + display: flex; + gap: 16px; + margin-right: 8px; +} +footer a.social { + border: 1px solid white; + border-radius: 50%; + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; +} +footer a.social img { + height: 20px; + width: 20px; + filter: invert(100%) sepia(1%) saturate(2%) hue-rotate(254deg) brightness(112%) contrast(100%); +} +footer a.social:hover { + border-color: rgb(251, 83, 192); +} +footer a.social:hover > img { + filter: invert(55%) sepia(31%) saturate(5377%) hue-rotate(292deg) brightness(99%) contrast(100%); +} +.attribution { + position: fixed; + top: 0; + margin-left: -72px; + width: 100%; + text-align: center; + font-size: 11px; +} +.attribution a { + color: white; + text-decoration: underline; +} +.attribution a:hover { + color: lightgray; +} \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/bg-desktop.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/bg-desktop.svg new file mode 100644 index 0000000..95857ad --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/bg-desktop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/bg-mobile.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/bg-mobile.svg new file mode 100644 index 0000000..772b03b --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/bg-mobile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/favicon-32x32.png b/1-huddle-landing-page-with-single-introductory-section/src/images/favicon-32x32.png new file mode 100644 index 0000000000000000000000000000000000000000..1e2df7f089f46dd930239e418bf13e8e4c1cca0f GIT binary patch literal 1063 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081EY0-Plzi}!G9Wnr(eF` z|M+F+!xzhMK3;zF(cgdn_B?v|`rD7+fB)V2@MY=EN9|{BEWPpQ{f}RtfBl|!^+Ea3 z%d2iZe)i@2x9`6{eg66V&!4ULpSPU4KJ)Uu^RM22`~BzO$wz&&PyPA(@7<4I`yRjQ zJAZr1#XB#){D-o5+r^Vjdc3)fsquh@R{^yA;Z|8C!Zw`1zDvzMNK{QUFr z^G~yvU&yK5nOnE3q5ts2d8Z#d`S9=G|MwriU%2{m%ii0owp@Sy>dXGuA$NemCsPvS z7YvLEt(>(tKmBDkpML+hROc(RL;oBPGFiO5x8~1ErS?rgb&N^g?k~Ih+L^ zk;M!Q+`=Ht$S`Y;1W=H@#M9T6{SlWiKeL>x)y)*39#2mf#}JFtt&`J}n+ycniko-@ z3;26vOWyCzeS7I$?C$UX{_kIKV}WAF+24(KRQ;Wbm=(hXgpO=b(eBb|byZ~P5M3dt zyDB-nDx`Zw9LoWN-GrY`kHxRfy}Q3KfBxRdclJCv_%N_mL-x0j+x*I+s%JIY&vgg3Y zTes?8j%DMbh5PocynFBNZJq}$w`Q+tKfe6=^y}tkkv_Zb+uQBmSHB|O-+X(*4%OrO zQF%8%OSj*z`t$7X`oHyz%ReTa40^8r7Z}c}C9V-ADTyViR>?)FK#IZ0z|cb1&_LJF zGQ`l-%D~vl*g)IB$jZQAv*1E06b-rgDVb@NxHTN|kz5AU01WSllAy$Lg@U5|w9K4T zg_6pGRE5lfl4J&kiaC!z@o*G|X=t4CKYhmYX%GXmGPhnbx3IFX_hb=fVFi~4lfx;@ u%9}$JPT#n4;>ejJGDp}?H+U@Y(qnifE?Dx($#g2v3I \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/logo-facebook.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/logo-facebook.svg new file mode 100644 index 0000000..ddb9b21 --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/logo-facebook.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/logo-instagram.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/logo-instagram.svg new file mode 100644 index 0000000..05e650e --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/logo-instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/logo-twitter.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/logo-twitter.svg new file mode 100644 index 0000000..834d630 --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/logo-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/logo.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/logo.svg new file mode 100644 index 0000000..90d5c32 --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file