My copy of html css module project

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

css/normalize.css

@@ -433,4 +433,5 @@ table {
 td,
 th {
     padding: 0;
-}
+}
+

css/style.css

@@ -1,10 +1,19 @@
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
-body {
+body{
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
-}
+    font-size: 16px;
+
+} 
+
+
+ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+
+
+
+
+
 
 /**
  * Add your custom styles below
@@ -17,3 +26,295 @@ body {
  */
 
 
+
+
+
+
+.header-container{
+
+   display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+ .logo{
+   padding-left: 50px;
+   padding-top: 20px;
+   width:30px;
+ }
+
+
+ .navbar{
+   list-style-type: none;
+   margin: 0;
+   padding:0;
+   display: flex;
+   justify-content: flex-end;
+   margin-right: 30px;
+   gap:10px;
+
+
+ }
+
+ .navbar, a{
+   text-decoration: none;
+   color:#333333be;
+ }
+
+ .navbar a:hover{
+   color:rgb(255, 94, 0);
+ }
+
+
+ .main-cover{
+   width:300px;
+
+ }
+
+ .section-one{
+   text-align: center;
+   padding:10vw;
+   background-image: url("/img/first-background.jpg" );
+   background-size: cover;
+   color:white;
+
+
+
+ }
+
+.learn-more-btn {
+   background-color:rgb(255, 94, 0);
+    border-radius: 4px;
+    border:  rgba(192, 102, 19, 0.822)  ;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-top: 30px;
+    width:200px;
+}
+
+
+
+
+ .section-two-bar,ul{
+
+   list-style-type: none;
+   display: flex;
+   gap:10rem;
+   justify-content: center;
+
+
+
+ }
+
+ .section-two-bar img{
+   width: 150px;
+
+ }
+
+ h4{
+   text-align: center;
+   padding: 20px;
+ }
+
+ hr{
+   border: none;
+   border-top: 2px solid #ddd;
+ }
+
+
+
+
+
+ .media{
+   display: flex;
+   gap:10rem;
+   justify-content: center;
+
+ }
+
+ .media img{
+   height: 50px;
+   width: 50px;
+   border: 1px solid #6159596c;
+   border-radius: 70px;
+   padding: 10px;
+
+
+ }
+
+.quote-container{
+  background-color: bisque;
+display: flex;
+color: rgba(0, 0, 0, 0.541);
+
+
+}
+
+.quote-position{
+  display: flex;
+  flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    line-height: 2em;
+    padding: 5em;
+
+}
+
+
+
+
+
+
+.button-quote{
+
+  background-color:rgb(255, 94, 0);
+    border-radius: 4px;
+    border:  rgb(255, 128, 0)  ;
+    color: white;
+    width:200px;
+
+}
+
+.btn-color{
+  background-color:rgb(255, 94, 0);
+}
+
+
+        .store-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: stretch; 
+            padding: 20px;
+            gap: 20px;
+            min-height: 100vh; 
+        }
+
+        .form-container {
+            width: 50%;
+            padding: 20px;
+
+        }
+
+        h1 {
+            font-size: 24px;
+            margin-bottom: 20px;
+            color:  #f4623a;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .color-selection,
+        .terms-container {
+            display: flex;
+
+            gap: 10px; 
+        }
+
+        input[type="text"],
+        select,
+        button {
+            padding: 10px;
+            margin-top: 5px;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+            width: 100%; 
+
+
+        }
+
+        .flex-container {
+            display: flex;
+            justify-content: space-between; 
+        }
+
+        .half-width {
+            width: 48%; 
+        }
+
+       .submit-button {
+            background-color: #f4623a;
+              color: white;
+            border: none;
+            cursor: pointer;
+            padding: 15px;
+            font-size: 16px;
+            margin-top: 20px;
+        }
+
+        button:hover {
+            background-color: #d04a28;
+        }
+
+        .store-img {
+            width: 100%;
+    height: 100%; 
+    object-fit: cover;
+        }
+
+        .aside-img-store {
+
+            width: 50%; 
+    justify-content: flex-end;
+        }
+
+
+
+@media  (max-width:568px){
+
+  .section-two-bar,ul{
+    list-style-type: none;
+    display: flex;
+    gap: 10rem;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  .header-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: column;
+
+}
+.logo {
+  /* padding-left: 50px; */
+  padding-top: 20px;
+  width: 30px;
+  padding-right: 60px;
+  padding-bottom: 30px;
+}
+.media {
+  display: flex;
+  gap: 10rem;
+  justify-content: center;
+  flex-direction: column-reverse;
+  align-content: center;
+  align-items: center;
+}
+.quote-container {
+    display: flex;
+    flex-direction: column;
+}
+.flex-container {
+    display: flex;
+    flex-direction: column;
+}
+.store-container {
+    display: flex;
+    gap: 20px;
+    flex-direction: column;
+    align-items: center;
+}
+.color-selection, .terms-container {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+  }
+
+}