Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed size of each template and add vertical scroller #439

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 39 additions & 45 deletions music.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,103 +3,97 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Production Courses | Learn Music Production</title>
<meta name="description" content="Explore our Music Production courses covering Music Composition, Sound Design, Recording, and more. Enroll now and build your Modern Physics skills.">
<title>Music Production Courses</title>
<meta name="description" content="Discover courses in various subjects. Enroll now and expand your knowledge!">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>

<section class="section courses has-bg-image">
<div class="container">

<p class="title-sm text-center section-subtitle" id="data-science-label">Explore Courses</p>
<body class="overflow-y-auto h-screen bg-light-coral">

<h2 class="headline-md text-center section-title">
Music Production <span class="span has-after">Courses</span>
</h2>
<section class="section courses p-4 bg-light-coral">
<div class="container mx-auto">

<p class="title-sm text-center section-subtitle" id="data-science-label">Explore Courses</p>

<p class="text-center description">
Music Production involves the creation and development of music tracks, from recording to mixing and mastering. Our courses cover essential skills like audio engineering, sound design, and digital production techniques. Learn how to produce high-quality music and bring your creative vision to life!
</p>
<h2 class="headline-md text-center section-title mb-4">
Music Production <span class="span has-after">Courses</span>
</h2>

<ul class="grid-list">
<p class="text-center description mb-6">
Music Production involves the creation and development of music tracks, from recording to mixing and mastering. Our courses cover essential skills like audio engineering, sound design, and digital production techniques. Learn how to produce high-quality music and bring your creative vision to life!
</p>
<div>
<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<li>
<div class="card course-card">
<div class="card-icon">
<img src="./assets/images/music/music.jpg" width="300" height="100" loading="lazy"
alt="Introduction to Music Production course overview image">
<div class="card course-card bg-white rounded-lg shadow-md p-4 text-center">
<div class="card-icon mb-2">
<img src="./assets/images/music/music.jpg" class="w-full h-64 object-contain rounded-lg" loading="lazy" alt="Introduction to Music Production course overview image">
</div>
<div>
<h3 class="title-lg">Introduction to Music Production</h3>
<h3 class="title-lg font-bold">Introduction to Music Production</h3>
<p class="title-sm">Duration: 4 weeks</p>
</div>
<a href="course-intro-Music-Production.html" class="layer-link" aria-label="Learn more about Introduction to Music Production"></a>
</div>
</li>

<li>
<div class="card course-card">
<div class="card-icon">
<img src="./assets/images/music/composition.jpg" width="300" height="100" loading="lazy"
alt="Music Composition image">
<div class="card course-card bg-white rounded-lg shadow-md p-4 text-center">
<div class="card-icon mb-2">
<img src="./assets/images/music/composition.jpg" class="w-full h-64 object-contain rounded-lg" loading="lazy" alt="Music Composition image">
</div>
<div>
<h3 class="title-lg">Music Composition</h3>
<h3 class="title-lg font-bold">Music Composition</h3>
<p class="title-sm">Duration: 6 weeks</p>
</div>
<a href="course-Music-composition.html" class="layer-link" aria-label="Learn more about Music Composition"></a>
</div>
</li>

<li>
<div class="card course-card">
<div class="card-icon">
<img src="./assets/images/music/sound.jpg" width="300" height="100" loading="lazy"
alt="Learn Sound Design overview image">
<div class="card course-card bg-white rounded-lg shadow-md p-4 text-center">
<div class="card-icon mb-2">
<img src="./assets/images/music/sound.jpg" class="w-full h-64 object-contain rounded-lg" loading="lazy" alt="Learn Sound Design overview image">
</div>
<div>
<h3 class="title-lg">Sound Design</h3>
<h3 class="title-lg font-bold">Sound Design</h3>
<p class="title-sm">Duration: 5 weeks</p>
</div>
<a href="course-Sound-Design.html" class="layer-link" aria-label="Learn more about Sound Design"></a>
</div>
</li>

<li>
<div class="card course-card">
<div class="card-icon">
<img src="./assets/images/music/Recording.jpg" width="300" height="100" loading="lazy"
alt="Recording Concepts course overview image">
<div class="card course-card bg-white rounded-lg shadow-md p-4 text-center">
<div class="card-icon mb-2">
<img src="./assets/images/music/Recording.jpg" class="w-full h-64 object-contain rounded-lg" loading="lazy" alt="Recording Concepts course overview image">
</div>
<div>
<h3 class="title-lg">Recording</h3>
<h3 class="title-lg font-bold">Recording</h3>
<p class="title-sm">Duration: 8 weeks</p>
</div>
<a href="course-Recording.html" class="layer-link" aria-label="Learn more about Recording Concepts"></a>
</div>
</li>

<li>
<div class="card course-card">
<div class="card-icon">
<img src="./assets/images/music/editing.jpg" width="300" height="100" loading="lazy"
alt="Editing course overview image">
<div class="card course-card bg-white rounded-lg shadow-md p-4 text-center">
<div class="card-icon mb-2">
<img src="./assets/images/music/editing.jpg" class="w-full h-64 object-contain rounded-lg" loading="lazy" alt="Editing course overview image">
</div>
<div>
<h3 class="title-lg">Editing</h3>
<h3 class="title-lg font-bold">Editing</h3>
<p class="title-sm">Duration: 10 weeks</p>
</div>
<a href="course-Editing.html" class="layer-link" aria-label="Learn more about Editing"></a>
</div>
</li>

</ul>

<a href="enroll.html" class="btn btn-primary">Enroll in a Course</a>


</div>
<a href="enroll.html" class="btn btn-primary mt-6 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Enroll in a Course</a>
</div>
</section>
</body>
</html>
</html>