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

Improve UI Section in Blogs #1447

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve UI Section in Blogs #1447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
110 changes: 49 additions & 61 deletions blogs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,94 +20,82 @@
box-sizing: border-box;

} */
*{
/* Add your custom styles below */

* {
margin: 0;
padding: 0;
box-sizing: border-box;

}

.grid-container {
display: grid;
padding: 2.5rem;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-gap: 1rem;
/* place-content: center; */
/* align-items: center;
justify-content: center; */
}
.card-img-top{

.card {
height: auto;
padding: 2%;
margin: 3%;
border: none;
background-color: #9D5C0D;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.card-img-top {
width: 100%;
height: 100%;
object-fit: fill;
}
.card-body > h5{
font-weight: bold;
color: rgb(8, 8, 8);

}
.card{
height: 510px;
padding:2%;
margin:3%;
border:none;
background-color: #9D5C0D ;
}
@media screen and (max-width: 476px){
.card{
max-width: 75vw;
}
}
@media screen and (max-width: 380px){
.card{
max-width: 70vw;
}
}
.card-body{
align-items: center;

}
.card:hover{
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.24),0 17px 50px 0 rgba(0, 0, 0, 0.19);

.card-body > h5 {
font-weight: bold;
color: rgb(8, 8, 8);
}
.card-img-top:hover {
box-shadow: 0 0.25em 0.25em -0.1em #604717;
box-shadow: 0 0.30em 0.30em -0.1em #f7c603;
border-color: #e0ef08 ;
transition: 0.4s;
color: #d8eb08 ;

.card-body {
align-items: center;
}

.card:hover {
scale: 1.09;
border-color: #FFB84C;
transition: 0.4s;
color: #fff ;
text-decoration:wavy;

box-shadow: 0 12px 20px rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: scale(1.09);
border-color: #FFB84C;
transition: 0.4s;
color: #fff;
text-decoration: wavy;
}

.card h5:hover {
color: black ;
}
.card a{
background-color: #B70404 ;
color:white;
padding:2%;
border:1px black;
cursor: pointer;
text-decoration: none;

}
.card a:hover{
background-color:inherit ;
color: black;
}

.card a {
background-color: #B70404;
color: white;
padding: 2%;
border: 1px solid black;
cursor: pointer;
text-decoration: none;
}

.card a:hover {
background-color: inherit;
color: #FFA931;
border:3px solid;
border: 3px solid;
}

.footer-wrapper {
text-align: center;
padding: 1rem;
/* background-color: #995734 ; */
background-color: #995734;
color: white;
}

#topBtn {
position: fixed;
bottom: 20px;
Expand Down
233 changes: 115 additions & 118 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -640,132 +640,129 @@ <h4>help others</h4>
<br><br>

<div class="blogs" data-aos="fade-up">
<h1><b class='latest-blogs'> Latest Blogs</b></h1>
<p class="latest-blogs-p">Regular records of your thoughts, opinions or experiences that you put on the <br>internet
for other people to
read </p>
<h1><b class='latest-blogs'>Latest Blogs</b></h1>
<p class="latest-blogs-p">Regular records of your thoughts, opinions, or experiences that you put on the internet
for other people to read</p>
<div class="blog-content">
<div class="blog-carousel">
<div class="inner">
<img src="./Blog/img1.webp">
<img src="./Blog/img2.webp">
<img src="./Blog/img3.webp">
<img src="./Blog/img4.webp">
<img src="./Blog/img5.webp">
<img src="./Blog/img6.webp">
<img src="./Blog/img7.webp">
<img src="./Blog/img11.webp">
<div class="blog-carousel">
<div class="inner">
<img src="./Blog/img1.webp">
<img src="./Blog/img2.webp">
<img src="./Blog/img3.webp">
<img src="./Blog/img4.webp">
<img src="./Blog/img5.webp">
<img src="./Blog/img6.webp">
<img src="./Blog/img7.webp">
<img src="./Blog/img11.webp">
</div>
</div>
</div>
<div class="desc-carousel">
<div class="inner">
<div class="desc">
<h1>Books are the most Trusted Friends you'll ever have.</h1>
<p> And books can be our best friends for life, for all the right reasons. Good books enrich our mind and
broaden our perspective towards life.</p>
</div>
<div class="desc">
<h1>Distance-Learning programmes on BOOM</h1>
<p>Blog about pursuing an MBA, Masters Degree, Online MBA, DBA, Bachelors or PGCE via Online Learning or
Distance learning.</p>
</div>
<div class="desc">
<h1>Our Future is our YOUTH</h1>
<p>Higher education is looking beyond the dwindling market of 18-year-olds to lifelong, professional and
continuing ed to sustain enrollments.</p>
</div>
<div class="desc">
<h1>The Digital Era of Education</h1>
<p>Current trends indicate that digital formats will be an integral part of educational institutions in the
post-Covid-19 world. </p>
</div>
<div class="desc">
<h1>Innovation in the field of Literature</h1>
<p>The main parts of innovation have been highlighted and the aim of this review is to give a good insight
in research field</p>
</div>
<div class="desc">
<h1>The Habit Of Book-Reading</h1>
<p>The habit of reading is one of the best qualities that a person can possess. Books are known to be your
best friend for a reason.</p>
</div>
<div class="desc">
<h1>The Magic of Literature</h1>
<p>Magical realism is a genre of literature that depicts the real world as a magic or fantasy. </p>
</div>
<div class="desc">
<h1>How to Write and Publish Childrens' Books
</h1>
<p>Kids Book Review is a voluntary children's literature and book review which works with authors,
illustrators and publishers. </p>
</div>
<div class="desc-carousel">
<div class="inner">
<div class="desc">
<h1>Books are the most Trusted Friends you'll ever have.</h1>
<p>And books can be our best friends for life, for all the right reasons. Good books enrich our mind
and broaden our perspective towards life.</p>
</div>
<div class="desc">
<h1>Distance-Learning programs on BOOM</h1>
<p>Blog about pursuing an MBA, Masters Degree, Online MBA, DBA, Bachelors, or PGCE via Online
Learning or Distance learning.</p>
</div>
<div class="desc">
<h1>Our Future is our YOUTH</h1>
<p>Higher education is looking beyond the dwindling market of 18-year-olds to lifelong, professional
and continuing ed to sustain enrollments.</p>
</div>
<div class="desc">
<h1>The Digital Era of Education</h1>
<p>Current trends indicate that digital formats will be an integral part of educational institutions
in the post-Covid-19 world.</p>
</div>
<div class="desc">
<h1>Innovation in the field of Literature</h1>
<p>The main parts of innovation have been highlighted, and the aim of this review is to give a good
insight into the research field.</p>
</div>
<div class="desc">
<h1>The Habit Of Book-Reading</h1>
<p>The habit of reading is one of the best qualities that a person can possess. Books are known to
be your best friend for a reason.</p>
</div>
<div class="desc">
<h1>The Magic of Literature</h1>
<p>Magical realism is a genre of literature that depicts the real world as magic or fantasy.</p>
</div>
<div class="desc">
<h1>How to Write and Publish Children's Books</h1>
<p>Kids Book Review is a voluntary children's literature and book review that works with authors,
illustrators, and publishers.</p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="blog-container" data-aos="fade-down">
<div class="card1" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>Machine-Learning</h1>
<p>Posted by Rudramadhaba Mishra</p>
<p>October 23, 2021</p>
</div>
<div class="info">
<p>Machine Learning is the field of study that gives computers the capability to learn without being explicitly
programmed. ML is one of the most exciting technologies that one would ever come across.</p>
</div>
<a href="https://www.simplilearn.com/tutorials/machine-learning-tutorial/what-is-machine-learning" target="_blank"
class="read-more"> Read more<span><i class="bot-arrow bi bi-arrow-right"></i></span></a>
</div>
<div class="card2" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>Web development</h1>
<p>Posted by Palak Bhogra</p>
<p>October 30, 2021</p>
</div>
<div class="info">
<p>Web development refers to building, creating, and maintaining websites. The web development process includes
web design, web content development, client-side/server-side scripting and network security configuration,
among other tasks.
</p>
</div>
<a href="https://www.w3schools.com/whatis/" target="_blank" class="read-more">Read more <span><i
class="bot-arrow bi bi-arrow-right"></i></span></a>
</div>

<div class="blog-container" data-aos="fade-down">
<div class="card" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>Machine Learning</h1>
<p>Posted by Rudramadhaba Mishra</p>
<p>October 23, 2021</p>
</div>
<div class="info">
<p>Machine Learning is the field of study that gives computers the capability to learn without being
explicitly programmed. ML is one of the most exciting technologies that one would ever come across.</p>
</div>
<a href="https://www.simplilearn.com/tutorials/machine-learning-tutorial/what-is-machine-learning"
target="_blank" class="read-more">Read more<span><i class="bot-arrow bi bi-arrow-right"></i></span></a>
</div>
<div class="card3" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>HTML</h1>
<p>Posted by Himansu Hansda</p>
<p>November 1, 2021</p>
</div>
<div class="info">
<p>Hyper Text Markup Language is used for creating web pages and web applications.
</p>
</div>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" class="read-more">Read more <span><i
class="bot-arrow bi bi-arrow-right"></i></span></a>

<div class="card" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>Web Development</h1>
<p>Posted by Palak Bhogra</p>
<p>October 30, 2021</p>
</div>
<div class="info">
<p>Web development refers to building, creating, and maintaining websites. The web development process
includes web design, web content development, client-side/server-side scripting, and network security
configuration, among other tasks.</p>
</div>
<a href="https://www.w3schools.com/whatis/" target="_blank" class="read-more">Read more<span><i
class="bot-arrow bi bi-arrow-right"></i></span></a>
</div>
<div class="card4" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>Python</h1>
<p>Posted by Mantosh</p>
<p>October 29, 2021</p>
</div>
<div class="info">
<p>Python is an easy to learn, powerful programming language. It has efficient high-level data structures and a
simple but effective approach to object-oriented programming.
</p>
</div>
<a href="https://www.codecademy.com/resources/docs/python" target="_blank" class="read-more">Read more <span><i
class="bot-arrow bi bi-arrow-right"></i></span></a>

<div class="card" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>HTML</h1>
<p>Posted by Himansu Hansda</p>
<p>November 1, 2021</p>
</div>
<div class="info">
<p>Hyper Text Markup Language is used for creating web pages and web applications.</p>
</div>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" class="read-more">Read more<span><i
class="bot-arrow bi bi-arrow-right"></i></span></a>
</div>
</div>

<div class="card" data-aos="fade">
<div class="card-bg"></div>
<div class="owner">
<h1>Python</h1>
<p>Posted by Mantosh</p>
<p>October 29, 2021</p>
</div>
<div class="info">
<p>Python is an easy-to-learn, powerful programming language. It has efficient high-level data structures and
a simple but effective approach to object-oriented programming.</p>
</div>
<a href="https://www.codecademy.com/resources/docs/python" target="_blank" class="read-more">Read more<span><i
class="bot-arrow bi bi-arrow-right"></i></span></a>
</div>
</div>


<div class="update" data-aos="fade-up">
Expand Down