forked from Anuragjais189/webathon3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
front-end.html
167 lines (155 loc) · 6.67 KB
/
front-end.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<style>
.navbar{
color: white;
z-index: 2;
}
.nav-link{
color: white;
position: relative;
font-size: large;
}
.nav-link::before{
content: "";
position: absolute;
transform: scaleX(0);
width: 100%;
height: 2px;
background: #f53163;
transition: all 0.6S ease;
bottom: 0;
left: 0;
}
.nav-link:hover::before{
transform: scaleX(1);
}
.nav-link:hover{
color: #f53163;
}
.navbar-brand{
color: white;
}
.wave {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.wave svg {
position: relative;
display: block;
width: calc(166% + 1.3px);
height: 500px;
transform: rotateY(180deg);
}
.wave .shape-fill {
fill: rgb(58, 55, 55);
z-index: -1;
}
.container{
z-index: inherit;
}
.mainheading{
font-size: 100px;
background-image:url(backgroundtext.gif);
background-size: 100% auto;
display: flex;
justify-content: center;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: animate 30s alternate infinite;
font-weight: 600;
-webkit-text-stroke: 2px #ccc ;
}
</style>
<body>
<nav class="navbar navbar-expand-md" style="color: white;">
<a href="" class="navbar-brand fs-3 ms-3"><img src="Astrisk2 Logo.png" height="50px" width="120px"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#btn">
<i class="bx bx-menu" style="color: aliceblue;"></i>
</button>
<div class="collapse navbar-collapse" id="btn" style="color: white;">
<ul class="navbar-nav ms-auto" style="color: white;">
<li class="nav-item" ><a href="home.html" class="nav-link mx-3">Home</a></li>
<li class="nav-item" ><a href="registration.html" class="nav-link mx-3">Register</a></li>
<li class="nav-item" ><a href="mainimage.png" class="nav-link mx-3"> Quiz</a></li>
<li class="nav-item" ><a href="#" class="nav-link mx-3">About me</a></li>
</ul>
</div>
</nav>
<div class="mainheading">
Front-End Designer
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="maincard">
<div class="card1">
<div class="heading-inner">
Requirements
</div>
<div class="des">
Front-end designers are in high demand in today's digital landscape, driven by the necessity for seamless and engaging user experiences across various platforms and devices. The requirement for front-end designers stems from the need to bridge the gap between user needs and technological capabilities. These professionals possess a unique blend of design skills, technical expertise, and user-centric mindset, allowing them to create visually appealing .
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="maincard">
<div class="card1">
<div class="heading-inner">
Future Scope
</div>
<div class="des">
The future scope for front-end designers is promising, with emerging technologies and evolving user behaviors shaping new opportunities and challenges. As technology continues to advance, front-end designers will need to stay abreast of the latest trends, tools, and best practices to remain competitive in the field.
One area of growth for front-end designers lies in the realm of progressive web apps (PWAs) and single-page applications (SPAs).
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="maincard">
<div class="card1">
<div class="heading-inner">
Importance
</div>
<div class="des">
Front-end designers play a crucial role in driving user engagement, satisfaction, and retention through the creation of intuitive and visually compelling interfaces. Their expertise in design principles, typography, layout, and usability enables them to craft interfaces that resonate with users and foster positive interactions.
Moreover, front-end designers contribute to brand differentiation and identity by creating consistent visual experiences that reflect the brand's values and personality..
</div>
</div>
</div>
</div>
</div>
<div class="wave" style="z-index: -1;">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
</svg>
</div>
<center><footer style="color: aliceblue;">
<p>© 2024 Asterisk. All rights reserved.</p>
<p>
<a href="https://github.com/yourusername" target="_blank" style="text-decoration: none; color: #f53163;" ><i class="fa fa-github" style="text-decoration: none; color: #f53163; font-size: x-large;"></i></a> |
<a href="https://wa.me/1234567890" target="_blank" style="text-decoration: none; color: #f53163;"><i class="fa fa-linkedin-square" style="text-decoration: none; color: #f53163; font-size: x-large;"></i></a>
</p>
<hr class="white-hr">
</footer></center>
</body>
</html>