diff --git a/ContactUS/contactUs.css b/ContactUS/contactUs.css new file mode 100644 index 0000000..c95aa45 --- /dev/null +++ b/ContactUS/contactUs.css @@ -0,0 +1,213 @@ +* { + box-sizing: border-box; +} +html, body { + height: 100%; +} +body { + font: 11px "Open Sans", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + margin: auto; + display: flex; + flex-flow: column nowrap; + justify-content: space-between; +} +ul { + list-style: none; +} +a { + text-decoration: none; +} + +.generic-anchor { + color: #8db9ed; +} +.generic-anchor:visited { + color: #8db9ed; +} +.generic-anchor:hover { + color: #ccc; +} +.flex-rw { + display: flex; + flex-flow: row wrap; +} +main { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + font: 10em "Oswald", sans-serif; + color: #9b9b9b; + line-height: 1; +} + +footer { + background: #373737; + margin-top: auto; + width: 100%; +} +.footer-list-top { + width: 33.333%; +} +.footer-list-top > li { + text-align: center; + padding-bottom: 10px; +} +.footer-list-header { + padding: 10px 0 5px 0; + color: #fff; + font: 2.3vw "Oswald", sans-serif; +} +.footer-list-anchor { + font: 1.3em "Open Sans", sans-serif; +} + +.footer-social-section { + width: 100%; + align-items: center; + justify-content: space-around; + position: relative; + margin-top: 5px; +} +.footer-social-section::after { + content: ""; + position: absolute; + z-index: 1; + top: 50%; + left: 10px; + border-top: 1px solid #ccc; + width: calc(100% - 20px); +} +.footer-social-overlap { + position: relative; + z-index: 2; + background: #373737; + padding: 0 20px; +} + +.footer-social-connect { + display: flex; + align-items: center; + font: 3.5em "Oswald", sans-serif; + color: #fff; +} +.footer-social-small { + font-size: 0.6em; + padding: 0px 20px; +} +.footer-social-overlap > a { + font-size: 3em; +} +.footer-social-overlap > a:not(:first-child) { + margin-left: 0.38em; +} +.footer-bottom-section { + width: 100%; + padding: 10px; + border-top: 1px solid #ccc; + margin-top: 10px; +} + +.footer-bottom-section > div:first-child { + margin-right: auto; +} +.footer-bottom-wrapper { + font-size: 1.5em; + color: #fff; +} +.footer-address { + display: inline; + font-style: normal; +} +@media only screen and (max-width: 768px) { + .footer-list-header { + font-size: 2em; + } + .footer-list-anchor { + font-size: 1.1em; + } + .footer-social-connect { + font-size: 2.5em; + } + .footer-social-overlap > a { + font-size: 2.24em; + } + .footer-bottom-wrapper { + font-size: 1.3em; + } +} + @media only screen and (max-width: 568px) { + main { + font-size: 5em; + } + .footer-list-top { + width: 100%; + } + .footer-list-header { + font-size: 3em; + } + .footer-list-anchor { + font-size: 1.5em; + } + .footer-social-section { + justify-content: center; + } + + .footer-social-section::after { + top: 25%; + } + .footer-social-connect { + margin-bottom: 10px; + padding: 0 10px; + } + .footer-social-overlap { + display: flex; + justify-content: center; + } + .footer-social-icons-wrapper { + width: 100%; + padding: 0; + } + .footer-social-overlap > a:not(:first-child) { + margin-left: 20px; + } + .footer-bottom-section { + padding: 0 5px 10px 5px; + } + + .footer-bottom-wrapper { + text-align: center; + width: 100%; + margin-top: 10px; +} +} +@media only screen and (max-width: 480px) { +.footer-social-overlap > a { + margin: auto; +} +.footer-social-overlap > a:not(:first-child) { + margin-left: 0; +} +.footer-bottom-rights { + display: block; +} +} +@media only screen and (max-width: 320px) { +.footer-list-header { + font-size: 2.2em; +} +.footer-list-anchor { + font-size: 1.2em; +} + .footer-social-connect { + font-size: 2.4em; +} + .footer-social-overlap > a { + font-size: 2.24em; +} + .footer-bottom-wrapper { + font-size: 1.3em; +} +} \ No newline at end of file diff --git a/ContactUS/contactUs.html b/ContactUS/contactUs.html new file mode 100644 index 0000000..8323599 --- /dev/null +++ b/ContactUS/contactUs.html @@ -0,0 +1,68 @@ + + +
+ + + +