Skip to content

Commit

Permalink
Merge pull request #327 from Shobhit1729Aryan/main
Browse files Browse the repository at this point in the history 
ALIGNMENT OF DIVS AND ADDED FLOATING EFFECT #322
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 8, 2024
2 parents d17b5d7 + c4de195 commit 30315a8
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 39 deletions.
137 changes: 134 additions & 3 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -655,13 +655,23 @@ button:hover {
#COURSE
\*-----------------------------------*/

.course .grid-list { padding-block: 20px 44px; }

.course .grid-list { padding-block: 20px 44px;
}
.heading1{
height: 200px;
}
.heading2{
height: 206px;
}
.image2{
height: 200px;
}
.course-card {
border-block-end: 4px solid transparent;
display: flex;
flex-direction: column;
gap: 24px;

}

.course-card:is(:hover, :focus-within) { border-color: var(--light-coral); }
Expand Down Expand Up @@ -1651,4 +1661,125 @@ button:hover {
font-size: 1.0rem;
}
}

.headline{
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes pulse{
0%{
transform: translateY(-3.5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-3.5px);
}
}
body{
background-color: #ffede7;
}
.header1{
animation-name: pulse1;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.header2{
animation-name: pulse2;
animation-duration: 1.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.header3{
animation-name: pulse3;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.header4{
animation-name: pulse4;
animation-duration: 1.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.header5{
animation-name: pulse5;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.header6{
animation-name: pulse6;
animation-duration: 1.8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes pulse1{
0%{
transform: translateY(-3.5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-3.5px);
}
}
@keyframes pulse2{
0%{
transform: translateY(-5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-5px);
}
}
@keyframes pulse3{
0%{
transform: translateY(-3.5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-3.5px);
}
}
@keyframes pulse4{
0%{
transform: translateY(-5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-5px);
}
}
@keyframes pulse5{
0%{
transform: translateY(-3.5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-3.5px);
}
}
@keyframes pulse6{
0%{
transform: translateY(-5px);
}
50%{
transform: translateY(0px);
}
100%{
transform: translateY(-5px);
}
}
20 changes: 11 additions & 9 deletions data-science.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<p class="title-sm text-center section-subtitle" id="data-science-label" >Explore Courses</p>

<h2 class="headline-md text-center section-title" data-aos="fade-down">
Data Science <span class="span has-after">Courses</span>
<div class="headline">Data Science <span class="span has-after">Courses</span></div>
</h2>

<p class="text-center description">
Expand All @@ -44,10 +44,12 @@ <h3 class="title-lg">Introduction to Data Science</h3>

<li>
<div class="card course-card" data-aos="zoom-out-down">
<div class="card-icon">
<img src="./assets/images/data-science/image2.png" width="300" height="100" loading="lazy"
<div class="heading1">
<div class="card-icon">

<img class="image2" src="./assets/images/data-science/image2.png" width="300" height="100" loading="lazy"
alt="Data Analysis with Python course overview image">
</div>
</div></div>
<div>
<h3 class="title-lg">Data Analysis with Python</h3>
<p class="title-sm">Duration: 6 weeks</p>
Expand All @@ -57,9 +59,9 @@ <h3 class="title-lg">Data Analysis with Python</h3>
</li>

<li>
<div class="card course-card" data-aos="zoom-out-down">
<div class="card-icon">
<img src="./assets/images/data-science/image5.png" width="300" height="100" loading="lazy"
<div class="card course-card" data-aos="zoom-out-down">
<div class="card-icon" >
<img src="./assets/images/data-science/image5.png" width="300"height="100" loading="lazy"
alt="Data Visualization with Tableau course overview image">
</div>
<div>
Expand All @@ -72,10 +74,10 @@ <h3 class="title-lg">Data Visualization with Tableau</h3>

<li>
<div class="card course-card" data-aos="zoom-out-down">
<div class="card-icon">
<div class="heading2"> <div class="card-icon">
<img src="./assets/images/data-science/image3.jpg" width="300" height="100" loading="lazy"
alt="Machine Learning Basics course overview image">
</div>
</div></div>
<div>
<h3 class="title-lg">Machine Learning Basics</h3>
<p class="title-sm">Duration: 8 weeks</p>
Expand Down
29 changes: 18 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ <h3>Your Email</h3>
<p id="keppi" class="title-sm text-center section-subtitle keppi" id="category-label" data-aos="flip-down">Course Categories</p>

<h2 class="headline-md text-center section-title" data-aos="fade-down">
Browse Top <span class="span has-after">Categories</span>
<div class="headline"> Browse Top <span class="span has-after">Categories</span></div>
</h2>

<ul class="grid-list">
Expand Down Expand Up @@ -482,14 +482,15 @@ <h2 class="headline-md section-title">
<p id="keppi" class="title-sm section-subtitle text-center ">Featured Courses</p>

<h2 class="headline-md section-title text-center" id="course-label" data-aos="fade-down">
Choose Unlimited <span class="span has-after">Courses</span>
<div class="headline">Choose Unlimited <span class="span has-after">Courses</span</div> >
</h2>

<ul class="grid-list">

<li class="card-container">
<div class="header1">
<div class="card course-card" data-aos="fade-right">

<figure class="card-banner">
<img src="./assets/images/course-1.png" width="370" height="248" loading="lazy"
alt="Basic Fundamentals of Interior & Graphics Design" class="img-cover">
Expand Down Expand Up @@ -530,15 +531,16 @@ <h3 class="title-lg card-title">

</div>

</div>
</div></div>

<a href="#" class="layer-link"
aria-label="Course Details, Basic Fundamentals of Interior & Graphics Design"></a>

</div>
</div>
</li>

<li class="card-container">
<div class="header2">
<div class="card course-card" data-aos="fade-left">

<figure class="card-banner">
Expand Down Expand Up @@ -581,7 +583,7 @@ <h3 class="title-lg card-title">

</div>

</div>
</div></div>

<a href="#" class="layer-link"
aria-label="Course Details, Increasing Engagement with Instagram & Facebook"></a>
Expand All @@ -590,6 +592,7 @@ <h3 class="title-lg card-title">
</li>

<li class="card-container">
<div class="header3">
<div class="card course-card" data-aos="fade-right">

<figure class="card-banner">
Expand Down Expand Up @@ -632,7 +635,7 @@ <h3 class="title-lg card-title">

</div>

</div>
</div></div>

<a href="#" class="layer-link"
aria-label="Course Details, Introduction to Color Theory & Basic UI/UX"></a>
Expand All @@ -641,6 +644,7 @@ <h3 class="title-lg card-title">
</li>

<li class="card-container">
<div class="header4">
<div class="card course-card" data-aos="fade-left">

<figure class="card-banner">
Expand Down Expand Up @@ -683,7 +687,7 @@ <h3 class="title-lg card-title">

</div>

</div>
</div></div>

<a href="#" class="layer-link"
aria-label="Course Details, Financial Security Thinking and Principles Theory"></a>
Expand All @@ -692,6 +696,7 @@ <h3 class="title-lg card-title">
</li>

<li class="card-container">
<div class="header5">
<div class="card course-card" data-aos="fade-right">

<figure class="card-banner">
Expand Down Expand Up @@ -734,7 +739,7 @@ <h3 class="title-lg card-title">

</div>

</div>
</div></div>

<a href="#" class="layer-link"
aria-label="Course Details, Logo Design: From Concept to Presentation"></a>
Expand All @@ -743,6 +748,8 @@ <h3 class="title-lg card-title">
</li>

<li class="card-container">
<div class="header6">

<div class="card course-card" data-aos="fade-left">

<figure class="card-banner">
Expand Down Expand Up @@ -785,8 +792,8 @@ <h3 class="title-lg card-title">

</div>

</div>

</div></div>
</li>
<a href="#" class="layer-link"
aria-label="Course Details, Professional Ceramic Moulding for Beginners"></a>

Expand Down
16 changes: 0 additions & 16 deletions node_modules/.bin/mime
View file

This file was deleted.

Empty file modified node_modules/mime/cli.js
100755 → 100644
View file
Empty file.
Empty file modified node_modules/mime/src/build.js
100755 → 100644
View file
Empty file.

0 comments on commit 30315a8

Please sign in to comment.