Mobile css and layout for hero section

This commit is contained in:
Franklin 2023-05-10 17:01:19 -04:00
parent 69db581948
commit c52f2f43ab
5 changed files with 105 additions and 6 deletions

View File

@ -2,3 +2,7 @@ body {
margin: 0; /* Remove body margins */ margin: 0; /* Remove body margins */
background-color: rgb(250, 248, 248); background-color: rgb(250, 248, 248);
} }
* {
font-family: Montserrat;
}

View File

@ -0,0 +1,76 @@
.hero-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
width: 100%;
}
.hero-profile-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
}
.hero-banner-image {
width: 100%;
height: 150px;
object-fit: cover;
background-color: rebeccapurple;
}
.hero-profile-picture-container {
display: flex;
justify-content: center;
align-items: center;
width: 130px;
height: 130px;
border-radius: 100%;
border: 3px solid white;
background-color: blue;
margin-top: -65px;
}
.hero-profile-picture {
object-fit: cover;
}
.hero-name {
font-size: 20px;
font-weight: 800;
color: #26306B;
}
.hero-title {
font-size: 14px;
font-weight: 200;
color: #26306B;
}
.hero-about-me-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 10px;
margin: 0px 20px;
margin-top: 40px;
}
.hero-about-me-title {
font-size: 28px;
font-weight: 800;
color: #26306B;
font-family: Ubuntu;
}
.hero-about-me-body {
font-size: 13px;
font-weight: 300;
text-align: justify;
line-height: 15px;
}

View File

@ -1,7 +1,7 @@
.main-page-container { .main-page-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: start;
align-items: start; align-items: start;
width: 100%; width: 100%;
} }

View File

@ -18,9 +18,9 @@
<link data-trunk href="assets/text/robots.txt" rel="copy-file"/> <link data-trunk href="assets/text/robots.txt" rel="copy-file"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Space+Grotesk" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
<base data-trunk-public-url /> <base data-trunk-public-url />

View File

@ -4,7 +4,26 @@ use yew::prelude::*;
pub fn hero_section() -> Html { pub fn hero_section() -> Html {
html! { html! {
<div class={"hero-container"}> <div class={"hero-container"}>
<div class={"hero-profile-container"}>
<img class={"hero-banner-image"} src="" alt="realtor-banner-image"/>
<div class={"hero-profile-picture-container"}>
<img class={"hero-profile-picture"} src="" alt="realtor-pfp"/>
</div>
<div class={"hero-name"}>
{"Brooklyn Simmons"}
</div>
<div class={"hero-title"}>
{"Agent"}
</div>
</div>
<div class={"hero-about-me-container"}>
<div class={"hero-about-me-title"}>
{"About me"}
</div>
<div class={"hero-about-me-body"}>
{"Lorem ipsum dolor sit amet consectetur. Mauris sapien arcu ac quis eget sed nullam. Facilisi odio leo non lectus tincidunt orci dictum sed. Id vulputate maecenas scelerisque pellentesque rhoncus at ullamcorper."}
</div>
</div>
</div> </div>
} }
} }