Experimentos con HTML y CSS en Electron.js 4

Vamos a crear la siguiente página en el index.html de nuestra aplicación en Electron:

<!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>

Y tendremos:

 

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js

- Andrés Cruz

In english

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.