-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 7e85ccf
Showing
13 changed files
with
221 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| _project |
44 changes: 44 additions & 0 deletions
44
1-huddle-landing-page-with-single-introductory-section/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="shortcut icon" href="src/images/favicon-32x32.png"" type="image/x-icon"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@400;600&display=swap" rel="stylesheet"/> | ||
| <link rel="stylesheet" href="src/css/reset.css" /> | ||
| <link rel="stylesheet" href="src/css/style.css" /> | ||
| <link rel="stylesheet" href="src/css/responsive.css" /> | ||
| <title>Huddle</title> | ||
| </head> | ||
| <body> | ||
| <header><img class="logo" src="src/images/logo.svg" alt="Logo do Huddle"></header> | ||
| <main> | ||
| <div class="appimg-container"> | ||
| <img src="src/images/illustration-mockups.svg" alt="Imagem do serviço"> | ||
| </div> | ||
| <div class="info"> | ||
| <h2 class="title">Build The Community Your Fans Will Love</h2> | ||
| <p class="description">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.</p> | ||
| <a href="#" class="register">Register</a> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <a href="#" class="social facebook"> | ||
| <img src="src/images/logo-facebook.svg" alt="Logo do Facebook"> | ||
| </a> | ||
| <a href="#" class="social twitter"> | ||
| <img src="src/images/logo-twitter.svg" alt="Logo do Twitter"> | ||
| </a> | ||
| <a href="#" class="social instagram"> | ||
| <img src="src/images/logo-instagram.svg" alt="Logo do Twitter"> | ||
| </a> | ||
| </footer> | ||
| <p class="attribution"> | ||
| Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. | ||
| Coded by <a href="#">Your Name Here</a>. | ||
| </p> | ||
| </body> | ||
| </html> |
16 changes: 16 additions & 0 deletions
16
1-huddle-landing-page-with-single-introductory-section/src/css/reset.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } |
47 changes: 47 additions & 0 deletions
47
1-huddle-landing-page-with-single-introductory-section/src/css/responsive.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
101 changes: 101 additions & 0 deletions
101
1-huddle-landing-page-with-single-introductory-section/src/css/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
1 change: 1 addition & 0 deletions
1
1-huddle-landing-page-with-single-introductory-section/src/images/bg-desktop.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
1-huddle-landing-page-with-single-introductory-section/src/images/bg-mobile.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+1.04 KB
...ddle-landing-page-with-single-introductory-section/src/images/favicon-32x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...nding-page-with-single-introductory-section/src/images/illustration-mockups.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions
6
...ddle-landing-page-with-single-introductory-section/src/images/logo-facebook.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
...dle-landing-page-with-single-introductory-section/src/images/logo-instagram.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions
1
1-huddle-landing-page-with-single-introductory-section/src/images/logo-twitter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.