finial saas webpage

README.MD

@@ -41,7 +41,7 @@ Please visit the [project mockups page](https://www.figma.com/design/Ou3rfktmwkX
 - [ ] The following items must include hover animations:
 
   - [ ] Top navigation items
-  - [ ] All buttons (e.g., buy, play, form submit) (use the inversed colors for the border, background, text color and the icon color for the hovered state)
+  - [ ] All buttons (e.g., buy, play, form submit) (use the inverse colors for the border, background, text color and the icon color for the hovered state)
   - [ ] The main price box in the "Pricing" section (add the shadow around the box for the hovered state)
   - [ ] Bottom navigation items
   - [ ] "View privacy policy" link in the form

css/default.css

@@ -0,0 +1,190 @@
+:root {
+    --blk: black;
+    --gry: grey;
+    --lghtgry:  rgb(177, 177, 177);
+    --white: white;
+    --blue: rgb(36 118 254);
+    --background: rgb(29, 29, 90);
+    --font-color-link: #57a6ff;
+    --grad-1: #a1ecff;
+    --grad-2: #7bdcff;
+    --font-color-dark: #212529;
+
+    --size-10: .675rem ;
+    --size-14: .875rem ;
+    --size-16: 1rem ;
+    --size-18: 1.125rem;
+    --size-20: 1.25rem ;
+    --size-30: 1.875rem;
+    --size-40: 2.5rem ;
+    --size-50: 3.125rem ;
+    --size-100: 6.25rem;
+    --size-150: 9.175rem
+
+}
+html {scroll-behavior: smooth;}
+
+h1, h2, h3  {color: var(--blk);} 
+
+h4, h5, h6 { color: var(--gry);}
+h4 {
+    font-size: 15px;
+    font-weight: 500 ;
+}
+
+body {
+    font-family: "Open Sans", sans-serif;
+    font-weight: 400;
+    font-size: .875rem;
+    line-height: 1.6;
+    letter-spacing: 0;
+    color: var(--gry);
+    margin: 0;
+    padding: 0;
+}
+
+*,
+::after
+::before {
+    box-sizing: border-box;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+a {text-decoration: none;} 
+
+p {margin-top: 0;}
+
+h2 {
+    font-size: 2rem;
+    font-weight: 500;   
+    line-height: 1.2;
+}
+
+img {
+    width: 100%;
+    max-width: 100%;
+    vertical-align: middle;
+    border-style: none;
+}
+
+.container {
+    width: 1200px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-left: auto;
+    margin-right: auto;
+
+}  
+.btn {
+    display: inline-block;
+    font-weight: 400;   
+    color: var(--font-color-dark);
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 1px transparent solid;
+    padding: .375rem .75rem;
+    border-radius: 50px;
+    transition: ease-in-out 0.3s;
+}
+.btn-white {
+    background-color: var(--white);
+    color: var(--success);
+    padding: .7rem 1.875rem;
+    box-shadow: 0px 10px 20px rgba(255,255,255,0.35);
+}
+
+
+.btn-blue {
+    display: inline-block;
+    background-color: var(--blue);
+    color: var(--white);
+    transition: ease-in-out .3s;
+    padding: .7rem 1.175rem;
+}
+
+.btn-blue:hover,
+.btn-blue:hover .fa-solid.fa-circle-play {
+    background-color: var(--white);
+    color: var(--blue);   
+}
+
+
+.btn-blue:hover {
+    background-color: var(--white);
+    color: var(--blue);
+    border:solid var(--blue) 3px;
+}
+
+a.footer.btn.btn-blue:hover {
+    color: var(--blue);
+}
+
+
+
+.btn-green {
+    background-color: rgb(1 200 167);
+    color: var(--white);
+    transition: ease-in-out .3s;
+    height: 20px;
+}
+
+.btn-green:hover {
+    background-color: var(--white);
+    color:  rgb(1 200 167);
+    border: solid rgb(1 200 167) 3px;
+}
+
+.fa-solid.fa-play {
+    font-size: 24px;
+    color: var(--blk);
+    position: absolute;
+    top: 43%;
+    left: 47%;
+
+    }
+
+
+.fa-solid.fa-circle-play {
+    top: 4px;
+    position: relative;
+    color: var(--white);
+    margin: 0 10px;
+    font-size: 24px;
+    left: 0;
+}
+
+.fa-solid.fa-location-arrow,
+.fa-solid.fa-phone,
+.fa-solid.fa-circle-info,
+.fa-solid.fa-circle-user{
+    color: var(--gry);
+    margin: 8px;
+}
+
+.fa-circle-play {color: var(--white);}
+
+.btn.btn-green {font-weight: 700;}
+
+.nav-link { white-space: nowrap;} 
+
+.nav-link .btn.btn-blue { white-space: nowrap;}
+
+
+@media (min-width: 768px) {    
+    .pricing-table,
+    .test-grid,
+    .bttm-footer {max-width: 720px;}
+}
+
+
+@media (min-width: 1200px) {    
+    .container {max-width: -webkit-fill-available;}
+}
+