ivanzaiatc.github.io/index.html at main · ivanzaiatc/ivanzaiatc.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
          rel="stylesheet">
    <title>Иван Заяц</title>
    <style>
        html {
            font-family: "Roboto", sans-serif;
            font-size: 24px;
            min-height: 100vh;
        }

        a, a:visited {
            text-decoration: none;
            color: blue;
        }

        a:hover {
            text-decoration: underline;
        }

        body {
            margin: 0;
            padding: 15px;
        }

        header {
            margin-bottom: 30px;
            display: flex;
            justify-content: flex-end;

            select {
                appearance: none;
                font-size: 32px;
                border: none !important;
                outline: none !important;
            }
        }

        div {
            max-width: 1000px;
            margin: 0 auto;

            main {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                @media only screen and (min-width: 800px) {
                    flex-direction: row;
                }

                section {
                    max-width: 550px;
                }

                img {
                    border-radius: 25px;
                }
            }
        }

        section:last-child {
            section {

            }
            min-height: 30vh;
        }

        footer {
            ul {
                list-style: none;
                display: flex;
                justify-content: center;
                padding: 0;

                svg {
                    width: 32px;
                    height: 32px;
                    margin-right: 14px;
                }
            }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelector('#language').addEventListener('change', (event) => {
                window.location.href = event.target.value;
            });
        })
    </script>
</head>
<body>
<header>
</header>
<div>
    <main>
        <section>
            <p>
                👋 Привет, я Иван!
            </p>
            <p>
                Я опытный Fullstack (Frontend + Backend = ❤️) разработчик, и это мой <span style="font-weight: bold">роудмап!</span>
            </p>
            <p>
                Пройдя его, ты станешь настоящим <a>Fullstack разработчиком!</a>
            </p>
            <p>
                Залетай в <a>телегу</a>,
                там получишь помощь и найдешь друзей.
            </p>
        </section>
        <div>
            <img src="img/me.png" width="350px" alt="my picture"/>
        </div>
    </main>
    <section>
        <h2>Поехали</h2
        <section>
            <h3>Квест 1, Персоналный сайт: 3 часа</h3>
            <p>Построим персональный сайт и опубликуем его в интернете. Выучим основы html и css, научимся работать с Git.</p>
            <h3>
                <a></a>
            </h3>
        </section>
        <section>
            <h3>Модуль 2: 2 часа</h3>
            <p>Напишем проект на React и увидим как фреймворк помогает облегчить работу программиста.</p>
            <h3>
                <a></a>
            </h3>
        </section>
    </section>
</div>
<footer>
    <ul>
        <li><a href="https://www.youtube.com/channel/UC_Bb9fxkKcCJjUaEd-Oj_XA" target="_blank">
            <?xml version="1.0" encoding="utf-8"?>
            <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M9.49614 7.13176C9.18664 6.9549 8.80639 6.95617 8.49807 7.13509C8.18976 7.31401 8 7.64353 8 8V16C8 16.3565 8.18976 16.686 8.49807 16.8649C8.80639 17.0438 9.18664 17.0451 9.49614 16.8682L16.4961 12.8682C16.8077 12.6902 17 12.3589 17 12C17 11.6411 16.8077 11.3098 16.4961 11.1318L9.49614 7.13176ZM13.9844 12L10 14.2768V9.72318L13.9844 12Z"
                      fill="#0F0F0F"/>
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M0 12C0 8.25027 0 6.3754 0.954915 5.06107C1.26331 4.6366 1.6366 4.26331 2.06107 3.95491C3.3754 3 5.25027 3 9 3H15C18.7497 3 20.6246 3 21.9389 3.95491C22.3634 4.26331 22.7367 4.6366 23.0451 5.06107C24 6.3754 24 8.25027 24 12C24 15.7497 24 17.6246 23.0451 18.9389C22.7367 19.3634 22.3634 19.7367 21.9389 20.0451C20.6246 21 18.7497 21 15 21H9C5.25027 21 3.3754 21 2.06107 20.0451C1.6366 19.7367 1.26331 19.3634 0.954915 18.9389C0 17.6246 0 15.7497 0 12ZM9 5H15C16.9194 5 18.1983 5.00275 19.1673 5.10773C20.0989 5.20866 20.504 5.38448 20.7634 5.57295C21.018 5.75799 21.242 5.98196 21.4271 6.23664C21.6155 6.49605 21.7913 6.90113 21.8923 7.83269C21.9973 8.80167 22 10.0806 22 12C22 13.9194 21.9973 15.1983 21.8923 16.1673C21.7913 17.0989 21.6155 17.504 21.4271 17.7634C21.242 18.018 21.018 18.242 20.7634 18.4271C20.504 18.6155 20.0989 18.7913 19.1673 18.8923C18.1983 18.9973 16.9194 19 15 19H9C7.08058 19 5.80167 18.9973 4.83269 18.8923C3.90113 18.7913 3.49605 18.6155 3.23664 18.4271C2.98196 18.242 2.75799 18.018 2.57295 17.7634C2.38448 17.504 2.20866 17.0989 2.10773 16.1673C2.00275 15.1983 2 13.9194 2 12C2 10.0806 2.00275 8.80167 2.10773 7.83269C2.20866 6.90113 2.38448 6.49605 2.57295 6.23664C2.75799 5.98196 2.98196 5.75799 3.23664 5.57295C3.49605 5.38448 3.90113 5.20866 4.83269 5.10773C5.80167 5.00275 7.08058 5 9 5Z"
                      fill="#0F0F0F"/>
            </svg>
        </a></li>
        <li><a href="" target="_blank">
            <?xml version="1.0" encoding="utf-8"?>
            <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M23.1117 4.49449C23.4296 2.94472 21.9074 1.65683 20.4317 2.227L2.3425 9.21601C0.694517 9.85273 0.621087 12.1572 2.22518 12.8975L6.1645 14.7157L8.03849 21.2746C8.13583 21.6153 8.40618 21.8791 8.74917 21.968C9.09216 22.0568 9.45658 21.9576 9.70712 21.707L12.5938 18.8203L16.6375 21.8531C17.8113 22.7334 19.5019 22.0922 19.7967 20.6549L23.1117 4.49449ZM3.0633 11.0816L21.1525 4.0926L17.8375 20.2531L13.1 16.6999C12.7019 16.4013 12.1448 16.4409 11.7929 16.7928L10.5565 18.0292L10.928 15.9861L18.2071 8.70703C18.5614 8.35278 18.5988 7.79106 18.2947 7.39293C17.9906 6.99479 17.4389 6.88312 17.0039 7.13168L6.95124 12.876L3.0633 11.0816ZM8.17695 14.4791L8.78333 16.6015L9.01614 15.321C9.05253 15.1209 9.14908 14.9366 9.29291 14.7928L11.5128 12.573L8.17695 14.4791Z"
                      fill="#0F0F0F"/>
            </svg>
        </a></li>
    </ul>
</footer>
</body>
</html>