diff --git a/index.html b/index.html index 744293b..612f0d4 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@ diff --git a/pages/about/index.html b/pages/about/index.html index 20c98b1..2685f66 100644 --- a/pages/about/index.html +++ b/pages/about/index.html @@ -24,20 +24,21 @@ diff --git a/pages/about/style.css b/pages/about/style.css index bb0130f..0f70de8 100644 --- a/pages/about/style.css +++ b/pages/about/style.css @@ -1,266 +1,290 @@ .timeline { - position: relative; - padding: 0; - list-style: none; - } + position: relative; + padding: 0; + list-style: none; +} +.timeline:before { + position: absolute; + top: 0; + bottom: 0; + left: 40px; + width: 2px; + margin-left: -1.5px; + content: ""; + background-color: #e9ecef; +} +.timeline > li { + position: relative; + min-height: 50px; + margin-bottom: 50px; +} +.timeline > li:after, +.timeline > li:before { + display: table; + content: " "; +} +.timeline > li:after { + clear: both; +} +.timeline > li .timeline-panel { + position: relative; + float: right; + width: 100%; + padding: 0 20px 0 100px; + text-align: left; +} +.timeline > li .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} +.timeline > li .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} +.timeline > li .timeline-image { + position: absolute; + z-index: 100; + left: 0; + width: 80px; + height: 80px; + margin-left: 0; + text-align: center; + color: white; + border: 7px solid #e9ecef; + border-radius: 100%; + background-color: #85a88a; +} +.timeline > li .timeline-image h4, +.timeline > li .timeline-image .h4 { + font-size: 10px; + line-height: 14px; + margin-top: 12px; +} +.timeline > li.timeline-inverted > .timeline-panel { + float: right; + padding: 0 20px 0 100px; + text-align: left; +} +.timeline > li.timeline-inverted > .timeline-panel:before { + right: auto; + left: -15px; + border-right-width: 15px; + border-left-width: 0; +} +.timeline > li.timeline-inverted > .timeline-panel:after { + right: auto; + left: -14px; + border-right-width: 14px; + border-left-width: 0; +} +.timeline > li:last-child { + margin-bottom: 0; +} +.timeline .timeline-heading h4, +.timeline .timeline-heading .h4 { + margin-top: 0; + color: inherit; +} +.timeline .timeline-heading h4.subheading, +.timeline .timeline-heading .subheading.h4 { + text-transform: none; +} +.timeline .timeline-body > ul, +.timeline .timeline-body > p { + margin-bottom: 0; +} + +@media (min-width: 768px) { .timeline:before { - position: absolute; - top: 0; - bottom: 0; - left: 40px; - width: 2px; - margin-left: -1.5px; - content: ""; - background-color: #e9ecef; + left: 50%; } .timeline > li { - position: relative; - min-height: 50px; - margin-bottom: 50px; - } - .timeline > li:after, .timeline > li:before { - display: table; - content: " "; - } - .timeline > li:after { - clear: both; + min-height: 100px; + margin-bottom: 100px; } .timeline > li .timeline-panel { - position: relative; - float: right; - width: 100%; - padding: 0 20px 0 100px; - text-align: left; - } - .timeline > li .timeline-panel:before { - right: auto; - left: -15px; - border-right-width: 15px; - border-left-width: 0; - } - .timeline > li .timeline-panel:after { - right: auto; - left: -14px; - border-right-width: 14px; - border-left-width: 0; + float: left; + width: 41%; + padding: 0 20px 20px 30px; + text-align: right; } .timeline > li .timeline-image { - position: absolute; - z-index: 100; - left: 0; - width: 80px; - height: 80px; - margin-left: 0; - text-align: center; - color: white; - border: 7px solid #e9ecef; - border-radius: 100%; - background-color: #85a88a; + left: 50%; + width: 100px; + height: 100px; + margin-left: -50px; } - .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 { - font-size: 10px; - line-height: 14px; - margin-top: 12px; + .timeline > li .timeline-image h4, + .timeline > li .timeline-image .h4 { + font-size: 13px; + line-height: 18px; + margin-top: 16px; } .timeline > li.timeline-inverted > .timeline-panel { float: right; - padding: 0 20px 0 100px; + padding: 0 30px 20px 20px; text-align: left; } - .timeline > li.timeline-inverted > .timeline-panel:before { - right: auto; - left: -15px; - border-right-width: 15px; - border-left-width: 0; - } - .timeline > li.timeline-inverted > .timeline-panel:after { - right: auto; - left: -14px; - border-right-width: 14px; - border-left-width: 0; - } - .timeline > li:last-child { - margin-bottom: 0; - } - .timeline .timeline-heading h4, .timeline .timeline-heading .h4 { - margin-top: 0; - color: inherit; - } - .timeline .timeline-heading h4.subheading, .timeline .timeline-heading .subheading.h4 { - text-transform: none; - } - .timeline .timeline-body > ul, - .timeline .timeline-body > p { - margin-bottom: 0; - } - - @media (min-width: 768px) { - .timeline:before { - left: 50%; - } - .timeline > li { - min-height: 100px; - margin-bottom: 100px; - } - .timeline > li .timeline-panel { - float: left; - width: 41%; - padding: 0 20px 20px 30px; - text-align: right; - } - .timeline > li .timeline-image { - left: 50%; - width: 100px; - height: 100px; - margin-left: -50px; - } - .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 { - font-size: 13px; - line-height: 18px; - margin-top: 16px; - } - .timeline > li.timeline-inverted > .timeline-panel { - float: right; - padding: 0 30px 20px 20px; - text-align: left; - } - } - @media (min-width: 992px) { - .timeline > li { - min-height: 150px; - } - .timeline > li .timeline-panel { - padding: 0 20px 20px; - } - .timeline > li .timeline-image { - width: 150px; - height: 150px; - margin-left: -75px; - } - .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 { - font-size: 18px; - line-height: 26px; - margin-top: 30px; - } - .timeline > li.timeline-inverted > .timeline-panel { - padding: 0 20px 20px; - } - } - @media (min-width: 1200px) { - .timeline > li { - min-height: 170px; - } - .timeline > li .timeline-panel { - padding: 0 20px 20px 100px; - } - .timeline > li .timeline-image { - width: 170px; - height: 170px; - margin-left: -85px; - } - .timeline > li .timeline-image h4, .timeline > li .timeline-image .h4 { - margin-top: 40px; - } - .timeline > li.timeline-inverted > .timeline-panel { - padding: 0 100px 20px 20px; - } - } - - .page-section { - padding: 6rem 0; - } - .page-section h2.section-heading, .page-section .section-heading.h2 { - font-size: 2.5rem; - margin-top: 0; - margin-bottom: 1rem; - } - .page-section h3.section-subheading, .page-section .section-subheading.h3 { - font-size: 1rem; - font-weight: 400; - font-style: italic; - 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"; - margin-bottom: 4rem; - } - - @media (min-width: 768px) { - section { - padding: 9rem 0; - } +} +@media (min-width: 992px) { + .timeline > li { + min-height: 150px; } - - .text-center { - text-align: center !important; + .timeline > li .timeline-panel { + padding: 0 20px 20px; } - - .page-section h2.section-heading, .page-section .section-heading.h2 { - font-size: 2.5rem; - margin-top: 0; - margin-bottom: 1rem; + .timeline > li .timeline-image { + width: 150px; + height: 150px; + margin-left: -75px; } - .text-uppercase { - text-transform: uppercase !important; + .timeline > li .timeline-image h4, + .timeline > li .timeline-image .h4 { + font-size: 18px; + line-height: 26px; + margin-top: 30px; } - - .page-section h3.section-subheading, .page-section .section-subheading.h3 { - font-size: 1rem; - font-weight: 400; - font-style: italic; - 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"; - margin-bottom: 4rem; + .timeline > li.timeline-inverted > .timeline-panel { + padding: 0 20px 20px; } - - .text-muted { - --bs-text-opacity: 1; - color: #6c757d !important; +} +@media (min-width: 1200px) { + .timeline > li { + min-height: 170px; } - - p { - line-height: 1.75; + .timeline > li .timeline-panel { + padding: 0 20px 20px 100px; } - - .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { - width: 100%; - padding-right: var(--bs-gutter-x, 0.75rem); - padding-left: var(--bs-gutter-x, 0.75rem); - margin-right: auto; - margin-left: auto; + .timeline > li .timeline-image { + width: 170px; + height: 170px; + margin-left: -85px; } - *, *::before, *::after { - box-sizing: border-box; + .timeline > li .timeline-image h4, + .timeline > li .timeline-image .h4 { + margin-top: 40px; } - user agent stylesheet - div { - display: block; + .timeline > li.timeline-inverted > .timeline-panel { + padding: 0 100px 20px 20px; } +} - /* Navbar START */ - .navbar { - border-radius: 15px; - font-weight: bold; - background-color: #85a88a; - overflow: hidden; - } - - .navbar a, - .navbar div.title { - float: left; - color: #32502e; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; - } - - .navbar div.title { - color: #32502e; - font-family: "Oleo Script"; - } - - .navbar a:hover { - background-color: #7e9e81; - } - .navbar-right { - float: right; +.page-section { + padding: 6rem 0; +} +.page-section h2.section-heading, +.page-section .section-heading.h2 { + font-size: 2.5rem; + margin-top: 0; + margin-bottom: 1rem; +} +.page-section h3.section-subheading, +.page-section .section-subheading.h3 { + font-size: 1rem; + font-weight: 400; + font-style: italic; + 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"; + margin-bottom: 4rem; +} + +@media (min-width: 768px) { + section { + padding: 9rem 0; } - /* Navbar END */ +} + +.text-center { + text-align: center !important; +} + +.page-section h2.section-heading, +.page-section .section-heading.h2 { + font-size: 2.5rem; + margin-top: 0; + margin-bottom: 1rem; +} +.text-uppercase { + text-transform: uppercase !important; +} + +.page-section h3.section-subheading, +.page-section .section-subheading.h3 { + font-size: 1rem; + font-weight: 400; + font-style: italic; + 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"; + margin-bottom: 4rem; +} + +.text-muted { + --bs-text-opacity: 1; + color: #6c757d !important; +} + +p { + line-height: 1.75; +} + +.container, +.container-fluid, +.container-xxl, +.container-xl, +.container-lg, +.container-md, +.container-sm { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} +*, +*::before, +*::after { + box-sizing: border-box; +} +user agent stylesheet div { + display: block; +} + +/* Navbar START */ +.navbar { + border-radius: 15px; + font-weight: bold; + background-color: #85a88a; + overflow: hidden; +} + +.navbar a, +.navbar div.title { + float: left; + color: #32502e; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.navbar div.title { + color: #32502e; + font-family: "Oleo Script"; +} - \ No newline at end of file +.navbar a:hover { + background-color: #7e9e81; +} +.navbar-right { + float: right; +} +.nav-link:hover { + border-bottom: 2px solid blue; + color: blue; +} +/* Navbar END */ diff --git a/pages/contact/index.html b/pages/contact/index.html index 8921d1a..f234f20 100644 --- a/pages/contact/index.html +++ b/pages/contact/index.html @@ -5,7 +5,11 @@ Meet the team ! - +
diff --git a/pages/contact/style.css b/pages/contact/style.css index 70ac828..d77c5a5 100644 --- a/pages/contact/style.css +++ b/pages/contact/style.css @@ -1,29 +1,33 @@ /* Navbar START */ .navbar { - border-radius: 15px; - font-weight: bold; - background-color: #85a88a; - overflow: hidden; - } - - .navbar a, - .navbar div.title { - float: left; - color: #32502e; - padding: 14px 16px; - text-decoration: none; - font-size: 17px; - } - - .navbar div.title { - color: #32502e; - font-family: "Oleo Script"; - } - - .navbar a:hover { - background-color: #7e9e81; - } - .navbar-right { - float: right; - } - /* Navbar END */ \ No newline at end of file + border-radius: 15px; + font-weight: bold; + background-color: #85a88a; + overflow: hidden; +} + +.nav-link:hover { + border-bottom: 2px solid blue; + color: blue; +} +.navbar a, +.navbar div.title { + float: left; + color: #32502e; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +.navbar div.title { + color: #32502e; + font-family: "Oleo Script"; +} + +.navbar a:hover { + background-color: #7e9e81; +} +.navbar-right { + float: right; +} +/* Navbar END */ diff --git a/style.css b/style.css index 47ff412..69641a4 100644 --- a/style.css +++ b/style.css @@ -70,6 +70,10 @@ header > h1 { .navbar a:hover { background-color: #7e9e81; } +.nav-link:hover { + border-bottom: 2px solid blue; + color: blue; +} .navbar-right { float: right; }