Initial commit

Szyszeekk · Feb 22, 2024 · 206c89e · 206c89e
commit 206c89e
Show file tree

Hide file tree

Showing 13 changed files with 386 additions and 0 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,12 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+  "proseWrap": "always"
+}
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,181 @@
+body {
+  font-family: 'Roboto', sans-serif;
+  color: #434455;
+  background-color: #ffffff;
+}
+
+button {
+  cursor: pointer;
+}
+
+ul {
+  list-style-type: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.logo-blue {
+  font-family: 'Raleway', sans-serif;
+  color: #4d5ae5;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 1.17;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.logo-black {
+  color: #2e2f42;
+}
+
+.navigation {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  color: #2e2f42;
+}
+
+.navigation:hover,
+.navigation:focus {
+  color: #404bbf;
+}
+
+.address-section {
+  color: #434455;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  font-style: normal;
+}
+
+.mail-and-phone:hover,
+.mail-and-phone:focus {
+  color: #404bbf;
+}
+
+.heading-head {
+  font-weight: 700;
+  font-size: 56px;
+  line-height: 1.07;
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: #fff;
+}
+
+.heading {
+  background-color: #2e2f42;
+}
+
+.order-button {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.04em;
+  color: #fff;
+  background-color: #4d5ae5;
+  font-family: inherit;
+}
+
+.order-button:hover,
+.order-button:focus {
+  background-color: #404bbf;
+}
+
+.advantages-head {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  color: #2e2f42;
+}
+
+.advantages-paragraph {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  color: #434455;
+}
+
+.our-team {
+  background-color: #f4f4fd;
+}
+
+.our-team-head {
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 1.11;
+  letter-spacing: 0.02em;
+  text-transform: capitalize;
+  text-align: center;
+  color: #2e2f42;
+}
+
+.our-team-list-point {
+  background-color: #ffffff;
+}
+
+.our-team-list-point-head {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: #2e2f42;
+}
+
+.our-team-list-point-paragraph {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  text-align: center;
+  color: #434455;
+}
+
+.our-portfolio-head {
+  font-weight: 700;
+  font-size: 36px;
+  line-height: 1.11;
+  letter-spacing: 0.02em;
+  text-transform: capitalize;
+  text-align: center;
+  color: #2e2f42;
+}
+
+.our-portfolio-list-point-head {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: 0.02em;
+  color: #2e2f42;
+}
+
+.our-portfolio-list-point-paragraph {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  color: #434455;
+}
+
+footer {
+  background-color: #2e2f42;
+}
+
+.logo-white {
+  color: #f4f4fd;
+}
+
+.footer-paragraph {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  color: #f4f4fd;
+}
diff --git a/images/banking-app.jpg b/images/banking-app.jpg
diff --git a/images/camila-garcia.jpg b/images/camila-garcia.jpg
diff --git a/images/cashless-payment.jpg b/images/cashless-payment.jpg
diff --git a/images/daniel-wilson.jpg b/images/daniel-wilson.jpg
diff --git a/images/mark-guerrero.jpg b/images/mark-guerrero.jpg
diff --git a/images/meditation-app.jpg b/images/meditation-app.jpg
diff --git a/images/online-courses.jpg b/images/online-courses.jpg
diff --git a/images/screen-illustrations.jpg b/images/screen-illustrations.jpg
diff --git a/images/taxi-service.jpg b/images/taxi-service.jpg
diff --git a/images/tom-ford.jpg b/images/tom-ford.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+
+    <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=Raleway:wght@800&family=Roboto:wght@400;500;700;900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./css/styles.css" />
+  </head>
+
+  <body>
+    <header>
+      <nav>
+        <a href="./index.html" class="logo-blue">
+          Web<span class="logo-black">Studio</span></a
+        >
+        <ul>
+          <li><a href="./index.html" class="navigation">Studio</a></li>
+          <li><a href="" class="navigation">Portfolio</a></li>
+          <li><a href="" class="navigation">Contacts</a></li>
+        </ul>
+      </nav>
+      <address class="address-section">
+        <ul>
+          <li>
+            <a href="mailto:info@devstudio.com" class="mail-and-phone"
+              >info@devstudio.com</a
+            >
+          </li>
+          <li>
+            <a href="tel:+110001111111" class="mail-and-phone"
+              >+11 (000) 111-11-11</a
+            >
+          </li>
+        </ul>
+      </address>
+    </header>
+    <main>
+      <section class="heading">
+        <h1 class="heading-head">Effective Solutions for Your Business</h1>
+        <button type="button" class="order-button">Order Service</button>
+      </section>
+      <section class="advantages">
+        <h2 class="hid">Our Advantages</h2>
+        <ul>
+          <li>
+            <h3 class="advantages-head">Strategy</h3>
+            <p class="advantages-paragraph">
+              Our goal is to identify the business problem to walk away with the
+              perfect and creative solution.
+            </p>
+          </li>
+          <li>
+            <h3 class="advantages-head">Punctuality</h3>
+            <p class="advantages-paragraph">
+              Bring the key message to the brand's audience for the best price
+              within the shortest possible time.
+            </p>
+          </li>
+          <li>
+            <h3 class="advantages-head">Diligence</h3>
+            <p class="advantages-paragraph">
+              Research and confirm brands that present the strongest digital
+              growth opportunities and minimize risk.
+            </p>
+          </li>
+          <li>
+            <h3 class="advantages-head">Technologies</h3>
+            <p class="advantages-paragraph">
+              Design practice focused on digital experiences. We bring forth a
+              deep passion for problem-solving.
+            </p>
+          </li>
+        </ul>
+      </section>
+      <section class="our-team">
+        <h2 class="our-team-head">Our Team</h2>
+        <ul>
+          <li class="our-team-list-point">
+            <img
+              src="./images/mark-guerrero.jpg"
+              width="264"
+              alt="Man with laptop presenting something"
+            />
+            <h3 class="our-team-list-point-head">Mark Guerrero</h3>
+            <p class="our-team-list-point-paragraph">Product Designer</p>
+          </li>
+          <li class="our-team-list-point">
+            <img
+              src="./images/tom-ford.jpg"
+              width="264"
+              alt="Confident man posing in profile to the camera"
+            />
+            <h3 class="our-team-list-point-head">Tom Ford</h3>
+            <p class="our-team-list-point-paragraph">Frontend Developer</p>
+          </li>
+          <li class="our-team-list-point">
+            <img
+              src="./images/camila-garcia.jpg"
+              width="264"
+              alt="Young woman wearing pink sweater"
+            />
+            <h3 class="our-team-list-point-head">Camila Garcia</h3>
+            <p class="our-team-list-point-paragraph">Marketing</p>
+          </li>
+          <li class="our-team-list-point">
+            <img
+              src="./images/daniel-wilson.jpg"
+              width="264"
+              alt="Confident man posing straight to the camera"
+            />
+            <h3 class="our-team-list-point-head">Daniel Wilson</h3>
+            <p class="our-team-list-point-paragraph">UI Designer</p>
+          </li>
+        </ul>
+      </section>
+      <section class="our-portfolio">
+        <h2 class="our-portfolio-head">Our Portfolio</h2>
+        <ul>
+          <li>
+            <img
+              src="./images/banking-app.jpg"
+              width="360"
+              alt="Screenshots of mobile banking apps"
+            />
+            <h3 class="our-portfolio-list-point-head">Banking App</h3>
+            <p class="our-portfolio-list-point-paragraph">App</p>
+          </li>
+          <li>
+            <img
+              src="./images/cashless-payment.jpg"
+              width="360"
+              alt="Scanning QR code with phone"
+            />
+            <h3 class="our-portfolio-list-point-head">Cashless Payment</h3>
+            <p class="our-portfolio-list-point-paragraph">Marketing</p>
+          </li>
+          <li>
+            <img
+              src="./images/meditation-app.jpg"
+              width="360"
+              alt="Laptop and phone with adverts on screen"
+            />
+            <h3 class="our-portfolio-list-point-head">Meditation App</h3>
+            <p class="our-portfolio-list-point-paragraph">App</p>
+          </li>
+          <li>
+            <img
+              src="./images/taxi-service.jpg"
+              width="360"
+              alt="Driver using navigation app to drive"
+            />
+            <h3 class="our-portfolio-list-point-head">Taxi Service</h3>
+            <p class="our-portfolio-list-point-paragraph">Marketing</p>
+          </li>
+          <li>
+            <img
+              src="./images/screen-illustrations.jpg"
+              width="360"
+              alt="Beautiful wallpapers with lead of purple color"
+            />
+            <h3 class="our-portfolio-list-point-head">Screen Illustrations</h3>
+            <p class="our-portfolio-list-point-paragraph">Design</p>
+          </li>
+          <li>
+            <img
+              src="./images/online-courses.jpg"
+              width="360"
+              alt="Smiling woman with earphones looking at the phone"
+            />
+            <h3 class="our-portfolio-list-point-head">Online Courses</h3>
+            <p class="our-portfolio-list-point-paragraph">Marketing</p>
+          </li>
+        </ul>
+      </section>
+    </main>
+    <footer class="foot">
+      <a href="./index.html" class="logo-blue">
+        Web<span class="logo-white">Studio</span></a
+      >
+      <p class="footer-paragraph">
+        Increase the flow of customers and sales for your business with digital
+        marketing & growth solutions.
+      </p>
+    </footer>
+  </body>
+</html>