Project-14/index.html at master · akrambj/Project-14 · 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!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>Document</title>
    <link rel="stylesheet" href="dist/output.css">
    <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=Dancing+Script&family=Epilogue:wght@400;600&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
</head>
<body>
    <!-- Header -->
    <header class="fixed top-0 left-0 w-screen h-16 z-10 flex justify-between items-center p-10">
        <div class="logo">
            <h1 class="font-Epilogue font-semibold text-xl text-black-0">Logo</h1>
        </div>
        <!-- navbar -->
        <nav class="flex items-center">
            <ul class="navMenu max-sm:absolute max-sm:top-20 max-sm:-right-full max-sm:w-1/2 max-sm:h-80 max-sm:bg-black-0 md:flex md:items-center md:gap-10 md:duration-300">
                <li class="navItem list-none text-center mt-10 md:mt-0">
                    <a href="#" class="navLink font-Epilogue font-normal text-white-0 first-letter  hover:text-yellow-0 md:hover:text-yellow-0 md:hover:duration-300 hover:duration-300 md:text-black-0 text-3xl md:text-base">About</a>
                </li>
                <li class="navItem list-none text-center mt-10 md:mt-0">
                    <a href="#" class="navLink font-Epilogue font-normal text-white-0 hover:text-yellow-0 md:hover:text-yellow-0 md:hover:duration-300 hover:duration-300 md:text-black-0 text-3xl md:text-base">Work</a>
                </li>
                <li class="navItem list-none text-center mt-10 md:mt-0">
                    <a href="#" class="navLink font-Epilogue font-normal text-white-0 hover:text-yellow-0 md:hover:text-yellow-0 md:hover:duration-300 hover:duration-300 md:text-black-0 text-3xl md:text-base">Contact</a>
                </li>
            </ul>
            <div class="hamburger md:hidden">
                <i class="fa-solid fa-bars text-3xl text-black-0 cursor-pointer" id="menu"></i>
            </div>
        </nav>
    </header>

<!-- main -->
<main>
    <div class="hero mt-32 font-Epilogue font-semibold  md:mt-40 w-4/5 ml-6 md:ml-32 md:flex md:justify-between md:items-center ">
       <div class="">
        <h3 class="text-center md:text-left md:mt-10">Branding | Image making</h3>
        <h1 class="mt-6 text-center font-Epilogue font-semibold text-5xl md:text-left md:mt-12  md:text-6xl ">My awesome portfolio</h1>
        <h6 class="mt-4 text-center font-Epilogue font-normal md:text-left md:mt-10">And I made it myself! Yes. In Figma with Anima</h6>
        </div>
        <div class="mt-6 md:mt-0">
            <img src="imgs/main.png" alt="">
        </div>
    </div>
</main>

<!-- Brands -->
<section class="brands">
    <div class="mt-20 w-4/5 ml-8 flex items-center gap-10 flex-wrap border-t-2 border-t-black-0 border-b-2 border-b-black-0 p-6 md:ml-32 md:gap-28 pb-10 pt-10">
        <a href="#"><img src="imgs/Google.png" alt=""></a>
        <a href="#"><img src="imgs/Behance.png" class="" alt=""></a>
        <a href="#"><img src="imgs/Dribbble.png" class="w-32" alt=""></a>
        <a href="#"><img src="imgs/Apple.png" alt=""></a>
        <a href="#"><img src="imgs/Awwwards.png" alt=""></a>
    </div>
</section>

<!-- Design -->
<section class="design">
    <div class="mt-16 md:flex md:justify-between md:items-center ">
        <div class="w-4/5 ml-8  md:w-1/2">
            <img src="imgs/design.png" class="p-16 md:pl-36" alt="">
            <h1 class=" font-Epilogue font-semibold text-3xl md:text-xl text-center">Product design</h1>
            <h4 class="mt-4 font-Epilogue font-normal text-center md:text-sm md:w-9/12 md:pl-20 md:ml-5">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com</h4>
        </div>
        <div class="w-4/5 ml-8  md:w-1/2">
            <img src="imgs/design.png" class="p-16 md:pl-36" alt="">
            <h1 class=" font-Epilogue font-semibold text-3xl md:text-xl text-center">Product design</h1>
            <h4 class="mt-4 font-Epilogue font-normal text-center md:text-sm md:w-9/12 md:pl-20 md:ml-5">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com</h4>
        </div>
        <div class="w-4/5 ml-8  md:w-1/2">
            <img src="imgs/design.png" class="p-16 md:pl-36" alt="">
            <h1 class=" font-Epilogue font-semibold text-3xl md:text-xl text-center">Product design</h1>
            <h4 class="mt-4 font-Epilogue font-normal text-center md:text-sm md:w-9/12 md:pl-20 md:ml-5">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com</h4>
        </div>
    </div>
</section>
<!-- my work -->
<section class="my-work">
    <div class="mt-14">
        <h1 class="text-center font-Epilogue font-semibold text-4xl text-black-0">Latest work</h1>
    </div>
    <div class="md:ml-20 md:mt-4 md:w-11/12 md:flex md:justify-between md:items-center md:gap-10 md:flex-wrap ">
        <div class="mt-12 ml-4">
            <img src="imgs/work01.png" class="w-72" alt="">
            <h3 class="mt-2 font-Epilogue font-semibold text-black-0 text-lg">Free Bird</h3>
            <h5 class="font-Epilogue font-normal text-black-0">Lynyrd Skynyrd</h5>
        </div>
        <div class="mt-12 ml-4">
            <img src="imgs/work02.png" class="w-72" alt="">
            <h3 class="mt-2 font-Epilogue font-semibold text-black-0 text-lg">Purple Haze</h3>
            <h5 class="font-Epilogue font-normal text-black-0">Jimi Hendrix</h5>
        </div>
        <div class="mt-12 ml-4">
            <img src="imgs/work03.png" class="w-72" alt="">
            <h3 class="mt-2 font-Epilogue font-semibold text-black-0 text-lg">You Really Got Me</h3>
            <h5 class="font-Epilogue font-normal text-black-0">The Kinks</h5>
        </div>
        <div class="mt-12 ml-4">
            <img src="imgs/work04.png" class="w-72" alt="">
            <h3 class="mt-2 font-Epilogue font-semibold text-black-0 text-lg">American Girl</h3>
            <h5 class="font-Epilogue font-normal text-black-0">Tom Petty</h5>
        </div>
        <div class="mt-12 ml-4">
            <img src="imgs/work05.png" class="w-72" alt="">
            <h3 class="mt-2 font-Epilogue font-semibold text-black-0 text-lg">Whole Lotta Love</h3>
            <h5 class="font-Epilogue font-normal text-black-0">Led Zeppelin</h5>
        </div>
        <div class="mt-12 ml-4">
            <img src="imgs/work06.png" class="w-72" alt="">
            <h3 class="mt-2 font-Epilogue font-semibold text-black-0 text-lg">Under Pressure</h3>
            <h5 class="font-Epilogue font-normal text-black-0">Queen</h5>
        </div>
    </div>
</section>
<!-- clients -->
<section class="clients">
    <div class="mt-10">
        <h1 class="font-Epilogue font-semibold text-center text-4xl text-black-0">Clients</h1>
    </div>
    <div class="md:flex md:justify-between md:items-center md:w-11/12 md:ml-12 border-b-2 border-b-black-0 pb-20">
        <div class="mt-10 w-5/6 ml-8 border-2 border-solid border-yellow-0 pb-10 md:w-1/2">
            <h4 class="pt-6 pl-6 md:text-xl">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com</h4>
            <div class="pt-24 pl-6 flex items-center gap-5">
                <img src="imgs/client01.png" class="pb-4" alt="">
                <div>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <h5 class="text-black-0 font-Epilogue font-normal text-base pt-2 md:w-1/2">Gemma Nolen,Google</h5>
                </div>
            </div>
        </div>
        <div class="mt-10 w-5/6 ml-8 border-2 border-solid border-yellow-0 pb-10 md:w-1/2">
            <h4 class="pt-6 pl-6 md:text-xl">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com</h4>
            <div class="pt-24 pl-6 flex items-center gap-5">
                <img src="imgs/client02.png" class="pb-4" alt="">
                <div>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <h5 class="text-black-0 font-Epilogue font-normal text-base pt-2 md:w-1/2">Gemma Nolen,Google</h5>
                </div>
            </div>
        </div>
        <div class="mt-10 w-5/6 ml-8 border-2 border-solid border-yellow-0 pb-10 md:w-1/2">
            <h4 class="pt-6 pl-6 md:text-xl">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com</h4>
            <div class="pt-24 pl-6 flex items-center gap-5">
                <img src="imgs/client03.png" class="pb-4" alt="">
                <div>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <h5 class="text-black-0 font-Epilogue font-normal text-base pt-2 md:w-1/2">Gemma Nolen,Google</h5>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- footer -->
<footer class="">
    <div class="pb-20 md:flex md:justify-between md:items-center">
        <div class="mt-16 ml-6 md:ml-16 md:mb-20">
        <h1 class="font-Epilogue font-semibold text-4xl text-black-0">Let’s work together</h1>
        <h4 class="mt-10 font-Epilogue font-normal text-black-0 md:w-1/2">This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com This is a template Figma file,
        turned into code using Anima. Learn more at AnimaApp.com</h4>
        <div class="flex items-center gap-5 mt-6 text-black-0 text-2xl">
            <i class="fa-brands fa-facebook"></i>
            <i class="fa-brands fa-twitter"></i>
            <i class="fa-brands fa-instagram"></i>
            <i class="fa-brands fa-github"></i>
            <i class="fa-brands fa-discord"></i>
        </div>
        </div>
        <div class="mt-10 ml-6 md:mt-32 md:mr-20">
            <input class="w-11/12 pl-6 h-16 bg-form-clr-0" type="text" placeholder="Name">
            <input class="w-11/12 pl-6 h-16 mt-4 bg-form-clr-0" type="email" placeholder="Email">
            <input class="w-11/12 pl-6 h-40 pb-20 mt-4 bg-form-clr-0" type="text" placeholder="Type your message here">

            <button class="mt-6 p-6 w-52 h-16 bg-black-0 font-Epilogue font-semibold text-white-0">
                <a href="#">Submit</a>
            </button>
        </div>
    </div>
</footer>


    <script src="main.js"></script>
</body>
</html>