Skip to content

Commit a6735da

Browse files
rajjitlairajjitlai
committed
added-08
1 parent c886252 commit a6735da

File tree

9 files changed

+317
-0
lines changed

9 files changed

+317
-0
lines changed

‎08-mouse-effect/img/download.png‎

10.3 KB
Loading

‎08-mouse-effect/img/making.png‎

6.38 KB
Loading

‎08-mouse-effect/img/robo.png‎

1.93 MB
Loading

‎08-mouse-effect/img/robot.ico‎

16.6 KB
Binary file not shown.

‎08-mouse-effect/img/search.png‎

735 Bytes
Loading

‎08-mouse-effect/img/volume.png‎

11.3 KB
Loading

‎08-mouse-effect/img/watch_now.png‎

13.2 KB
Loading

‎08-mouse-effect/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Website Design using HTML and CSS</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="banner">
14+
<div class="left-box">
15+
<div class="wrapper">
16+
<img src="img/robot.ico" class="logo" alt="not available">
17+
<div class="search-box">
18+
<img src="img/search.png" alt="not available">
19+
<input type="text" placeholder="Search">
20+
</div>
21+
22+
<div class="vertical-line"></div>
23+
<ul>
24+
<li><a href="#">PRODUCTIONS</a></li>
25+
<li><a href="#">FACILITIES</a></li>
26+
<li><a href="#">MECHANISMS</a></li>
27+
<li><a href="#">OUR TEAM</a></li>
28+
<li><a href="#">OUR IDEAS</a></li>
29+
</ul>
30+
</div>
31+
</div>
32+
<div class="right-box">
33+
<nav>
34+
<ul>
35+
<li><a href="#">HOME</a></li>
36+
<li><a href="#">ABOUT</a></li>
37+
<li><a href="#">TECHNOLOGIES</a></li>
38+
<li><a href="#">PRODUCTS</a></li>
39+
</ul>
40+
</nav>
41+
<h2>THE NEXT<br>GENERATION</h2>
42+
<div class="robot">
43+
<img src="img/robo.png" alt="not available">
44+
<h1>ROBOTICS</h1>
45+
<div class="features">
46+
<div>
47+
<small>WATCH PREVIEW</small>
48+
<img src="img/watch_now.png" alt="reload">
49+
</div>
50+
<div>
51+
<small>THE MAKING</small>
52+
<img src="img/making.png" alt="reload">
53+
</div>
54+
<div>
55+
<small>DOWNLOAD PDF</small>
56+
<img src="img/download.png" alt="reload">
57+
</div>
58+
</div>
59+
</div>
60+
<div class="circle"></div>
61+
<div class="pagination">
62+
<ul>
63+
<li class="active"><a href="#">01</a></li>
64+
<li><a href="#">02</a></li>
65+
<li><a href="#">03</a></li>
66+
<li><a href="#">04</a></li>
67+
<li><a href="#">05</a></li>
68+
</ul>
69+
</div>
70+
<img src="img/volume.png" class="volume" alt="no preview">
71+
</div>
72+
</div>
73+
74+
<div class="smallCursor"></div>
75+
<div class="largeCursor"></div>
76+
77+
<script>
78+
var smallCursor = document.querySelector(".smallCursor");
79+
var largeCursor = document.querySelector(".largeCursor");
80+
document.onmousemove = function (e) {
81+
smallCursor.style.left = (e.pageX - 5) + "px";
82+
smallCursor.style.top = (e.pageY - 5) + "px";
83+
84+
smallCursor.style.display = "block";
85+
86+
largeCursor.style.left = (e.pageX - 22) + "px";
87+
largeCursor.style.top = (e.pageY - 22) + "px";
88+
89+
largeCursor.style.display = "block";
90+
}
91+
</script>
92+
</body>
93+
94+
</html>

‎08-mouse-effect/style.css‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
background: #000;
8+
color: #fff;
9+
font-family: sans-serif;
10+
overflow: hidden;
11+
cursor: none;
12+
}
13+
14+
.banner {
15+
width: 100%;
16+
height: 100vh;
17+
display: flex;
18+
}
19+
20+
.left-box {
21+
flex-basis: 20%;
22+
background: #002e52;
23+
}
24+
25+
.right-box {
26+
flex-basis: 80%;
27+
position: relative;
28+
}
29+
30+
.logo {
31+
/* width: 150px; */
32+
margin: 30px 0;
33+
border-radius: 80px;
34+
}
35+
36+
.wrapper {
37+
width: 80%;
38+
margin: auto;
39+
}
40+
41+
.search-box {
42+
display: flex;
43+
background: #fff;
44+
padding: 10px 7px;
45+
border-radius: 20px;
46+
z-index: 2;
47+
}
48+
49+
.search-box img {
50+
width: 18px;
51+
margin: auto 5px;
52+
}
53+
54+
.search-box input {
55+
width: 80%;
56+
border: 0;
57+
outline: none;
58+
background: transparent;
59+
}
60+
61+
.vertical-line {
62+
width: 1px;
63+
height: 40vh;
64+
background: #797979;
65+
margin: 30px 0 10px;
66+
}
67+
68+
.wrapper ul li {
69+
list-style: none;
70+
margin: 10px 0;
71+
}
72+
73+
.wrapper ul li a {
74+
color: #797979;
75+
font-size: 13px;
76+
text-decoration: none;
77+
}
78+
79+
nav {
80+
margin-top: 60px;
81+
margin-left: 60px;
82+
}
83+
84+
nav ul {
85+
display: flex;
86+
}
87+
88+
nav ul li {
89+
list-style: none;
90+
margin-right: 70px;
91+
}
92+
93+
nav ul li a {
94+
color: #fff;
95+
font-size: 13px;
96+
text-decoration: none;
97+
}
98+
99+
.right-box h2 {
100+
margin-top: 5%;
101+
margin-left: 60px;
102+
font-size: 55px;
103+
letter-spacing: 3px;
104+
}
105+
106+
.robot {
107+
position: absolute;
108+
bottom: 0;
109+
right: 6%;
110+
height: 93%;
111+
}
112+
113+
.robot img {
114+
height: 100%;
115+
}
116+
117+
.robot h1 {
118+
position: absolute;
119+
top: 100px;
120+
right: -40px;
121+
font-size: 110px;
122+
color: #e2e2e2;
123+
opacity: 0.1;
124+
z-index: -1;
125+
}
126+
127+
.features {
128+
position: absolute;
129+
bottom: 17%;
130+
left: -220px;
131+
}
132+
133+
.features img {
134+
width: 50px;
135+
margin-left: 40px;
136+
}
137+
138+
.features div {
139+
display: flex;
140+
align-items: center;
141+
margin-bottom: 30px;
142+
}
143+
144+
.features div:nth-child(2) {
145+
margin-left: 35px;
146+
}
147+
148+
.features div:nth-child(3) {
149+
margin-left: 38px;
150+
}
151+
152+
.circle {
153+
width: 180px;
154+
height: 180px;
155+
border: 40px solid rgba(255, 255, 255, 0.1);
156+
border-radius: 50%;
157+
position: absolute;
158+
top: 40%;
159+
left: -130px;
160+
}
161+
162+
.pagination ul {
163+
display: flex;
164+
align-items: flex-end;
165+
}
166+
167+
.pagination ul li {
168+
list-style: none;
169+
margin-right: 20px;
170+
}
171+
172+
.pagination ul li a {
173+
text-decoration: none;
174+
color: #ccc;
175+
font-size: 12px;
176+
padding: 10px;
177+
border-bottom: 2px solid #fff;
178+
}
179+
180+
.pagination {
181+
position: absolute;
182+
left: 60px;
183+
bottom: 5%;
184+
}
185+
186+
.pagination ul li.active a {
187+
font-size: 22px;
188+
border-bottom: 5px solid #fff;
189+
}
190+
191+
.volume {
192+
width: 25px;
193+
position: absolute;
194+
right: 4%;
195+
bottom: 4%;
196+
}
197+
198+
.smallCursor {
199+
height: 10px;
200+
width: 10px;
201+
background: #3fc9f5;
202+
border-radius: 50%;
203+
position: absolute;
204+
z-index: 1;
205+
display: none;
206+
}
207+
208+
.largeCursor {
209+
height: 40px;
210+
width: 40px;
211+
border: 2px solid #3fc9f5;
212+
border-radius: 50%;
213+
position: absolute;
214+
z-index: 1;
215+
display: none;
216+
transition-duration: 500ms;
217+
transition-timing-function: ease-out;
218+
}
219+
220+
a {
221+
position: relative;
222+
z-index: 2;
223+
}

0 commit comments

Comments
 (0)