Feature/advice/hotfix css font

client/src/components/ScrollDown/ScrollDown.js

@@ -9,7 +9,7 @@ function ScrollDown() {
 	return (
 		<button
 			className="scrolldown-container"
-			onClick={() => scrollTo({ top: 1100, left: 0, behavior: "smooth" })}
+			onClick={() => scrollTo({ top: 780, left: 0, behavior: "smooth" })}
 		>
 			<span className="scrolldown-text">SCROLL DOWN</span>
 			<HiOutlineChevronDoubleDown className="scrolldown_icon" />

client/src/pages/Advice/Advice.css

@@ -1,73 +1,67 @@
-.Advice-container {
+.advice-container {
 	display: flex;
-	height: 700px;
-	width: 1440;
+	height: fit-content;
+	width: 100%;
+	background-color: #fff8f3;
 }
-.Advice-img-container {
-	width: 490px;
-	height: 700px;
+.advice-container .img-container {
+	height: fit-content;
+	width: 40%;
 }
-.Advice-text-container {
-	height: 700px;
-	width: 950px;
+.advice-container .text-container {
+	height: fit-content;
+	width: 65%;
 }
 
-.Advice-header-text {
-	text-align: left;
-	font: normal normal normal 45px/64px Roboto Slab;
-	letter-spacing: 0.45px;
-	color: #0f2420;
-	opacity: 1;
-	margin: 50px;
-	width: 655px;
-	height: 59px;
-}
-
-.Advice-img-color {
-	height: 517px;
+.img-container .color {
+	height: 32.313rem;
 	background-color: #ffffff;
 	box-shadow: 5px 5px 6px #00000029;
-	width: 362px;
-	margin: 20px 15px auto 100px;
-}
-.Advice-img {
-	height: 456px;
-	width: 344px;
+	width: 22.625rem;
+	margin: 20px 15px auto 50px;
 }
-.Advice-main-img {
-	height: 456px;
-	width: 344px;
+
+.main-img img {
+	height: 28.5rem;
+	min-width: 21.5rem;
 	margin: 12px 0px 0px 8px;
 }
-
-.Advice-but {
+.text-container .header {
+	font-weight: 400;
+	font-size: 45px;
+	opacity: 1;
+	margin-top: 2rem;
+	margin-left: 4rem;
+	font-family: "RobotoSlab-Regular";
+}
+.advice-but {
 	display: flex;
 	justify-content: right;
-	margin: 50px 150px;
+	margin: 5.125rem 4.375rem;
 }
-.Advice_button {
-	width: 243px;
+.a-button {
+	width: 15.188rem;
 	background-color: var(--darkgreen-color);
 	border: none;
-	height: 70px;
+	height: 4.375rem;
 	color: var(--white-color);
 	font-size: 24px;
 	font-family: "Ambit SemiBold";
 }
 
-.Advice_button:hover {
+.a-button:hover {
 	background-color: var(--blue-color);
 	cursor: pointer;
 }
-.Advice_button_hover {
+.advice-but .button-hover {
 	background-color: var(--darkgreen-color);
-	width: 200px;
-	height: 40px;
+	width: 12.5rem;
+	height: 2.5rem;
 	border: none;
 	font-size: 18px;
 	font-family: "Ambit SemiBold";
 	color: var(--white-color);
-	margin-right: -100px;
+	margin-right: 100px;
 	margin-top: 80px;
 	position: absolute;
 }

client/src/pages/Advice/Advice.js

@@ -1,35 +1,32 @@
 import React, { useState } from "react";
 import "./Advice.css";
-import AdviceImg from "~/assets/images/Advice.jpg";
+import AdviceImg from "~/assets/images/family-photo-advice-page.jpg";
 import AdviceCard from "./AdviceCard";
-
 function Advice() {
 	const [buttonShow, setButtonShow] = useState(false);
 	return (
-		<div className="Advice-container">
-			<div className="Advice-img-container">
-				<div className="Advice-img-color">
-					<div className="Advice-img">
-						<img className="Advice-main-img" src={AdviceImg} alt="Adive" />
+		<div className="advice-container">
+			<div className="img-container">
+				<div className="color">
+					<div className="main-img">
+						<img src={AdviceImg} alt="Adive" />
 					</div>
 				</div>
 			</div>
-			<div className="Advice-text-container">
-				<div className="Advice-header-text">
-					<p className="Advice-p">Ready to get your FREE guide?</p>
-				</div>
-				<AdviceCard />
-				<div className="Advice-but">
+			<div className="text-container">
+					<p className="header">Ready to get your FREE guide?</p>
+						<AdviceCard />
+				<div className="advice-but">
 					<button
-						className="Advice_button"
+						className="a-button"
 						onMouseEnter={() => setButtonShow(true)}
 						onMouseLeave={() => setButtonShow(false)}
 					>
 						Download My Guide
 					</button>
 					<br />
 					{buttonShow && (
-						<button className="Advice_button_hover">Download My Guide</button>
+						<button className="button-hover">Download My Guide</button>
 					)}
 				</div>
 			</div>

client/src/pages/Advice/AdviceCard.js

@@ -1,15 +1,15 @@
 import React from "react";
 import "./AdviceCardContent";
-import "./AdviceCard.css";
+import "./Card-ad.css";
 import AdviceCardContent from "./AdviceCardContent";
 
 function AdviceCard() {
 	return (
 		<div className="Advice-card-container">
 			{AdviceCardContent.map((value, index) => (
-				<div className="Advice-card-index" key={index}>
-					<h3 className="Advice-Vlue-Title">{value.Advicetitle}</h3>
-					<p className="Advice-value-content">{value.AdviceContent}</p>
+				<div key={index}>
+					<p className="title">{value.Advicetitle}</p>
+					<p className="content">{value.AdviceContent}</p>
 				</div>
 			))}
 		</div>

client/src/pages/Advice/Card-ad.css

@@ -0,0 +1,24 @@
+.Advice-card-container {
+	display: flex;
+	width: 100%;
+	height: fit-content;
+}
+
+.Advice-card-container div {
+	width: 30%;
+	margin: 1rem 2rem 0rem 2rem;
+}
+
+div .title {
+	margin-top: 1.5rem;
+	color: black;
+	font-size: 24px;
+	font-family: "Ambit SemiBold";
+}
+div .content {
+	margin-top: 2.5rem;
+	font-size: 20px;
+	font-family: "Ambit Light";
+	color: #000000;
+	opacity: 1;
+}