index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="" rel="stylesheet" href="main.css" type="text/css" />

    <title>Document</title>
    <style>
        
        *{
            box-sizing: border-box;
        }
        .column{
    float: left;
    width: 50%;
    padding: 5px;
}
.row::after{
    content: "";
    clear: both;
    display: table;
}
@media screen and (max-width: 200px)
{
    .column {
        width: 50%;
    }
}
    </style>
</head>
<body>


    <div class="div1">
        <p class="text">This is a practice branch</p><br>
            <ul>
                <li class="one">first</li>
                <li class="two">second</li>
                <li class="three">third</li>
                <li class="four">forth</li>
            </ul>
        
    </div>
    
<button class=Header head--first></button>
<div class="row">
    <div class="column">
        <img class="dog" src="imgdog.png" alt="image of dog" style="width: 100%; height: auto;">
    </div>
    <div class="column">
        <img class="dog" src="imgdog.png" alt="image of dog" style="width: 100%; height: auto;">
</div>
<style>
<div>

    <a img src="panda.jpg"  alt="panda" class="pan"></a>
       -we
</div>
a:hover {
    background-color: blue;}

    @keyframes pan {
        0% {opacity: 0;}
        100% {opacity: 0;}
    }
    @keyframes pan {
        0% {opacity: 0;}
        60% {opacity: 0;}
        100% {opacity: 1;}
    }
    .pan {
        display: inline-block;
        height: 100px;
        width: 100px;
        animation-name: reset, fade-in;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 5;
        animation-delay: 0, 1s;
    </style>
</body>
</html>