Skip to content

Commit

Permalink
Merge pull request #80 from jiteshpahwa04/css-to-tailwind
Browse files Browse the repository at this point in the history 
Migrated Doubt Engine to Tailwind CSS
  • Loading branch information
@JAYESHBATRA
JAYESHBATRA authored Jan 7, 2024
2 parents 2e7c64c + 10e7566 commit 45316ad
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 235 deletions.
99 changes: 65 additions & 34 deletions Pages/Doubt Engine/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,98 @@
<!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="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>
<link rel="icon" type="image/x-icon" href="../../assets/logo.png">
</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 href="../../index.html" class="no-underline inline-block company-logo">
<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">Quizzes</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>
</ul>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<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">Quizzes</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 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>Doubt Engine</h1>
<img src="assets/asset 42.svg" alt="Doubt Engine">
<h1 class="text-[2rem] font-bold text-center mt-[4vh] md:text-[2rem] lg:text-5xl ">Doubt Engine</h1>
<img src="assets/asset 42.svg" alt="Simulation" class="block md:w-[30vw] mx-auto mt-[7vh] w-[80vw]">
</div>
</header>

<!-- button section -->
<button class="button-10" role="button">Get Answers</button>

<div class="under-development-text">
<p>We are currently developing this page to provide you with the best experience possible. We apologize for any inconvenience this may cause, but rest assured that our team is working diligently to bring you the most up-to-date and informative content.</p>
<div class="text-center max-w-[80vw] mt-[15px] mx-auto my-0">
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl">We are currently developing this page to provide you with the best experience possible. We apologize for any inconvenience this may cause, but rest assured that our team is working diligently to bring you the most up-to-date and informative content.</p>

<p>While we work on completing this page, please feel free to explore the rest of our website. We offer a wide range of products and services that we believe will be of interest to you. From our user-friendly interface to our top-of-the-line customer service, we strive to provide you with the best possible experience.</p>
<p class="text-secondary_text_color leading-[1.8rem] font-roboto mt-[3vh] text-[1rem] md:text-xl">While we work on completing this page, please feel free to explore the rest of our website. We offer a wide range of products and services that we believe will be of interest to you. From our user-friendly interface to our top-of-the-line customer service, we strive to provide you with the best possible experience.</p>
</div>


<!-- footer -->
<footer>
<div class="footer-content">
<a href="#" class="company-logo footer-logo">
<img src="./assets/asset 41.png" alt="company logo">
</a>
<p>Developed By Jayesh Batra</p>
</div>
</footer>
<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 class="max-w-[500px] leading-7 text-[14px] text-author_color mx-auto my-2.5">Developed By Jayesh Batra</p>
</div>
</footer>

<script src="https://kit.fontawesome.com/c1fc3d2826.js" crossorigin="anonymous"></script>

Expand Down
202 changes: 1 addition & 201 deletions Pages/Doubt Engine/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;700&display=swap');

/* resets */



* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}

:root {
--primary-text-color: #183b56;
--secondary-text-color: #577592;
--accent-color: #2294ed;
--accent-color-dark: #1d69a3;
--padding-inline-section: 20px;
}

html{
scroll-behavior: smooth;
}

::-webkit-scrollbar{
width: 12px;
Expand All @@ -38,126 +16,6 @@ html{
background: linear-gradient(to top, #2294ed , #1d69a3);
}

body {
font-family: 'Poppins', sans-serif;
color: var(--primary-text-color);
overflow-x: hidden;
}

h1 {
font-size: 3rem;
}

h2 {
font-size: 2rem;
}

h3 {
font-size: 1.5rem;
}

p {
font-family: 'Roboto', sans-serif;
font-size: 1.25rem;
color: var(--secondary-text-color);
line-height: 1.8rem;
}

a {
text-decoration: none;
display: inline-block;
}

ul {
list-style: none;
}

/* utility classes */

.small-bold-text {
font-size: 1rem;
font-weight: 700;
}

.container {
max-width: 1180px;
margin-inline: auto;
padding-inline: var(--padding-inline-section);
overflow: hidden;
}

.flex {
display: flex;
align-items: center;
}

.hover-link {
color: var(--primary-text-color);
transition: 0.2s ease-out;
}

.hover-link:hover {
color: var(--accent-color);
}

.primary-button {
background-color: var(--accent-color);
border-radius: 6px;
font-weight: 700;
color: white !important;
padding: 12px 24px;
box-shadow: 0 0 2px var(--secondary-text-color);
transition: 0.2s ease-out;
text-align: center;
}

.primary-button:hover {
background-color: var(--accent-color-dark);
}

.secondary-button {
border: 0.5px solid var(--secondary-text-color);
border-radius: 6px;
font-weight: 700;
color: var(--primary-text-color) !important;
padding: 12px 24px;
transition: 0.2s ease-out;
}

.secondary-button:hover {
border-color: var(--accent-color);
color: var(--accent-color) !important;
}

/* nav bar */

.main-nav {
margin-top: 20px;
justify-content: space-between;
}

.company-logo img {
width: 200px;
}

.nav-links {
flex-basis: 730px;
}

.nav-menu{
display: flex;
align-items: center;
}

.nav-links ul {
justify-content: end;
gap: 40px;
}

.nav-toggle {
display: none;
}

.hamburger{
display: none;
cursor: pointer;
Expand All @@ -173,19 +31,6 @@ ul {
background-color: black;
}

/* header section */
.header h1{
text-align: center;
margin-top: 4vh;
}

.header img{
display: block;
margin: 0 auto;
width: 30vw;
margin-top: 7vh
}

/* Button Section */
.button-10 {
display: flex;
Expand Down Expand Up @@ -215,49 +60,4 @@ ul {
.button-10:focus {
box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
outline: 0;
}

/* footer */

footer{

bottom: 0;
left: 0;
right: 0;
background: #111;
height: auto;
width: 100vw;
padding-top: 40px;
background-color: #ebf2fa;
margin-top: 5vh;
}

.footer-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}

.footer-logo{
font-size: 2.1rem;
font-weight: 500;
text-transform: capitalize;
line-height: 3rem;
}

.footer-content p{
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
color: #cacdd2;
}

.under-development-text p{
text-align: center;
max-width: 80vw;
margin: 0 auto;
margin-top: 15px;
}
}

0 comments on commit 45316ad

Please sign in to comment.