London10_Jan_Softa_HTML_CSS_Coursework_Week4

css/faq.css

@@ -0,0 +1,282 @@
+@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Outfit:wght@200&display=swap');
+
+/* Fonts and Colors */
+
+:root {
+    --redBrown: #A05941;
+    --greenBlack: #133032;
+    --lightGray: #EDEDEE;
+    --white: #fff;
+    --transparentWhite: rgba(247, 238, 238, 0.75);
+    /* --transparentWhite: rgba(0, 0, 0, 0.75); */
+    --font1: 'Fjalla One', sans-serif;
+    --font2: 'Outfit', sans-serif;
+}
+
+/* General */
+
+html {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* Body */
+
+body {
+    font-family: var(--font1);
+    text-align: center;
+    background-color: var(--lightGray);
+
+}
+
+
+/* Header */
+
+.header {
+    grid-area: header;
+    width: 100%;
+    margin-top: 10px;
+
+}
+
+.header-search {
+    background-color: var(--white);
+    display: flex;
+
+}
+
+.header-search i {
+    color: var(--redBrown);
+    padding: 20px 0px 0px 20px;
+    font-size: 30px;
+
+}
+
+.header-search input {
+    width: 100%;
+    border: none;
+    padding-left: 20px;
+    margin-right: 200px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-size: 20PX;
+}
+
+
+.nav-link-search {
+
+    color: var(--redBrown);
+    margin-right: 30px;
+    padding-top: 30px;
+}
+
+.header-search img {
+    height: 80px;
+    padding: 20px 0px;
+}
+
+.header-title {
+    color: var(--redBrown);
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 50px;
+    text-align: left;
+    background-color: var(--lightGray);
+}
+
+.header-title h1 {
+    font-size: 20px;
+
+}
+
+.nav-list {
+    list-style: none;
+}
+
+.nav {
+    display: flex;
+    flex-direction: column;
+}
+
+.menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    right: -100%;
+    z-index: 1;
+    background-color: var(--lightGray);
+    transition: 0.5s ease-in-out;
+}
+
+.open-menu,
+.close-menu {
+    position: absolute;
+    cursor: pointer;
+    font-size: 2rem;
+    display: block;
+}
+
+.open-menu {
+    top: 5.5rem;
+    right: 1.5rem;
+}
+
+.close-menu {
+    top: 5.5rem;
+    right: 2rem;
+}
+
+#check {
+    display: none;
+}
+
+#check:checked~.menu {
+    right: 0;
+}
+
+.nav-link,
+.footer-wrapper {
+    padding: 1.5rem;
+}
+
+.nav-link a {
+    display: inline-block;
+    text-decoration: none;
+    position: relative;
+    color: var(--redBrown);
+    padding: 5px 10px;
+}
+
+
+.faq {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    font-size: 40px;
+    justify-content: center;
+    padding-top: 300px;
+    padding-bottom: 50px;
+    background-color: var(--white);
+    color: var(--redBrown);
+}
+
+.list {
+    align-items: center;
+    padding-bottom: 15px;
+}
+
+.answer {
+    display: none;
+    padding-top: 60px;
+    padding-bottom: 40px;
+}
+
+.contact {
+    grid-area: contact;
+    background-color: var(--greenBlack);
+    color: var(--white);
+}
+
+.capitalX {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    padding-top: 60px;
+    padding-bottom: 30px;
+    justify-content: space-evenly;
+}
+
+.ourstore {
+    padding-right: 30px;
+}
+
+.open {
+    padding-right: 30px;
+}
+
+.email {
+    justify-content: center;
+    background-color: var(--greenBlack);
+    color: var(--white);
+}
+
+input [type="email"] {
+    width: 10%;
+    height: 50px;
+    border: var(--white);
+    padding: 15px;
+    color: var(--greenBlack);
+    background-color: var(--greenBlack);
+}
+
+.submit {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 5px;
+}
+
+input[type="submit"] {
+    width: 10%;
+    height: 50px;
+    text-align: center;
+    color: var(--greenBlack);
+    background-color: var(--white);
+    border: 1px solid var(--white);
+    margin-bottom: 50px;
+}
+
+.google-maps {
+    background-color: var(--greenBlack);
+    color: var(--redBrown);
+
+}
+
+.footer {
+    grid-area: footer;
+    justify-content: center;
+    display: flex;
+    flex-direction: row;
+    background-color: var(--white);
+    color: var(--white);
+}
+
+.credit {
+    grid-area: credit;
+    justify-content: center;
+    padding-top: 50px;
+    background-color: var(--white);
+    color: var(--redBrown);
+}
+
+.soc-med {
+    padding-top: 20px;
+    padding-bottom: 50px;
+}
+
+
+#chatOption :first-child {
+    background: var(--redBrown);
+    color: var(--white);
+    position: fixed;
+    padding: 20px 70px;
+    bottom: 1rem;
+    right: 1rem;
+    font-size: 17px;
+    font-weight: lighter;
+}