Experimentos con HTML y CSS, parte 2 en Electron.js 5

- Andrés Cruz

In english
Experimentos con HTML y CSS, parte 2 en Electron.js 5

Para la aplicación de Electron que venimos construyendo, vamos a definir el siguiente HTML y CSS:

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

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>


	<style>
		h1 {
			text-align: center;
		}

		img {
			border-radius: 10px;
			margin-top: 5px;
			box-shadow: 7px -1px 23px -6px rgba(0, 0, 0, 0.75);
			width: 100%;
		}

		.btn-primary {
			border-radius: 5px;
			color: #FFF;
			font-size: 20px;
			padding: 15px 20px;
			margin: 0 auto;
			text-transform: uppercase;
			background: #7733FF;
			display: block;
			cursor: pointer;
			border: none;
			transition: 150ms all;
		}

		.btn-primary:hover {
			transform: translateY(-7px);
		}
	</style>

</head>

<body>
	<main>
		<h1>Page Detail</h1>
		<img src="https://cdn.pixabay.com/photo/2022/08/16/20/02/wallpaper-7391054__340.jpg">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem et consectetur cupiditate. Aperiam quasi
			quibusdam minima, deleniti error sunt, sed laborum debitis vero corrupti ipsa recusandae inventore at est
			nam.</p>
		<button class="btn-primary">Show Post</button>
	</main>
</body>
</html>

El siguiente paso es, instalar plugins como Bootstrap en el proyecto de Electron.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.