diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..bddfa85 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,675 @@ +body { + font-family: "Roboto", sans-serif; + color: #434455; + background-color: #FFFFFF; +} + +* { + margin: 0; + padding: 0; + list-style: none; + box-sizing: border-box; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin-top: 0; + margin-bottom: 0; +} + +img { + display: block; +} + +ul { + list-style: none; + margin-top: 0; + margin-bottom: 0; + margin-left: 0; + +} + +a { + text-decoration: none; + color: currentColor +} + +address { + font-style: normal +} + +.container { + width: 1158px; + padding-left: 15px; + padding-right: 15px; + margin: 0 auto; +} + +/* Start header */ + +.header { + + border-bottom: 1px solid #e7e9fc; + box-shadow: 0 1px 6px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 2px 1px 0 rgba(46, 47, 66, 0.08); +} + +.header-container { + display: flex; + align-items: center; +} + +.header-menu { + display: flex; + align-items: center; + flex-grow: 1; + justify-content: space-between; + margin-right: 332px; + +} + +.logo-link { + font-family: "Raleway", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 1.17; + letter-spacing: 0.03em; + text-transform: uppercase; + color: #4d5ae5; + margin-right: 76px +} + +.logo-accent { + color: #2e2f42; + +} + +.menu-list { + display: flex; + gap: 40px; + + +} + +.menu-item {} + +.menu-link { + font-weight: 500; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #2e2f42; + padding-top: 24px; + padding-bottom: 24px; + display: block; + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); + +} + +.current { + position: relative; + color: #404bbf +} + +.current::after { + + content: ""; + position: absolute; + left: 0; + bottom: -1px; + border-radius: 2px; + background: #404bbf; + height: 4px; + width: 100%; +} + +.menu-link:hover { + color: #404bbf; +} + +.menu-link:focus { + color: #404bbf; +} + +.address { + font-style: normal +} + +.address-list { + display: flex; + gap: 40px +} + +.address-item {} + +.address-link { + font-weight: 400; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #434455; + transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.address-link:hover { + color: #404bbf; +} + +.address-link:focus { + color: #404bbf +} + +/* End header */ + +/* Start hero */ + + + + + +.hero { + + background: #2e2f42; + background-image: linear-gradient(rgba(46, 47, 66, 0.7), rgba(46, 47, 66, 0.7)), url(../images/hero-backgorund.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + padding-top: 188px; + padding-bottom: 188px; + text-align: center; + max-width: 1440px; + margin: 0 auto; + +} + + + + + +.hero-title { + font-weight: 700; + font-size: 56px; + line-height: 1.07; + letter-spacing: 0.02em; + text-align: center; + color: #fff; + + max-width: 496px; + + margin: 0 auto; + margin-bottom: 48px; +} + +.hero-button { + padding: 16px 32px; + font-weight: 500; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.04em; + color: #fff; + background: #4d5ae5; + cursor: pointer; + border-radius: 4px; + border: none; + + display: block; + min-width: 169px; + margin: 0 auto; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.hero-button:hover { + background-color: #404BBF +} + +.hero-button:focus { + background-color: #404BBF +} + +/* End hero */ + +/* Start features */ + +.features { + padding-top: 120px; + padding-bottom: 120px; +} + +.features-title { + visibility: hidden; +} + +.features-list { + + display: flex; + gap: 24px; + +} + +.features-item { + width: calc((100% - 72px) / 4); +} + +.features-icon { + fill: #2e2f42; + +} + +.features-icon-container { + display: flex; + align-items: center; + justify-content: center; + width: 264px; + height: 112px; + border: 1px solid #8e8f99; + border-radius: 4px; + background: #f4f4fd; + margin-bottom: 8px; + +} + + + + +.features-subtitle { + font-weight: 500; + font-size: 20px; + line-height: 1.2; + letter-spacing: 0.02em; + color: #2e2f42; + margin-bottom: 8px; +} + +.features-text { + + font-weight: 400; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #434455; +} + +/* End features */ + +/* Start team */ + +.team { + background: #f4f4fd; + padding-top: 120px; + padding-bottom: 120px; +} + +.team-title { + font-weight: 700; + font-size: 36px; + line-height: 1.11; + letter-spacing: 0.02em; + text-transform: capitalize; + text-align: center; + color: #2e2f42; + + margin-bottom: 72px; + + +} + +.team-list { + display: flex; + gap: 24px; + +} + +.team-info { + padding: 32px 0; + +} + +.team-item { + background-color: #FFFFFF; + border-radius: 0 0 4px 4px; + box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08); +} + +.team-pic {} + +.team-subtitle { + font-weight: 500; + font-size: 20px; + line-height: 1.2; + letter-spacing: 0.02em; + text-align: center; + color: #2e2f42; + margin-bottom: 8px +} + +.team-text { + font-weight: 400; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + text-align: center; + color: #434455; + margin-bottom: 8px; + +} + +.team-link-list { + display: flex; + gap: 24px; + justify-content: center; + + +} + +.team-link-item { + width: 40px; + height: 40px; + ; +} + +.team-link-icon { + fill: #f4f4fd +} + + + + +.team-link { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + background-color: #4D5AE5; + border-radius: 50%; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.team-link:hover { + background-color: #404bbf; +} + +.team-link:focus { + background-color: #404bbf; +} + +/* End team */ + +/* Start portfolio */ + +.portfolio { + padding: 120px 0 120px 0 +} + +.portfolio-info { + padding: 32px 16px; + border: 1px solid #e7e9fc; + border-top: none; +} + + + +.portfolio-title { + font-weight: 700; + font-size: 36px; + line-height: 1.11; + letter-spacing: 0.02em; + text-transform: capitalize; + text-align: center; + color: #2e2f42; + margin-bottom: 72px; +} + +.portfolio-list { + display: flex; + flex-wrap: wrap; + column-gap: 24px; + row-gap: 48px; + +} + +.portfolio-item { + width: calc((100% - 48px) / 3); + transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.portfolio-item:hover { + box-shadow: 0 2px 1px 0 rgba(46, 47, 66, 0.08), 0 1px 1px 0 rgba(46, 47, 66, 0.16), 0 1px 6px 0 rgba(46, 47, 66, 0.08); +} + +.portfolio-item:hover .portfolio-cover-text { + transform: translateY(0); +} + + + + + +.portfolio-pic {} + +.portfolio-cover-wrap { + position: relative; + overflow: hidden; +} + +.portfolio-cover-text { + position: absolute; + top: 0; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #f4f4fd; + background: #4d5ae5; + height: 100%; + padding: 40px 32px; + transform: translateY(100%); + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + + + +.portfolio-subtitle { + font-weight: 500; + font-size: 20px; + line-height: 1.2; + letter-spacing: 0.02em; + color: #2e2f42; + margin-bottom: 8px +} + +.portfolio-text { + font-weight: 400; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #434455; + +} + +/* End portfolio */ + +/* Start footer */ +.footer { + + background: #2e2f42; + padding-top: 100px; + padding-bottom: 100px; + +} + +.footer-container { + display: flex; + align-items: baseline +} + +.logo-text-wrap { + margin-right: 120px +} + + + +.foot-logo-link { + font-family: "Raleway", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 1.17; + letter-spacing: 0.03em; + text-transform: uppercase; + color: #4d5ae5; + margin-bottom: 16px; + display: inline-block; +} + +.foot-logo-accent { + color: #f4f4fd +} + + +.footer-text { + max-width: 264px; + font-weight: 400; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #f4f4fd; + +} + + + +.soc-media-text { + font-weight: 500; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + color: #fff; + margin-bottom: 16px; +} + +.footer-link-list { + display: flex; + gap: 16px; +} + +.footer-link-item { + width: 40px; + height: 40px; +} + +.footer-link { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + background-color: #4D5AE5; + border-radius: 50%; + transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.footer-link:hover { + background-color: #31d0aa; +} + +.footer-link:focus { + background-color: #31d0aa; +} + +/* Start-modal-window */ + +.backdrop { + position: fixed; + top: 0; + width: 100%; + height: 100%; + background: rgba(46, 47, 66, 0.4); +} + +.modal-window { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 4px; + width: 408px; + min-height: 584px; + box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 1px 0 rgba(0, 0, 0, 0.2); + background: #fcfcfc; + padding: 72px 24px 24px; +} + +.close-button { + position: absolute; + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + top: 24px; + right: 24px; + + +} + +.close-button-icon { + fill: #2e2f42; +} + +.modal-title { + font-weight: 500; + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.02em; + text-align: center; + color: #2e2f42; + margin-bottom: 16px; + +} + +.form-input { + width: 100%; + height: 40px; + border: 1px solid rgba(46, 47, 66, 0.4); + border-radius: 4px; + margin-bottom: 8px; + +} + +.modal-label { + display: block; + font-weight: 400; + font-size: 12px; + line-height: 1.16667; + letter-spacing: 0.04em; + color: #8e8f99; + margin-bottom: 4px; +} + +.modal-input-wrap {} + +.modal-icon { + + position: absolute; + left: 16px; + fill: #2e2f42; +} \ No newline at end of file diff --git a/images/hero-backgorund.jpg b/images/hero-backgorund.jpg new file mode 100644 index 0000000..c03ca1c Binary files /dev/null and b/images/hero-backgorund.jpg differ diff --git a/images/icons.svg b/images/icons.svg new file mode 100644 index 0000000..e1a4345 --- /dev/null +++ b/images/icons.svg @@ -0,0 +1,53 @@ + \ No newline at end of file diff --git a/images/img-1.jpg b/images/img-1.jpg new file mode 100644 index 0000000..2edff40 Binary files /dev/null and b/images/img-1.jpg differ diff --git a/images/img-2.jpg b/images/img-2.jpg new file mode 100644 index 0000000..f3f96e0 Binary files /dev/null and b/images/img-2.jpg differ diff --git a/images/img-3.jpg b/images/img-3.jpg new file mode 100644 index 0000000..d232e44 Binary files /dev/null and b/images/img-3.jpg differ diff --git a/images/img-4.jpg b/images/img-4.jpg new file mode 100644 index 0000000..5162ef8 Binary files /dev/null and b/images/img-4.jpg differ diff --git a/images/img-5.jpg b/images/img-5.jpg new file mode 100644 index 0000000..0c23a8c Binary files /dev/null and b/images/img-5.jpg differ diff --git a/images/img-6.jpg b/images/img-6.jpg new file mode 100644 index 0000000..23ce225 Binary files /dev/null and b/images/img-6.jpg differ diff --git a/images/img-7.jpg b/images/img-7.jpg new file mode 100644 index 0000000..0cb76c7 Binary files /dev/null and b/images/img-7.jpg differ diff --git a/images/img-8.jpg b/images/img-8.jpg new file mode 100644 index 0000000..c7b4bec Binary files /dev/null and b/images/img-8.jpg differ diff --git a/images/img-9.jpg b/images/img-9.jpg new file mode 100644 index 0000000..a531f2f Binary files /dev/null and b/images/img-9.jpg differ diff --git a/images/img.jpg b/images/img.jpg new file mode 100644 index 0000000..d485048 Binary files /dev/null and b/images/img.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..45d3088 --- /dev/null +++ b/index.html @@ -0,0 +1,533 @@ + + + + + + Web studio + + + + + + + +
+
+ +
+ +
+
+
+
+
+
+

Effective Solutions for Your Business

+ +
+
+ +
+
+ +
    +
  • +
    + + + +
    +

    Strategy

    +

    + Our goal is to identify the business problem to walk away with + the perfect and creative solution. +

    +
    • +
  • +
    + + + +
    +

    Punctuality

    +

    + Bring the key message to the brand's audience for the best price + within the shortest possible time. +

    +
    • +
  • +
    + + + +
    +

    Diligence

    +

    + Research and confirm brands that present the strongest digital + growth opportunities and minimize risk. +

    +
    • +
  • +
    + + + +
    +

    Technologies

    +

    + Design practice focused on digital experiences. We bring forth a + deep passion for problem-solving. +

    +
    • +
+
+
+ +
+
+

Our Team

+ +
+
+ +
+
+

Our Portfolio

+
    +
  • +
    + Banking App photo +

    + 14 Stylish and User-Friendly App Design Concepts · Task + Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App + · Cloud Storage App +

    +
    +
    +

    Banking App

    +

    App

    +
    +
    • +
  • +
    + Cashless Payment photo +

    + 14 Stylish and User-Friendly App Design Concepts · Task + Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App + · Cloud Storage App +

    +
    +
    +

    Cashless Payment

    +

    Marketing

    +
    +
    • +
  • +
    + Meditation App photo +

    + 14 Stylish and User-Friendly App Design Concepts · Task + Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App + · Cloud Storage App +

    +
    +
    +

    Meditation App

    +

    App

    +
    +
    • +
  • +
    + Taxi Service photo +

    + 14 Stylish and User-Friendly App Design Concepts · Task + Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App + · Cloud Storage App +

    +
    +
    +

    Taxi Service

    +

    Marketing

    +
    +
    • +
  • +
    + Screen Illustrations photo +

    + 14 Stylish and User-Friendly App Design Concepts · Task + Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App + · Cloud Storage App +

    +
    +
    +

    Screen Illustrations

    +

    Design

    +
    +
    • +
  • +
    + Online Courses photo +

    + 14 Stylish and User-Friendly App Design Concepts · Task + Manager App · Calorie Tracker App · Exotic Fruit Ecommerce App + · Cloud Storage App +

    +
    +
    +

    Online Courses

    +

    Marketing

    +
    +
    • +
+
+
+
+ + +
+
+ +

Leave your contacts and we will call you back

+
+
+ +
+ + + + +
+
+
+ + +
+ + + + +
+
+
+ +
+ + + + +
+
+
+
+
+ +