Skip to content

Commit

Permalink
made titles of each section to be on centre
Browse files Browse the repository at this point in the history
  • Loading branch information
@durgeshshukla18
durgeshshukla18 committed Jan 5, 2025
1 parent 1b56d03 commit 0e2bbfb
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 121 deletions.
34 changes: 8 additions & 26 deletions dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,11 @@ li:not(:first-child) {
}

main {
/* display: flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center; */
text-align: center;
/* height: 100vh; */
width: 100%;
/* background-color: #72D34F; */
Expand All @@ -84,31 +84,9 @@ main {
color: #72D34F;
cursor: default;
animation: fadeIn 1s ease-in-out;
/* margin-top: 1rem; Add spacing from the top */
/* margin-bottom: 1rem; Add spacing below */
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* text-align: center; */
/* gap: 2rem;
padding: 1rem; */
}
#AppContainer h1{
text-align: center;
margin-right: 18%;
}
#BookContainer h1, #ArtContainer h1{
text-align: center;
margin-right: 10%;
}
#ConfContainer h1{
text-align: center;
margin-right: 28%;
}


.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
Expand Down Expand Up @@ -281,7 +259,11 @@ nav li a:hover{


h1 {
transform: translateX(60%);
/* transform: translateX(60%); */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

#scrollup{
Expand Down
178 changes: 83 additions & 95 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,107 +35,95 @@
<!-- Grid Links -->
<main>
<!-- <h1 class="heading">Enter your Space</h1> -->
<div id="AppContainer" class="container">
<h1 id="app" class="heading">Applications</h1>
<div class="grid">
<div data-tilt class="left">Nyxo</div>
<div data-tilt class="left">Sanvello</div>
<div data-tilt class="left">Wrabit</div>
<div data-tilt class="left">Three Good Things</div>
<div data-tilt class="right">Calm</div>
<div data-tilt class="right">HeadSpace</div>
<div data-tilt class="right">Wake Up Time</div>
<div data-tilt class="right">Anxio.us</div>
</div>
</divclass=>

<div id="BookContainer" class="container">
<h1 id="book" class="heading">Books</h1>
<div class="grid2">
<div data-tilt class="left">
<a
href="https://www.amazon.in/Technology-Mental-Health-Applications-Supervision/dp/0398091056"
><img
src="https://m.media-amazon.com/images/I/51wHgzyRe0L._SY466_.jpg"
id="bookimg"
/></a>
</div>
<div data-tilt class="left">
<a
href="https://www.amazon.in/Use-Technology-Mental-Health-Applications/dp/0398079544"
><img
src="https://m.media-amazon.com/images/I/51hBkqxS71L._SY466_.jpg"
id="bookimg"
/></a>
</div>
<div data-tilt class="right">
<a
href="https://www.amazon.in/Technology-Mental-Health-Foundations-Routledge/dp/0367773597"
><img
src="https://m.media-amazon.com/images/P/0367773597.01._SCLZZZZZZZ_SX500_.jpg"
id="bookimg"
/></a>
</div>
<div data-tilt class="right">
<a
href="https://arcus-www.amazon.in/Therapy-Tech-Digital-Transformation-Healthcare-ebook/dp/B09FYRYLXF"
><img
src="https://m.media-amazon.com/images/P/B09FYRYLXF.01._SCLZZZZZZZ_SX500_.jpg"
id="bookimg"
/></a>
</div>
</div>

<h1 id="app" class="heading">Applications</h1>
<div class="grid">
<div data-tilt class="left">Nyxo</div>
<div data-tilt class="left">Sanvello</div>
<div data-tilt class="left">Wrabit</div>
<div data-tilt class="left">Three Good Things</div>
<div data-tilt class="right">Calm</div>
<div data-tilt class="right">HeadSpace</div>
<div data-tilt class="right">Wake Up Time</div>
<div data-tilt class="right">Anxio.us</div>
</div>

<div id="OrgContainer" class="container">
<h1 id="org" class="heading">Organizations</h1>
<div class="grid">
<div data-tilt class="left">Black Minds Matter</div>
<div data-tilt class="left">Brown Sisters Speak</div>
<div data-tilt class="left">OSMI</div>
<div data-tilt class="left">SelfCare.tech</div>
<div data-tilt class="right">MHPrompt</div>
<div data-tilt class="right">If Me</div>
<div data-tilt class="right">7 Cups</div>
<div data-tilt class="right">Therapy Karo</div>
<h1 id="book" class="heading">Books</h1>
<div class="grid2">
<div data-tilt class="left">
<a
href="https://www.amazon.in/Technology-Mental-Health-Applications-Supervision/dp/0398091056"
><img
src="https://m.media-amazon.com/images/I/51wHgzyRe0L._SY466_.jpg"
id="bookimg"
/></a>
</div>
</div>

<div id="ArtContainer" class="container">
<h1 id="art" class="heading">Articles</h1>
<div class="grid">
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="left">
<a
href="https://www.amazon.in/Use-Technology-Mental-Health-Applications/dp/0398079544"
><img
src="https://m.media-amazon.com/images/I/51hBkqxS71L._SY466_.jpg"
id="bookimg"
/></a>
</div>
</div>

<div id="ConfContainer" class="container">
<h1 id="conf" class="heading">Talks and Conferences</h1>
<div class="grid">
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">
<a
href="https://www.amazon.in/Technology-Mental-Health-Foundations-Routledge/dp/0367773597"
><img
src="https://m.media-amazon.com/images/P/0367773597.01._SCLZZZZZZZ_SX500_.jpg"
id="bookimg"
/></a>
</div>
<div data-tilt class="right">
<a
href="https://arcus-www.amazon.in/Therapy-Tech-Digital-Transformation-Healthcare-ebook/dp/B09FYRYLXF"
><img
src="https://m.media-amazon.com/images/P/B09FYRYLXF.01._SCLZZZZZZZ_SX500_.jpg"
id="bookimg"
/></a>
</div>
</div>
<h1 id="org" class="heading">Organizations</h1>
<div class="grid">
<div data-tilt class="left">Black Minds Matter</div>
<div data-tilt class="left">Brown Sisters Speak</div>
<div data-tilt class="left">OSMI</div>
<div data-tilt class="left">SelfCare.tech</div>
<div data-tilt class="right">MHPrompt</div>
<div data-tilt class="right">If Me</div>
<div data-tilt class="right">7 Cups</div>
<div data-tilt class="right">Therapy Karo</div>
</div>
<h1 id="art" class="heading">Articles</h1>
<div class="grid">
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
</div>
<h1 id="conf" class="heading">Talks and Conferences</h1>
<div class="grid">
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="left">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
<div data-tilt class="right">Click Here</div>
</div>
</main>
<!-- Back to Top Button -->
<div class="back-to-top" onclick="scrollToTop()">
Expand Down

1 comment on commit 0e2bbfb

@durgeshshukla18
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially -->
Image

After making changes -->
Image
Image

All the titles are now on the centre.

Please sign in to comment.