Experiments with HTML and CSS, part 2 in Electron.js 5

01-08-2023 - Andrés Cruz

We are going to create the following HTML and CSS for the application we are building.

For the Electron application that we have been building, we are going to define the following HTML and 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>

The next step is, instalar plugins como Bootstrap en el proyecto de Electron.

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy