diff --git a/aboutUs.html b/aboutUs.html new file mode 100644 index 0000000..689fe35 --- /dev/null +++ b/aboutUs.html @@ -0,0 +1,198 @@ + + + + + + About Us + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + Free Trial + + + +
+ +
+
+ +
+

About Us Page

+

Some text about who we are and what we do.

+

Resize the browser window to see that this page is responsive by the way.

+
+ +

Our Team

+
+
+
+ Jane +
+

Jane Doe

+

CEO & Founder

+

Some text that describes me lorem ipsum ipsum lorem.

+

jane@example.com

+

+
+
+
+ +
+
+ Mike +
+

Mike Ross

+

Art Director

+

Some text that describes me lorem ipsum ipsum lorem.

+

mike@example.com

+

+
+
+
+ +
+
+ John +
+

John Doe

+

Designer

+

Some text that describes me lorem ipsum ipsum lorem.

+

john@example.com

+

+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/assets/css/AboutUs.css b/assets/css/AboutUs.css new file mode 100644 index 0000000..8b9431c --- /dev/null +++ b/assets/css/AboutUs.css @@ -0,0 +1,188 @@ +body { + font-family: Arial, Helvetica, sans-serif; + margin: 0; + } + + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + +/*-----------------------------------*\ + #HEADER +\*-----------------------------------*/ + +.header .btn { display: none; } + +.header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding-block: 20px; + box-shadow: var(--shadow-1); + z-index: 4; +} + +.header.active { + background-color: var(--white); + position: fixed; + animation: slideIn 0.5s ease forwards; +} + +@keyframes slideIn { + 0% { transform: translateY(-100%); } + 100% { transform: translateY(0); } +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; +} + +.header.active .logo-light, +.header .logo-dark { display: none; } + +.header .logo-light, +.header.active .logo-dark { display: block; } + +.nav-open-btn { + font-size: 3.5rem; + color: var(--white); +} + +.header.active .nav-open-btn { color: var(--charcoal); } + +.navbar { + position: fixed; + top: 0; + left: -300px; + background-color: var(--raisin-black); + color: var(--white); + max-width: 300px; + width: 100%; + height: 100vh; + padding: 30px; + padding-block-end: 40px; + display: flex; + flex-direction: column; + gap: 30px; + z-index: 2; + visibility: hidden; + transition: var(--transition-3); +} + +.navbar.active { + visibility: visible; + transform: translateX(300px); +} + +.navbar-top { + display: flex; + justify-content: space-between; + align-items: center; +} + +.nav-close-btn { + background-color: var(--white_a8); + color: var(--white); + font-size: 2rem; + padding: 6px; + border-radius: var(--radius-circle); + transition: var(--transition-1); +} + +.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; } + +.nav-close-btn:is(:hover, :focus-visible) { background-color: var(--white_a12); } + +.navbar-list { margin-block-end: auto; } + +.navbar-link { + font-weight: var(--fw-700); + padding-block: 6px; +} + +.contact-link { transition: var(--transition-1); } + +.contact-link:is(:hover, :focus-visible) { color: var(--violet-blue-crayola); } + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: var(--raisin-black); + pointer-events: none; + opacity: 0; + transition: var(--transition-1); +} + +.overlay.active { + pointer-events: all; + opacity: 0.8; +} + + + .column { + float: left; + width: 33.3%; + margin-bottom: 16px; + padding: 0 8px; + } + + .card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + margin: 8px; + } + + .about-section { + padding: 50px; + text-align: center; + background-color: #474e5d; + color: white; + background-image: url("/assets/images/hero-bg.jpg"); + } + + .container { + padding: 0 16px; + } + + .container::after, .row::after { + content: ""; + clear: both; + display: table; + } + + .title { + color: grey; + } + + .button { + border: none; + outline: 0; + display: inline-block; + padding: 8px; + color: white; + background-color: #000; + text-align: center; + cursor: pointer; + width: 100%; + } + + .button:hover { + background-color: #555; + } + + @media screen and (max-width: 650px) { + .column { + width: 100%; + display: block; + } + } \ No newline at end of file diff --git a/index.html b/index.html index e6fde20..a2e91d3 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - Adex + La3eb