rafaelcamargo’s gists

rafaelcamargo / index.html

Created February 22, 2025 22:31

Converting HTML to Image

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://rsms.me/">
	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<title>Converting HTML to Image</title>

rafaelcamargo / index.html

Last active February 22, 2025 22:31

Converter HTML para imagem

	<!DOCTYPE html>
	<html lang="pt">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="preconnect" href="https://rsms.me/">
	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
	<title>Converter HTML para imagem</title>

rafaelcamargo / index.html

Last active February 16, 2025 23:40

React Form Validation

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Newsletter Form</title>
	<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
	<style>

rafaelcamargo / index.html

Last active November 28, 2024 02:19

CSS :has

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS :has</title>
	<link rel="preconnect" href="https://rsms.me/">
	<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
	<style>
	:root {

rafaelcamargo / index.html

Created September 30, 2024 02:08

Font size clamping calculation easily explained

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Font size interpolation</title>
	<style>
	html,
	body {
	display: flex;

rafaelcamargo / index.html

Last active January 31, 2024 13:38

In-page scroll link with React

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>In-page scroll link with React</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>

rafaelcamargo / index.html

Last active December 21, 2023 02:36

Hover Animated Menu

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hover Animated Menu</title>
	<style>
	html, body {
	display: flex;
	justify-content: center;

rafaelcamargo / index.html

Created December 18, 2023 01:54

Using flexbox to make elements fill all the remaining space

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox</title>
	<style>
	html, body {
	background-color: #e5e5e5;
	}

rafaelcamargo / index.html

Last active December 7, 2023 06:42

HTML within React i18next translations

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>React i18next</title>
	<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
	<script src="https://unpkg.com/[email protected]/dist/umd/i18next.min.js"></script>

rafaelcamargo / index.html

Created November 14, 2023 21:11

Glorious Demo Multi-line Command

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Multi-line Command</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.css">
	<script src="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.js"></script>
	<style>
	.container {

Rafael Camargo rafaelcamargo