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 0000000..1e2df7f Binary files /dev/null and b/1-huddle-landing-page-with-single-introductory-section/src/images/favicon-32x32.png differ diff --git a/1-huddle-landing-page-with-single-introductory-section/src/images/illustration-mockups.svg b/1-huddle-landing-page-with-single-introductory-section/src/images/illustration-mockups.svg new file mode 100644 index 0000000..73ab59c --- /dev/null +++ b/1-huddle-landing-page-with-single-introductory-section/src/images/illustration-mockups.svg @@ -0,0 +1 @@ + \ 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