Skip to content

Commit

Permalink
Added About Us Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@SohanRC
SohanRC committed Feb 19, 2024
1 parent 5240aab commit 03852ae
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 0 deletions.
34 changes: 34 additions & 0 deletions about.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.about-section {
min-height: 100vh;
width: 80%;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
gap: 2rem;
margin: 0 auto;
}

.heading-container {
font-size: 2.7rem;
background: #00F260;
background: -webkit-linear-gradient(to right, #0575E6, #00F260);
background: linear-gradient(to right, #0575E6, #00F260);
background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}

.para-section {
font-size: 1.9rem;
text-align: center;
color: white;
padding: 0 3rem;
margin-bottom: 2rem;
}
160 changes: 160 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Page</title>
<link rel="icon" href="./assets/images/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<script src="https://kit.fontawesome.com/b08b6de27e.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<link rel="stylesheet" href="about.css">
</head>

<body>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>

<!-- Navigation bar section start -->
<header>
<nav class="navbar">
<div class="image-logo">
<a href="./index.html">
<img src="./assets/images/favicon.png" height="36px" width="36px">
</a>
<a href="./index.html">
<span class="logo">CalcDiverse</span>
</a>
</div>

<ul class="nav-menu">
<li class="nav-item">
<a href="index.html" class="nav-link"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
</li>
<li class="nav-item">
<a href="./assets/contributors/contributor.html" class="nav-link"><i class="fa fa-users"
aria-hidden="true"></i> Contributors</a>
</li>
<li class="nav-item">
<a href="./assets/faq/faq.html" class="nav-link"><i class="fa fa-question-circle"
aria-hidden="true"></i> FAQ</a>
</li>
<li class="nav-item">
<a href="./assets/contact/contact.html" class="nav-link"><i class="fa fa-phone"
aria-hidden="true"></i> Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"> About</a>
</li>

</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>

<div class="about-section">
<div class="heading-container">
<h1>About Us</h1>
</div>
<div class="para-section">
<p>CalcDiverse is a customized collection of calculators for various aspects of mathematical calculations. Here in this project , we have several calculators which we require in our day to day life. Having these calculators at our fingertips make our life more easier and smooth. The calculators range from complex to simple calculators. Any one with a basic knowledge of web development can contribute in this project !</p>
</div>
<div class="heading-container">
<h1>Our Mission</h1>
</div>
<div class="para-section">
<p>Our mission is to simplify the work of others by providing different types of calculators to them so that they can perform any calculations varying from very simple calculations to complex ones in a quick matter of time ! Calcdiverse is always there to simplify the calculations and enhance the productivity !</p>
</div>
<div class="heading-container">
<h1>Join Us</h1>
</div>
<div class="para-section">
<p>If you are also interested in contributing in this wonderful project , then we would highly encourage you to join our CalcDiverse Community and continue with us in our exciting journey !</p>
</div>


</div>

<div id="progress">
<span id="progress-value">&#x1F815;</span>
</div>
<!-- Scroll to Top Button Ends Here -->

<!-- -----------------------------------Footer Code Starts ------------------------------------------- -->
<div class="footer-basic">
<footer>
<div class="social">
<a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
<a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
<a href="https://www.github.com/Rakesh9100" target="_blank"><i
class="fa-brands fa-square-github"></i></a>
<a href="https://twitter.com/rakeshroshan73" target="_blank"><i
class="fa-brands fa-square-x-twitter"></i></a>
<a href="https://www.facebook.com/rakesh6203/" target="_blank"><i
class="fa-brands fa-square-facebook"></i></a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#home">Home</a></li>
<li class="list-inline-item"><a href="#calculators">Calculators</a></li>
<li class="list-inline-item"><a href="./assets/contributors/contributor.html">Contributors</a></li>
<li class="list-inline-item"><a href="./assets/faq/faq.html">FAQ</a></li>
<li class="list-inline-item"><a href="./assets/contact/contact.html">Contact</a></li>
</ul>
<p class="copyright">Created By Rakesh Roshan ❤️ | ©
<script>
document.write(new Date().getFullYear());
</script>: All Rights Reserved
</p>
</footer>
</div>

<script src="./script.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var tl = gsap.timeline();

tl.from("header" , {
opacity:0,
duration:1,
delay:1.5,
})

tl.from(".image-logo" , {
opacity:0,
duration:0.3,
})

tl.from(".nav-item" , {
opacity:0,
stagger:0.2,
})

tl.from(".heading-container" , {
opacity:0,
scale : 1.25,
duration:0.5,
})
tl.from(".para-section" , {
opacity:0,
y:10,
duration:0.5,
})

tl.from("footer" , {
opacity:0,
})
</script>

</body>

</html>
3 changes: 3 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@
<li class="nav-item">
<a href="./assets/contact/contact.html" class="nav-link"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
</li>
<li class="nav-item">
<a href="about.html" class="nav-link">About</a>
</li>

</ul>
<div class="hamburger">
Expand Down

0 comments on commit 03852ae

Please sign in to comment.