Learn how to design and build websites using HTML & CSS, the fundamental technologies for web development. This guide covers everything from structuring web pages with HTML to styling them with CSS, enabling you to create visually appealing and responsive websites. Perfect for beginners and experienced developers alike, this resource will help you master the core skills needed to bring your web design ideas to life.
Objectives of the HTML & CSS websites
This project aims to:
- Equip you with the skills to create a fully functional and visually appealing online course website using HTML, CSS, and JavaScript.
- Build a responsive platform that enhances the learning experience with a user-friendly interface, interactive features, and seamless navigation.
- Develop a website that effectively organizes educational content into a structured course section.
- Integrate a dynamic blog area for educational articles and resources.
- Engage users with an intuitive newsletter subscription form to keep them updated on new courses and content.
- Utilize modern web technologies and libraries, such as Tiny Slider, to ensure optimal performance across various devices.
Project Functionality HTML & CSS websites
- Technology Use: HTML5, CSS3, Javascript
- External Resources: Remixicon, Tiny Slider, Google Fonts.
- Responsive: Yes
Source Code & Live Demo
To use this project source code effectively:
- Source Code: You can obtain the complete source code by copying the code provided below.
- Download: You can download the source code by clicking the Source Code button below to get a ZIP file of the project. Extract the contents to your desired directory.
- Open the Project: Open the project folder using a text editor or an integrated development environment (IDE) like Visual Studio Code.
- Modify and Experiment: Customize the content, styles, and functionalities to suit your preferences. Experiment with different design elements and JavaScript interactions to enhance your learning.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>e-tutor</title>
<!-- tiny slider css -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css"
/>
<!-- remix icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css"
/>
<!-- style sheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- header -->
<header>
<!-- ==================== NAVIGATION ==================== -->
<nav id="nav">
<div class="brand">
<a href="#">E-Tutor</a>
<i id="nav-controller" class="ri-menu-line"></i>
</div>
<div id="nav-list" class="nav-list">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">cource</a></li>
<li><a href="#">page</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
<a href="#" class="category">
<i class="ri-layout-grid-2-fill"></i>
<span>category</span>
</a>
</div>
</nav>
<!-- ==================== BANNER ==================== -->
<div class="banner">
<div class="banner-container">
<div class="banner-content">
<h1>
We Envision World’s Best <br />
Learning Experience.
</h1>
<p>
Turitor’s courses is for every one from different age groups
<br />
and with various level of skills.
</p>
<div class="banner-btn">
<a href="#" class="btn">
<i class="ri-add-circle-line"></i>
<span>view courses</span>
</a>
<a href="#" class="btn">
<i class="ri-group-2-fill"></i>
<span>start trial</span>
</a>
</div>
</div>
<div class="banner-image">
<img src="https://i.postimg.cc/QNBTCrKX/vactor15.png" alt="" />
</div>
</div>
</div>
</header>
<!-- main -->
<main>
<!-- ==================== ABOUT ==================== -->
<div class="about">
<div class="about-container section-size section-spacing">
<div class="header-content">
<h2>
we are turor. <br />
an online learning community
</h2>
<p>
At Tutor, we believe everyone should have the opportunity to
create progress through technology and develop the skills of
tomorrow. With assessments, learning paths and courses authored by
industry experts.
</p>
</div>
<div class="about-card">
<!-- one -->
<div class="card">
<i class="ri-layout-left-2-line"></i>
<h4>5025+</h4>
<span>courses</span>
</div>
<!-- two -->
<div class="card">
<i class="ri-award-fill"></i>
<h4>award</h4>
<span>winner</span>
</div>
<!-- three -->
<div class="card">
<i class="ri-book-open-fill"></i>
<h4>15320+</h4>
<span>students</span>
</div>
</div>
</div>
</div>
<!-- ==================== CATEGORY ==================== -->
<div class="category">
<div class="category-container section-size section-spacing">
<div class="category-header header-spacing">
<span class="header-span">#top category</span>
<h2>popular subjects</h2>
</div>
<div class="category-content">
<!-- one -->
<div class="card">
<div>
<i class="ri-computer-line"></i>
</div>
<div>
<h4>computer science</h4>
<span>1 course</span>
</div>
</div>
<!-- two -->
<div class="card">
<div>
<i class="ri-global-line"></i>
</div>
<div>
<h4>mern stack</h4>
<span>2 course</span>
</div>
</div>
<!-- three -->
<div class="card">
<div>
<i class="ri-microscope-fill"></i>
</div>
<div>
<h4>web development</h4>
<span>1 course</span>
</div>
</div>
<!-- four -->
<div class="card">
<div>
<i class="ri-pencil-ruler-2-fill"></i>
</div>
<div>
<h4>data science</h4>
<span>1 course</span>
</div>
</div>
<!-- five -->
<div class="card">
<div>
<i class="ri-home-8-line"></i>
</div>
<div>
<h4>engineering</h4>
<span>3 course</span>
</div>
</div>
<!-- six -->
<div class="card">
<div>
<i class="ri-paint-fill"></i>
</div>
<div>
<h4>machine learning</h4>
<span>1 course</span>
</div>
</div>
<!-- seven -->
<div class="card">
<div>
<i class="ri-calculator-line"></i>
</div>
<div>
<h4>finance</h4>
<span>1 course</span>
</div>
</div>
<!-- eight -->
<div class="card">
<div>
<i class="ri-bar-chart-grouped-fill"></i>
</div>
<div>
<h4>art & design</h4>
<span>4 course</span>
</div>
</div>
</div>
<a href="#" class="btn category-btn">
<i class="ri-add-circle-line"></i>
<span>browse all</span>
</a>
</div>
</div>
<!-- ==================== FEATURED COURSES ==================== -->
<div class="featured-course">
<div class="featured-course-container section-size section-spacing">
<div class="featured-header header-spacing">
<span class="header-span">#course</span>
<h2>featured course</h2>
</div>
<div class="featured-course-content">
<!-- one -->
<div class="featured-course-card">
<!-- cover -->
<div class="cover">
<div class="cover-body">
<span>english</span>
<h3>fundamental of engineering resource breakdown.</h3>
<div class="lesson">
<div>
<i class="ri-file-fill"></i>
<span>15 leasson</span>
</div>
<div>
<i class="ri-group-line"></i>
<span>70</span>
</div>
</div>
<div>
<i class="ri-shield-user-fill"></i>
<span>tutor</span>
</div>
</div>
<div class="cover-footer">
<div>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</div>
<div>
<span>$20.00</span>
</div>
</div>
</div>
<!-- content -->
<div class="main-content">
<div>
<img src="https://i.postimg.cc/PxV5hNQm/vactor4.png" alt="" />
</div>
<div>
<span>engineering</span>
<h3>fundamental of engineering resource breakdown</h3>
</div>
</div>
</div>
<!-- two -->
<div class="featured-course-card">
<!-- cover -->
<div class="cover">
<div class="cover-body">
<span>web development</span>
<h3>learn web development basic to advance</h3>
<div class="lesson">
<div>
<i class="ri-file-fill"></i>
<span>15 leasson</span>
</div>
<div>
<i class="ri-group-line"></i>
<span>70</span>
</div>
</div>
<div>
<i class="ri-shield-user-fill"></i>
<span>tutor</span>
</div>
</div>
<div class="cover-footer">
<div>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</div>
<div>
<span>$20.00</span>
</div>
</div>
</div>
<!-- content -->
<div class="main-content">
<div>
<img
src="https://i.postimg.cc/8sQDPvJr/vactor14.png"
alt=""
/>
</div>
<div>
<span>web development</span>
<h3>learn web development basic to advance</h3>
</div>
</div>
</div>
<!-- three -->
<div class="featured-course-card">
<!-- cover -->
<div class="cover">
<div class="cover-body">
<span>mechine learning</span>
<h3>learn mechine learning basic to advance.</h3>
<div class="lesson">
<div>
<i class="ri-file-fill"></i>
<span>15 leasson</span>
</div>
<div>
<i class="ri-group-line"></i>
<span>70</span>
</div>
</div>
<div>
<i class="ri-shield-user-fill"></i>
<span>tutor</span>
</div>
</div>
<div class="cover-footer">
<div>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</div>
<div>
<span>$20.00</span>
</div>
</div>
</div>
<!-- content -->
<div class="main-content">
<div>
<img src="https://i.postimg.cc/3NyJw7tz/vactor1.png" alt="" />
</div>
<div>
<span>mechine learning</span>
<h3>learn mechine learning basic to advance.</h3>
</div>
</div>
</div>
<!-- four -->
<div class="featured-course-card">
<!-- cover -->
<div class="cover">
<div class="cover-body">
<span>art & design</span>
<h3>fundamental of basic art & design</h3>
<div class="lesson">
<div>
<i class="ri-file-fill"></i>
<span>15 leasson</span>
</div>
<div>
<i class="ri-group-line"></i>
<span>70</span>
</div>
</div>
<div>
<i class="ri-shield-user-fill"></i>
<span>tutor</span>
</div>
</div>
<div class="cover-footer">
<div>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</div>
<div>
<span>$20.00</span>
</div>
</div>
</div>
<!-- content -->
<div class="main-content">
<div>
<img
src="https://i.postimg.cc/RFhvP4xq/vactor11.png"
alt=""
/>
</div>
<div>
<span>art & design</span>
<h3>fundamental of basic art & design</h3>
</div>
</div>
</div>
<!-- five -->
<div class="featured-course-card">
<!-- cover -->
<div class="cover">
<div class="cover-body">
<span>computer science & engineering</span>
<h3>fundamental of computer science & engineering</h3>
<div class="lesson">
<div>
<i class="ri-file-fill"></i>
<span>15 leasson</span>
</div>
<div>
<i class="ri-group-line"></i>
<span>70</span>
</div>
</div>
<div>
<i class="ri-shield-user-fill"></i>
<span>tutor</span>
</div>
</div>
<div class="cover-footer">
<div>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</div>
<div>
<span>$20.00</span>
</div>
</div>
</div>
<!-- content -->
<div class="main-content">
<div>
<img
src="https://i.postimg.cc/HxNdRRTz/vactor12.png"
alt=""
/>
</div>
<div>
<span>computer science</span>
<h3>fundamental of computer science & engineering</h3>
</div>
</div>
</div>
<!-- six -->
<div class="featured-course-card">
<!-- cover -->
<div class="cover">
<div class="cover-body">
<span>mern stack</span>
<h3>modern mern stack development course</h3>
<div class="lesson">
<div>
<i class="ri-file-fill"></i>
<span>15 leasson</span>
</div>
<div>
<i class="ri-group-line"></i>
<span>70</span>
</div>
</div>
<div>
<i class="ri-shield-user-fill"></i>
<span>tutor</span>
</div>
</div>
<div class="cover-footer">
<div>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
<i class="ri-star-s-fill"></i>
</div>
<div>
<span>$20.00</span>
</div>
</div>
</div>
<!-- content -->
<div class="main-content">
<div>
<img
src="https://i.postimg.cc/JhP1ctg9/vactor10.png"
alt=""
/>
</div>
<div>
<span>mern stack</span>
<h3>modern mern stack development course</h3>
</div>
</div>
</div>
</div>
<div>
<a href="#" class="btn featured-btn">
<i class="ri-add-circle-line"></i>
<span>browse all</span>
</a>
</div>
</div>
</div>
<!-- ==================== TESTIMONIAL ==================== -->
<div class="testimonial">
<div class="testimonial-container section-size section-spacing">
<div class="testimonial-header header-spacing">
<span class="header-span">#testimonial</span>
<h2>what our student say</h2>
<p>
Discover how to anticipate and adapt to the latest trends and
digital
</p>
</div>
<div class="testimonial-content review-slider">
<!-- one -->
<div class="review-card">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Inventore beatae libero, consectetur nihil accusamus qui.
</p>
<div>
<div>
<h5>tomas alvi</h5>
<span>undergraduate student</span>
</div>
<div>
<img
src="https://i.postimg.cc/WbJQmHqk/person4.png"
alt="testimonial img"
/>
</div>
</div>
</div>
<!-- two -->
<div class="review-card">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Inventore beatae libero, consectetur nihil accusamus qui.
</p>
<div>
<div>
<h5>rechard halton</h5>
<span>web developer</span>
</div>
<div>
<img
src="https://i.postimg.cc/FH5wTV0n/person3.png"
alt="testimonial img"
/>
</div>
</div>
</div>
<!-- three -->
<div class="review-card">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Inventore beatae libero, consectetur nihil accusamus qui.
</p>
<div>
<div>
<h5>tailor swift</h5>
<span>graphic designer</span>
</div>
<div>
<img
src="https://i.postimg.cc/G3fWyCtR/parson-img-2.png"
alt="testimonial img"
/>
</div>
</div>
</div>
<!-- four -->
<div class="review-card">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Inventore beatae libero, consectetur nihil accusamus qui.
</p>
<div>
<div>
<h5>haven tail</h5>
<span>seo expert</span>
</div>
<div>
<img
src="https://i.postimg.cc/Vv22Qjpv/person1.png"
alt="testimonial img"
/>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== BLOG ==================== -->
<div class="blog">
<div class="blog-container section-size section-spacing">
<div class="blog-header header-spacing">
<span class="header-span">#news</span>
<h2>news and events</h2>
<p>
Discover how to anticipate and adapt to the latest trends and
digital
</p>
</div>
<div class="blog-content">
<!-- card -->
<div class="blog-card">
<div>
<img src="https://i.postimg.cc/MGW6Q1s7/vactor9.png" alt="" />
</div>
<div class="card-body">
<div>
<span>javascript</span>
<span>25 july, 2024</span>
</div>
<h3>why javascript is number one language</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Praesentium, repellendus?
</p>
<a href="#" class="card-btn">
<i class="ri-add-circle-line"></i>
<span>read more</span>
</a>
</div>
</div>
<!-- card -->
<div class="blog-card">
<div>
<img src="https://i.postimg.cc/8sQDPvJr/vactor14.png" alt="" />
</div>
<div class="card-body">
<div>
<span>block chain</span>
<span>25 july, 2024</span>
</div>
<h3>how to be a block chain developer</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Praesentium, repellendus?
</p>
<a href="#" class="card-btn">
<i class="ri-add-circle-line"></i>
<span>read more</span>
</a>
</div>
</div>
<!-- card -->
<div class="blog-card">
<div>
<span>25 march, 2024</span>
<span>block chain</span>
<a href="#"
>Lorem, ipsum dolor sit amet consectetur adipisicing.</a
>
</div>
<div>
<span>25 march, 2024</span>
<span>engineering</span>
<a href="#"
>Lorem, ipsum dolor sit amet consectetur adipisicing.</a
>
</div>
<div>
<span>25 march, 2024</span>
<span>mechine learning</span>
<a href="#"
>Lorem, ipsum dolor sit amet consectetur adipisicing.</a
>
</div>
<div>
<span>25 march, 2024</span>
<span>mechine learning</span>
<a href="#"
>Lorem, ipsum dolor sit amet consectetur adipisicing.</a
>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ==================== FOOTER ==================== -->
<footer>
<!-- ==================== NESWLETTER ==================== -->
<div class="newsletter">
<div class="newsletter-container section-size">
<h2>join our students community</h2>
<div class="email-section">
<input type="email" name="" id="" placeholder="Enter your email" />
<input type="submit" value="subscribe" />
</div>
</div>
</div>
<div class="footer section-size">
<div class="footer-container section-spacing">
<div>
<h3>company</h3>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">resource center</a></li>
<li><a href="#">guides</a></li>
</ul>
</div>
<div>
<h3>category</h3>
<ul>
<li><a href="#">all course</a></li>
<li><a href="#">digital markating</a></li>
<li><a href="#">design & branding</a></li>
<li><a href="#">storytalling & voice over</a></li>
</ul>
</div>
<div>
<h3>support</h3>
<ul>
<li><a href="#">contact us</a></li>
<li><a href="#">system requirments</a></li>
<li><a href="#">register activation key</a></li>
<li><a href="#">site feedback</a></li>
</ul>
</div>
<div>
<div>
<h3>get in touch</h3>
<ul>
<li><a href="#">contact support</a></li>
<li><a href="#">help center</a></li>
</ul>
</div>
<div class="social-icons">
<a href="#"><i class="ri-facebook-fill"></i></a>
<a href="#"><i class="ri-twitter-x-line"></i></a>
<a href="#"><i class="ri-pinterest-line"></i></a>
<a href="#"><i class="ri-instagram-line"></i></a>
</div>
</div>
</div>
<div class="copyright">
<a href="#">E-Tutor</a>
<p>copyright © 2024 E-Tutor. all right reserved</p>
<ul>
<li><a href="#">about</a></li>
<li><a href="#">career</a></li>
<li><a href="#">resource center</a></li>
<li><a href="#">guides</a></li>
</ul>
</div>
</div>
</footer>
<!-- tiny slider js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- javascript file -->
<script src="script.js"></script>
</body>
</html>
/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap&family=Matemasie&display=swap");
:root {
--font-roboto: "Roboto", sans-serif;
--font-rubik: "Rubik", sans-serif;
--clr-success: #0eb582;
--clr-success-light: #b2eddb;
--clr-success-blur: #f0fdfa;
--clr-para: #555555;
--clr-header: #333;
--clr-gray: #777777;
--clr-light: #a5b7d9;
--clr-white: #fff;
}
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: var(--font-rubik);
color: var(--clr-para);
}
html {
scroll-behavior: smooth;
}
body {
position: relative;
min-height: 100%;
}
h1,
h2,
h3,
h4 {
text-transform: capitalize;
font-family: var(--font-roboto);
color: var(--clr-header);
}
h1 {
font-size: calc(1.5rem + 2vw);
color: var(--clr-white);
font-weight: 900;
}
h2 {
font-size: calc(1.2rem + 1vw);
font-weight: 800;
color: var(--clr-header);
}
h4 {
font-size: calc(1rem + 0.4vw);
}
/* ==================== CUSTOM CLASS ==================== */
.section-size {
width: max(270px, calc(100% - 3rem));
margin-inline: auto;
}
.section-spacing {
padding-block: 2rem 3rem;
}
.btn {
width: 12rem;
height: 3.3rem;
text-transform: capitalize;
color: var(--clr-white);
border-radius: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
user-select: none;
text-wrap: nowrap;
}
.header-spacing {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.header-span {
text-transform: capitalize;
font-size: 1.1rem;
font-weight: 500;
color: var(--clr-gray);
}
/* ==================== NAVIGATION VAR ==================== */
nav {
position: fixed;
background-color: var(--clr-success);
height: 5rem;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
transition: 500ms;
}
nav.active {
top: -80px;
}
.brand {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10%;
}
.brand a {
color: var(--clr-white);
font-family: "Matemasie", sans-serif;
font-size: calc(1.2rem + 1vw);
display: block;
}
.brand i {
color: var(--clr-white);
font-size: 1.8rem;
cursor: pointer;
display: none;
padding-right: 10%;
}
.nav-list {
display: flex;
gap: 2rem;
align-items: center;
padding-right: 10%;
}
.nav-list ul {
display: flex;
gap: 1rem;
align-items: center;
}
.nav-list ul li a {
padding: 1rem 0.4rem;
text-transform: capitalize;
font-size: 1rem;
color: var(--clr-white);
}
.nav-list .category {
display: flex;
gap: 0.5rem;
align-items: center;
background-color: var(--clr-white);
padding: 0.8rem 1rem;
border-radius: 0.2rem;
}
.nav-list .category i,
.nav-list .category span {
color: var(--clr-success);
font-size: 1rem;
text-transform: capitalize;
}
/* ==================== BANNER ==================== */
.banner {
position: relative;
max-width: 100vw;
height: 85vh;
background-color: var(--clr-success);
}
.banner-container {
width: 100%;
height: 100%;
padding-block-start: 5rem;
padding-inline: 10%;
display: grid;
gap: 2rem;
align-items: center;
justify-items: center;
}
.banner-content {
width: 100%;
display: flex;
flex-flow: column;
gap: 2rem;
}
.banner-content p {
color: var(--clr-white);
text-transform: capitalize;
font-size: 1rem;
line-height: 2rem;
}
.banner-btn {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.banner-btn a {
display: flex;
justify-content: center;
align-items: center;
}
.banner-btn a:first-child {
background-color: var(--clr-white);
font-weight: 500;
}
.banner-btn a:first-child * {
color: var(--clr-success);
}
.banner-btn a:last-child {
background-color: var(--clr-para);
}
.banner-btn a:last-child * {
color: var(--clr-white);
}
.banner-image {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.banner-image img {
width: 100%;
object-fit: cover;
}
/* ==================== ABOUT ==================== */
.about {
padding-top: 3.5rem;
}
.about-container {
display: grid;
gap: 2.5rem;
align-items: center;
}
.about-container .header-content {
display: flex;
gap: 1.5rem;
flex-flow: column;
}
.about-container .header-content h2,
.about-container .header-content p {
width: 80%;
}
.about-container .header-content p {
position: relative;
font-size: 1rem;
line-height: 1.8rem;
color: var(--clr-para);
}
.about-card {
display: grid;
column-gap: 1rem;
row-gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.about-card .card {
border: 2px solid var(--clr-success-light);
background-color: var(--clr-success-blur);
border-radius: 1rem;
padding: 1.5rem 1rem;
display: flex;
flex-flow: column;
gap: 1rem;
align-items: center;
justify-content: center;
}
.about-card .card i {
font-size: 4.5rem;
color: var(--clr-success);
}
.about-card .card h4 {
color: var(--clr-success);
}
.about-card .card span {
color: var(--clr-success);
opacity: 0.5;
font-weight: 500;
}
.about-card .card:hover {
border: none;
transition: 500ms;
}
/* ==================== CATEGORY ==================== */
.category-container {
display: flex;
flex-flow: column;
gap: 4rem;
}
.category-content {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.category-content .card {
border: 2px solid var(--clr-success-light);
padding: 2.5rem 1rem;
border-radius: 1rem;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
transition: 500ms ease-in-out;
}
.category-content .card > div:last-child {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.category-content .card > div:first-child {
width: 6rem;
height: 6rem;
background-color: var(--clr-success);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: 500ms ease-in-out;
}
.category-content .card > div i {
font-size: 4rem;
color: var(--clr-white);
}
.category-content .card:hover {
border-color: transparent;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.category-content .card:hover div:first-child {
transform: scale(0.9);
}
.category-btn {
border: 2px solid var(--clr-success);
background-color: var(--clr-success-blur);
margin: 0 auto;
transition: 200ms ease-in-out;
}
.category-btn i,
.category-btn span {
font-weight: 500;
text-transform: capitalize;
color: var(--clr-success);
}
.category-btn:hover {
background-color: var(--clr-success);
}
.category-btn:hover * {
color: var(--clr-white);
}
/* ==================== FEATURED COURSE ==================== */
.featured-course-container {
display: flex;
flex-flow: column;
gap: 4rem;
}
.featured-course-content {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.featured-course-card {
position: relative;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: 1rem;
padding: 2rem 2rem 3rem 2rem;
overflow: hidden;
}
.featured-course-card .main-content {
display: flex;
flex-flow: column;
gap: 3rem;
}
.featured-course-card .main-content > div img {
width: 100%;
height: 255px;
}
.featured-course-card .main-content > div:last-child {
display: flex;
flex-flow: column;
gap: 0.8rem;
}
.featured-course-card .main-content > div:last-child h3 {
font-size: calc(1rem + 0.35rem);
}
.featured-course-card .main-content > div:last-child span {
text-transform: capitalize;
color: var(--clr-success);
}
.featured-course-card .cover {
position: absolute;
background-color: var(--clr-white);
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: space-between;
transition: 600ms ease-in-out;
}
.featured-course-card:hover .cover {
top: 0;
}
.cover .cover-body {
background-color: var(--clr-success);
padding: 2rem 2rem 4rem 2rem;
display: flex;
flex-flow: column;
gap: 1.5rem;
clip-path: polygon(0 0, 100% 0%, 100% 82%, 0 100%);
}
.cover .cover-body * {
color: var(--clr-white);
text-transform: capitalize;
}
.cover .cover-body h3 {
letter-spacing: 1px;
line-height: 1.7rem;
}
.lesson {
display: flex;
justify-content: space-between;
}
.cover-body > div:last-child {
display: flex;
gap: 1rem;
align-items: center;
}
.cover-body > div:last-child i {
font-size: 4rem;
}
.cover-footer {
padding: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.cover-footer > div:first-child i {
color: var(--clr-success);
}
.cover-footer > div:last-child {
width: 4rem;
height: 4rem;
background-color: #333;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.cover-footer > div:last-child span {
color: var(--clr-white);
font-size: 0.85rem;
}
.featured-btn {
border: 2px solid var(--clr-success);
background-color: var(--clr-success-blur);
margin: 0 auto;
transition: 200ms ease-in-out;
}
.featured-btn i,
.featured-btn span {
font-weight: 500;
text-transform: capitalize;
color: var(--clr-success);
}
.featured-btn:hover {
background-color: var(--clr-success);
}
.featured-btn:hover * {
color: var(--clr-white);
}
/* ==================== TESTIMONIAL ==================== */
.testimonial-container {
display: flex;
flex-flow: column;
gap: 4rem;
}
.testimonial-header p {
text-align: center;
}
.testimonial-content {
padding-block: 2rem;
display: flex;
gap: 1.5rem;
}
.testimonial-content .review-card {
display: flex;
flex-flow: column;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
border-radius: 1rem;
padding: 2rem;
background-color: var(--clr-success-blur);
}
.testimonial-content .review-card p {
display: block;
margin-bottom: 1.5rem;
line-height: 1.5rem;
}
.testimonial-content .review-card > div {
display: flex;
justify-content: space-between;
align-items: center;
}
.testimonial-content .review-card h5 {
font-size: 1.1rem;
text-transform: capitalize;
margin-bottom: 0.5rem;
}
.testimonial-content .review-card > div > div img {
width: 5rem;
height: 5rem;
border-radius: 50%;
object-fit: cover;
}
.tns-nav,
button[data-action="stop"],
button[data-controls="prev"],
button[data-controls="next"] {
display: none;
}
.testimonial-content {
padding-block: 0.5rem;
}
/* ==================== BLOG ==================== */
.blog-container {
display: flex;
flex-flow: column;
gap: 4rem;
}
.blog-header p {
text-align: center;
}
.blog-content {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blog-card {
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
border-radius: 1rem;
display: flex;
flex-flow: column;
gap: 2rem;
transition: 500ms ease-in-out;
}
.blog-card > div:first-child img {
width: 100%;
height: 250px;
transition: 500ms ease-in-out;
}
.blog-card .card-body {
display: flex;
flex-flow: column;
gap: 1rem;
padding: 2rem;
}
.blog-card .card-body *:not(p) {
text-transform: capitalize;
}
.blog-card .card-body > div {
display: flex;
justify-content: space-between;
align-items: center;
}
.blog-card .card-body > div span:first-child {
color: var(--clr-success);
}
.blog-card .card-body > p {
line-height: 1.5rem;
}
.blog-card .card-body > a * {
color: var(--clr-success);
}
.blog-card:hover {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.blog-card:hover img {
transform: scale(1.05);
}
.blog-card:last-child {
box-shadow: none;
border-radius: 0;
padding: 2rem;
display: flex;
flex-direction: column;
}
.blog-card:last-child > div {
display: flex;
flex-flow: column;
gap: 0.5rem;
border-bottom: 1px dashed var(--clr-gray);
}
.blog-card:last-child > div * {
text-transform: capitalize;
}
.blog-card:last-child > div span:first-child {
color: var(--clr-success);
}
.blog-card:last-child > div span {
font-weight: 600;
}
.blog-card:last-child > div a {
display: block;
margin-bottom: 0.8rem;
}
/* ==================== NEWSLETTER ==================== */
.newsletter-container {
border-radius: 1rem;
height: 280px;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.newsletter-container h2 {
color: var(--clr-white);
}
.email-section {
height: 4rem;
width: 90%;
display: flex;
align-items: center;
border-radius: 2rem;
overflow: hidden;
}
.email-section input[type="email"] {
width: 75%;
height: 100%;
border: none;
padding-left: 2rem;
font-size: 1rem;
}
.email-section input[type="submit"] {
width: 25%;
height: 100%;
background-color: var(--clr-success);
border: none;
color: var(--clr-white);
font-size: 1rem;
text-transform: capitalize;
user-select: none;
text-wrap: nowrap;
cursor: pointer;
}
/* ==================== FOOTER ==================== */
footer {
background-color: #003566;
}
.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
border-bottom: 1px solid#0f4475;
}
.footer-container > div {
display: flex;
flex-flow: column;
gap: 1.5rem;
}
.footer-container > div h3 {
color: var(--clr-white);
font-size: calc(1rem + 0.3vw);
opacity: 0.9;
text-transform: uppercase;
}
.footer-container > div ul {
display: flex;
flex-flow: column;
gap: 0.8rem;
}
.footer-container > div ul li a {
color: var(--clr-light);
text-transform: capitalize;
font-size: 1rem;
transition: 200ms ease-in-out;
}
.footer-container > div ul li a:hover {
color: var(--clr-success);
}
.footer-container > div:last-child {
display: flex;
flex-flow: column;
justify-content: space-between;
}
.footer-container > div:last-child > div:first-child {
display: flex;
flex-flow: column;
gap: 1.5rem;
}
.footer-container > div .social-icons {
display: flex;
gap: 1rem;
align-items: center;
}
.footer-container > div .social-icons i {
color: var(--clr-light);
font-size: 1.1rem;
}
.copyright {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
row-gap: 1.5rem;
padding-block: 1.5rem;
}
.copyright > a {
color: var(--clr-white);
font-family: "Matemasie", sans-serif;
font-size: calc(1.2rem + 1vw);
display: block;
}
.copyright > p {
color: var(--clr-white);
text-transform: capitalize;
font-weight: 200;
}
.copyright > ul {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.copyright > ul li a {
color: var(--clr-white);
text-transform: capitalize;
transition: 200ms ease-in-out;
font-size: 0.85rem;
}
.copyright > ul li a:hover {
color: var(--clr-success);
}
/* ==================== MEDIA QUERY ==================== */
@media (max-width: 991px) {
.brand {
width: 100%;
height: 100%;
z-index: 10;
background-color: var(--clr-success);
}
.brand i {
display: block;
}
.nav-list {
position: absolute;
top: -1000px;
background-color: var(--clr-success-light);
width: 100%;
transition: top 800ms;
}
.nav-list.active {
top: 100%;
}
.nav-list ul {
width: 100%;
padding-block: 1rem;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.6rem;
}
.nav-list ul li {
width: 100%;
}
.nav-list ul li a {
display: block;
text-align: center;
color: var(--clr-para);
}
.nav-list .category {
display: none;
}
/* ===== banner ===== */
.banner-image {
display: none;
}
/* ===== about ===== */
.about-container .about-card {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
}
@media (min-width: 640px) {
.section-size {
width: 95%;
}
.section-spacing {
padding-block: 2.5rem 4rem;
}
.email-section {
width: 90%;
}
}
@media (min-width: 767px) {
.section-size {
width: 90%;
}
.section-spacing {
padding-block: 3rem 4rem;
}
.email-section {
width: 80%;
}
}
@media (min-width: 992px) {
.section-size {
width: 80%;
}
.section-spacing {
padding-block: 3rem 4rem;
}
/* ===== banner ===== */
.banner-container {
grid-template-columns: repeat(2, 1fr);
}
.banner-container h1 {
text-wrap: nowrap;
}
.email-section {
width: 70%;
}
}
@media (min-width: 1024px) {
.section-size {
width: 75%;
}
.section-spacing {
padding-block: 3rem 5.5rem;
}
/* ===== about ===== */
.about-container {
grid-template-columns: repeat(2, 1fr);
}
.email-section {
width: 55%;
}
}
@media (min-width: 1280px) {
.section-size {
width: 70%;
}
.email-section {
width: 50%;
}
}
@media (min-width: 1534px) {
}
// navigation open and close
document.getElementById("nav-controller").addEventListener("click", () => {
document.getElementById("nav-list").classList.toggle("active");
});
let lastScrollTop = 0;
const nav = document.getElementById("nav");
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
nav.classList.add("active");
} else {
nav.classList.remove("active");
}
lastScrollTop = scrollTop;
});
const slider = tns({
container: ".review-slider",
items: 1,
slideBy: "page",
autoplay: true,
autoplayHoverPause: true,
speed: 800,
responsive: {
900: {
items: 2,
},
1300: {
items: 3,
},
},
});
Code & Preview
See the Pen E-Tutor by Mamun Hossain (@Mamun-Hossain-the-bold) on CodePen.
If you encounter issues while creating your project, you can download the source code files for free by clicking the Source Code button. Additionally, you can view a live demo by clicking the Edit With Codepen button.
