MangoWeb/SharedUI/Shared/Components/Pages/Portfolio.razor

198 lines
7.2 KiB
Plaintext

@page "/portfolio"
<section class="py-5">
<div class="container pt-4 pb-4">
<div class="row">
<div class="col-md-4 align-self-center">
<div class="lc-block text-secondary">
<div editable="rich">
<p>magna ultricies </p>
</div>
</div>
<div class="lc-block border-bottom">
<div editable="rich">
<h1>Aliquam tincidunt mauris eu risus</h1>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
<div class="col-md-4">
<div class="lc-block mb-2">
<img class="img-fluid" src="https://images.unsplash.com/photo-1516640000-9951e17c051d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Photo by Cristina Gottardi" loading="lazy">
</div><!-- /lc-block -->
<div class="lc-block">
<div editable="rich">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.&nbsp;</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
<div class="col-md-4">
<div class="lc-block">
<div editable="rich">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</p>
</div>
</div><!-- /lc-block -->
<div class="lc-block mb-2">
<img class="img-fluid" src="https://images.unsplash.com/photo-1473445030992-b2356ec3621a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=634&amp;q=80" alt="Photo by Cristina Gottardi" loading="lazy">
</div><!-- /lc-block -->
</div><!-- /col -->
</div>
</div>
</section>
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="p-md-5 mb-2 lc-block text-center">
<div class="lc-block mb-4">
<div editable="rich">
<p class="fw-bold display-5">Our Projects</p>
</div>
</div>
<div class="lc-block mb-5">
<div editable="rich">
<p class="fw-light rfs-7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Nunc et metus id ligula malesuada placerat sit amet quis enim.<br></p>
</div>
</div>
</div>
</div><!-- /col -->
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-4">
<div class="col text-center">
<div class="lc-block mb-4">
<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
</div><!-- /lc-block -->
<div class="lc-block">
<div editable="rich">
<h3>Project Name 1</h3>
<p class="text-muted">Project Description</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col text-center">
<div class="lc-block mb-4">
<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
</div><!-- /lc-block -->
<div class="lc-block">
<div editable="rich">
<h3>Project Name 2</h3>
<p class="text-muted">Project Description</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col text-center">
<div class="lc-block mb-4">
<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
</div><!-- /lc-block -->
<div class="lc-block">
<div editable="rich">
<h3>Project Name 3</h3>
<p class="text-muted">Project Description</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col text-center">
<div class="lc-block mb-4">
<img class="img-fluid" src="https://via.placeholder.com/512x512.png/f4f6fa/dce2ef" lc-helper="image">
</div><!-- /lc-block -->
<div class="lc-block">
<div editable="rich">
<h3>Project Name 4</h3>
<p class="text-muted">Project Description</p>
</div>
</div>
<!-- /lc-block -->
</div>
</div>
</div>
</section>
<section>
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<div class="p-md-5 mb-2 lc-block text-center">
<div class="lc-block">
<div editable="rich">
<p class="fw-bold display-5">FAQ</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="lc-block mb-5">
<div editable="rich">
<p class="h4">Excepteur sint occaecat cupidatat non? </p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="lc-block mb-5">
<div editable="rich">
<p class="h4">Duis aute irure dolor in?</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="lc-block mb-5">
<div editable="rich">
<p class="h4">Consequuntur magni dolores eos qui?</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="lc-block mb-5">
<div editable="rich">
<p class="h4">Duis aute irure dolor in?</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="lc-block mb-5">
<div editable="rich">
<p class="h4">Consequuntur magni dolores eos qui?</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="lc-block mb-5">
<div editable="rich">
<p class="h4">Excepteur sint occaecat cupidatat non? </p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
</div>
</div>
</section>
@code {
}