From 9a793cc7d5ea7e50f67abe8d4d542c1508485238 Mon Sep 17 00:00:00 2001 From: khadija11 Date: Sat, 8 Jun 2024 18:58:52 +0100 Subject: [PATCH] m --- About.html | 0 Contact.html | 0 Project.html | 0 css/global.css | 54 ++++++- css/style.css | 131 ++++----------- images/icons/diamond.svg | 5 +- images/icons/feather1.svg | 4 + images/icons/full-left-arrow.svg | 4 + images/icons/full-right-arrow.svg | 4 + images/icons/horn.svg | 5 +- images/icons/palette.svg | 11 +- images/icons/pen1.svg | 3 + images/icons/talking.svg | 12 +- index.html | 260 +++++++++++++++--------------- project-details.html | 0 15 files changed, 240 insertions(+), 253 deletions(-) delete mode 100644 About.html delete mode 100644 Contact.html delete mode 100644 Project.html create mode 100644 images/icons/feather1.svg create mode 100644 images/icons/full-left-arrow.svg create mode 100644 images/icons/full-right-arrow.svg create mode 100644 images/icons/pen1.svg delete mode 100644 project-details.html diff --git a/About.html b/About.html deleted file mode 100644 index e69de29..0000000 diff --git a/Contact.html b/Contact.html deleted file mode 100644 index e69de29..0000000 diff --git a/Project.html b/Project.html deleted file mode 100644 index e69de29..0000000 diff --git a/css/global.css b/css/global.css index b43729e..364d442 100644 --- a/css/global.css +++ b/css/global.css @@ -1,7 +1,59 @@ body { background-color: black; font-family: Roboto, serif; + margin: 0; + padding: 0; + } + +.wrapper { + max-width: 1600px; margin: 0 auto; + padding: 0 40px; box-sizing: border-box; - max-width: 1400px; +} +.icon-small-container { + display: flex; + justify-content: center; + align-items: center; + width: 23px; + height: 23px; + background-color: #000; + border-radius: 50%; + position: relative; + left: -10px; +} + +.icon-small-container img { + width: 80%; + height: 50%; + + +} +.icon-big-container { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + background-color: #000; + border-radius: 50%; +} + +.icon-big-container img { + width: 80%; + height: 50%; + object-fit: contain; +} +.icon-big-container .white { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + background-color: #ffffff; + border-radius: 50%; +} + +.white-background { + background-color: #fff; } diff --git a/css/style.css b/css/style.css index 1f50545..d1e4c30 100644 --- a/css/style.css +++ b/css/style.css @@ -1,36 +1,32 @@ .centered-left-image { position: absolute; - top: -15; /* Adjust as needed to position the image higher */ - left: -230px; /* Adjust as needed to position the image further left */ - width: 150px; /* Adjust the width as needed */ + top: -15px; + left: -150px; + width: 150px; height: auto; - z-index: -1; /* Place the image behind other content */ + z-index: -1; } body.home-page { background-color: #141414; } -.icon-container { +.icon-small-container { display: flex; justify-content: center; align-items: center; -} - -.icon { - width: 40px; - height: 40px; - background-color: #000; + width: 23px; + height: 23px; + background-color: #000; border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - margin-right: 0.5em; /* Adjust spacing between icon and text */ + position: relative; + left: -10px; } -.icon img { - max-width: 50%; /* Ensure the image fits within the container */ - max-height: 50%; - fill: #fff; /* Assuming the icon is an SVG and you want to change its color */ +.icon-small-container img { + width: 80%; + height: 50%; + + } @@ -98,8 +94,8 @@ nav ul li a { grid-template-columns: 1fr 1fr; align-items: start; padding: 2em 0; - position: relative; - gap: 4em; + /*position: relative;*/ + gap: 2em; } .left-homecontent { @@ -130,10 +126,10 @@ nav ul li a { align-items: center; } -.btn .icon { +/*.btn .icon { margin-right: 0.5em; max-height: 20px; -} +}*/ .left-homecontent h2 { margin-top: 5em; font-size: 1em; @@ -152,22 +148,22 @@ nav ul li a { } .right-homecontent { position: relative; - flex: 1; display: flex; - justify-content: flex-end; - align-items: flex-start; + justify-content: center; /* Centering the content */ + align-items: center; /* Centering the content */ + padding: 2em; /* Adding padding if necessary */ } .homepage-office { - width: 130%; /* Adjust width as needed */ + width: 200%; height: auto; - position: absolute; - left: -20%; /* Adjust to position within the container */ - top: -10%; /* Adjust to position higher */ + position: relative; + right: 0; /* Adjust as needed */ + top: 0; /* Adjust as needed */ z-index: 0; } .footer { - background-color: #141414; + background-color: #000000; color: #fff; padding: 2em; font-family: Georgia, 'Times New Roman', Times, serif;; @@ -351,16 +347,17 @@ nav ul li a { background-color: #f7f7f7; padding: 2em; border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: left; /* Align text to the left inside boxes */ font-family: 'Times New Roman', Times, serif } -.service-box img { + + +/*.service-box img { max-width: 40px; margin-bottom: 1em; -} +}*/ .service-box h4 { font-size: 1.4em; @@ -456,73 +453,11 @@ nav ul li a { align-items: center; } -.cta-button .icon { +/*.cta-button .icon { margin-right: 0.5em; max-height: 20px; -} -.process-section { - background-color: #ffffff; - color: #000000; - padding: 4em 2em; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; -} +}*/ -.process-container { - max-width: 900px; - width: 100%; - margin: 0 auto; - text-align: center; - padding: 0 2em; -} - -.process-heading h5 { - font-size: 1.8em; - color: #64CCC5; - margin-bottom: 0.5em; -} - -.process-heading h2 { - font-size: 2.5em; - margin-bottom: 2em; -} - -.process-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); /* 4 columns grid */ - gap: 2em; - align-items: stretch; -} - -.process-box { - background-color: #f7f7f7; - padding: 2em; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - text-align: left; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.process-box img { - width: 50px; - margin-bottom: 1em; -} - -.process-box h4 { - font-size: 1.5em; - margin-bottom: 0.5em; - color: #141414; -} - -.process-box p { - font-size: 1em; - color: #242323; -} diff --git a/images/icons/diamond.svg b/images/icons/diamond.svg index 7be5eb9..c4e4481 100644 --- a/images/icons/diamond.svg +++ b/images/icons/diamond.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/images/icons/feather1.svg b/images/icons/feather1.svg new file mode 100644 index 0000000..6ef8980 --- /dev/null +++ b/images/icons/feather1.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/full-left-arrow.svg b/images/icons/full-left-arrow.svg new file mode 100644 index 0000000..ee6b1fc --- /dev/null +++ b/images/icons/full-left-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/full-right-arrow.svg b/images/icons/full-right-arrow.svg new file mode 100644 index 0000000..e21d9a1 --- /dev/null +++ b/images/icons/full-right-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/horn.svg b/images/icons/horn.svg index 8f0231f..6e25bef 100644 --- a/images/icons/horn.svg +++ b/images/icons/horn.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/images/icons/palette.svg b/images/icons/palette.svg index ab4e589..7556aa9 100644 --- a/images/icons/palette.svg +++ b/images/icons/palette.svg @@ -1,7 +1,6 @@ - - - - - - + + + + + diff --git a/images/icons/pen1.svg b/images/icons/pen1.svg new file mode 100644 index 0000000..1a19694 --- /dev/null +++ b/images/icons/pen1.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icons/talking.svg b/images/icons/talking.svg index 7383980..b817932 100644 --- a/images/icons/talking.svg +++ b/images/icons/talking.svg @@ -1,11 +1,3 @@ - - - - - - - - - - + + diff --git a/index.html b/index.html index 17ceb8f..cb692c3 100644 --- a/index.html +++ b/index.html @@ -10,153 +10,148 @@ - +
+
- - -
- Get in Touch -
+ + +
+ Get in Touch +
+
+
-
-
- Centered Image -

Ready to take your Business Growth to the next level?

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem placeat, reiciendis accusamus aut consequatur harum aperiam non deleniti incidunt aliquam officia assumenda sunt. Neque accusamus, vel itaque officiis facere ab!

- -
- Icon -
- Start your Free Trial - -

Trusted by Leading Brands

-
- greenish - automation - leafe - mindfulness -
-
-
- homepage-office -
-
-
-
-
Our Services
-

High-impact services
for your business

-
-
-
- Service Icon -

Content Marketing

-

Our team creates engaging and shareable content that resonates with your audience, drives organic traffic

-
-
- Service Icon -

Graphic Design

-

Unlock the power of visual storytelling with our expert graphic design services tailored to elevate your brand and captivate.

-
-
- Service Icon -

Digital Marketing

-

Elevate your brand's online presence with our data-driven digital marketing strategies. From SEO and content marketing

-
-
- Service Icon -

Web Design

-

We specialize in creating visually stunning, user-friendly websites that align with your brand identity and deliver an exceptional.

-
-
- Service Icon -

IT Consulting

-

IT consulting, or information technology consulting, refers to the practice of providing advisory and implementation services

-
-
- Service Icon -

Brand Identity

-

It involves creating a unique and recognizable identity that sets the brand apart from competitors and resonates with the target audience.

-
-
+
+
+
+ Centered Image +

Ready to take your Business Growth to the next level?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem placeat, reiciendis accusamus aut consequatur harum aperiam non deleniti incidunt aliquam officia assumenda sunt. Neque accusamus, vel itaque officiis facere ab!

+ +
+ Icon +
+ Start your Free Trial + +

Trusted by Leading Brands

+
+ greenish + automation + leafe + mindfulness +
+
+
+ homepage-office +
-
-
-
- About Us Image -
-
-
About Us
-

The core mission - behind all our - work

-

We are dedicated to providing the best services to our clients. Our team is passionate about making a difference and delivering high-quality solutions tailored to your needs.

-
-
-

330+

-

Companies helped

-
-
-

230+

-

Revenue generated

-
-
- - Icon - Start your Free Trial - +
+ +
+
+
+
Our Services
+

High-impact services
for your business

+
+
+
+
+ Service Icon +
+

Content Marketing

+

Our team creates engaging and shareable content that resonates with your audience, drives organic traffic

+
+
+ +
+ Service Icon
-
+

Graphic Design

+

Unlock the power of visual storytelling with our expert graphic design services tailored to elevate your brand and captivate.

+ +
+
+ Service Icon +
+

Digital Marketing

+

Elevate your brand's online presence with our data-driven digital marketing strategies. From SEO and content marketing

+
+
+
+ Service Icon +
+

Web Design

+

We specialize in creating visually stunning, user-friendly websites that align with your brand identity and deliver an exceptional.

+
+
+
+ Service Icon +
+

IT Consulting

+

IT consulting, or information technology consulting, refers to the practice of providing advisory and implementation services

+
+
+
+ Service Icon +
+

Brand Identity

+

It involves creating a unique and recognizable identity that sets the brand apart from competitors and resonates with the target audience.

+
+
-
-
-
-
Process
-

Process that moves - things forward

+
+ +
+
+
+
+ About Us Image +
+
+
About Us
+

The core mission behind all our work

+

We are dedicated to providing the best services to our clients. Our team is passionate about making a difference and delivering high-quality solutions tailored to your needs.

+
+
+

330+

+

Companies helped

-
-
- Ideate Icon -

Ideate

-

The ideation process is a crucial phase in the design process where creative thinking and brainstorming.

-
-
- Research Icon -

Research

-

Research is a critical component of the design process, helping designers understand the problem.

-
-
- Create Icon -

Create

-

Designing a process involves several key steps to ensure clarity, efficiency, successful implementation.

-
-
- Testing Icon -

Testing

-

Testing is a crucial phase in the design process to ensure that the product or system meets the specified requirements.

-
+
+

230+

+

Revenue generated

+
+ +
+ Icon +
+ Start your Free Trial +
+
+
+