starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Add black friday banners

Browse Source
This commit is contained in:
yordanov
2022-11-25 11:41:41 +02:00
parent aefe937adc
commit 0c4e92ebec
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
RadzenBlazorDemos/Pages/Index.razor
View File

@@ -6,7 +6,19 @@
<HeadContent>
<meta name="description" content="@ExampleService.DescriptionFor(null)">
</HeadContent>
<div class="container-fluid rz-background-color-black discount-banner">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-start">
<RadzenText TextStyle="TextStyle.H5" Class="ml-0 my-3 rz-color-white"><strong>Black Friday Deals</strong></RadzenText>
</div>
<div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-end">
<RadzenText TextStyle="TextStyle.H5" Class="mx-3 my-3 rz-color-white" style="display: inline-flex;"><strong>Up to <span class="rz-color-warning">$400 OFF</span></strong></RadzenText>
<NavLink class="rz-button rz-button-md rz-light m-3 me-0 rz-text-align-center rz-border-radius-10" href="https://www.radzen.com/blazor-studio/pricing/" target="_blank">CHECK NOW</NavLink>
</div>
</div>
</div>
</div>
<div class="next">
<div class="container-fluid stage light">
<div class="container">

9
RadzenBlazorDemos/Shared/MainLayout.razor
View File

@@ -14,6 +14,15 @@
<RadzenLayout>
<RadzenHeader>
<ChildContent>
<div class="row rz-background-color-black discount-banner">
<div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-start">
<RadzenText TextStyle="TextStyle.H5" Class="ml-5 mx-3 my-3 rz-color-white"><strong>Black Friday Deals</strong></RadzenText>
</div>
<div class="col-12 col-lg-6 d-flex align-items-center justify-content-center justify-content-lg-end">
<RadzenText TextStyle="TextStyle.H5" Class="mx-3 my-3 rz-color-white" style="display: inline-flex;"><strong>Up to <span class="rz-color-warning">$400 OFF</span></strong></RadzenText>
<NavLink class="rz-button rz-button-md rz-light m-3 mr-5 rz-text-align-center rz-border-radius-10" href="https://www.radzen.com/blazor-studio/pricing/" target="_blank">CHECK NOW</NavLink>
</div>
</div>
<div class="row justify-content-start align-items-center">
<div class="col-5 d-flex align-items-center">
<RadzenSidebarToggle Click="@(args => { sidebarExpanded = !sidebarExpanded; bodyExpanded = !bodyExpanded; })">

21
RadzenBlazorDemos/wwwroot/css/site.css
View File

@@ -670,4 +670,23 @@ svg.illustration {
100% {
box-shadow: 0 0 0 20px rgba(255, 80, 77, 0.2), 0 0 0 40px rgba(255, 80, 77, 0.2);
}
}
}
.discount-banner {
position: relative;
background: linear-gradient(90deg, #000000 40%, #2e2c8f 100%);
}
.discount-banner a {
color: var(--rz-text-color) !important;
}
.discount-banner:before {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #FE6E41 0%, #FF504D 30%, #AA01E4 70%, #534EEB 100%);
}