create new pages

This commit is contained in:
Kriszti 2024-03-01 13:54:22 +01:00
parent 380b2ddaf5
commit fffc8c8544
11 changed files with 953 additions and 10 deletions

View File

@ -4,8 +4,8 @@
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the worlds most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
<button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
<button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold"><a href="/services">What we do</a></button>
<button type="button" class="btn btn-outline-light btn-lg px-4"><a href="/portfolio">viwe works</a></button>
</div>
</div>
</div>

View File

@ -0,0 +1,81 @@

<section>
<div class="container">
<div class="row">
<div class="col col-12">
<div class="px-4 py-5 my-5 text-center">
<h1 class="display-5 fw-bold">Ready to bring your ideas to life?</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">We are here to help.</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Contact us</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Leave a message</button>
</div>
</div>
</div>
</div>
</div>
<div class="row pt-4 pb-4 g-0">
<div class="col-md-4 text-center">
<div class="lc-block p-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 376c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm0-128c-53.02 0-96 42.98-96 96s42.98 96 96 96c-106.04 0-192-85.96-192-192S141.96 64 248 64c53.02 0 96 42.98 96 96s-42.98 96-96 96zm0-128c-17.67 0-32 14.33-32 32s14.33 32 32 32 32-14.33 32-32-14.33-32-32-32z"></path>
</svg>
<h5 class="mb-4 mt-3" editable="inline">
<strong>Feature 1</strong>
</h5>
</div>
<div editable="rich">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col-md-4 text-center shadow">
<div class="lc-block p-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm82.29 357.6c-3.9 3.88-7.99 7.95-11.31 11.28-2.99 3-5.1 6.7-6.17 10.71-1.51 5.66-2.73 11.38-4.77 16.87l-17.39 46.85c-13.76 3-28 4.69-42.65 4.69v-27.38c1.69-12.62-7.64-36.26-22.63-51.25-6-6-9.37-14.14-9.37-22.63v-32.01c0-11.64-6.27-22.34-16.46-27.97-14.37-7.95-34.81-19.06-48.81-26.11-11.48-5.78-22.1-13.14-31.65-21.75l-.8-.72a114.792 114.792 0 0 1-18.06-20.74c-9.38-13.77-24.66-36.42-34.59-51.14 20.47-45.5 57.36-82.04 103.2-101.89l24.01 12.01C203.48 89.74 216 82.01 216 70.11v-11.3c7.99-1.29 16.12-2.11 24.39-2.42l28.3 28.3c6.25 6.25 6.25 16.38 0 22.63L264 112l-10.34 10.34c-3.12 3.12-3.12 8.19 0 11.31l4.69 4.69c3.12 3.12 3.12 8.19 0 11.31l-8 8a8.008 8.008 0 0 1-5.66 2.34h-8.99c-2.08 0-4.08.81-5.58 2.27l-9.92 9.65a8.008 8.008 0 0 0-1.58 9.31l15.59 31.19c2.66 5.32-1.21 11.58-7.15 11.58h-5.64c-1.93 0-3.79-.7-5.24-1.96l-9.28-8.06a16.017 16.017 0 0 0-15.55-3.1l-31.17 10.39a11.95 11.95 0 0 0-8.17 11.34c0 4.53 2.56 8.66 6.61 10.69l11.08 5.54c9.41 4.71 19.79 7.16 30.31 7.16s22.59 27.29 32 32h66.75c8.49 0 16.62 3.37 22.63 9.37l13.69 13.69a30.503 30.503 0 0 1 8.93 21.57 46.536 46.536 0 0 1-13.72 32.98zM417 274.25c-5.79-1.45-10.84-5-14.15-9.97l-17.98-26.97a23.97 23.97 0 0 1 0-26.62l19.59-29.38c2.32-3.47 5.5-6.29 9.24-8.15l12.98-6.49C440.2 193.59 448 223.87 448 256c0 8.67-.74 17.16-1.82 25.54L417 274.25z"></path>
</svg>
<h5 class="mb-4 mt-3" editable="inline">
<strong>Feature 2</strong>
</h5>
</div>
<div editable="rich">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="lc-block p-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>
<h5 class="mb-4 mt-3" editable="inline">
<strong>Feature 3</strong>
</h5>
</div>
<div editable="rich">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo nulla, suscipit non dapibus vitae, dignissim id quam. Donec eget nulla tellus.&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</section>
@code {
}

View File

@ -1,5 +1,122 @@
<footer class="footer mt-auto py-3 bg-dark poppins">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
<section class="bg-dark text-light poppins">
<div class="container py-5">
<div class="row">
<div class="col-lg-3">
<div class="lc-block mb-4">
<img class="img-fluid" alt="logo" src="https://cdn.livecanvas.com/media/svg/undraw-sample/undraw_connected_world_wuay.svg" style="max-height:10vh">
</div>
<div class="lc-block small">
<div editable="rich">
<p>I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper matti pibus leo.</p>
</div>
</div>
<!-- /lc-block -->
<div class="lc-block py-2">
<a class="text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" lc-helper="svg-icon" fill="var(--bs-light)">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</a>
<a class="text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" lc-helper="svg-icon" fill="var(--bs-light)">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
<a class="text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" lc-helper="svg-icon" fill="var(--bs-light)">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
<a class="text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="1em" height="1em" lc-helper="svg-icon" fill="var(--bs-light)">
<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>
</a>
<a class="text-decoration-none" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="1em" height="1em" lc-helper="svg-icon" fill="var(--bs-light)">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</a>
</div>
</div>
<div class="col-lg-2 offset-lg-1">
<div class="lc-block mb-4">
<div editable="rich">
<h4>Get Started</h4>
</div>
</div>
<!-- /lc-block -->
<div class="lc-block small">
<div editable="rich">
<p>Tutorial</p>
<p>
Resources
<br>
</p>
<p>Docs</p>
<p>Example</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col-lg-2 offset-lg-1">
<div class="lc-block mb-4">
<div editable="rich">
<h4>About us</h4>
</div>
</div>
<!-- /lc-block -->
<div class="lc-block small">
<div editable="rich">
<p>Story</p>
<p>Work with us</p>
<p>Blog</p>
<p>News</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col-lg-2 offset-lg-1">
<div class="lc-block mb-4">
<div editable="rich">
<h4>Downloads</h4>
</div>
</div>
<!-- /lc-block -->
<div class="lc-block small">
<div editable="rich">
<p>Vertex 1.2</p>
<p>Templates</p>
<p>Sounds</p>
<p>Gradients</p>
</div>
</div>
<!-- /lc-block -->
</div>
</div>
</div>
</footer>
<div class="py-5 container">
<div class="row">
<div class="col-6 small">
<div class="lc-block">
<div editable="rich">
<p>Copyright © My Company 2020</p>
</div>
</div>
<!-- /lc-block -->
</div>
<div class="col-6 text-end small">
<div class="lc-block">
<div editable="rich">
<p>
<a class="text-decoration-none" href="#">License Details</a> -
<a class="text-decoration-none" href="#">Terms &amp; Conditions</a>
</p>
</div>
</div>
<!-- /lc-block -->
</div>
</div>
</div>
</section>

View File

@ -1,19 +1,25 @@
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark poppins">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<a class="navbar-brand" href="/home">MangoWeb</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<NavLink>
<a class="nav-link active" aria-current="page" href="/home">Home</a>
</NavLink>
<NavLink>
<a class="nav-link" href="/portfolio">Portfolio</a>
</NavLink>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="/services" tabindex="-1" aria-disabled="true">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="/contact" tabindex="-1" aria-disabled="true">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
<a class="nav-link" href="/otherpages" tabindex="-1" aria-disabled="true">Other pages</a>
</li>
</ul>
<form class="d-flex">

View File

@ -0,0 +1,30 @@
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1633596683562-4a47eb4983c5?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
@code {
}

View File

@ -0,0 +1,120 @@
@page "/contact"
<div class="container py-5">
<div class="row min-vh-50 align-items-center">
<div class="col-md-12 text-center">
<div class="lc-block mb-4">
<div editable="rich">
<h2 class="display-3 fw-bolder">Reach us</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed do<br>&nbsp;eiusmod tempor incididunt ut labore et dolore magna aliqua.&nbsp;</p>
</div>
</div><!-- /lc-block -->
<div class="lc-block mb-5">
<a class="btn btn-lg btn-dark" href="https://goo.gl/maps/zy3NkDKV3x4iyUkL9" role="button">VIEW MAP</a>
</div><!-- /lc-block -->
<div class="lc-block border-top col-md-6 offset-md-3">
<div editable="rich">
<h2 class="fw-bolder"><br></h2>
</div>
</div>
<div class="lc-block mb-4">
<div editable="rich">
<h2 class="fw-bolder">Working Hours</h2>
</div>
</div>
<div class="lc-block">
<div editable="rich">
<p>Monday to Friday: 07:00 19:45</p>
<p>Saturday to Sunday: 11:00 17:00</p>
</div>
</div><!-- /lc-block -->
</div><!-- /col -->
</div>
</div>
<div class="container-fluid py-5">
<div class="row text-center">
<div class="col-sm-6 col-lg-3 py-5">
<div class="lc-block mb-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path>
</svg>
</div>
<!-- /lc-block -->
<div class="lc-block mb-4">
<div editable="rich">
<p><a href="#" class="h3 text-dark text-decoration-none">Facebook</a></p>
</div>
</div>
<div class="lc-block col-2 offset-5 border-bottom border-2 border-dark">
<div editable="rich">
</div>
</div>
<!-- /lc-block -->
</div>
<!-- /col -->
<div class="col-sm-6 col-lg-3 py-5">
<div class="lc-block mb-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
</svg>
</div>
<!-- /lc-block -->
<div class="lc-block mb-4">
<div editable="rich">
<p><a href="#" class="h3 text-dark text-decoration-none">Linkedin</a></p>
</div>
</div>
<div class="lc-block col-2 offset-5 border-bottom border-2 border-dark">
<div editable="rich">
</div>
</div>
<!-- /lc-block -->
</div>
<!-- /col -->
<div class="col-sm-6 col-lg-3 py-5">
<div class="lc-block mb-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</div>
<!-- /lc-block -->
<div class="lc-block mb-4">
<div editable="rich">
<p><a href="#" class="h3 text-dark text-decoration-none">Twitter</a></p>
</div>
</div>
<div class="lc-block col-2 offset-5 border-bottom border-2 border-dark">
<div editable="rich">
</div>
</div>
<!-- /lc-block -->
</div>
<!-- /col -->
<div class="col-sm-6 col-lg-3 py-5">
<div class="lc-block mb-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="3em" height="3em" lc-helper="svg-icon" fill="currentColor">
<path d="M256 8C119.252 8 8 119.252 8 256s111.252 248 248 248 248-111.252 248-248S392.748 8 256 8zm163.97 114.366c29.503 36.046 47.369 81.957 47.835 131.955-6.984-1.477-77.018-15.682-147.502-6.818-5.752-14.041-11.181-26.393-18.617-41.614 78.321-31.977 113.818-77.482 118.284-83.523zM396.421 97.87c-3.81 5.427-35.697 48.286-111.021 76.519-34.712-63.776-73.185-116.168-79.04-124.008 67.176-16.193 137.966 1.27 190.061 47.489zm-230.48-33.25c5.585 7.659 43.438 60.116 78.537 122.509-99.087 26.313-186.36 25.934-195.834 25.809C62.38 147.205 106.678 92.573 165.941 64.62zM44.17 256.323c0-2.166.043-4.322.108-6.473 9.268.19 111.92 1.513 217.706-30.146 6.064 11.868 11.857 23.915 17.174 35.949-76.599 21.575-146.194 83.527-180.531 142.306C64.794 360.405 44.17 310.73 44.17 256.323zm81.807 167.113c22.127-45.233 82.178-103.622 167.579-132.756 29.74 77.283 42.039 142.053 45.189 160.638-68.112 29.013-150.015 21.053-212.768-27.882zm248.38 8.489c-2.171-12.886-13.446-74.897-41.152-151.033 66.38-10.626 124.7 6.768 131.947 9.055-9.442 58.941-43.273 109.844-90.795 141.978z"></path>
</svg>
</div>
<!-- /lc-block -->
<div class="lc-block mb-4">
<div editable="rich">
<p><a href="#" class="h3 text-dark text-decoration-none">Dribble</a></p>
</div>
</div>
<div class="lc-block col-2 offset-5 border-bottom border-2 border-dark">
<div editable="rich">
</div>
</div>
<!-- /lc-block -->
</div>
<!-- /col -->
</div>
</div>
@code {
}

View File

@ -0,0 +1,28 @@
@page "/home"
@using SharedUI.Shared.Components.Layout
<HeroComponent />
<section>
<div class="container col-xxl-8 px-4 py-5">
<div class="row flex-lg-row-reverse align-items-center g-5 py-5">
<div class="col-10 col-sm-8 col-lg-6">
<img src="https://images.unsplash.com/photo-1520531158340-44015069e78e?q=80&w=1944&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div>
<div class="col-lg-6">
<h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
<p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the worlds most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
</div>
</div>
</div>
</div>
</section>
<CardComponent/>
@code {
}

View File

@ -0,0 +1,11 @@
@page "/otherpages"
@using SharedUI.Shared.Components.Layout
<HeroComponent />
<CardComponent/>
@code {
}

View File

@ -0,0 +1,197 @@
@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 {
}

File diff suppressed because one or more lines are too long

BIN
images/images.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB