Skip to content

Commit

Permalink
Merge pull request #415 from PriyaGhosal/revert-406-main
Browse files Browse the repository at this point in the history 
Revert "style: UI/UX Courses page rebooted #386"
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Oct 11, 2024
2 parents 293b772 + a7c43ca commit 943d025
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 175 deletions.
160 changes: 62 additions & 98 deletions assets/css/uiux.css
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,88 @@
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0; /* Light gray background */
color: #333;
margin: 0;
padding: 20px;
background-color: #f8fafc;
}
.container {
max-width: 1200px;
margin: 0 auto;

header {
text-align: center;
padding-bottom: 20px;
}

h1 {
text-align: left;
color: #1e293b;
margin-bottom: 20px;
font-size: 2.5em;
color: #333; /* Black text for the header */
}
.grid {

.course-list {
list-style-type: none;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.card {
border-radius: 8px;
background-color: #fff; /* White background for the cards */
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Darker shadow for more contrast */
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
overflow: hidden;
transition: transform 0.3s ease; /* Adding hover effect */
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.icon {
background-color: #ffffff;
border-radius: 4px;
padding: 10px;
font-size: 24px;
transition: transform 0.3s ease;
}
.card:hover .icon {
transform: rotate(20deg);
}
.arrow {
color: #64748b;
font-size: 24px;
transition: transform 0.3s ease;
transform: scale(1.05); /* Slight hover effect for interaction */
}
.card:hover .arrow {
transform: translateX(5px);
}
h2 {
margin: 0 0 10px 0;
color: #1e293b;
font-size: 18px;
}
p {
margin: 0 0 15px 0;
color: #64748b;
font-size: 14px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.articles {
color: #64748b;
font-size: 12px;

.card-icon img {
float: left;
margin-right: 20px;
}
.buy-btn {
background-color: #ffffff;
color: #3b82f6;
border: none;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;

.title-lg {
font-size: 1.5em;
color: #333; /* Dark text for course title */
}
.buy-btn:hover {
background-color: #eff6ff;
transform: scale(1.1);

.title-sm {
font-size: 1em;
color: #666; /* Lighter gray for course descriptions */
}
.buy-btn:active {
transform: scale(0.95);

.layer-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -9999px;
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
.grid {
grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet screens */
}
/* Accent elements in light pink */
.card-icon img, h1 {
border-bottom: 2px solid #ff69b4; /* Soft pink border */
}

@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr; /* Single column on mobile screens */
}
.card:hover .card {
background-color: #ff69b4; /* Soft pink on hover */
}
.buy-now-btn {
display: inline-block;
background-color: #333; /* Dark color for the button */
color: #fff; /* White text */
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
font-size: 0.9em;
margin-top: 10px;
transition: background-color 0.3s ease;
}

@media (max-width: 480px) {
h1 {
font-size: 24px;
}
h2 {
font-size: 16px;
}
p {
font-size: 12px;
}
.buy-btn {
font-size: 10px;
padding: 5px 8px;
}
}
.buy-now-btn:hover {
background-color: #ff69b4; /* Soft pink color on hover */
}
156 changes: 79 additions & 77 deletions uiux.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,92 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI/UX Design Courses</title>
<link rel="stylesheet" href="assets/css/uiux.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI/UX Design Courses</title>
<link rel="stylesheet" href="assets/css/uiux.css">
</head>

<body>
<div class="container">
<h1>UI/UX Design Courses</h1>
<div class="grid" id="categoryGrid"></div>
</div>
<header>
<h1>UI/UX Design Courses</h1>
</header>

<script>
const uxUiCourses = [
{
title: 'Intro to UI/UX Design',
description: 'Beginner-friendly introduction to the basics of UI/UX.',
icon: '🎨',
color: '#DDFFE7',

},
{
title: 'Advanced Prototyping Techniques',
description: 'Master advanced prototyping for smooth UI/UX transitions.',
icon: '🔧',
color: '#E8EAEF',

},
{
title: 'User Research Fundamentals',
description: 'Understand your users to design better experiences.',
icon: '🔍',
color: '#BEF6F5',

},
{
title: 'Design Systems & Guidelines',
description: 'Learn how to create consistent and scalable design systems.',
icon: '🛠️',
color: '#FFE8FF',

},
{
title: 'UX for Mobile Devices',
description: 'Design user-friendly experiences for mobile applications.',
icon: '📱',
color: '#C6EDFF',

},
{
title: 'Web Accessibility in UI/UX',
description: 'Ensure your designs are accessible to all users.',
icon: '♿',
color: '#FAFDCB',

}
];
<ul class="course-list">
<li class="card category-card">
<div class="card-icon">
<img src="./assets/images/img1.jpg" width="72" height="72" alt="Course 1 icon">
</div>
<div>
<h3 class="title-lg">Intro to UI/UX Design</h3>
<p class="title-sm">Beginner-friendly introduction to the basics of UI/UX.</p>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
<a href="#" class="layer-link" aria-label="Intro to UI/UX Design"></a>
</li>

const grid = document.getElementById('categoryGrid');
<li class="card category-card">
<div class="card-icon">
<img src="./assets/images/img2.jpg" width="72" height="72" alt="Course 2 icon">
</div>
<div>
<h3 class="title-lg">Advanced Prototyping Techniques</h3>
<p class="title-sm">Master advanced prototyping for smooth UI/UX transitions.</p>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
<a href="#" class="layer-link" aria-label="Advanced Prototyping Techniques"></a>
</li>

uxUiCourses.forEach(category => {
const card = document.createElement('div');
card.className = 'card';
card.style.backgroundColor = category.color;
<li class="card category-card">
<div class="card-icon">
<img src="./assets/images/img3.jpg" width="72" height="72" alt="Course 3 icon">
</div>
<div>
<h3 class="title-lg">User Research Fundamentals</h3>
<p class="title-sm">Understand your users and their needs to design better experiences.</p>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
<a href="#" class="layer-link" aria-label="User Research Fundamentals"></a>
</li>

card.innerHTML = `
<div class="card-header">
<div class="icon">${category.icon}</div>
<div class="arrow">→</div>
</div>
<h2>${category.title}</h2>
<p>${category.description}</p>
<div class="card-footer">
<button class="buy-btn">Buy Now</button>
</div>
`;
<li class="card category-card">
<div class="card-icon">
<img src="./assets/images/img4.jpg" width="72" height="72" alt="Course 4 icon">
</div>
<div>
<h3 class="title-lg">Design Systems & Guidelines</h3>
<p class="title-sm">Learn how to create consistent and scalable design systems.</p>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
<a href="#" class="layer-link" aria-label="Design Systems & Guidelines"></a>
</li>

// Interactivity: Buy button click
const buyButton = card.querySelector('.buy-btn');
buyButton.addEventListener('click', () => {
alert(`You clicked "Buy Now" for ${category.title}`);
});
<li class="card category-card">
<div class="card-icon">
<img src="./assets/images/img5.jpg" width="72" height="72" alt="Course 5 icon">
</div>
<div>
<h3 class="title-lg">UX for Mobile Devices</h3>
<p class="title-sm">Design user-friendly experiences for mobile applications.</p>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
<a href="#" class="layer-link" aria-label="UX for Mobile Devices"></a>
</li>

<li class="card category-card">
<div class="card-icon">
<img src="./assets/images/img6.jpg" width="72" height="72" alt="Course 6 icon">
</div>
<div>
<h3 class="title-lg">Web Accessibility in UI/UX</h3>
<p class="title-sm">Ensure your designs are accessible to all users.</p>
<a href="#" class="buy-now-btn">Buy Now</a>
</div>
<a href="#" class="layer-link" aria-label="Web Accessibility in UI/UX"></a>
</li>
</ul>

grid.appendChild(card);
});
</script>
</body>

</html>

0 comments on commit 943d025

Please sign in to comment.