index.html

<!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>first page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class = "info">
            <img src =
            "MyPhoto.jpg" alt = "Аватарка" class = "Avatar">
            <div class="info-text">
                <h2> Ачкасов Артем</h2>
                <p> Студент <a href = "https://hpk.edu.ua/">ХПФК</a>(Хмельницького політехнічного коледжу)</p>
                <p>На даний момент вивчаю програмування, а саме <strong>HTML, CSS, JS</strong></p>
            </div>
            
        </div>

        <div class="hobby">
            <h3>Мої хобі</h3>
            Заняття спортом |
            Рибалка |
            Похід за грибами
        </div>
       
        <div class="card bg-yellow">
            <h3>Вивчені предмети</h3>
            <ol class = "list">
                <li>Математика</li>
                <li>Українська мова</li>
                <li>Фізика</li>
                <li>Біологія</li>
            </ol>
        </div>

        <div class="card bg-green">
            <h3>Досвід роботи</h3>
            <table class = "table">
                <tr>
                    <th>Місце навчання</th>
                    <th>Час навчання(р)</th>
                </tr>
            <tr>
                <td>Садочок</td>
                <td>3</td>
            </tr> 
            <tr>
                <td>Школа</td>
                <td>9</td>
            </tr> 
            <tr>
                <td>Коледж</td>
                <td>3</td>
            </tr> 
            </table>
         </div>
        
         <div class="card bg-red">
            <h4>Посилання на матеріал для вивчення</h4>
            <ol>       
                <li><a href = "https://www.youtube.com/watch?v=DOEtVdkKwcU" target = "_blank">HTML Guide on Youtube</a></li>
                <li><a href = "https://learn.javascript.ru/" target = "_blank">Guide JS</a></li>
                <li><a href="https://www.youtube.com/watch?v=SpCUuyZZTp8&t=5175s" target = "_blank"> CSS Guide</a></li>
            </ol>
         </div>


         <div class="contact">
            <h2>Зв'язатися зі мною</h2>
            <form action="">
                <div class="form-group">
                    <label for="name">Ім'я</label>
                    <input class = "input1" type="text" id = "name" placeholder="Введіть ім'я">
                </div>
                <div class="form-group">
                    <label for="age">Вік</label>
                    <input class = "input2" type="number" id = "age" placeholder="Введіть ваш вік">
                 </div>
                    <input class = "btn" type ="button" value = " Зв'язатися">
            </form>
         </div>

       

    </div>

    <div style = "margin-bottom: 500px;"></div>
    <Script src = "script.js"></Script>
</body>
</html>