diff --git a/css/styles.css b/css/styles.css index 53ae777..809a290 100644 --- a/css/styles.css +++ b/css/styles.css @@ -102,15 +102,171 @@ nav { border-radius: 1000px; background: #8f8f8f; display: block; } + .text-center { + text-align: center !important; + } + @media (min-width: 576px) { + .col-sm { + flex-basis: 0; + flex-grow: 1; + min-width: 0; + max-width: 100%; + } -.row { - display: inline; - width: 100%; - max-width: 940px; - margin: 0 auto; - position: relative; - padding: 0 2%; } + .row-cols-sm-1 > * { + flex: 0 0 100%; + max-width: 100%; + } + .row-cols-sm-2 > * { + flex: 0 0 50%; + max-width: 50%; + } + + .row-cols-sm-3 > * { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + + .row-cols-sm-4 > * { + flex: 0 0 25%; + max-width: 25%; + } + + .row-cols-sm-5 > * { + flex: 0 0 20%; + max-width: 20%; + } + + .row-cols-sm-6 > * { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + .btn-social { + height: 2.5rem; + width: 2.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0; + border-radius: 100%; + } + .mx-2 { + margin-right: 0.5rem !important; + } + .mx-2 { + margin-left: 0.5rem !important; + } + .col-auto { + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + + .col-1 { + flex: 0 0 8.3333333333%; + max-width: 8.3333333333%; + } + + .col-2 { + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; + } + + .col-3 { + flex: 0 0 25%; + max-width: 25%; + } + + .col-4 { + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; + } + + .col-5 { + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + } + + .col-6 { + flex: 0 0 50%; + max-width: 50%; + } + + .col-7 { + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; + } + + .col-8 { + flex: 0 0 66.6666666667%; + max-width: 66.6666666667%; + } + + .col-9 { + flex: 0 0 75%; + max-width: 75%; + } + + .col-10 { + flex: 0 0 83.3333333333%; + max-width: 83.3333333333%; + } + + .col-11 { + flex: 0 0 91.6666666667%; + max-width: 91.6666666667%; + } + + .col-12 { + flex: 0 0 100%; + max-width: 100%; + } + + .page-section { + padding: 6rem 0; + } + .page-section h2.section-heading { + font-size: 2.5rem; + margin-top: 0; + margin-bottom: 1rem; + } + .page-section h3.section-subheading { + font-size: 1rem; + font-weight: 400; + font-style: italic; + font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + margin-bottom: 4rem; + } + .team-member { + margin-bottom: 3rem; + text-align: center; + } + .team-member img { + width: 14rem; + height: 14rem; + border: 0.5rem solid rgba(0, 0, 0, 0.1); + } + .team-member h4 { + margin-top: 1.5rem; + margin-bottom: 0; + } + .bg-light { + background-color: #070707 !important; + } + + a.bg-light:hover, a.bg-light:focus, + button.bg-light:hover, + button.bg-light:focus { + background-color: #dae0e5 !important; + } + + .row { + display: flex; + flex-wrap: wrap; + margin-right: -0.75rem; + margin-left: -0.75rem; + } * { box-sizing: border-box; } @@ -122,7 +278,13 @@ body { font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-weight: 300; -webkit-font-smoothing: antialiased; } - + h1, h2, h3, h4, h5, h6, + .h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 0.5rem; + font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-weight: 700; + line-height: 1.2; + } a { text-decoration: none; } @@ -173,6 +335,9 @@ p { font-family: "Montserrat", sans-serif; } .hero h2 { font-family: "Gotham-Bold", "Montserrat", sans-serif; } + h2, .h2 { + font-size: 2rem; + } .hero #bottomRight { bottom: 0; right: 0; @@ -262,7 +427,65 @@ p { font-size: 16px; border: none; } +.container { + min-width: 992px !important; +} +.container { + width: 100%; + padding-right: 0.75rem; + padding-left: 0.75rem; + margin-right: auto; + margin-left: auto; +} +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +.container-fluid, .container-xl, .container-lg, .container-md, .container-sm { + width: 100%; + padding-right: 0.75rem; + padding-left: 0.75rem; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container-sm, .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container-md, .container-sm, .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container-lg, .container-md, .container-sm, .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, .container-lg, .container-md, .container-sm, .container { + max-width: 1140px; + } +} /* The container
- needed to position the dropdown content */ .dropdown { position: relative; diff --git a/index.html b/index.html index 1f10d68..bd506c3 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + @@ -85,12 +86,12 @@
- +
- +
@@ -107,7 +108,72 @@
- +
+
+
+

Our Amazing Team

+

We are here to serve you, so always feel free to contact us on social media or using the Brancher contact form down below.

+
+
+
+
+ +

Zaeem Qureshi

+

Chief Operations Offiicer

+ +
+
+
+
+ +

Adnan Murtaza

+

Lead Designer

+ +
+
+
+
+ +

Rushil Sidhu

+

Chief Executive Officer

+ +
+
+
+
+
+
+ +

Taj Abdin

+

Lead Consultant

+ +
+
+
+
+ +

Abrar Murtaza

+

Lead Marketer

+ +
+
+
+
+ +

Rushil Umaretiya

+

Lead Developer

+ +
+
+
+
+ Want To Learn More? +
+
+

+
+
+