forked from Anuragjais189/webathon3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathui.html
153 lines (145 loc) · 5.93 KB
/
ui.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
<!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">
UI/Web & Graph
</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">
Becoming a UI and web developer typically involves a blend of education, practical skills, and ongoing learning. While a formal degree in Computer Science or a related field can be advantageous, it's not always mandatory. Proficiency in core technologies like HTML, CSS, and JavaScript is crucial, along with an understanding of CSS preprocessors, front-end libraries/frameworks, and responsive design principles.
</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 UI and web developers appears promising as digital technologies continue to advance and businesses increasingly rely on online platforms to engage with customers. With the growing demand for visually appealing and user-friendly websites and applications, skilled UI and web developers are expected to remain in high demand. As technology evolves, developers will need to adapt by staying updated with emerging trends.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="maincard">
<div class="card1">
<div class="heading-inner">
Importance
</div>
<div class="des">
Information Technology (IT) serves as a cornerstone across diverse fields, offering transformative solutions and driving progress. In healthcare, it facilitates electronic health records, telemedicine, and diagnostic tools, improving patient care and administrative efficiency. Education benefits from IT through online learning platforms, digital resources, and collaborative tools, enhancing access to education and personalized learning experiences.
</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>
</body>
</html>