Skip to content

Commit

Permalink
Converted About page to Tailwind CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiteshpahwa04
jiteshpahwa04 committed Jan 3, 2024
1 parent b165a0c commit eeaf252
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 254 deletions.
94 changes: 62 additions & 32 deletions Pages/About-Us/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="m-0 p-0 box-border font-poppins scroll-smooth">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtuo Learn</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media-queries.css">
<link rel="stylesheet" href="media-queries.css">
<link rel="icon" type="image/x-icon" href="../HomePage/assets/logo.png">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary_text_color: '#183b56',
secondary_text_color: '#577592',
accent_color: '#2294ed',
accent_color_dark: '#1d69a3',
padding_inline_section: '20px',
author_color: '#cacdd2',
}
},
fontFamily: {
'roboto': ['Roboto', 'sans-serif'],
'poppins': ['Poppins', 'sans-serif']
},
screens: {
'lg': '1030px',
// => @media (min-width: 1535px) { ... }

'md': '479px',
// => @media (min-width: 767px) { ... }

'sm': '100px'
}
}
}
</script>
</head>
<body>
<body class="text-primary_text_color overflow-x-hidden font-poppins">
<!-- nav bar -->
<nav>
<div class="container main-nav flex">
<a href="../../index.html" class="company-logo">
<img src="./assets/asset 41.png" alt="company logo">
<div class="container main-nav max-w-[1180px] overflow-hidden m-auto px-[20px] lg:px-[10px] justify-between mt-5 flex items-center">
<a class="no-underline inline-block company-logo" href="../../index.html">
<img src="./assets/asset 41.png" alt="company logo" class="md:w-[200px] sm:min-w-[200px]">
</a>
<div class="nav-links" id="nav-links">
<ul class="nav-menu">
<li><a href="../../index.html" class="hover-link">Home</a></li>
<li><a href="../About-Us/index.html" class="hover-link">About Us</a></li>
<li><a href="../Simulation/index.html" class="hover-link">Simulations</a></li>
<li><a href="../3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li>
<li><a href="../Quizes/index.html" class="hover-link">Quizes</a></li>
<li><a href="../Videos/index.html" class="hover-link">Videos</a></li>
<li><a href="../Doubt Engine/index.html" class="hover-link">Doubt Engine</a></li>
<div class="basis-[730px] nav-links" id="nav-links">
<ul class="nav-menu flex items-center list-none gap-10 justify-end">
<li><a href="../../index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Home</a></li>
<li><a href="../About-Us/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">About Us</a></li>
<li><a href="../Simulation/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Simulations</a></li>
<li><a href="../3D-Visualizations/index.html" class="text-primary_text_color transition duration-200 ease-out hover:text-accent_color">3D Visualisations</a></li>
<li><a href="../Quizes/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Quizes</a></li>
<li><a href="../Videos/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Videos</a></li>
<li><a href="../Doubt Engine/index.html" class="no-underline inline-block text-primary_text_color transition duration-200 ease-out hover:text-accent_color">Doubt Engine</a></li>
</ul>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<div class="hamburger cursor-pointer">
<span class="bar block w-[25px] h-[3px] transition-all duration-[0.3s] ease-in-out bg-[black] mx-auto my-[5px]"></span>
<span class="bar block w-[25px] h-[3px] transition-all duration-[0.3s] ease-in-out bg-[black] mx-auto my-[5px]"></span>
<span class="bar block w-[25px] h-[3px] transition-all duration-[0.3s] ease-in-out bg-[black] mx-auto my-[5px]"></span>
</div>
</div>
</nav>

<!-- header section -->
<header>
<div class="header">
<h1>About Us</h1>
<img src="assets/asset 42.svg" alt="Simulation">
<h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl ">About Us</h1>
<img src="assets/asset 42.svg" alt="Simulation" class="block md:w-[40vw] mx-auto my-0 w-[80vw]">
</div>
</header>

<!-- About Us -->
<div class="info-text">
<p>
<div class="w-[80vw] text-center mx-auto my-0 info-text">
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl ">
Welcome to Virtuo Learn, a leading online education platform that offers a range of cutting-edge tools and resources designed to enhance the learning experience of students of all ages and backgrounds.
</p>
<p>
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl ">
At Virtuo Learn, we believe that every student deserves access to quality education that is personalized, fun, interactive, and easy. That's why we have developed a comprehensive range of features that are tailored to the unique needs and learning styles of each student.
</p>
<p>
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl ">
Our platform offers a vast library of video lectures, interactive simulations, 3D visualizations, and quizzes that provide instant feedback to help students track their progress and identify their areas of strengths and weaknesses. Our doubt engine is designed to resolve any doubts that students may have, providing a seamless learning experience.
</p>
<p>
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl ">
We are passionate about technology and its ability to empower students to achieve their full potential. Our team of experienced educators and technologists work tirelessly to develop innovative tools and resources that enable students to learn and grow at their own pace.
</p>
<p>
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl ">
Thank you for choosing Virtuo Learn as your partner in learning. We look forward to helping you achieve your goals and unlock your full potential.</p>
</p>
</div>

<!-- footer -->
<!-- <a href="#" class="company-logo">
<!-- <a class="no-underline inline-block" href="#" class="company-logo">
<img src="./assets/asset 41.png" alt="company logo">
</a> -->
<footer>
<div class="footer-content">
<a href="#" class="company-logo footer-logo">
<footer class="h-auto w-screen bg-[#ebf2fa] mt-[5vh] pt-10 bottom-0 inset-x-0">
<div class="flex items-center justify-center flex-col text-center footer-content">
<a class="no-underline inline-block w-[200px] text-[2.1rem] font-medium capitalize leading-[3rem] company-logo footer-logo" href="#">
<img src="./assets/asset 41.png" alt="company logo">
</a>
<p>Developed By Jayesh Batra</p>
<p class="max-w-[500px] leading-7 text-[14px] text-author_color mx-auto my-2.5">Developed By Jayesh Batra</p>
</div>
</footer>

Expand Down
28 changes: 2 additions & 26 deletions Pages/About-Us/media-queries.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@
}

.hamburger.active .bar:nth-child(2){
opacity: 0;
opacity: 0;
}
.hamburger.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}

.nav-menu{
Expand Down Expand Up @@ -57,28 +57,4 @@
:root {
--padding-inline-section: 10px;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.5rem;
}

h3 {
font-size: 1.5rem;
}

p {
font-size: 1rem;
}

.center{
position: relative;
left: 0vw;
}
.header img{
width: 80vw;
}
}
Loading

0 comments on commit eeaf252

Please sign in to comment.