hooykkönen h1

© GepaardmetKelly @ Pixabay Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu porttitor sem, non laoreet arcu. Quisque quam turpis, condimentum id nulla at, elementum auctor risus. Vivamus maximus vestibulum magna in aliquam. Nulla dignissim facilisis diam, vel fermentum orci efficitur accumsan. Etiam vitae accumsan nulla. Nunc sagittis, turpis vulputate mattis commodo, lacus felis venenatis arcu, sit amet bibendum mi nunc sit amet odio. Sed et turpis in eros fermentum varius id non risus.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a purus vel metus euismod commodo. Nunc consectetur nibh non tempus volutpat. Curabitur porta varius neque, nec tincidunt ante consequat rhoncus. Suspendisse eros enim, fringilla vitae euismod eu, sodales ut ligula. Donec turpis sapien, tempor at commodo non, mollis non orci. Etiam id sagittis enim. Sed sodales enim finibus lacus vestibulum, sed auctor ipsum ornare. Phasellus fringilla nisi vitae lectus fermentum fermentum. Sed volutpat fringilla pellentesque.

Integer dapibus elit in sodales finibus. Sed convallis volutpat tortor nec tincidunt. Aenean a est vel ex tristique eleifend. Suspendisse potenti. Donec commodo varius diam. Pellentesque tempus nulla dui, non pretium orci accumsan id. Praesent gravida porttitor turpis vitae malesuada. Pellentesque aliquet pulvinar lacinia. Proin bibendum neque at massa aliquet auctor sit amet at libero. Ut erat nisl, lacinia quis pellentesque id, fermentum a ligula. Sed at odio lacus. Aenean iaculis vestibulum ex, a posuere neque sollicitudin eu.

Ohjeet

Kopioi lähdekoodi (index.html):

<!DOCTYPE html>
        <head>
          <meta charset="utf-8">
          <title></title>
          <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <section>
        <section id="palkki">
            <h1>Tallin nimi</h1>
            <h3>virtuaalitalli</h3>
            <ul>
                <li><a href="#">Etusivu</a></li>
                <li><a href="#">Hevoset</a></li>
                <li><a href="#">Toiminta</a></li>
                <li><a href="#">Kasvatus</a></li>
            </ul>
        
            <p class="copy">
                Ulkoasu © Heidi / <a href="" target="blank_">Pilvimarja</a> 2022<br>
                Taustakuva © <a href="https://pixabay.com/fi/users/printeboek-6033538/" target="blank_">Printeboek</a>
            </p>
        </section>
        <section id="sisalto">
            
            <article>
        
            
            <h1>hooykkönen h1</h1>
            <p> 
                <img src="img/hevonen.jpg" class="koriste right" title="© GepaardmetKelly @ Pixabay" />
                Lorem <a href="#">ipsum</a> dolor sit amet, consectetur adipiscing elit. Fusce eu porttitor sem, non laoreet arcu. Quisque quam turpis, condimentum id nulla at, elementum auctor risus. Vivamus maximus vestibulum magna in aliquam. Nulla dignissim facilisis diam, vel fermentum orci efficitur accumsan. Etiam vitae accumsan nulla. Nunc sagittis, turpis vulputate mattis commodo, lacus felis venenatis arcu, sit amet bibendum mi nunc sit amet odio. Sed et turpis in eros fermentum varius id non risus.
            </p><p>
            Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a purus vel metus euismod commodo. Nunc consectetur nibh non tempus volutpat. Curabitur porta varius neque, nec tincidunt ante consequat rhoncus. Suspendisse eros enim, fringilla vitae euismod eu, sodales ut ligula. Donec turpis sapien, tempor at commodo non, mollis non orci. Etiam id sagittis enim. Sed sodales enim finibus lacus vestibulum, sed auctor ipsum ornare. Phasellus fringilla nisi vitae lectus fermentum fermentum. Sed volutpat fringilla pellentesque.
            </p><p>
            Integer dapibus elit in sodales finibus. Sed convallis volutpat tortor nec tincidunt. Aenean a est vel ex tristique eleifend. Suspendisse potenti. Donec commodo varius diam. Pellentesque tempus nulla dui, non pretium orci accumsan id. Praesent gravida porttitor turpis vitae malesuada. Pellentesque aliquet pulvinar lacinia. Proin bibendum neque at massa aliquet auctor sit amet at libero. Ut erat nisl, lacinia quis pellentesque id, fermentum a ligula. Sed at odio lacus. Aenean iaculis vestibulum ex, a posuere neque sollicitudin eu.
            </p>
           
        </article>
        </section>
        <div class="clear"></div>
        </section>
        </body>
        </html>

Kopioi tyylitiedosto (styles.css):

@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Playfair+Display:ital@0;1&display=swap");

body {
        margin: 0 auto;
        background-color: #fbf8f1;
        font-family: "Playfair Display", serif;
        height: 100%;
        color: #6b4f1f;
      }
      
      #palkki {
        width: 300px;
        height: 100%;
        min-height: 100%;
        background-color: #e9dac1;
        float: left;
        border-right: 1px solid #ebe2d3;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        background-attachment: fixed;
        background-image: url(img/palkki_bg.jpg);
        background-size: cover;
        color: #9a8b72;
        padding: 10px;
      }
      
      #palkki a {
        color: #a6854e;
        text-decoration: none;
      }
      
      .copy {
        position: absolute;
        font-size: 12px;
        bottom: 0;
        width: 280px;
        text-align: center;
      }
      
      #palkki a {
        border: 0;
      }
      #palkki h1 {
        margin-top: 120px;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        width: 100%;
        text-align: center;
        font-size: 52px;
        color: #fff;
      }
      
      #palkki h3 {
        margin: 0;
        margin-top: -15px;
        width: 100%;
        text-align: center;
        letter-spacing: 2px;
      }
      
      #palkki ul {
        padding: 0;
        margin: 0;
        margin-top: 140px;
        width: 100%;
      }
      
      #palkki ul li {
        list-style: none;
        width: 100%;
        text-align: center;
        font-size: 22px;
        padding: 5px;
      }
      
      #palkki ul li a {
        color: #b49f79;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
        transition: 0.4s;
      }
      
      #palkki ul li a:hover {
        color: #fff;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
        transition: 0.4s;
      }
      
      h1 {
        color: #54bab9;
        font-size: 42px;
        font-family: "Alex Brush", cursive;
        margin: 0;
        margin-bottom: 10px;
      }
      
      h2 {
        font-weight: normal;
        color: #54bab9;
        margin: 0;
        margin-bottom: 10px;
      }
      
      #sisalto {
        height: 100%;
        min-height: 100%;
        margin-left: 300px;
        width: calc(100% - 300px);
        float: left;
        display: flex;
        flex-direction: column;
      }
      
      section {
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
      }
      
      article {
        width: 90%;
        max-width: 900px;
        text-align: justify;
        padding: 20px;
        margin: 20px;
      }
      
      .clear {
        clear: both;
      }
      
      .koriste {
        margin: 5px 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
        height: 330px;
        width: 240px;
        object-fit: cover;
        opacity: 0.5;
        transition: 1s;
        border: 5px solid #fff;
      }
      
      .left {
        float: left;
      }
      
      .right {
        float: right;
      }
      
      .koriste:hover {
        opacity: 1;
        transition: 1s;
      }
      
      a {
        color: #6b4f1f;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
        text-decoration: none;
        border-bottom: 1px solid #9a8b72;
      }
      
      a:hover {
        color: #54bab9;
      }

Tallenna seuraavat kuvat nimillään kansioon img:

hevonen.jpg

palkki_bg.jpg