Add a blog to the Corso website (#1459)

## Description

Add a currently-unlinked blog for editing

Images from:
- https://unsplash.com/photos/CPs2X8JYmS8
- https://unsplash.com/photos/hGV2TfOh0ns
This commit is contained in:
Niraj Tolia 2022-11-05 19:04:37 -07:00 committed by GitHub
parent 926ee7c6cd
commit bbec268114
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 210 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 384 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 88 KiB

View File

@ -192,10 +192,6 @@
@apply before:content-[''] before:absolute before:-top-[30%] before:-left-80 before:right-0 before:w-[140rem] before:h-[65rem] before:-rotate-12 before:bg-indigo-600/5 dark:before:bg-indigo-600/10 before:z-1;
}
.dark .home-wrapper::before {
background-color: #4f46e5;
}
@media (min-width: 769px) and (max-width: 1024px) {
.home-wrapper {
@apply before:-top-[50%];

83
website/src/blog.html Normal file
View File

@ -0,0 +1,83 @@
@@include("partials/dark-theme.html")
<head>
@@include("partials/title-meta.html", {"title": "Corso Blog"})
<!-- Css -->
@@include("partials/head-css.html")
</head>
@@include("partials/body.html")
<!-- Loader Start -->
<!-- <div id="preloader">
<div id="status">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div> -->
<!-- Loader End -->
@@include("partials/navbar/nav-center.html")
<!-- Start Hero -->
<section class="relative table w-full py-32 lg:py-36 bg-[url('../../assets/images/blog/work.jpg')] bg-center bg-no-repeat">
<div class="absolute inset-0 bg-black opacity-80"></div>
<div class="container">
<div class="grid grid-cols-1 pb-8 text-center mt-10">
<h3 class="md:text-4xl text-3xl md:leading-normal leading-normal font-medium text-white">Blogs & News</h3>
</div><!--end grid-->
</div><!--end container-->
<div class="absolute text-center z-10 bottom-5 right-0 left-0 mx-3">
<ul class="breadcrumb tracking-[0.5px] breadcrumb-light mb-0 inline-block">
<li class="inline breadcrumb-item uppercase text-[13px] font-bold duration-500 ease-in-out text-white/50 hover:text-white"><a href="index.html">Corso</a></li>
<li class="inline breadcrumb-item uppercase text-[13px] font-bold duration-500 ease-in-out text-white" aria-current="page">Blogs</li>
</ul>
</div>
</section><!--end section-->
<div class="relative">
<div class="shape absolute right-0 sm:-bottom-px -bottom-[2px] left-0 overflow-hidden z-1 text-white dark:text-slate-900">
<svg class="w-full h-auto" viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
</svg>
</div>
</div>
<!-- End Hero -->
<!-- Start Section-->
<section class="relative md:py-24 py-16">
<div class="container">
<div class="grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 gap-[30px]">
<div class="blog relative rounded-md shadow dark:shadow-gray-800 overflow-hidden">
<img src="assets/images/blog/office_desk.jpg" alt="Office desk with laptop and monitor">
<div class="content p-6">
<a href="corso-announcement-free-backup-for-microsoft-365.html" class="title h5 text-lg font-medium hover:text-indigo-600 duration-500 ease-in-out">A home to call your own: the need for your own backups in IT</a>
<p class="text-slate-400 mt-3">Read nore about why we created Corso for Microsoft 365 backup and how to get started.</p>
<div class="mt-4">
<a href="corso-announcement-free-backup-for-microsoft-365.html" class="btn btn-link font-normal hover:text-indigo-600 after:bg-indigo-600 duration-500 ease-in-out">Read More <i class="uil uil-arrow-right"></i></a>
</div>
</div>
</div><!--blog end-->
</div><!--end grid-->
</div><!--end container-->
</section><!--end section-->
<!-- End -->
@@include("partials/footer/footer.html")
<!-- Back to top -->
<a href="#" onclick="topFunction()" id="back-to-top" class="back-to-top fixed hidden text-lg rounded-full z-10 bottom-5 right-5 h-9 w-9 text-center bg-indigo-600 text-white leading-9"><i class="uil uil-arrow-up"></i></a>
<!-- Back to top -->
<!-- JAVASCRIPTS -->
<script src="assets/libs/feather-icons/feather.min.js"></script>
@@include("partials/script-file.html")
<!-- JAVASCRIPTS -->
</body>
</html>

View File

@ -0,0 +1,93 @@
@@include("partials/dark-theme.html")
<head>
@@include("partials/title-meta.html", {"title": "Corso Announcement"})
<!-- Css -->
@@include("partials/head-css.html")
</head>
@@include("partials/body.html")
<!-- Loader Start -->
<!-- <div id="preloader">
<div id="status">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div> -->
<!-- Loader End -->
@@include("partials/navbar/nav-center.html")
<!-- Start Hero -->
<section class="relative table w-full py-32 lg:py-36 bg-[url('../../assets/images/blog/work.jpg')] bg-center bg-no-repeat">
<div class="absolute inset-0 bg-black opacity-80"></div>
<div class="container">
<div class="grid grid-cols-1 pb-8 text-center mt-10">
<h3 class="mb-3 text-3xl leading-normal font-medium text-white">A home to call your own: <br> The need for your own backups in IT </h3>
</div><!--end grid-->
</div><!--end container-->
<div class="absolute text-center z-10 bottom-5 right-0 left-0 mx-3">
<ul class="breadcrumb tracking-[0.5px] breadcrumb-light mb-0 inline-block">
<li class="inline breadcrumb-item uppercase text-[13px] font-bold duration-500 ease-in-out text-white/50 hover:text-white"><a href="index.html">Techwind</a></li>
<li class="inline breadcrumb-item uppercase text-[13px] font-bold duration-500 ease-in-out text-white" aria-current="page">Blogs</li>
</ul>
</div>
</section><!--end section-->
<div class="relative">
<div class="shape absolute right-0 sm:-bottom-px -bottom-[2px] left-0 overflow-hidden z-1 text-white dark:text-slate-900">
<svg class="w-full h-auto" viewBox="0 0 2880 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="currentColor"></path>
</svg>
</div>
</div>
<!-- End Hero -->
<!-- Start Section-->
<section class="relative md:py-24 py-16">
<div class="container">
<div class="grid md:grid-cols-12 grid-cols-1 gap-[30px]">
<div class="lg:col-span-8 md:col-span-6">
<div class="p-6 rounded-md shadow dark:shadow-gray-800">
<img src="assets/images/blog/office_desk.jpg" class="rounded-md" alt="Office desk with laptop and monitor">
<div class="mt-6">
<p class="text-slate-400">The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. Lorem Ipsum is composed in a pseudo-Latin language which more or less corresponds to 'proper' Latin. It contains a series of real Latin words. This ancient dummy text is also incomprehensible, but it imitates the rhythm of most European languages in Latin script.</p>
<p class="text-slate-400 italic border-x-4 border-indigo-600 rounded-tl-xl rounded-br-xl mt-3 p-3">" There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. "</p>
<p class="text-slate-400 mt-3">The advantage of its Latin origin and the relative meaninglessness of Lorum Ipsum is that the text does not attract attention to itself or distract the viewer's attention from the layout.</p>
</div>
</div>
</div>
<div class="lg:col-span-4 md:col-span-6">
<div class="sticky top-20">
<h5 class="text-lg font-semibold bg-gray-50 dark:bg-slate-800 shadow dark:shadow-gray-800 rounded-md p-2 text-center">Author</h5>
<div class="text-center mt-8">
<img src="assets/images/people/nica.jpeg" class="h-24 w-24 mx-auto rounded-full shadow mb-4" alt="">
<a href="" class="text-lg font-semibold hover:text-indigo-600 transition-all duration-500 ease-in-out">Nočnica Mellifera</a>
<p class="text-slate-400">Head of Developer Advocacy</p>
</div>
</div>
</div>
</div><!--end grid-->
</div><!--end container-->
</section><!--end section-->
<!-- End -->
@@include("partials/footer/footer.html")
<!-- Back to top -->
<a href="#" onclick="topFunction()" id="back-to-top" class="back-to-top fixed hidden text-lg rounded-full z-10 bottom-5 right-5 h-9 w-9 text-center bg-indigo-600 text-white leading-9"><i class="uil uil-arrow-up"></i></a>
<!-- Back to top -->
<!-- JAVASCRIPTS -->
<script src="assets/libs/feather-icons/feather.min.js"></script>
@@include("partials/script-file.html")
<!-- JAVASCRIPTS -->
</body>
</html>

View File

@ -24,7 +24,8 @@
<div class="lg:col-span-3 md:col-span-4">
<h5 class="tracking-[1px] text-gray-100 font-semibold">Useful Links</h5>
<ul class="list-none footer-list mt-6">
<li><a href="https://github.com/alcionai/corso/" target="_blank" class="text-gray-300 hover:text-gray-400 duration-500 ease-in-out"><i class="uil uil-angle-right-b me-1"></i> GitHub</a></li>
<li><a href="blog.html" class="text-gray-300 hover:text-gray-400 duration-500 ease-in-out"><i class="uil uil-angle-right-b me-1"></i> Blog</a></li>
<li class="mt-[10px]"><a href="https://github.com/alcionai/corso/" target="_blank" class="text-gray-300 hover:text-gray-400 duration-500 ease-in-out"><i class="uil uil-angle-right-b me-1"></i> GitHub</a></li>
<li class="mt-[10px]"><a href="https://docs.corsobackup.io/" target="_blank" class="text-gray-300 hover:text-gray-400 duration-500 ease-in-out"><i class="uil uil-angle-right-b me-1"></i> Documentation</a></li>
<li class="mt-[10px]"><a href="https://discord.gg/63DTTSnuhT" target="_blank" class="text-gray-300 hover:text-gray-400 duration-500 ease-in-out"><i class="uil uil-angle-right-b me-1"></i> Discord</a></li>
<li class="mt-[10px]"><a href="https://docs.corsobackup.io/setup/download" target="_blank" class="text-gray-300 hover:text-gray-400 duration-500 ease-in-out"><i class="uil uil-angle-right-b me-1"></i> Downloads</a></li>

View File

@ -8,6 +8,19 @@
</a>
<!-- End Logo container-->
<div class="menu-extras">
<div class="menu-item">
<!-- Mobile menu toggle-->
<a class="navbar-toggle" id="isToggle" onclick="toggleMenu()">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
<!-- End mobile menu toggle-->
</div>
</div>
<!--Login button Start-->
<ul class="buy-button list-none mb-0">
@ -24,6 +37,24 @@
</li>
</ul>
<!--Login button End-->
<div id="navigation">
<!-- Navigation Menu-->
<ul class="navigation-menu">
<li><a href="index.html" class="sub-menu-item">Home</a></li>
<li><a href="blog.html" class="sub-menu-item">Blog</a></li>
<li class="has-submenu parent-menu-item">
<a href="javascript:void(0)">Docs</a><span class="menu-arrow"></span>
<ul class="submenu">
<li><a href="https://docs.corsobackup.io" target="_blank" class="sub-menu-item">Documentation</a></li>
<li><a href="https://github.com/alcionai/corso/blob/main/CHANGELOG.md" target="_blank" class="sub-menu-item">Changelog</a></li>
</ul>
</li>
</ul><!--end navigation menu-->
</div><!--end navigation-->
</div><!--end container-->
</nav><!--end header-->
<!-- End Navbar -->