Using html within Quarto

Question

I am trying to build a simple website using Quarto and I would like to know how to use html within the Quarto.

I would like to create a page which is divided in two equal parts. On the left there would be only .gif element as a background. On the right, there would be a text with a button below which could be used as a link.

I try to use the following code in index.qmd file but it doesn't work.

---
title: ""
---
---
format: html
---
<body style="margin: 0; padding: 0; display: flex; height: 100vh;">
<div style="flex: 1; background: url('gif_example.gif') no-repeat center center; background-size: cover;">
</div>
    
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<p>To jest napis na prawej stronie</p>
<button>Przycisk</button>
</div>
</body>

I am using Rstudio

Julian · Accepted Answer · 2024-01-08 09:25:30Z

0

Use it like this:

---
title: ""
format: html
---

<body style="margin: 0; padding: 0; display: flex; height: 100vh;">
<div style="flex: 1; background: url('gif_example.gif') no-repeat center center; background-size: cover;">
</div>
    
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<p>To jest napis na prawej stronie</p>
<button>Przycisk</button>
</div>
</body>

answered Jan 8, 2024 at 9:25

Julian

9,6252 gold badges20 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using html within Quarto

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related