adding files and HTMLs and CSS code

jlcpaulma · Jan 1, 2024 · cbd27d9 · cbd27d9
1 parent 9c175b5
commit cbd27d9
Show file tree

Hide file tree

Showing 19 changed files with 514 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,203 @@
+:root {
+  --iris: #4d5ae5;
+  --navyblue: #2e2f42;
+  --ocean: #404bbf;
+  --white: #fff;
+  --slate: #434455;
+  --cornflower: #e7e9fc;
+  --cloud: #f4f4fd;
+}
+
+body {
+  font-family: Roboto, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0.32px;
+}
+
+.logo {
+  text-decoration: none;
+  font-family: Raleway, sans-serif;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 21px;
+  letter-spacing: 0.54px;
+  text-transform: uppercase;
+}
+
+.weblogo {
+  color: var(--iris, #4d5ae5);
+}
+
+.studiologo {
+  color: var(--navyblue, #2e2f42);
+}
+
+.linkpage {
+  text-decoration: none;
+  color: var(--navyblue, #2e2f42);
+  font-weight: 500;
+}
+
+.linkpage:hover,
+.linkpage:focus {
+  color: var(--ocean, #404bbf);
+}
+
+.link-active {
+  color: var(--ocean, #404bbf);
+}
+
+.contacts {
+  color: var(--slate, #434455);
+  text-decoration: none;
+}
+
+.contacts:hover,
+.contacts:focus {
+  color: var(--ocean, #404bbf);
+}
+
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.bg-sec1 {
+  background-color: var(--navyblue, #2e2f42);
+  margin: 0%;
+  padding: 0%;
+}
+
+.sec1-title {
+  color: var(--white, #fff);
+  text-align: center;
+  font-size: 56px;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 60px;
+  letter-spacing: 1.12px;
+}
+
+.order-button {
+  cursor: pointer;
+  color: var(--white, #fff);
+  background: var(--iris, #4d5ae5);
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.64px;
+  border: none;
+  border-radius: 4px;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
+}
+
+.order-button:hover,
+.order-button:focus {
+  color: var(--white, #fff);
+  background-color: var(--ocean, #05092f);
+}
+
+.section2 {
+  background-color: var(--white, #fff);
+}
+
+.about-title {
+  color: var(--navyblue, #2e2f42);
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+}
+
+.about-description {
+  color: var(--slate, #434455);
+}
+
+.section3 {
+  background-color: var(--white, #fff);
+}
+
+.sec-title {
+  color: var(--navyblue, #2e2f42);
+  text-align: center;
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 40px;
+  letter-spacing: 0.72px;
+  text-transform: capitalize;
+}
+
+.section4 {
+  background-color: var(--cloud, #f4f4fd);
+}
+
+.team-members {
+  color: var(--navyblue, #2e2f42);
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+}
+
+.team-jobrole {
+  color: var(--slate, #434455);
+}
+
+.portfolio-page {
+  background-color: var(--white, #fff);
+}
+
+.filter-button {
+  cursor: pointer;
+  color: var(--iris, #4d5ae5);
+  background-color: var(--cloud, #f4f4fd);
+  text-align: center;
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: 0.64px;
+  border-radius: 4px;
+  border: 1px solid var(--cornflower, #e7e9fc);
+}
+
+.filter-button:hover,
+.filter-button:focus {
+  color: var(--cloud, #f4f4fd);
+  background-color: var(--ocean, #05092f);
+  border-color: var(--ocean, #05092f);
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.12),
+    0px 2px 1px 0px rgba(0, 0, 0, 0.08), 0px 3px 1px 0px rgba(0, 0, 0, 0.1);
+}
+
+.active-filter {
+  color: var(--white, #fff);
+  background-color: var(--ocean, #05092f);
+  border-color: var(--ocean, #05092f);
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.12),
+    0px 2px 1px 0px rgba(0, 0, 0, 0.08), 0px 3px 1px 0px rgba(0, 0, 0, 0.1);
+}
+
+.portfolio-service {
+  color: var(--navyblue, #2e2f42);
+  font-size: 20px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+}
+
+.portfolio-category {
+  color: var(--slate, #434455);
+}
+
+.footer {
+  background-color: var(--navyblue, #2e2f42);
+}
+
+.studiologo2 {
+  color: var(--cloud, #f4f4fd);
+}
+
+.motto {
+  color: var(--cloud, #f4f4fd);
+}
diff --git a/images/our-team-1.jpg b/images/our-team-1.jpg
diff --git a/images/our-team-2.jpg b/images/our-team-2.jpg
diff --git a/images/our-team-3.jpg b/images/our-team-3.jpg
diff --git a/images/our-team-4.jpg b/images/our-team-4.jpg
diff --git a/images/project-1.jpg b/images/project-1.jpg
diff --git a/images/project-2.jpg b/images/project-2.jpg
diff --git a/images/project-3.jpg b/images/project-3.jpg
diff --git a/images/project-4.jpg b/images/project-4.jpg
diff --git a/images/project-5.jpg b/images/project-5.jpg
diff --git a/images/project-6.jpg b/images/project-6.jpg
diff --git a/images/project-7.jpg b/images/project-7.jpg
diff --git a/images/project-8.jpg b/images/project-8.jpg
diff --git a/images/project-9.jpg b/images/project-9.jpg
diff --git a/images/what-we-do-1.jpg b/images/what-we-do-1.jpg
diff --git a/images/what-we-do-2.jpg b/images/what-we-do-2.jpg
diff --git a/images/what-we-do-3.jpg b/images/what-we-do-3.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Go IT WEBSTUDIO - Homework2</title>
+    <link rel="stylesheet" href="./css/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&family=Roboto:wght@400;500;700;900&display=swap"
+    />
+  </head>
+  <body>
+    <header>
+      <nav>
+        <a href="./index.html" class="logo">
+          <span class="weblogo">WEB</span><span class="studiologo">STUDIO</span>
+        </a>
+        <ul class="nav list">
+          <li>
+            <a href="./index.html" class="linkpage link-active">Studio</a>
+          </li>
+          <li>
+            <a href="./portfolio.html" class="linkpage">Portfolio</a>
+          </li>
+          <li><a href="#" class="linkpage">Contacts</a></li>
+        </ul>
+      </nav>
+      <ul class="contactinfo list">
+        <li>
+          <a href="mailto:info@devstudio.com" class="contacts"
+            >info@devstudio.com</a
+          >
+        </li>
+        <li>
+          <a href="tel:+110001111111" class="contacts">+11 (000) 111-11-11</a>
+        </li>
+      </ul>
+    </header>
+
+    <main>
+      <section class="hero bg-sec1">
+        <h1 class="sec1-title">EFFECTIVE SOLUTION<br />for YOUR BUSINESS</h1>
+        <button type="button" class="order-button">Order Service</button>
+      </section>
+      <section class="section">
+        <ul class="list">
+          <li>
+            <h3 class="about-title">Strategy</h3>
+            <p class="about-description">
+              Our goal is to identify the business problem to walk away with the
+              perfect and creative solution.
+            </p>
+          </li>
+          <li>
+            <h3 class="about-title">Punctuality</h3>
+            <p class="about-description">
+              Bring the key message to the brand's audience for the best price
+              within the shortest possible time.
+            </p>
+          </li>
+          <li>
+            <h3 class="about-title">Diligence</h3>
+            <p class="about-description">
+              Research and confirm brands that present the strongest digital
+              growth opportunities and minimize risk.
+            </p>
+          </li>
+          <li>
+            <h3 class="about-title">Technoligies</h3>
+            <p class="about-description">
+              Design practice focused on digital experiences. We brign forth a
+              deep passion for problem-solving.
+            </p>
+          </li>
+        </ul>
+      </section>
+      <section class="section">
+        <h2 class="sec-title">What Are We Doing</h2>
+        <ul class="service list">
+          <li>
+            <img
+              src="images/what-we-do-1.jpg"
+              alt="desktop app"
+              width="360"
+              height="300"
+            />
+          </li>
+          <li>
+            <img
+              src="images/what-we-do-2.jpg"
+              alt="phone app"
+              width="360"
+              height="300"
+            />
+          </li>
+          <li>
+            <img
+              src="images/what-we-do-3.jpg"
+              alt="sync bet. devices"
+              width="360"
+              height="300"
+            />
+          </li>
+        </ul>
+      </section>
+      <section class="section">
+        <h2 class="sec-title">Our Team</h2>
+        <ul class="team list">
+          <li>
+            <img src="images/our-team-1.jpg" alt="Mark Guerrero" width="264" />
+            <h3 class="team-members">Mark Guererro</h3>
+            <p class="team-jobrole">Product Designer</p>
+          </li>
+          <li>
+            <img src="images/our-team-2.jpg" alt="Tom Ford" width="264" />
+            <h3 class="team-members">Tom Ford</h3>
+            <p class="team-jobrole">Frontend Developer</p>
+          </li>
+          <li>
+            <img src="images/our-team-3.jpg" alt="Camila Garcia" width="264" />
+            <h3 class="team-members">Camila Garcia</h3>
+            <p class="team-jobrole">Marketing</p>
+          </li>
+          <li>
+            <img src="images/our-team-4.jpg" alt="Daniel Wilson" width="264" />
+            <h3 class="team-members">Daniel Wilson</h3>
+            <p class="team-jobrole">UI Designer</p>
+          </li>
+        </ul>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <a href="./index.html" class="logo">
+        <span class="weblogo">WEB</span><span class="studiologo2">STUDIO</span>
+      </a>
+      <p class="motto">
+        Increase the flow of customers and <br />sales for your business withb
+        digital<br />marketing & growth solutions.
+      </p>
+    </footer>
+  </body>
+</html>