teleren/devto huggingface dataset:
💻O QUE É ALGORITMO?
Tags: beginners, programming, algorithms, python
Published: 2022-03-04 02:15:49

Definição da palavra algoritmo?

> É uma sequência de instruções, raciocínios ou operações para chegar à um objetivo.

E isso está presente em nossas vidas, mais do que imaginamos. Quer ver?

**_Exemplo 1: Sequência de instruções - RECEITA DE BOLO._**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xbbl88du5mm4xq80trv.gif)

Receita de bolo é um algoritmo? Sim, é através das instruções que você consegue identificar quais são os ingredientes e o modo de preparo para fazer um bolo.

**_Exemplo 2: Sequência de raciocínios - Ligar o computador._**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0qgzu39ayo99mmvstc3.gif)

Quando você inicia o seu computador, espera ele carregar o sistema operacional e informa sua senha para acessa-lo, é a forma de demonstrar a sequência de raciocínios que seu computador executa para cumprir essa função. 

**_Exemplo 3: Sequência de operações - Problema matemático._**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndlb5jzcpiyucgaqn4oc.gif)

Podemos usar como exemplo uma equação de segundo grau: x²-4-16, para descobrir o resultado dessa equação é necessário seguir o algoritmo de operações para extrair as duas raízes como resultado da equação.

Bom, agora que você já sabe o que é um algoritmo, faça o desafio a seguir:

**[DESAFIO] - Crie um algoritmo para cada um desses tipos de algoritmo e compartilhe aqui! **
  
E se você quer praticar, utilize ferramentas como: **Portugol**. É isso, bons estudos 😉
Gujarati OCR in C# and .NET
Published: 2022-03-04 01:57:05

---
canonical_url: https://ironsoftware.com/csharp/ocr/languages/gujarati/
---

**Other versions of this document**

- [ગુજરાતીમાં](https://ironsoftware.com/csharp/ocr/languages/gujarati-gu)
- [125 More OCR Languages](https://ironsoftware.com/csharp/ocr/languages/)

IronOCR is a C# software component allowing .NET coders to read text from images and PDF documents in 126 language, including Gujarati.

It is an advanced fork of Tesseract, built exclusively for the .NET developers and regularly outperforms other Tesseract engines for both speed and accuracy.

## Contents of IronOcr.Languages.Gujarati

This package contain 120 OCR languages for .NET:

- Gujarati
- GujaratiBest
- GujaratiFast
- GujaratiAlphabet
- GujaratiAlphabetBest
- GujaratiAlphabetFast

## Download

Gujarati Language Pack [ગુજરાતી]

- Download as [Zip](https://ironsoftware.com/csharp/ocr/packages/language-packs/Gujarati.ocrdata)
- Install as [NuGet](https://www.nuget.org/packages/IronOcr.Languages.Gujarati/)

## Installation

The first thing we have to do is install our **Gujarati** OCR package to your .NET project.

`PM> Install-Package IronOCR.Languages.Gujarati`

## Code Example

This C# code example reads Gujarati text from an Image or PDF document.

**C#:**
```cs
//PM> Install-Package IronOcr.Languages.Gujarati
using IronOcr;
var Ocr = new IronTesseract();
Ocr.Language = OcrLanguage.Gujarati;
using (var Input = new OcrInput(@"images\Gujarati.png"))
{
    var Result = Ocr.Read(Input);
    Var AllText =  Result.Text
}
```

**VB:**
```
'PM> Install-Package IronOcr.Languages.Gujarati
Imports IronOcr
Private Ocr = New IronTesseract()
Ocr.Language = OcrLanguage.Gujarati
Using Input = New OcrInput("images\Gujarati.png")
	Dim Result = Ocr.Read(Input)
	Dim AllText As Var = Result.Text
End Using
```
125 International OCR Languages
Published: 2022-03-04 01:41:52

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/intl-languages/
---

IronOCR supports 125 international languages.

Other than English which is installed by default, language packs may be added to your .NET project via Nuget or as downloads from our [Languages Page](https://ironsoftware.com/csharp/ocr/languages/).

Most Languages are available in Fast, Standard (recommended) and Best quality. Best may be more accurate, but also is slower.

**C#:**
```cs
//PM> Install-Package IronOcr.Languages.Arabic
 
using IronOcr;
 
var Ocr = new IronTesseract();
Ocr.Language = OcrLanguage.Arabic;
 
using (var Input = new OcrInput(@"images\arabic.gif"))
{
    var Result = Ocr.Read(Input);
    Console.WriteLine(Result.Text);
}
 
 
///A more advanced Example
 
var Ocr2 = new IronTesseract();
Ocr2.UseCustomTesseractLanguageFile("custom_tesseract_files/custom.traineddata");
Ocr2.AddSecondaryLanguage(OcrLanguage.EnglishBest);
 
using (var Input = new OcrInput(@"images\mixed-lang.pdf"))
{
    var Result = Ocr2.Read(Input);
    Console.WriteLine(Result.Text);
}
```

**VB:**
```
'PM> Install-Package IronOcr.Languages.Arabic
 
Imports IronOcr
 
Private Ocr = New IronTesseract()
Ocr.Language = OcrLanguage.Arabic
 
Using Input = New OcrInput("images\arabic.gif")
	Dim Result = Ocr.Read(Input)
	Console.WriteLine(Result.Text)
End Using
 
 
'''A more advanced Example
 
Dim Ocr2 = New IronTesseract()
Ocr2.UseCustomTesseractLanguageFile("custom_tesseract_files/custom.traineddata")
Ocr2.AddSecondaryLanguage(OcrLanguage.EnglishBest)
 
Using Input = New OcrInput("images\mixed-lang.pdf")
	Dim Result = Ocr2.Read(Input)
	Console.WriteLine(Result.Text)
End Using
```
OCR in 1 line of code
Published: 2022-03-04 01:35:44

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/simple-csharp-ocr-tesseract/
---

IronOCR is unique in its ability to automatically detect and read text from imperfectly scanned images and PDF documents. The `IronTesseract` Class provides the simplest API.

Try Other code samples to gain fine-grained control of your C# OCR operations.

IronOCR provides the most advanced build of Tesseract known anywhere, on any platform. With increased speed, accuracy and a native DLL and API.

Supports Tesseract 3, Tesseract 4 and Tesseract 5 for .Net Framework, Standard, Core, Xamarin and Mono.

**C#:**
```cs
// Nuget PM> Install-Package IronOcr
using IronOcr;
 
var Result = new IronTesseract().Read(@"images\image.png").Text;
```

**VB:**
```
' Nuget PM> Install-Package IronOcr
Imports IronOcr
 
Private Result = (New IronTesseract()).Read("images\image.png").Text
```
OCR Image Optimization Filters
Published: 2022-03-04 01:33:29

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/ocr-image-filters-for-net-tesseract/
---

The OcrInput class provides granular control to C# and .Net developers to preprocess image input for speed and accuracy before.

This negates the common practice of using Photoshop Batch Scripts or ImageMagick to prepare images for OCR.

**C#:**
```cs
using IronOcr;
 
var Ocr = new IronTesseract();
using (var Input = new OcrInput(@"images\image.png"))
{
    Input.WithTitle("My Document");
    Input.Binarize();
    Input.Contrast();
    Input.Deskew();
    Input.DeNoise();
    Input.Dilate();
    Input.EnhanceResolution(300);
    Input.Invert();
    Input.Rotate(90);
    Input.Scale(150); // or Input.Scale(3000, 2000);
    Input.Sharpen();
    Input.ToGrayScale();
 
    // you don't need all of them
    // most users only need Deskew() and occasionally DeNoise() 
 
    
    // Optional: Export modified images so you can view them.
    foreach(var page in  Input.Pages){
          page.SaveAsImage("filtered.bmp")
    }
   
 
    var Result = Ocr.Read(Input);
    Console.WriteLine(Result.Text);
}
```

**VB:**
```
Imports IronOcr
 
Private Ocr = New IronTesseract()
Using Input = New OcrInput("images\image.png")
	Input.WithTitle("My Document")
	Input.Binarize()
	Input.Contrast()
	Input.Deskew()
	Input.DeNoise()
	Input.Dilate()
	Input.EnhanceResolution(300)
	Input.Invert()
	Input.Rotate(90)
	Input.Scale(150) ' or Input.Scale(3000, 2000);
	Input.Sharpen()
	Input.ToGrayScale()
 
	' you don't need all of them
	' most users only need Deskew() and occasionally DeNoise() 
 
 
	' Optional: Export modified images so you can view them.
	For Each page In Input.Pages
		  page.SaveAsImage("filtered.bmp")
	Next page
 
 
	Dim Result = Ocr.Read(Input)
	Console.WriteLine(Result.Text)
End Using
```
Modern eCommerce website with HTML CSS JS 2022
Tags: css, tutorial, javascript, beginners
Published: 2022-03-04 01:12:53

{% youtube 3l8Lob4ysI0 %}

How to make modern ecommerce website using html css javascript

In this video, I will show you how to create (mobile-first responsive) modern ecommcerce website.

[Live Website](https://codewithsadee.github.io/anon-ecommerce-website)
[Github Repo](https://github.com/codewithsadee/anon-ecommerce-website)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New Videos Every Week

---

🔗 Essential links
-----------------------------
[Starter file](https://drive.google.com/file/d/1ZJ15pA3STPBymeWzUvwStvaBAclhvWlR/view?usp=sharing)
[index.txt](https://drive.google.com/file/d/1EJbP9q-hzosu-AD5vuRGN0VZVk4hajj9/view?usp=sharing)
[Font - Poppins](https://fonts.google.com/specimen/Poppins?query=poppins)
[Icon](https://ionic.io/ionicons)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
8:39 - File structure
9:19 - Html initial
10:08 - Css variables, reset
13:55 - Modal
26:54 - Notification toast
35:20 - Header
1:14:13 - Banner section
1:20:46 - Category section
1:27:46 - Sidebar
1:46:52 - Product minimal
1:56:09 - Product featured
2:07:45 - Product grid
2:22:26 - Testimonial
2:26:10 - CTA
2:30:26 - Service
2:34:20 - Blog
2:39:17 - Footer
2:56:37 - Media queries

---

💜 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Resumo da primeira semana da Jornada DEV 1/52
Tags: webdev, beginners, html, githunt
Published: 2022-03-04 00:59:20

##Sobre os cursos:

- Finalizei o **módulo 01** do _cursoemvideo_ e inicie o **módulo 02**
- Finalizei o curso de **Git e GitHub**
- Iniciei o curso de **Introdução ao JavaScript**

 ***
##Projetos 

- Consegui fazer 50% dos desafios do **módulo 01** do curso, mais de HTML do que CSS, Aprendi o básico para criar uma página de um site e até mesmo sobre cores e fontes, já mesclando com o **módulo 02**:
[Visite o repositório com as atividades e desafios ](https://github.com/bysunshinearts/html-css)

![gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1w42uhkoes2quu99xj67.gif)
 
- Com o curso de **Git e GitHub** consegui criar meu próprio site, e publicar com a hospedagem gratuita do github! Ainda falta alguns ajuste mas todo o site foi feito com o que aprendi nos dois curso, e ainda está bem básico, somente com uns parágrafos, links e imagens.
[Visite meu site!](https://bysunshinearts.github.io/GracielleSampaio/)

![gif2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khzy9sjijvrpk6ntjnh8.gif) 

- E por ultimo mas não menos importante, o site de perguntas e respostas. Inspirado em um artigo do site _WeHeartIt_, além das imagens, links e estilo o meu objetivo para esse projeto é voltar nele mais tarde e adicionar **JavaScript**, foi um projeto curto e rápido de se fazer, assim como o meu site, mas recomendo como desafio, pois é divertido de se fazer e da para fazer varias versões com essa base. [Veja o código e o resultado final](https://github.com/bysunshinearts/sweet-questions-weheartit)

![gif3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/knlarrdyehaafi6wxmrm.gif)

***
Em resumo, sim estou em um nível bem iniciante, e digo isso não para justificar ou reclamar mas porque em posição de estudante muitas vezes, antes mesmo do desafio, me vi querendo estudar de tudo e de uma vez só. A cada momento vejo alguém falando sobre uma linguagem nova que não conhecia, e já me sentia mais distante ainda do meu objetivo.

Então, se você que está lendo esse post e também está aprendendo, estamos no mesmo barco, procure fazer projetos que sejam divertidos para você, e que exercite o que está aprendendo. Dar um passo maior que a perna nunca da certo, falando por experiência própria 😉♡
***
♡♡♡
Você sabe a diferença entre string[] e [string] no typescript?
Tags: typescript, array, programming, magoacademico
Published: 2022-03-04 00:48:37

Você sabe a diferença entre os tipos `string[]` e `[string]` ?

`string[]` é um array de strings, podendo ser um array vazio, com uma string, duas ou quantas strings você quiser.

```ts
let a: string[] = [] // => ok
let b: string[] = ['hello'] // => ok
let c: string[] = ['hello', 'world'] // => ok
```

Já o tipo `[string]` também pode ser considerado um array, mas possui uma característica específica, é um array que possui um numero de elemento fixo em que se sabe o tipo exato de cada elemento. Esse tipo também é conhecido como **tupla** (*tuple*).

Portanto, para a tupla `[string]` só se pode atribuir um array com um único elemento na posição inicial do tipo string, caso seja um array vazio ou com mais de um elemento, dará erro.

```ts
let d: [string] = [] // => error
let e: [string] = ['hello'] // => ok
let f: [string] = ['hello', 'world']  // => error
```

Também é possível ter tuplas com vários elementos e nem todos precisam ser do mesmo tipo

```ts
let g: [string, string] = ['hello', 'world'] // => ok
let h: [string, number] = ['hello', 123] // => ok
let i: [number, number, boolean] = [0, 1, true] // => ok

```

Também é possível adicionar labels para cara elemento da tupla, assim na hora de utilizar esse tipo, é possível saber ao que se refere cada posição do array.

```ts
let i: [x: number, y: number, z: boolean] = [0, 1, true]
```

Caso você queria assistir em vez de ler, segue o [link do video](https://www.youtube.com/watch?v=HMfLoEJQeuM).
Skeleton resume
Published: 2022-03-04 00:02:38

The domain name is up! https://cfresume.com/

Don't mind the roughness.

I managed to configure it with HTTPS! It wasn't as easy as I thought but the documentation for AWS is decent, albeit a little outdated. Now comes the suffering part. I have no idea how to write JavaScript, or build a datebase, or an API. Just need to not rush it, take my time, and learn.
Monitor Your Azure App Service with Application Map
Tags: monitoring, discuss, azure
Published: 2022-03-04 00:02:23

## Documentation

* [Azure Application Map](https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-map)
* [Azure Application Insight - Net Core](https://docs.microsoft.com/en-us/azure/azure-monitor/app/asp-net-core)

![Azure Monitor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ixh0lmjria8sh53zl43.png)

![Azure App Insight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvptp9maaqy13rvqu0t4.png) 

Image source: https://docs.microsoft.com/en-us/azure/azure-monitor/overview
 

## Example

![Application Map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/99g5l3opo58ipmpa3gqo.jpg)

* The application map is generated from this github/app:

{% github berviantoleo/telegram-bot-ai %}

## What do you think?

This feature is really cool, right?

![Let's talk it out](https://media.giphy.com/media/dwM2v5xmL3doxm0mUl/giphy.gif)
New Laravel Package: Laravel Module Generator
Published: 2022-06-04 20:56:06

---
title: New Laravel Package: Laravel Module Generator
published: true
date: 2022-03-03 22:29:32 UTC
tags: 
canonical_url: https://dcblog.dev/new-laravel-package-laravel-module-generator
---

I've been working on a new package for a few weeks, this goes hand in hand with Laravel Modules, to generate modules based on a template module.

https://github.com/dcblogdev/laravel-module-generator/

The idea is you create a module containing everything you want for a starter module. Typically your index, add, edit and delete pages along with migrations, factories and tests.

Once you've for a module you like then replace every reference to the name of the module with placeholders such as {Module} and {Model} these placeholders get replaced when a new module is generated. Once you have a base module building new modules is really fast!

## Placeholders:

These placeholders are replaced with the name provided when running `php artisan module:build`

Used in filenames:

`Module` = Module name ie `Contacts`

`module` = Module name in lowercase ie `contacts`

`Model` = Model name ie `Contact`

`model` = Model name in lowercase ie `contact`

> For a folder called Models rename it to Entities it will be renamed when back to Models when generating a new module.

Only used inside files:

`{Module}` = Module name ie `PurchaseOrders`

`{module}` = Module name in lowercase ie `purchaseOrder`

`{Model}` = Model name ie `PurchaseOrder`

`{model}` = Model name in lowercase ie `purchaseOrder`

`{module_}` = module name in lowercase ie `purchase_orders`

`{module-}` = module name in lowercase ie `purchase-orders`

## Demo

Watch a video demo at https://www.youtube.com/watch?v=DDjAcQolzwM

[https://www.youtube.com/watch?v=DDjAcQolzwM](https://www.youtube.com/watch?v=DDjAcQolzwM)
Day 542 : Frequent Flyers
Tags: hiphop, code, coding, lifelongdev
Published: 2022-03-03 22:16:30

_liner notes_:
- Professional : Not a bad day! I was able to fix a couple of bugs I ran into yesterday just by doing a little refactor. Just got a couple of more things to work out and I should be good. Didn't get to them because I had a lot of meetings and my computer decided it wanted to move at a snail's pace. I'm updated the operating system, so we'll see if that helps. Took forever for the update to download. It's just now updating. While the update was downloading I actually was able to book tickets for the trip to Europe. I'm new at this and had no clue how long layovers between stops could get. Luckily, I was able to sort by duration and get one that wasn't like 12 hours! haha. Just need to get my manager to approve it. I'm going to get so many miles on my frequent flyers program! haha.

- Personal : Don't really remember what I did last night. It was pretty late and I think I just went to sleep.


![Two lane dirt road in Kansas City, MO, USA with trees on both sides and creating cover with their branches. There's a wooden fence on the left side of the road.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk7l5ivp8ao5cbokjdwm.jpg)

Made sure to finish work at the normal time. I pretty much had to stop because my computer was taking forever to update. It's actually still updating! haha Going to work on a design for a shirt I want to make. I was able to transfer a program from my old computer to my new one with a portable hard drive I bought for my trip to Europe. At least I know it works. haha. I also want to see if I can work on my side project and reach out to more folks for my trip.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube mXOqSbWN4x8 %}
One color palette a day, from Colors & Fonts, from today.
Tags: webdev, ux, design, uiweekly
Published: 2022-03-03 22:00:22

www.colorsandfonts.com

## Color and typography for Web Developers and Digital Designers.

From today, I will sharing 1 Color palette a day as I did before, when I started Colors & fonts.

![Palette One](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctdrmehp1n0akgjoffaa.png)

You will find them here, Dribbble, Instagram, Pinterest and Twitter.

Since 2017 - 2022
TexCreate V2 Beta 1
Tags: rust, tex
Published: 2022-03-03 21:59:31

The first iteration of TexCreate Version 2 will be creating the new `config`, and with this will cause a complete rewrite to the project since everything stems from it, so what's the new change?

There's no more `Document` and  `Project`, it's all `Config`. So here's the new `Config` struct and how it's going to work. 

```rust
#[derive(Debug, Clone, Deserialize, Serialize)]
pub struct Config {
    author: String,
    title: String,
    date: String,
    project_name: String,
    template: String,
    paper_size: String,
    font_size: u8,
    packages: Vec<String>,
    language: Option<String>,
    only_files: Option<bool>,
}
```
All Document and Project field are inside, and there's two more field `language` and `only_files`. 

Following the next few releases, these will be utilized, but the idea for language is either LaTeX (default) or MaTeX. 

### Project Structure 
For `only_files` it's default will be false, and here are the different project structures: 

```
// New Structure 
Project/
   out/
      pdf/
   src/
      <name>.tex
      structure.tex
   README.md
   build.toml

// Only Files Structure or Legacy Structure 
Project/
   <name>.tex 
   structure.tex
```

Beta 1 will also introduce a `migrate` command to turn a v1 `config.toml` to v2. 

More news will follow about future releases of v2 betas.
CSSBattle | #11 Eye of Sauron
Tags: css, challenge, cssbattle, eyeofsauron
Published: 2022-03-03 21:54:17

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #11 Eye of Sauron](https://cssbattle.dev/play/11) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Eye of Sauron Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8mkjrzdbxpq6x5cgtb5.png)

---

> #### Solution:

```html
<div class="container">
  <div class="left-circle">
    <div class="top-cover"></div>
    <div class="left-inner-circle"></div>
  </div>
  <div class="middle-circle">
    <div class="middle-inner-circle">
      <div class="middle-red-circle"></div>
    </div>
  </div>
  <div class="right-circle">
    <div class="bottom-cover"></div>
    <div class="right-inner-circle"></div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #191210;
    position: relative;
  }
  .left-circle,
  .middle-circle,
  .right-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
  }
  .left-circle,
  .right-circle {
    width: 100px;
    height: 100px;
    background: #eca03d;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-circle {
    transform: translate(calc(-50% + -100px), -50%);
  }
  .right-circle {
    transform: translate(calc(-50% + 100px), -50%);
  }
  .middle-circle {
    width: 140px;
    height: 140px;
    background: #eca03d;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left-inner-circle,
  .right-inner-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #191210;
  }
  .middle-inner-circle {
    width: 100px;
    height: 100px;
    background: #191210;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .middle-red-circle {
    width: 50px;
    height: 50px;
    background: #84271c;
    border-radius: 50%;
  }
  .top-cover,
  .bottom-cover {
    position: absolute;
    height: 50px;
    width: 100%;
    background: #191210;
  }
  .top-cover {
    top: 0;
  }
  .bottom-cover {
    bottom: 0;
  }
</style>
```

---

> #### Key Takeaway(s):
- using z-index to control overlap of elements
- using absolute positioning to have manual control of an element's position
- using flexbox layout to vertically and horizontally center elements within a parent element

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!