Freelancer/index.html at main · AstroKitty15/Freelancer · 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
<!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>Freelancer</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/media.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

    <header class="header">
        <div class="container">
           <!-- Header nav -->
           <div class="header-nav">
                <a href="#!" class="logo">Kelvin</a>

                <nav id="nav" class="nav">
                    <ul class="nav-list">
                        <li class="nav-item"><a href="#!" class="nav-link active">Home</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">Works</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">Services</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">About</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">Contact</a></li>
                    </ul>
                    <button id="nav-btn" class="nav-button">
                        <img id="nav-btn-img" src="./img/icons/nav-open.svg" alt="nav-button">
                    </button>
                </nav>
           </div>

           <!-- Header content -->
           <div class="header-row">

               <div class="header-content" data-aos="fade-up">
                   <h1 class="header-heading">Kelvin Kramer<br> <span>Designer & Developer</span></h1>
                    <p> I’m a portrait, fashion and lifestyle photographer living In New York City. During my thirteen year tenure here.</p>
               </div>
               <div class="header-img" data-aos="fade-left">
                   <picture>
                        <source media="(max-width: 799px)" srcset="./img/header/hero-mobile.png">
                       <img src="./img/header/hero.png" alt="hero">
                   </picture>
               </div>

           </div>
        </div>
    </header>

    <section class="services">
        <div class="container">
            <div class="services-row">
                <div class="service-card" data-aos="fade-down">
                    <img class="service-card-img" src="./img/services/01.svg" alt="UI/UX Design">
                    <h3 class="service-card-title">UI/UX Design</h3>
                    <p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
                </div>

                <div class="service-card" data-aos="fade-down">
                    <img class="service-card-img" src="./img/services/02.svg" alt="development">
                    <h3 class="service-card-title">Development</h3>
                    <p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
                </div>

                <div class="service-card" data-aos="fade-down">
                    <img class="service-card-img" src="./img/services/03.svg" alt="software testing">
                    <h3 class="service-card-title">Software testing</h3>
                    <p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="portfolio">
        <div class="container">
            <div class="portfolio-title">
                <h2 class="title-1">Portfolio</h2>
            </div>

            <div class="project" data-aos="flip-up">
                <img src="./img/portfolio/01.jpg" alt="Online fashion store" class="project-img">
                <h3 class="project-title"><a href="#!">Online fashion store - Homepage</a></h3>
            </div>

            <div class="project" data-aos="flip-up">
                <img src="./img/portfolio/02.jpg" alt="Reebok Store" class="project-img">
                <h3 class="project-title"><a href="#!">Reebok Store - Concept</a></h3>
            </div>

            <div class="project" data-aos="flip-up">
                <img src="./img/portfolio/03.jpg" alt="Braun Landing Page" class="project-img">
                <h3 class="project-title"><a href="#!">Braun Landing Page - Concept</a></h3>
            </div>
        </div>
    </section>

    <footer class="contacts">
        <div class="container">
            <div class="contacts-title">
                <h2 class="title-1">Contacts</h2>
            </div>

            <div class="contacts-content" data-aos="fade-down">
                <p>Want to know more or just chat?<br>
                    You are welcome!</p>
            </div>

            <div class="contacts-button" data-aos="fade-down">
                <a href="#!" class="btn">Send message</a>
            </div>

            <div class="contacts-social" data-aos="zoom-in">
                <a href="#!"><img src="./img/socials/LinkedIn.svg" alt="LinkedIn"></a>
                <a href="#!"><img src="./img/socials/Instargam.svg" alt="Instargam"></a>
                <a href="#!"><img src="./img/socials/Behance.svg" alt="Behance"></a>
                <a href="#!"><img src="./img/socials/Dribble.svg" alt="Dribble"></a>
            </div>

            <div class="contacts-footer" data-aos="fade-up">
                <p>Like me on<br>
                    LinkedIn, Instagram, Behance, Dribble</p>
            </div>
        </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./js/main.js"></script>
</body>
</html>