fafadiatech
/
LearnExponent
16
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
LearnExponent/pages/coursedetail.html

344 lines
12 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Website</title>
<link rel="stylesheet" type="text/css" href="../assets/coursedetail.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Courgette&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="nonymous">
</head>
<!--Nav bar-->
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light p-sm-3">
<div class="container-fluid">
<a class="navbar-brand m-0" href="#"><img src="../images/Group 1261153379.png" class="logoImg" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarContent">
<ul class="navbar-nav mr-auto gap-2 navList">
<li class="nav-item">
<a class="nav-link navLink" href="../pages/homepage.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navLink" href="../pages/coursepage.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link navLink" href="../pages/event.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link navLink" href="../pages/mentor.html">Mentors</a>
</li>
<li class="nav-item">
<a class="nav-link navLink" href="../pages/About us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link navLink" href="../pages/resource.html">Resources </a>
</li>
<li class="nav-item">
<a class="nav-link navLink" href="../pages/Blog.html">Blog </a>
</li>
<li class="nav-item">
<a href="" class="nav-link"><span class="phone-number">+1 123-456-7890</span></a>
</li>
<button type="button" class="btn btn-primary contactBtn">contact us</button>
</ul>
</div>
</div>
</nav>
<div class="mentorHeading">
<h1>Course</h1>
</div>
<div class="search-bar">
<input type="text" class="search-input" placeholder="Search here">
<img src="../images/Vector.png" alt="Search" class="search-icon">
</div>
<!-- Course Detail Section -->
<section class="course-section">
<div class="container">
<div class="left-content">
<a href="../pages/coursepage.html" class="course-link">
<p class="small-text">Course / Full Stack</p>
</a>
<h1 class="heading">4 month course - Front End Developer - Basic to advanced</h1>
<p class="description">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div class="enroll-container">
<button class="enroll-button">Enroll Now</button>
<div class="rating">
<span class="stars">★★★★</span>
<span class="rating-text">12,345 ratings</span>
</div>
</div>
</div>
<!-- Right Content -->
<div class="right-content">
<div class="image-container">
<img src="../images/detail.png" alt="Course Preview" class="preview-image">
<div class="icon-overlay">
<img src="../images/playbutton.png" alt="Play Icon" class="icon">
<p class="preview-text">Preview the Course</p>
</div>
</div>
<div class="details">
<div class="detail">
<img src="../images/duration.png" alt="Duration Icon" class="icon">
<p class="detail-text"><span>Duration:</span> <span class="highlight">25 minutes</span></p>
</div>
<div class="detail">
<img src="../images/language.png" alt="Language Icon" class="icon">
<p class="detail-text"><span>Language:</span> <span class="highlight">English</span></p>
</div>
</div>
</div>
</div>
</section>
<!-- Section: What We Will Cover -->
<section class="what-we-cover">
<hr class="divider" />
<h2 class="section-heading">What We Will Cover</h2>
<div class="points-container">
<div class="column">
<div class="point">
<span class="icon">✔️</span>
<p>Learn the basics of HTML and CSS in a simple way.</p>
</div>
<div class="point">
<span class="icon">✔️</span>
<p>Understand responsive web design techniques.</p>
</div>
<div class="point">
<span class="icon">✔️</span>
<p>Explore JavaScript fundamentals and DOM manipulation.</p>
</div>
</div>
<div class="column">
<div class="point">
<span class="icon">✔️</span>
<p>Grasp how to fetch data from APIs seamlessly.</p>
</div>
<div class="point">
<span class="icon">✔️</span>
<p>Get an introduction to frameworks like React.</p>
</div>
<div class="point">
<span class="icon">✔️</span>
<p>Learn to build and deploy full web applications.</p>
</div>
</div>
</div>
</section>
<section class="details-section">
<h2 class="details-heading">Details</h2>
<div class="details-content">
<p2>
Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.Lorem ipsum dolor sit amet. Nam provident provident sit autem perferendis et error.
<a href="#" class="read-more-link">Read More</a>
</p2>
</div>
</section>
<section class="course-content-section">
<h2 class="course-content-heading">Course Content</h2>
<div class="lesson-card">
<div class="lesson-header">
<span class="lesson-title">Lesson Title 1</span>
<img src="../images/title1.png" alt="Icon" class="lesson-icon" />
</div>
</div>
<div class="lesson-card2">
<div class="lesson-header2">
<span class="lesson-title2">Lesson Title 2</span>
<img src="../images/title2.png" alt="Icon" class="lesson-icon" />
</div>
<p class="lesson-description">
This is the detailed description for Lesson Title 2. It explains the topics in more depth and provides valuable information.
</p>
<div class="lesson-points-horizontal">
<div class="lesson-point">
<span class="icon">✔️</span>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</span>
</div>
<div class="lesson-point">
<span class="icon">✔️</span>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. .</span>
</div>
<div class="lesson-point">
<span class="icon">✔️</span>
<span>TLorem Ipsum is simply dummy text of the printing and typesetting industry. .</span>
</div>
</div>
</div>
<div class="lesson-card">
<div class="lesson-header">
<span class="lesson-title">Lesson Title 1</span>
<img src="../images/title1.png" alt="Icon" class="lesson-icon" />
</div>
</div>
<div class="lesson-card">
<div class="lesson-header">
<span class="lesson-title">Lesson Title 1</span>
<img src="../images/title1.png" alt="Icon" class="lesson-icon" />
</div>
</div>
</section>
<!-- Writer Review Section -->
<section class="writer-review-container">
<div class="writer-review-header">
<h2 class="writer-review-title">Writer Review</h2>
<a href="#" class="view-other-reviews">View Other Reviews</a>
</div>
<div class="review-input-section">
<input type="text" class="review-input-box" placeholder="Type something..." />
<div class="star-rating-box">
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
<i class="fas fa-star star"></i>
</div>
</div>
</section>
<div class="footerSection">
<div class="footerLogoSection">
<img src="../images/footer.logo.png" alt="footerLogo" class="footerLogoImg">
<ul class="socialSection">
<li><a href="#" target="_blank"><img src="../images/fb.icon.png" alt="Social Icon 1"></a></li>
<li><a href="#" target="_blank"><img src="../images/twiter.icon.png" alt="Social Icon 2"></a></li>
<li><a href="#" target="_blank"><img src="../images/insta.icon.png" alt="Social Icon 3"></a></li>
<li><a href="#" target="_blank"><img src="../images/linkdin.icon.png" alt="Social Icon 3"></a></li>
</ul>
<p>&copy; 2023 learnexponent.co</p>
<p>learn exponent is a registered
trademark of learn exponent.co</p>
</div>
<div class="courseSection">
<h3 class="fontSemiBold">Courses</h3>
<ul>
<li>
<a href="">Classroom courses</a>
</li>
<li>
<a href="">Virtual classroom courses</a>
</li>
<li>
<a href="">E-learning courses</a>
</li>
<li>
<a href="">Video Courses</a>
</li>
<li>
<a href="">Offline Courses</a>
</li>
</ul>
</div>
<div class="quickLinkSection">
<h3 class="fontSemiBold">Quick Links</h3>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Courses</a>
</li>
<li>
<a href="">Events</a>
</li>
<li>
<a href="">About Us</a>
</li>
<li>
<a href="">Resources</a>
</li>
<li>
<a href="">Blog</a>
</li>
</ul>
</div>
</div>
<div class="mobileFooterSection">
<div class="footerLogoSection">
<img src="../images/mobile.footer.logo.png" alt="footerLogo" class="footerLogoImg">
</div>
<div class="linksSection">
<div class="courseSection">
<h3 class="fontSemiBold">Courses</h3>
<ul>
<li>
<a href="">Classroom courses</a>
</li>
<li>
<a href="">Virtual classroom courses</a>
</li>
<li>
<a href="">E-learning courses</a>
</li>
<li>
<a href="">Video Courses</a>
</li>
<li>
<a href="">Offline Courses</a>
</li>
</ul>
</div>
<div class="quickLinkSection">
<h3 class="fontSemiBold">Quick Links</h3>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Courses</a>
</li>
<li>
<a href="">Events</a>
</li>
<li>
<a href="">About Us</a>
</li>
<li>
<a href="">Resources</a>
</li>
<li>
<a href="">Blog</a>
</li>
</ul>
</div>
</div>
<div class="footerContent">
<ul class="socialSection">
<li><a href="#" target="_blank"><img src="../images/fb.icon.png" alt="Social Icon 1"></a></li>
<li><a href="#" target="_blank"><img src="../images/twiter.icon.png" alt="Social Icon 2"></a></li>
<li><a href="#" target="_blank"><img src="../images/insta.icon.png" alt="Social Icon 3"></a></li>
<li><a href="#" target="_blank"><img src="../images/linkdin.icon.png" alt="Social Icon 3"></a></li>
</ul>
<p>&copy; 2023 learnexponent.co</p>
<p>learn exponent is a registered
trademark of learn exponent.co</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink