Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/services page #21

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Feature/services page #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49957c4
page/services
OffiongJoy Nov 16, 2022
7e030cd
feat:build the services page
OffiongJoy Nov 17, 2022
e6e57cf
feat: modify the services-header
OffiongJoy Nov 17, 2022
8b239f4
feat:linking of registration page
OffiongJoy Nov 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/images/andriod.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/copy-writitng.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/graphics.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed assets/images/image 9 (1).png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/images/image 9.png
View file
Open in desktop
Binary file not shown.
Binary file added assets/images/internet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/ios.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...le-phone-wears-round-spectacles-checkered-shirt-isolated-white-background 1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/marketing.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/seo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/webdevelopement.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions components/Services-card-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@

<div class="services-wrap">


<h3 class="services-wrap__h3">Services</h3>
<div class="services">
<h2 class="services__h3">Full Service Digital Creative Agency</h2>

<p class="services__p">We pride ourselves on delievering, compiling, digital marketing solutions. Our winning solutions in experiences help many of out clients interact and engage with their customers
in the best possible way
</p>

<div class="services__boxes">

<div class="services__design">
<div class="services__design_image">
<img src="/assets/images/image 8.png" alt="">
</div>
<div class="services__design_text">
<h3>UI/UX Design</h3>
<p>User Interface " is the graphical layout of an applicaton. UI designers create the look and ...</p>
</div>
</div>

<div class="services__design2">
<div class="services__design_image">
<img src="/assets/images/marketing.png" alt="">
</div>
<div class="services__design_text">
<h3>Marketing</h3>
<p>Having a socail presence, whether you're a startup or a well-established compamy, is critical...</p>
</div>
</div>

<div class="services__design3">
<div class="services__design_image">
<img src="/assets/images/webdevelopement.png" alt="">
</div>
<div class="services__design_text">
<h3>Web Development</h3>
<p>We take a comprehensive approach to web development starting from coding and mark-up to </p>
</div>
</div>
</div>

<div class="services__boxes">

<div class="services__design">
<div class="services__design_image">
<img src="/assets/images/copy-writitng.png" alt="">
</div>
<div class="services__design_text">
<h3>Copywriting</h3>
<p>We are dedicated to serving our clients with excellence, committed to working together as a ....</p>
</div>
</div>

<div class="services__design2">
<div class="services__design_image">
<img src="/assets/images/internet.png" alt="">
</div>
<div class="services__design_text">
<h3>Internet Facilities</h3>
<p>Having a social presence, whether you’re a startup or a well-established company, is critical...</p>
</div>
</div>

<div class="services__design3">
<div class="services__design_image">
<img src="/assets/images/graphics.png" alt="">
</div>
<div class="services__design_text">
<h3>Graphics Design</h3>
<p>We take a comprehensive approach to web development starting from coding and mark-up to </p>
</div>
</div>
</div>

<div class="services__boxes">

<div class="services__design">
<div class="services__design_image">
<img src="/assets/images/andriod.png" alt="">
</div>
<div class="services__design_text">
<h3>Andriod</h3>
<p>User Interface " is the graphical layout of an applicaton. UI designers create the look and ...</p>
</div>
</div>

<div class="services__design2">
<div class="services__design_image">
<img src="/assets/images/ios.png" alt="">
</div>
<div class="services__design_text">
<h3>iOS</h3>
<p>Having a socail presence, whether you're a startup or a well-established compamy, is critical...</p>
</div>
</div>

<div class="services__design3">
<div class="services__design_image">
<img src="/assets/images/seo.png" alt="">
</div>
<div class="services__design_text">
<h3>SEO</h3>
<p>We take a comprehensive approach to web development starting from coding and mark-up to </p>
</div>
</div>
</div>


</div>
</div>
3 changes: 2 additions & 1 deletion components/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
<img src="../assets/images/Border-active.png" alt="" class="blue-dot" />
</li>
</ul>
<button>Get started</button>
<button> <a class="nav-btn" href="/register.html">Get started</a>
</button>
</div>
<button class="nav-bar__mobile-nav-btn">
<div class="nav-bar__mobile-nav-btn__open-btn">
Expand Down
40 changes: 40 additions & 0 deletions components/services-header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<header class="header container">
<article class="header__article">
<div
class="header__article__circle header__article__circle--bg hide icon-hide"
>
<img src="../assets/icons/Ellipse 20.svg" alt="ellipse" />
</div>
<div
class="header__article__circle header__article__circle--sm1 hide icon-hide"
>
<img src="../assets/icons/Ellipse 21.svg" alt="ellipse" />
</div>
<div
class="header__article__circle header__article__circle--sm2 hide icon-hide"
>
<img src="../assets/icons/Ellipse 22.svg" alt="ellipse" />
</div>

<h1 class="header__title">Our Services</h1>
<p class="header__paragraph">
We offer a complete package of high-quality digital marketing services at affordable prices. Call now for a fast quote!
</p>
<button class="btn">Discover All Services</button>
</article>
<aside class="header__aside">
<div class="header__aside__container header__aside__container--1">
<img
src="../assets/images/man-with-laptop2.png"
alt="handsome-man-with-laptop"
/>
</div>
<div class="header__aside__container header__aside__container--2">
<img
src="../assets/images/joyful-handsome-european-man-feels-glad-celebrates-winning-online-game-clenches-fist-with-triumph-holds-mobile-phone-wears-round-spectacles-checkered-shirt-isolated-white-background 1.png"
alt="handsome-man-with-laptop"
/>
</div>
</aside>
</header>

20 changes: 18 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ select {
opacity: 0; }
.nav-bar__link-container__links .nav-bar__link-container__hover .active-dot {
opacity: 1; }
.nav-bar__link-container button {
.nav-bar__link-container button .nav-btn {
height: fit-content;
font-weight: 600;
font-size: 1.2rem;
Expand Down Expand Up @@ -775,6 +775,10 @@ select {
width: 20rem;
height: 27.8rem;
border-radius: 0rem 0rem 31.25rem 31.25rem; }
@media (min-width: 300px) and (max-width: 480px) {
.header__aside__container--1 {
width: 3rem;
height: 10rem; } }
@media (min-width: 481px) and (max-width: 768px) {
.header__aside__container--1 {
width: 6rem;
Expand All @@ -787,6 +791,14 @@ select {
width: 60%; } }
.header__aside__container--1 img {
margin-top: 10.6rem; }
@media (min-width: 300px) and (max-width: 480px) {
.header__aside__container--1 img {
margin-top: 6.1rem;
width: 80%; } }
@media (min-width: 481px) and (max-width: 768px) {
.header__aside__container--1 img {
margin-top: 4.3rem;
width: 80%; } }
@media (min-width: 481px) and (max-width: 768px) {
.header__aside__container--1 img {
margin-top: 4.3rem;
Expand Down Expand Up @@ -848,7 +860,11 @@ select {

.btn {
margin-top: 2rem;
padding: 15px 25px; }
padding: 15px 25px;
background-color: #0d41e1;
border-radius: 10px;
color: #fff;
border: none; }
@media (min-width: 300px) and (max-width: 480px) {
.btn {
margin-top: 1rem;
Expand Down
Loading