lab1/contact.html at main · flowelx/lab1 · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>contact</title>
        <link href="https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&family=Major+Mono+Display&family=NTR&family=Poiret+One&family=Raleway:ital,wght@0,200;1,200&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Chocolate+Classical+Sans&family=Major+Mono+Display&family=NTR&family=Poiret+One&family=Raleway:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
        <style>
            header {
                width: 100%;
                text-align: center;
                margin-top: 20px;
                margin: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            nav.raleway a {
                margin-right: 20px;
            }
            hr {
                border: none;
                border-top: 1px solid #959595;
                width: 27%;
                margin: 20px auto;
            }
            .raleway-main {
                font-family: "Raleway", sans-serif;
                font-size: 48px;
                font-weight: 200;
                font-style: normal;
            }
            .raleway {
                font-family: "Raleway", sans-serif;
                font-size: 14px;
                font-weight: 1000;
                font-style: normal;
            }
            a {
                text-decoration: none;
                color: gray;
            }
            .this {
                color: black;
            }
            a:hover {
                text-decoration: underline;
                color:black;
            }
            .raleway-text {
                font-family: "Raleway", sans-serif;
                font-size: 14px;
                font-weight: 500;
                font-style: normal;
            }
            ul {
                font-family: "Raleway", sans-serif;
                font-size: 14px;
                font-weight: 500;
                font-style: normal;
            }
            ul:first-child {
                margin-left: 520px;
            }
            .container {
                display: flex;
                gap: 30px;
            }
            div {
                float: left;
                font-size: 40px;
                color: black;
                font-family: "Raleway", sans-serif;
                font-size: 14px;
                font-weight: 500;
                font-style: normal;
            }
            .iconWithText {
                display: flex;
                align-items: center;
            }
            .img-left {
                margin-top: 40px;
                margin-left: 200px;
            }
            main {
                display: flex;
                justify-content: center;
                align-self: center;
                margin-top: 2%;
            }
            .centered {
                display: flex;
                justify-content: space-between;
            }
            .bblock {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin: 50px;
            }
            .icon {
                height: 50px;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <header>
            <h1 class="raleway-main">AVERINA ALENA</h1>
            <hr class="styled-hr">
            <nav class="raleway">
                <a href="about.html">ABOUT ME</a>
                <a href="photos.html">PHOTOS</a>
                <a href="portfolio.html">PORTFOLIO</a>
                <a class="this" href="contact.html">CONTACT ME</a>
            </nav>
            <hr>
        </header>
        <main>
            <div class="centered">
                <img src="coding.jpg" alt="coding" height="380" width="380">
                <div class="bblock">
                    <div class="iconWithText">
                        <a href="https://t.me/flowelx">
                            <img src="telegram.svg" alt="telegram" class="icon">
                        </a>
                        <p>Telegram</p>

                    </div>
                    <div class ="iconWithText">
                        <a href="https://vk.com/flowelx">
                            <img src="vkontakte.svg" alt="vk" class="icon">
                        </a>
                        <p>VKontakte</p>
                    </div>
                    <div class ="iconWithText">
                        <a href="discordapp.com/users/lingadeno8618">
                            <img src="discord.svg" alt="discord" class="icon">
                        </a>
                        <p>Discord</p>
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>