Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New blogs July #981

Merged
merged 4 commits into from
Jul 3, 2023
Merged

New blogs July #981

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e118d3
Updated Footer and made it responsive
ankitjt Jul 3, 2023
3519a85
removed white bg from logo
ankitjt Jul 3, 2023
cb155a8
Updated Blog UI and added new blogs
ankitjt Jul 3, 2023
0b83cec
Update script.js
ankitjt Jul 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
511 changes: 233 additions & 278 deletions Blogs/Blog.html
View file
Open in desktop

Large diffs are not rendered by default.

485 changes: 294 additions & 191 deletions Blogs/Strength.html
View file
Open in desktop

Large diffs are not rendered by default.

761 changes: 384 additions & 377 deletions Blogs/Words.html
View file
Open in desktop

Large diffs are not rendered by default.

1,511 changes: 758 additions & 753 deletions Blogs/cardinalVices.html
View file
Open in desktop

Large diffs are not rendered by default.

822 changes: 454 additions & 368 deletions Blogs/depression.html
View file
Open in desktop

Large diffs are not rendered by default.

363 changes: 363 additions & 0 deletions Blogs/karma.html
View file
Open in desktop

Large diffs are not rendered by default.

451 changes: 451 additions & 0 deletions Blogs/life.html
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added Images/logoBgRemoved.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
174 changes: 124 additions & 50 deletions commonScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ let customFooter = document.querySelector( ".customFooter" ),
let navbarContent = `
<div class="leftSection">
<a class="flex items-center" href="../index.html">
<img src="../Images/New_Logo_2.png" alt="Moksh Logo" class="lg:w-14 lg:h-14 w-12 h-12 hover:animate-spin " />
<img src="../Images/logoBgRemoved.png" alt="Moksh Logo" class="w-12 h-12 hover:animate-spin " />
<span
class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 hover:text-indigo-600">Moksh</span>
</a>
Expand Down Expand Up @@ -203,60 +203,129 @@ let customFooter = document.querySelector( ".customFooter" ),
navbar.innerHTML = navbarContent

let footerContent = `
<div class="footerWrapper w-full p-12 lg:px-0 lg:w-2/3 ">
<!-- Row - 1 -->
<div class="row-1 flex w-full items-center justify-center sm:justify-between flex-col">
<div class="flex flex-col w-full sm:flex-row items-center justify-between">
<img src="../Images/New_Logo_2.png" alt="Moksh Logo" class="w-32 h-32 my-2" />

<div class="flex flex-col px-4 items-center sm:px-0 w-full sm:w-2/3">
<span
class="text-center italic font-bold text-indigo-600 mb-1 sm:border-double sm:border-b-4 sm:border-indigo-600">
A Spiritual Productivity Tool for Mental Wellness
</span>

<div class="mt-1 w-full font-semibold flex items-center justify-center flex-col">
<span class="sm:text-xs text-md text-justify">
Moksh is a spiritual productivity tool designed for
individuals who want to unlock their potential and
achieve true balance in life.
</span>
<!-- NewsLetter -->
<div class="mt-8 newsLetter text-slate-300 flex text-xs flex-col justify-center lg:flex-row lg:justify-between items-center">

</div>
<div class="mb-1 text-center lg:text-left">
<p class="capitalize text-[11px] font-semibold tracking-wider">Sign Up for our newsletter:</p>
<p>Get weekly updates regarding Moksh.</p>
</div>

<!-- Copyright -->
<div
class="row-3 copyright flex items-center flex-col text-center font-semibold text-md sm:text-xs mt-4">
<!-- Footer Socials -->
<div
class="socials my-4 row-2 w-full flex justify-between capitalize font-semibold text-md sm:text-[11px]">
<a href="https://twitter.com/ExperienceMoksh"
class="ease-in-out duration-300 hover:text-indigo-600"><svg xmlns="http://www.w3.org/2000/svg"
data-name="Layer 1" viewBox="0 0 24 24" id="twitter" width="40px" fill=" rgb(6, 6, 104)">
<path
d="M22,5.8a8.49,8.49,0,0,1-2.36.64,4.13,4.13,0,0,0,1.81-2.27,8.21,8.21,0,0,1-2.61,1,4.1,4.1,0,0,0-7,3.74A11.64,11.64,0,0,1,3.39,4.62a4.16,4.16,0,0,0-.55,2.07A4.09,4.09,0,0,0,4.66,10.1,4.05,4.05,0,0,1,2.8,9.59v.05a4.1,4.1,0,0,0,3.3,4A3.93,3.93,0,0,1,5,13.81a4.9,4.9,0,0,1-.77-.07,4.11,4.11,0,0,0,3.83,2.84A8.22,8.22,0,0,1,3,18.34a7.93,7.93,0,0,1-1-.06,11.57,11.57,0,0,0,6.29,1.85A11.59,11.59,0,0,0,20,8.45c0-.17,0-.35,0-.53A8.43,8.43,0,0,0,22,5.8Z">
</path>
</svg></a>
<a href="https://github.com/akshitagupta15june/Moksh"
class="ease-in-out duration-300 hover:text-indigo-600"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16" id="github" width="40px" fill="rgb(51, 51, 51)">
<path
d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z">
</path>
</svg></a>
</div>
<div class="copyright">
<p>Made with ❤️ by Akshita during XPRESSION'23</p>
<p class="text-rose-600 text-xs font-bold">
&copy; 2023 Moksh. All rights reserved.
</p>

</div>
</div>
</div>
<div class="newsLetter flex group ease-in-out duration-300">
<input type="email" name="email" id="" placeholder="your email"
class="bg-transparent border border-emerald-600 py-2 rounded-l-md placeholder:text-slate-300 placeholder:text-xs w-full group-hover:border-indigo-600 ease-in-out duration-300 text-sm outline-0">
<button
class="bg-emerald-600 text-slate-300 rounded-r-md px-4 py-2 text-white uppercase subscribeBtn tracking-wider ease-in-out duration-300 group-hover:bg-indigo-600">Subscribe</button>
</div>

</div>

<!-- Site Nav -->
<div class="mt-8 siteNav flex flex-col lg:flex-row ">

<div class="flex flex-col lg:flex-row items-center text-center lg:text-left lg:w-1/2">
<img src="../Images/logoBgRemoved.png" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
<div class="py-3 font-medium text-white w-2/3 flex flex-col text-xs">
<h1 class="text-3xl projectName">Moksh</h1>
<span>
It is a spiritual productivity tool designed for
individuals who want to unlock their potential and
achieve true balance in life. Join us on our journey to empower the world with spiritual knowledge.
</span>

<div class="social flex justify-center lg:justify-start items-center gap-x-4 mt-4">
<a href="https://github.com/akshitagupta15june/Moksh">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-github text-slate-300 ease-in-out duration-300 hover:text-indigo-600"
viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
<a href="https://twitter.com/ExperienceMoksh">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="bi bi-twitter text-slate-300 ease-in-out duration-300 hover:text-indigo-600"
viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
</a>
</div>

</div>


</div>

<div class="site--links capitalize text-xs text-slate-300 grid sm:grid-cols-1 lg:grid-cols-2 mt-4 gap-y-4 lg:w-1/2">

<a href="../index.html"
class="w-full text-center lg:text-left">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Home</span>
</a>

<a href="../Blogs/Blog.html"
class="w-full text-center lg:text-right">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Power
of Knowledge blogs</span>
</a>

<a href=" ../AR_Meditate/meditation.html"
class="w-full text-center lg:text-left">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Augmented
Reality
Meditation</span>
</a>

<a href=" ../Iskcon/event.html"
class="w-full text-center lg:text-right">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Iskon
Events</span>
</a>

<a href=" ../Divine_page/story.html"
class="w-full text-center lg:text-left">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Divine
Activities for all
Generation
</span>
</a>

<a href=" ../Pomodro_page/reward.html"
class="w-full text-center lg:text-right">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Pomodoro
Spiritual
Break</span>
</a>

<a href=" ../shlok_page/motivation.html"
class="w-full text-center lg:text-left">
<span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Read
a Shlok</span> </a>

<a href=" ../Rejuvenate_page/rejuvenate.html"
class="w-full text-center lg:text-right"><span
class="relative font-semibold ease-in-out duration-300 pb-1 relative after:content-[''] after:bottom-0 after:h-[2px] after:w-0 after:left-0 after:absolute after:bg-slate-300 hover:after:w-full after:ease-in-out after:duration-300">Rejuvenate</span></a>

</div>

</div>

<!-- Copyright -->
<div class="mt-8 copyRight flex items-center justify-center text-xs text-slate-300 flex-col">
<p class='text-center'>Made with ❤️ by Akshita during XPRESSION'23</p>
<p class="text-indigo-900 font-bold">
&copy; 2023 Moksh. All rights reserved.
</p>
</div>

`
customFooter.innerHTML = footerContent

Expand All @@ -267,6 +336,11 @@ contentWrapper.onscroll = () =>
contentWrapper.scrollTop > 5 ? navbar.classList.add( 'bg-slate-900', 'shadow-2xl' ) : navbar.classList.remove( 'bg-slate-900', 'shadow-2xl' )
}

let subscribeBtn = document.querySelector( '.subscribeBtn' )
subscribeBtn.onclick = () =>
{
alert( 'It will be functional soon!!' )
}

let indexOpenDropDown = document.querySelector( '.indexOpenDropDown' )
indexOpenDropDown.onclick = () =>
Expand Down
35 changes: 19 additions & 16 deletions commonStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,44 @@
* {
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
outline: none;
}

.projectName {
font-family: 'Arizonia', cursive;
}

/* Footer */
footer{
footer {
background-color: rgb(243 244 246 / 1);
color: black;

padding: 0;
}

.footer-items{
.footer-items {
color: black;
text-decoration: none;
font-size: 18px;
font-weight: 900;
}


.footer-list{
.footer-list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 30px;
}

.footer-list ul, .footer-socials ul {
.footer-list ul,
.footer-socials ul {
margin: 0;
padding: 0;
}

.copyright{
.copyright {
color: black;
font-size: small;
text-align: center;
Expand All @@ -48,20 +50,20 @@ footer{
font-size: 13px;
}

.footer-items:hover::after{
.footer-items:hover::after {
transform: scale(1.1);
transition: 400ms;
width: 100%;
color: blue;
}

.footer-items::after{
content:'';
display:block;
.footer-items::after {
content: '';
display: block;
height: 4px;
width:0;
width: 0;
background: blue;
transition:all .5
transition: all .5
}

.footer-divide {
Expand All @@ -75,13 +77,13 @@ footer{
font-size: 16px;
}

.footer-divide-text{
.footer-divide-text {
text-align: left;
padding-top: 30px;
font-size: 16px !important;
}

.footer-socials{
.footer-socials {
padding-top: 10px;
padding-bottom: 10px;
display: flex;
Expand All @@ -90,14 +92,15 @@ footer{
align-items: center;
}

.made-by{
.made-by {
text-align: center;
font-weight: 500;
margin-bottom: 5px;
margin-top: 5px;
font-size: 16px;
}
.OmSymbol{

.OmSymbol {
position: relative;
height: 18vh;
width: 11vw;
Expand All @@ -106,7 +109,7 @@ footer{
}

@media screen and (min-width: 280px) and (max-width: 912px) {
.OmSymbol{
.OmSymbol {
position: relative;
height: 100px;
width: 120px;
Expand Down
Loading