commit 07fed467d7109ee5350ffef3682859323ca8b53d Author: Yusuf İpek Date: Mon Oct 25 16:48:48 2021 +0300 init diff --git a/Chatty.png b/Chatty.png new file mode 100644 index 0000000..fea44a8 Binary files /dev/null and b/Chatty.png differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..6efd97a --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +This is a webpage that I've designed for my portfolio. + +[Figma Link](https://www.figma.com/file/kJBbVkELFZLioXRVvZYzAV/Chatty?node-id=0%3A1) + +[Live Page](https://yusufipk.github.io/chatty/) + +![Chatty](./Chatty.png) diff --git a/app.css b/app.css new file mode 100644 index 0000000..f6ad65e --- /dev/null +++ b/app.css @@ -0,0 +1,547 @@ +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + font-family: Roboto, sans-serif; + font-weight: 600; +} + +body { + box-sizing: border-box; +} + +.container { + display: grid; + grid-column-gap: 30px; + padding-left: 14rem; + padding-right: 14rem; + + grid-template-columns: repeat(12, 1fr); + grid-template-rows: repeat(8, 1fr); +} + +.container-hero { + max-height: 101rem; +} + +.container-middle { + max-height: 110rem; +} + +.container-cta { + max-height: 85.3rem; +} + +.logo-text { + font-size: 1.6rem; +} + +.hero { + background-color: #103347; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: Poppins, sans-serif; + font-weight: 600; + color: white; + + line-height: 10.9rem; + letter-spacing: -0.03em; +} + +h1 { + font-size: 9.4rem; + font-weight: 100; +} + +h2 { + color: #475058; + font-size: 4.5rem; +} + +p { + font-family: Roboto, sans-serif; + font-weight: 300; + font-size: 2.2rem; + color: white; + letter-spacing: -0.03em; + + line-height: 115.5%; +} + +button { + width: 17rem; + height: 6.6rem; + font-size: 1.6rem; +} + +button:active { + transform: translateY(4px); +} + +a { + font-family: Roboto, sans-serif; + text-decoration: none; + color: white; + font-size: 1.4rem; +} + +a:hover { + border-bottom: #01c9e3 solid 2px; + transition: 100ms ease all; +} + +img { + width: 100%; + height: auto; +} + +.navbar { + grid-column: 1 / 12; + + display: flex; + justify-content: space-between; + align-items: center; + + margin-top: 4.2rem; + + min-width: 40rem; +} + +.bar { + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + background-color: white; +} + +.navbar_mobile:hover { + opacity: 0.5; + transition: all 0.2s ease; +} + +.navbar_right a { + margin-right: 3rem; +} + +.logo { + width: 7rem; +} + +.a_white { + padding: 1rem 2rem 1rem 2rem; + border-radius: 6rem; + background-color: rgb(255, 255, 255, 14%); +} + +.a_white:hover { + border-bottom: none; +} + +.a_white:hover { + opacity: 0.8; + transition: 0.2s ease-in opacity; +} + +.button_main { + background-color: #01c9e3; + border: 0; + border-radius: 6rem; + color: white; +} + +.button_main:hover { + opacity: 0.7; + transition: 0.2s ease-in opacity; +} + +.button_transparent { + background-color: transparent; + border-radius: 6rem; + border: 2px solid white; + color: white; +} + +.button_transparent:hover { + background-color: rgb(255, 255, 255, 20%); + transition: 0.2s ease-in background-color; +} + +.hero_container { + grid-column: 1/12; + grid-row: 4; + + display: flex; + justify-content: center; +} + +.hero_heading { + max-width: 62rem; +} + +.hero_p-1 { + margin-left: 0.5rem; + margin-top: 1rem; + margin-bottom: 6rem; +} + +.button_main-hero { + margin-right: 3rem; +} + +.hero_text { + grid-column: 1/6; + grid-row: 4; + margin-top: 7rem; +} + +.hero_text-buttons { + display: flex; +} + +.hero_container-image { + grid-column: 6/12; + grid-row: 4; + + max-width: 77rem; + max-height: 60rem; +} + +.middle_text { + grid-column: 2/12; + grid-row: 2; + margin-top: 4rem; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.middle_text p { + color: #5e666d; + max-width: 56rem; + margin-bottom: 3.2rem; + text-align: center; +} + +.middle_text img { + max-width: 101rem; + max-height: 63rem; +} + +.cta { + background-color: #e8ebed; +} + +.cta_img { + grid-column: 1/8; + grid-row: 4; + + max-width: 95rem; + max-height: 60rem; +} + +.cta_text p { + color: #5e666d; +} + +.cta_text { + grid-column: 9/12; + grid-row: 4; + + max-width: 58rem; + max-height: 46rem; + margin-top: 12rem; +} + +.cta_text h2 { + line-height: 115.5%; + min-width: 50rem; +} + +.cta_p-1 { + margin-top: 4rem; + margin-bottom: 4rem; +} + +.cta_text-buttons .button_transparent { + margin-left: 3rem; + color: #5e666d; + border-color: #01c9e3; +} + +.cta_text-buttons .button_transparent:hover { + background-color: rgb(255, 255, 255, 100%); +} + +.cta_review { + display: flex; + + margin-top: 4.1rem; +} + +.cta_text h2 { + font-size: 4.2rem; +} + +.cta_review p { + font-size: 2.1rem; +} + +.stars { + max-width: 11rem; + max-height: 2rem; + + margin-right: 1.5rem; +} + +.line { + width: 16.6rem; + border-bottom: 1px solid rgb(0, 0, 0, 16%); + margin-top: 7rem; +} + +.container-footer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, auto)); + grid-column-gap: 3rem; + + padding: 9rem 14rem 9rem 14rem; +} + +.container-footer li { + list-style-type: none; + color: rgb(0, 0, 0, 69%); +} + +.container-footer a { + color: rgb(0, 0, 0, 69%); + font-weight: 200; + font-size: 1.2rem; +} + +.container-footer p { + color: #475058; +} + +.container-footer li { + margin-top: 1.2rem; +} + +.footer-logo p { + margin-top: 1.2rem; + max-width: 16rem; +} + +.navbar_mobile { + display: none; +} + +@media (max-width: 1600px) { + html { + font-size: 50%; + } +} + +@media (max-width: 1200px) { + h1 { + font-size: 8rem; + } + + .container { + padding-left: 10rem; + padding-right: 10rem; + } + + .container-footer { + padding-left: 5rem; + padding-right: 5rem; + } + + .cta_text h2 { + font-size: 3rem; + } + + .cta_review { + max-width: 40rem; + } +} + +@media (max-width: 1000px) { + h1 { + font-size: 6rem; + line-height: 8rem; + } + + .hero_p-1 { + margin-bottom: 3rem; + margin-left: 0.2rem; + } + + button { + width: 14rem; + height: 4.5rem; + font-size: 1.5rem; + } + + .container { + padding-left: 9rem; + padding-right: 9rem; + } + + .container-hero { + max-height: 80rem; + } + + .container-middle { + max-height: 95rem; + } + + .hero_p-1 { + font-size: 1.9rem; + } + + .cta_p-1 { + font-size: 1.9rem; + } + + .cta_text { + grid-column: 8/12; + } + + .cta_text h2 { + min-width: 35rem; + } + + .cta_text-buttons .button_transparent { + margin-left: 1.5rem; + } +} + +@media (max-width: 800px) { + .container { + padding-left: 6rem; + padding-right: 6rem; + } + + .container-hero { + max-height: 60rem; + } + + .hero_container-image { + margin-top: 6rem; + } + + h1 { + font-size: 5rem; + } + + .cta_text h2 { + min-width: 30rem; + } +} + +@media (max-width: 600px) { + .container { + padding-left: 3rem; + padding-right: 3rem; + } + + .container-footer p { + margin-top: 1.5rem; + } + + .hero_container-image { + grid-column: 1/12; + grid-row: 3; + max-width: 40rem; + } + + .hero_text { + grid-column: 1/12; + grid-row: 2; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + + margin-top: 4rem; + } + + .hero_p-1 { + margin-bottom: 3rem; + margin-left: 0.2rem; + } + + h1 { + line-height: 6rem; + } + + .hero_heading { + max-width: 35rem; + } + + .container-hero { + max-height: 85rem; + place-items: center; + } + + .navbar { + margin-top: 2.5rem; + } + + .navbar_right { + display: none; + } + + .navbar_mobile { + display: block; + } + + .cta_img { + grid-column: 1/12; + grid-row: 2; + } + + .cta_text { + grid-column: 2/12; + grid-row: 4; + margin-top: 0; + } + + .container-cta { + max-height: 90rem; + } + + .container-footer { + padding-top: 5rem; + padding-bottom: 5rem; + } +} + +@media (max-width: 460px) { + h2 { + font-size: 3.5rem; + } + + .container-middle { + max-height: 70rem; + } + + .container-footer { + padding-left: 2rem; + padding-right: 2rem; + } +} diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..39a217e Binary files /dev/null and b/favicon-32x32.png differ diff --git a/img/CTA-img.png b/img/CTA-img.png new file mode 100644 index 0000000..61445da Binary files /dev/null and b/img/CTA-img.png differ diff --git a/img/Hero Pictures-min.png b/img/Hero Pictures-min.png new file mode 100644 index 0000000..360ef34 Binary files /dev/null and b/img/Hero Pictures-min.png differ diff --git a/img/chat-img.jpg b/img/chat-img.jpg new file mode 100644 index 0000000..fcf2a98 Binary files /dev/null and b/img/chat-img.jpg differ diff --git a/img/logo-dark.svg b/img/logo-dark.svg new file mode 100644 index 0000000..dfc5980 --- /dev/null +++ b/img/logo-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..3132124 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/stars.svg b/img/stars.svg new file mode 100644 index 0000000..6b0dfd8 --- /dev/null +++ b/img/stars.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d2c9e40 --- /dev/null +++ b/index.html @@ -0,0 +1,139 @@ + + + + + + Chatty + + + + + + + + + +
+
+
+ +
+ + + +
+ +
+ Product + Services + Contact + Log In + Try It Free +
+
+ +
+

Have your best chat

+

Fast, easy & unlimited team chat

+ +
+ + +
+
+ +
+ Hero Image +
+
+
+ +
+
+
+

Instant Team Chats

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean + commodo ligula eget dolor. Aenean massa. Cum sociis natoque + penatibuset magnis dis parturient montes, nascetur ridiculus mus. +

+ chat_app +
+
+
+ +
+
+ people looking at computer + +
+

Perfect Solution for Small Businesses

+

Pricing plans that fit like a glove.

+ +
+ + +
+
+
+ +

+ 5,200 businesses use Chatty and they rate it as 5-stars +

+
+
+
+
+ +
+
+ + +
+

Help

+
  • Support
    • +
  • Knowledgebase
    • +
  • Tutorials
    • +
    + +
    +

    Features

    +
  • Screen Sharing
    • +
  • iOS & Android Apps
    • +
  • File Sharing
    • +
  • User Management
    • +
    + +
    +

    Company

    +
  • About Us
    • +
  • Careers
    • +
  • Contact Us
    • +
    + +
    +

    Contact Us

    +
  • info@chatty.com
    • +
  • 1-111-111-111
    • +
  • 400 Baker St, UK
    • +
    +
    +
    + +