Skip to content

Commit 481b0bf

Browse files
Aniket762Aniket762
authored
Merge pull request #43 from sawzedong/main
Change up styles of Homepage
2 parents 225f36b + d32e7d7 commit 481b0bf

File tree

2 files changed

+93
-51
lines changed

2 files changed

+93
-51
lines changed

‎assets/css/style.css

Lines changed: 49 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -340,24 +340,51 @@ header{
340340

341341
/*Topics*/
342342
#topics{
343-
margin-top: 4%;
343+
padding-top: 4%;
344+
}
345+
346+
#topic-wrapper {
347+
background: linear-gradient(to bottom right, #fff, #d1aaee)
344348
}
345349
.profile-card{
346-
width: 400px;
350+
/* width: 400px; */
347351
text-align: center;
348352
border-radius: 8px;
349353
overflow: hidden;
350-
margin:20px;
354+
/* margin:20px; */
355+
margin-top: 20px;
356+
margin-bottom: 20px;
351357
}
352358

353359

354360

355361
.card-header{
356-
padding: 60px 40px;
362+
padding: 60px 40px 112px 40px;
357363
border: 2px solid black;
364+
position: relative;
358365
/*border-radius: 20px;*/
359366
}
367+
.overlay {
368+
position: absolute;
369+
top: 0;
370+
left: 0;
371+
width: 100%;
372+
height: 100%;
373+
background-color: rgba(0, 0, 0, 0.3);
374+
backdrop-filter: blur(2px);
375+
padding-top: 60px;
376+
transition: .2s;
377+
margin-bottom: 48px;
378+
}
360379

380+
.overlay:hover {
381+
background-color: rgba(0, 0, 0, 0);
382+
backdrop-filter: blur(0px);
383+
}
384+
.overlay:hover .name {
385+
transition: .2s;
386+
text-shadow: 1px 1px 10px #121212;
387+
}
361388

362389
#one{
363390
background:url('../img/aiWallpaper.jpeg');
@@ -410,17 +437,12 @@ header{
410437
height: 300px;
411438
border-radius: 50%;
412439
}
413-
414440
.name{
415441
color: #f2f2f2;
416442
font-size: 28px;
417443
font-weight: 600;
418444
margin: 10px 0;
419-
}
420-
.name:hover {
421-
font-size: 30px;
422-
transition: .5s;
423-
text-shadow: 1px 1px 10px #121212;
445+
z-index: 100;
424446
}
425447

426448
.desc{
@@ -461,7 +483,7 @@ header{
461483
}
462484

463485
.card-footer{
464-
background: #000000;
486+
background: #29004d;
465487
padding: 30px 10px;
466488
margin-top: 5px;
467489
/*border-radius: 80px;*/
@@ -508,19 +530,23 @@ footer{
508530
width: 7rem;
509531
height: 7rem;
510532
background-color: #2a00e3;
511-
position: absolute;
533+
position: fixed;
512534
top: -3rem;
513-
left: 50%;
535+
right: 0;
536+
top: 80%; /* for browsers that do not support calc() */
537+
top: calc(95% - 7rem);
514538
transform: translateX(-50%);
515539
border-radius: 50%;
540+
text-align: center;
541+
z-index: 1000;
516542
}
517543

518544
.back-to-top i{
519545
display: block;
520546
color: #fff;
521547
font-size: 2rem;
522-
padding: 2rem;
523-
animation: up 2s infinite;
548+
padding: 3rem 0 2rem 0;
549+
animation: up 15s infinite;
524550
}
525551

526552
.footer-content{
@@ -796,11 +822,15 @@ footer{
796822
0%{
797823
opacity: 0;
798824
}
799-
50%{
825+
10%{
800826
opacity: 1;
801827
}
802-
100%{
803-
opacity: 0;
804-
transform: translateY(-1rem);
828+
20%, 80% {
829+
opacity: 1;
830+
transform: translateY(-0.5rem);
831+
}
832+
100% {
833+
opacity: 0;
834+
transform: translateY(-1rem);
805835
}
806836
}

‎index.html

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
<link rel='stylesheet' id='customify-font-stylesheet-10-css' href='//pxgcdn.com/fonts/billy-ohio/stylesheet.css' type='text/css' media='all' />
1515
</head>
1616
<body>
17+
<div class="back-to-top">
18+
<a href="#hero"><i class="fas fa-chevron-up"></i></a>
19+
</div>
1720
<header>
1821
<div class="container">
1922
<nav class="navb">
@@ -58,17 +61,19 @@ <h6>~ 2020 ~</h6>
5861
</section>
5962
<!--Hero ends-->
6063
<div class="parallax">
61-
<div>
64+
<div id="topic-wrapper">
6265
<!-- Terms we will use to define categories Beginner Amateur Semi pro Professional Word class-->
6366
<!--row1-->
6467
<!--1st box-->
6568
<div class="container-fluid" id="topics">
66-
<div class="row">
69+
<div class="row justify-content-around">
6770
<div class="col-lg-4 col-md-6 col-sm-12">
6871
<div class="profile-card">
6972
<div class="card-header" id="one" >
73+
<div class="overlay">
7074
<div class="name">Artificial Intelligence</div>
7175
</div>
76+
</div>
7277
<div class="card-footer">
7378
<div class="numbers">
7479
<div class="item">
@@ -89,8 +94,10 @@ <h6>~ 2020 ~</h6>
8994
<div class="profile-card">
9095
<a href="Course/ml/ml.html">
9196
<div class="card-header" id="two" >
97+
<div class="overlay">
9298
<div class="name">Machine Learning</div>
9399
</div>
100+
</div>
94101
</a>
95102
<div class="card-footer">
96103
<div class="numbers">
@@ -111,7 +118,9 @@ <h6>~ 2020 ~</h6>
111118
<div class="col-lg-4 col-md-6 col-sm-12">
112119
<div class="profile-card">
113120
<div class="card-header" id="three">
114-
<div class="name">App Development</div>
121+
<div class="overlay">
122+
<div class="name">App Development</div>
123+
</div>
115124
</div>
116125
<div class="card-footer">
117126
<div class="numbers">
@@ -134,12 +143,14 @@ <h6>~ 2020 ~</h6>
134143
<!--2nd row-->
135144
<!--1st box-->
136145
<div class="container-fluid">
137-
<div class="row">
146+
<div class="row justify-content-around">
138147
<div class="col-lg-4 col-md-6 col-sm-12">
139148
<div class="profile-card">
140149
<a href="Course/index.html">
141150
<div class="card-header" id="four" >
142-
<div class="name">Web Development</div>
151+
<div class="overlay">
152+
<div class="name">Web Development</div>
153+
</div>
143154
</div>
144155
</a>
145156
<div class="card-footer">
@@ -161,7 +172,9 @@ <h6>~ 2020 ~</h6>
161172
<div class="col-lg-4 col-md-6 col-sm-12">
162173
<div class="profile-card">
163174
<div class="card-header" id ="five" >
164-
<div class="name">Cyber Security</div>
175+
<div class="overlay">
176+
<div class="name">Cyber Security</div>
177+
</div>
165178
</div>
166179
<div class="card-footer">
167180
<div class="numbers">
@@ -183,7 +196,9 @@ <h6>~ 2020 ~</h6>
183196
<div class="col-lg-4 col-md-6 col-sm-12">
184197
<div class="profile-card">
185198
<div class="card-header" id="six" >
186-
<div class="name">Competitive Coding</div>
199+
<div class="overlay">
200+
<div class="name">Competitive Coding</div>
201+
</div>
187202
</div>
188203
<div class="card-footer">
189204
<div class="numbers">
@@ -200,12 +215,30 @@ <h6>~ 2020 ~</h6>
200215
</div>
201216
</div>
202217
</div>
218+
<!-- stray database management topic in the footer, moved up into the topics area. Uncomment if necessary
219+
<div class="profile-card col-lg-4 col-md-6 col-sm-12">
220+
<a href="https://www.db-book.com/db4/slide-dir/ch1-2.pdf">
221+
<div class="card-header" style="background:url(images/databasemgmnt.png) no-repeat center;object-fit: cover;">
222+
<div class="name">Database Management</div>
223+
</div>
224+
</a>
225+
<div class="card-footer">
226+
<div class="numbers">
227+
<div class="item">
228+
<span>11</span> Course Length
229+
</div>
230+
<div class="border"></div>
231+
<div class="item">
232+
<span>Beginner</span> Level
233+
</div>
234+
</div>
235+
</div>
236+
</div>
237+
-->
203238
</div>
204239
</div>
205240
<footer>
206-
<div class="back-to-top">
207-
<a href="#hero"><i class="fas fa-chevron-up"></i></a>
208-
</div>
241+
209242
<div class="footer-content" id="footer">
210243
<div class="footer-content-about animate-top">
211244
<h4>About Us</h4>
@@ -254,28 +287,7 @@ <h4>Newsletter</h4>
254287
</div>
255288
</div>
256289
</div>
257-
<div class="profile-card">
258-
<a href="https://www.db-book.com/db4/slide-dir/ch1-2.pdf">
259-
<div class="card-header" style="background:url(images/databasemgmnt.png) no-repeat center;object-fit: cover;">
260-
261-
<div class="name">Database Management</div>
262-
</a>
263-
264-
265-
</div>
266-
<div class="card-footer">
267-
<div class="numbers">
268-
<div class="item">
269-
<span>11</span> Course Length
270-
</div>
271-
<div class="border"></div>
272-
<div class="item">
273-
<span>Beginner</span> Level
274-
</div>
275-
</div>
276-
</div>
277-
</div>
278-
</div>
290+
279291

280292
<div class="copyright animate-bottom">
281293
<h4>&copy; Copyright 2020 Project Basil, All Rights Reserved</h4>

0 commit comments

Comments
 (0)