KamilaCoder.github.io/index.html at master · KamiSpo/KamilaCoder.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
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kamila Spodymek</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
    <header class="header">
        <nav>
            <ul class="navigation">
                <li class="navigation__item">
                    <a href="#about">About me</a>
                </li>
                <li class="navigation__item">
                    <a href="#skills">Skills</a>
                </li>
                <li class="navigation__item">
                    <a href="#gallery">Gallery</a>
                </li>
                <li class="navigation__item navigation__item--last-item">
                    <a href="#contact">Contact</a>
                </li>
            </ul>
        </nav>
        <div class="header__intro">
            <div class="intro__greeting">
                <div class="greeting__text">
                    <p class="greeting__hi">Hi there!</p>
                    <p class="greeting__name">My name is Kamila</p>
                </div>
                <img src="images/Kamila.jpg" class="intro__portrait" alt="Kamila Spodymek">
            </div>
        </div>

        <div class="header__socials--container">
            <div class="header__socials">
                <p class="socials__paragraph">Useful links</p>
                <ul class="socials__links">
                    <li class="links__github"><a href="https://github.com/KamilaCoder"><i class="fab fa-github"></i></a></li>
                    <li class="links__linkedin"><a href="https://www.linkedin.com/in/kamilaspodymek/"><i class="fab fa-linkedin"></i></a></li>
                </ul>
            </div>
        </div>
    </header>

    <section class="invite">
        <h1 class="invite__text">I'll be happy to create some projects with you!</h1>
        <div class="invite__buttons">
            <button type="button" class="invite__button invite__button--contact">Contact me</button>
            <button type="button" class="invite__button invite__button--cv">Check my CV</button>
        </div>
    </section>

    <main>
        <section id="about" class="about">
            <h2 class="about__header">About me</h2>
            <div class= "about-container">
                <ul class = "about-container__contact-data">
                    <li>Full name: <span>Kamila Spodymek</span></li>
                    <li>Age: <span>28</span></li>
                    <li>Job: <span>Wannabe developer :)</span></li>
                    <li>E-mail: <span>kamila.spodymek@gmail.com</span></li>
                </ul>
                <p class="about-container__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue. Aliquam vestibulum morbi blandit cursus risus
                at ultrices. Eget nunc lobortis mattis aliquam faucibus purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue. Aliquam
                vestibulum morbi blandit cursus risus at ultrices. Eget nunc lobortis mattis aliquam faucibus purus.</p>
            </div>
        </section>

        <section id="skills" class="skills">
            <h2 class="skills__header">Skills</h2>
            <div class="skills-container">
                <div class="skills-container__hard-skills">
                    <h3 class="hard-skills__header">Hard ones</h3>
                    <ul class="hard-skills__list">
                        <li>Search Engine Optimization</li>
                        <li class="skills__list--level skills__list--level--SEO"></li>
                        <li>HTML</li>
                        <li class="skills__list--level skills__list--level--HTML"></li>
                        <li>CSS</li>
                        <li class="skills__list--level skills__list--level--CSS"></li>
                        <li>JavaScript</li>
                        <li class="skills__list--level skills__list--level--JS"></li>
                        <li>Python</li>
                        <li class="skills__list--level skills__list--level--Python"></li>
                    </ul>
                </div>
                <div class="skills-container__soft-skills">
                    <h3 class="soft-skills__header">Soft ones</h3>
                    <ul class="soft-skills__list">
                        <li>English</li>
                        <li class="skills__list--level skills__list--level--EN"></li>
                        <li>Remote work</li>
                        <li class="skills__list--level skills__list--level--RW"></li>
                        <li>Problem solving</li>
                        <li class="skills__list--level skills__list--level--PS"></li>
                        <li>Project management</li>
                        <li class="skills__list--level skills__list--level--PM"></li>
                        <li>Team management</li>
                        <li class="skills__list--level skills__list--level--TM"></li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="gallery" class="gallery">
            <h2 class="gallery__header">Gallery</h2>
            <p class="gallery__intro">I don't have a portfolio just yet, so I will share with you some beautiful website designs.</p>
            <div class="gallery__photos">
                <div class="photos">
                    <a href="https://dezea.digital/" target="_blank"><img src="images/Dezea_Design.jpg" class="photos__screen" alt="Dezea website design"></a>
                </div>
                <div class="photos">
                    <a href="https://www.apsis.com/" target="_blank"><img src="images/APSIS_Design.jpg" class="photos__screen" alt="Apsis website design"></a>
                </div>
                <div class="photos">
                    <a href="http://laufke.net/" target="_blank"><img src="images/Laufke_Design.jpg" class="photos__screen" alt="Laufke website design"></a>
                </div>
                <div class="photos">
                    <a href="http://g.co/thedivide" target="_blank"><img src="images/Divide_Design.jpg" class="photos__screen" alt="Divide website design"></a>
                </div>
                <div class="photos">
                    <a href="https://www.jtbeurope.com/" target="_blank"><img src="images/JTB_Design.jpg" class="photos__screen" alt="JTB events website design"></a>
                </div>
                <div class="photos">
                    <a href="https://www.northernwolf.co/" target="_blank"><img src="images/Northen_Wolf_Design.jpg" class="photos__screen" alt="Northen Wolf website design"></a>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="contact-form">
                <div class="contact-form__left-side">
                    <p class="left-side__paragraph">Got a question? I’m here to help you! Send me a message and I will answer you as
                        soon as possible!</p>
                    <ul class="left-side__socials">
                        <li class="socials__github"><a href="https://github.com/KamilaCoder"><i class="fab fa-github"></i></a></li>
                        <li class="socials__linkedin"><a href="https://www.linkedin.com/in/kamilaspodymek/"><i class="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>
                <div class="contact-form__right-side">
                    <h2 class="right-side__header">Feel free to contact me!</h2>
                    <form action="#" method="#" class="right-side__form">
                        <input type="text" class="form__name">
                        <input type="email" class="form__email">
                        <input type="text" class="form__title">
                        <textarea class="form__message"></textarea>
                        <div class="form__submit">
                            <button type="submit" class="submit__button">Submit</button>
                        </div>
                    </form>
                </div>
            </div>

        </section>
    </main>

    <footer class="footer">
<p class="footer__paragraph">Created with <i class="fas fa-heart"></i> by Kamila</p>
    </footer>

</body>
</html>