feat: final version

This commit is contained in:
Krzysztof Rudnicki 2024-03-09 21:24:12 +01:00
parent 81612bbc39
commit 4e0412a48d
2 changed files with 45 additions and 35 deletions

View File

@ -1,3 +1,4 @@
<div class="main">
<div class="legal-costs">
Przewidywalne minimalne koszta:
@if(costData !== null) {
@ -9,7 +10,9 @@
</div>
<h1 class="bait"> Chcesz zminimalizować koszta aż o <strong> 90%? </strong> </h1>
<h1 class="bait"> Chcesz zminimalizować koszta aż do <strong> 90%? </strong> </h1>
<div class="center-button">
<button mat-raised-button color="primary" class="find-mediator" type="submit" (click)="onSubmit()" class="submit-button">Znajdź Mediatora</button>
</div>
</div>

View File

@ -1,44 +1,51 @@
.legal-costs {
font-family: 'Times New Roman', serif;
color: #2a2a2a; // Dark text for readability
background-color: #f5f5f5; // Light background to keep the content subtle
padding: 20px;
border: 1px solid #ddd; // Slight border for definition
border-radius: 5px; // Soften the edges for a modern look
font-size: 16px;
font-family: 'Times New Roman', serif;
color: #2a2a2a;
background-color: #f5f5f5;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
width: 300px;
margin: 0 auto;
}
.cost-details {
margin-top: 10px;
padding: 10px;
background-color: #fff; // A clean background for the cost details
border-left: 5px solid #004085; // A striking left border for emphasis
font-size: 24px;
.main {
display: flex;
justify-content: center;
flex-direction: column;
}
span {
font-weight: bold; // Make the dynamic content pop
}
.legal-costs .cost-details {
margin-top: 10px;
padding: 10px;
background-color: #fff;
border-left: 5px solid #004085;
font-size: 24px;
}
.cost {
color: #007bff; // A professional blue for costs
}
.legal-costs .cost-details span {
font-weight: bold;
}
.time {
color: #28a745; // A hopeful green for the time
}
}
}
.legal-costs .cost-details .cost {
color: #007bff;
}
.legal-costs .cost-details .time {
color: #28a745;
}
.bait {
text-align: center;
text-align: center;
}
.find-mediator {
width: 100%;
width: 100%;
}
.center-button {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}