Let's create the following page in the index.html of our Electron application:
<!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>
body {
background-color: purple;
}
h1 {
text-align: center;
}
#customId{
display: block;
width: 100%;
}
section{
background-color: #FFF;
font-family: Georgia;
padding: 25px;
margin-top: 10px;
}
</style>
</head>
<body>
<main>
<h1>Page Detail</h1>
<img id="customId" src="https://cdn.pixabay.com/photo/2022/08/16/20/02/wallpaper-7391054__340.jpg" alt="">
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
</section>
</main>
</body>
</html>And we will have:
Remember that the previous material is part of mi curso completo sobre Electron.js
- Andrés Cruz
En español
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter