CodeYourFuture · OmidOmar · Jul 8, 2022 · Jul 15, 2022 · Jul 21, 2022 · Jul 22, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/store-style.css b/css/store-style.css
@@ -0,0 +1,106 @@
+:root {
+    /* color variable  */
+    --orange: #e0633a;
+}
+
+* h1 {
+    font-size: 40px;
+    color: var(--orange);
+    margin: 40px 20px;
+}
+
+#form {
+    display: flex;
+    flex-direction: row;
+}
+
+#form-img {
+    width: 50%;
+}
+
+#names,
+form>div:nth-child(3) {
+    display: flex;
+}
+
+/* set the form divs display to flex and direction to column */
+#names>div:nth-child(1),
+form>div:nth-child(2),
+#names>div:nth-child(2),
+#address-detail>div:nth-child(2) {
+    display: flex;
+    flex-direction: column;
+}
+
+/* set postcode div width */
+#address-detail>div:nth-child(2) {
+    width: 30%;
+}
+
+/* set style for city drop down list */
+#address-detail>div:nth-child(1) {
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+}
+
+label,
+input[type=checkbox],
+input[type=radio] {
+    margin: 20px;
+    text-align: justify;
+}
+
+
+#terms-condition {
+    padding: 0px;
+    color: var(--orange);
+    text-decoration: underline;
+}
+
+#submit {
+    margin: 40px 20px;
+}
+
+input[type=text],
+select {
+
+    font-size: 20px;
+    padding: 5px;
+    color: var(--orange);
+    margin: 0 20px;
+    border: 1.5px solid rgb(156, 155, 155);
+    border-radius: 4px;
+}
+
+/* set the size for checkbox and radio */
+input[type=checkbox],
+input[type=radio] {
+    transform: scale(1.5);
+}
+
+
+fieldset {
+    border: none;
+    margin: 40px 0;
+    padding: 0;
+}
+
+button:hover {
+    background-color: rgb(255, 85, 0);
+    color: white;
+}
+
+legend {
+    margin: 20px;
+}
+
+#terms-container {
+    display: flex;
+}
+
+section>div:nth-child(1) {
+    width: 50%;
+    padding: 7%;
+
+}
diff --git a/css/style.css b/css/style.css
@@ -1,9 +1,13 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+:root {
+    --orange: #e0633a;
+}
 
 body {
-    font-family: 'Roboto', sans-serif;
+    font-family: "Roboto", sans-serif;
     -webkit-font-smoothing: antialiased;
+    font-weight: 200;
+    margin: 0;
 }
 
 /**
@@ -15,5 +19,192 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+/*Header section*/
+header {
+    margin: 0px;
+    display: flex;
+}
+
+#logo-space {
+    width: 300px;
+    height: 100px;
+}
+
+li {
+    list-style: none;
+
+}
 
+ul {
+    display: flex;
+}
+
+
+#site-logo {
+    width: 300px;
+    height: 70px;
+    margin: 10px 0px;
+}
+
+#navLink {
+    width: 100%;
+    height: 100px;
+    padding-right: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+
+nav {
+    margin: 2.2rem;
+}
+
+a {
+    padding: 0px 30px;
+    text-decoration: none;
+    font-style: normal;
+    color: gray;
+}
+
+
+a:hover {
+    color: var(--orange);
+}
+
+#SiteName {
+    color: black;
+}
+
+/*Introduction section*/
+.section-introduction {
+    width: 100%;
+    height: 750px;
+    background-image: url("../img/first-background.jpg");
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.introduction {
+    width: 800px;
+    height: 400px;
+    text-align: center;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.introduction-title {
+    font-size: 50px;
+    margin: 0px;
+}
+
+.introduction-tagline {
+    font-size: 30px;
+    margin: 25px;
+}
+
+button {
+    margin: 20px;
+    background-color: var(--orange);
+    border: none;
+    color: white;
+    border-radius: 5px;
+    padding: 20px 40px;
+    font-size: 20px;
+}
+
+button:hover {
+    background-color: white;
+    color: var(--orange);
+}
+
+/*Services section*/
+.service-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+}
+
+.section-services {
+
+    text-align: center;
+    padding-top: 90px;
+}
+
+.service-container>figure {
+    width: 150px;
+    padding: 50px;
+}
+
+.service-container>figure>figcaption {
+    white-space: nowrap;
+    margin: 30px 0;
+}
+
+/* #refill
+{
+    width: 150px;
+    height: 150px;
+} */
+.services-title {
+    font-size: 50px;
+}
+
+/*--------------get-start section---------------*/
+.get-start {
+    width: 100%;
+    display: flex;
+}
+
+.get-start-portion {
+    width: 60%;
+    background-color: #fcefeb;
+    font-size: 40px;
+    padding: 0 10%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.get-start-portion>p>span {
+    font-family: Arial, Helvetica, sans-serif;
+    color: var(--orange);
+}
+
+
+
+/*--------------End of section---------------*/
+/*Footer section*/
+footer {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.footer-copyright {
+    margin-bottom: 100px;
+}
+
+.footer-items>a>img {
+    width: 30px;
+    height: 30px;
+    margin: 10px;
+    border-collapse: separate;
+    border-spacing: 15px;
+    border-radius: 50%;
+    box-shadow: 0 0 2px #888;
+    padding: 10px;
+}
 
+#line {
+    width: 80%;
+    height: 10px;
+    border-bottom: 1px solid black;
+}
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/homepage-feature.png b/img/homepage-feature.png
diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg
diff --git a/img/store-image_by-andrew-neel-unsplash.jpeg b/img/store-image_by-andrew-neel-unsplash.jpeg