creazione di pagina web statica utilizzando header footer e main che mostrerà immagini dei gatti
parent: 5c2f844b | patch | commit | ignore whitespace
filippo.bertilotti
2024-04-19 06d3f6a88932e32b1dc21442eeaa2f1e9a49b3c4 
implementazione pagina css per stile
1 files added
4 files modified
89 ■■■■■ changed files
esercizio04.html 15 ●●●●● patch | view | raw | blame | history
gattopersiano.html 9 ●●●●● patch | view | raw | blame | history
gattoscottishfold.html 9 ●●●●● patch | view | raw | blame | history
gattosiamese.html 9 ●●●●● patch | view | raw | blame | history
style.css 47 ●●●●● patch | view | raw | blame | history 
 esercizio04.html


@@ -3,10 +3,12 @@


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>


    <title>Gatti carini</title>


    <link rel="stylesheet" href="style.css">




</head>


<body>


    <header style=background-color:aqua>


    <header>


        <h1>Gatti carini</h1>


        <a href="esercizio04.html">Home</a>


        <a href="gattosiamese.html">GattoSiamese</a>


@@ -15,14 +17,15 @@


    </header>


    


    <main>


        <h4>Test Image</h4>


        <img src="cat.jpg" alt="test image" width="400px" height="400px">


        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</p>


        <h2>Test Image</h2>




        <img src="cat.jpg" alt="catimage" width="400px" height="400px">


        <article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</article>




    </main>






    <footer style=background-color:aqua>


    <footer>


        <hr>


        author: me


        &copy; copyright reserved<br>




 gattopersiano.html


@@ -4,9 +4,10 @@


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>


    <link rel="stylesheet" href="style.css">


</head>


<body>


    <header style=background-color:aqua>


    <header>


        <h1>Gatti carini</h1>


        <a href="esercizio04.html">Home</a>


        <a href="gattosiamese.html">GattoSiamese</a>


@@ -15,14 +16,14 @@


    </header>


    


    <main>


        <h4>Gatto Persiano</h4>


        <h1>Gatto Persiano</h1>


        <img src="gattopersiano.jpg" alt="test image" width="650px" height="400px">


        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</p>


        <article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</article>




    </main>






    <footer style=background-color:aqua>


    <footer>


        <hr>


        author: me


        &copy; copyright reserved<br>




 gattoscottishfold.html


@@ -4,9 +4,10 @@


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>


    <link rel="stylesheet" href="style.css">


</head>


<body>


    <header style=background-color:aqua>


    <header>


        <h1>Gatti carini</h1>


        <a href="esercizio04.html">Home</a>


        <a href="gattosiamese.html">GattoSiamese</a>


@@ -15,14 +16,14 @@


    </header>


    


    <main>


        <h4>Gatto Scottish Fold</h4>


        <h2>Gatto Scottish Fold</h2>


        <img src="gattoscottishfold.jpg" alt="test image" width="650px" height="400px">


        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</p>


        <article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</article>




    </main>






    <footer style=background-color:aqua>


    <footer>


        <hr>


        author: me


        &copy; copyright reserved<br>




 gattosiamese.html


@@ -4,9 +4,10 @@


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Document</title>


    <link rel="stylesheet" href="style.css">


</head>


<body>


    <header style=background-color:aqua>


    <header>


        <h1>Gatti carini</h1>


        <a href="esercizio04.html">Home</a>


        <a href="gattosiamese.html">GattoSiamese</a>


@@ -15,14 +16,14 @@


    </header>


    


    <main>


        <h4>Gatto siamese</h4>


        <h2>Gatto siamese</h2>


        <img src="gattosiamese.jpg" alt="test image" width="650px" height="400px">


        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</p>


        <article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt officia tempora, alias, obcaecati voluptates asperiores facilis praesentium quaerat aliquam consequatur voluptatem culpa nostrum illo totam tenetur ab libero! Saepe, rem.</article>




    </main>






    <footer style=background-color:aqua>


    <footer>


        <hr>


        author: me


        &copy; copyright reserved<br>




 style.css


New file


@@ -0,0 +1,47 @@


* {


    box-sizing: border-box;


}




header {


    background-color: aquamarine;


    text-align: center;


    padding: 15px;


    font-size: large;


    font:caption;


    border-radius: 10px;




}




a {


    padding: 15px;


}




main {


    background-color: aquamarine;


    font-size: large;


    font:caption;


    border-radius: 10px;


    margin-bottom: 15px;


}




main img {


    padding: 15px;


    


}




main h2 {


    padding: 15px;


}




main article {


    padding: 15px;


}




footer {


    background-color: aquamarine;


    text-align: center;


    padding: 15px;


    font-size: large;


    font:caption;


    border-radius: 10px;


}