Bookmark List Page Sample Code: Create a Stylish and Organized Bookmark Page
<!DOCTYPE html>
<html>
<head>
<title>My Bookmarks</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
font-size: 36px;
color: #333;
}
.bookmark-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
padding: 20px;
}
.bookmark {
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
transition: all 0.2s ease-in-out;
}
.bookmark:hover {
transform: translateY(-5px);
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.bookmark h2 {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}
.bookmark p {
font-size: 16px;
color: #666;
}
.bookmark a {
color: #333;
text-decoration: none;
font-weight: bold;
}
.bookmark a:hover {
color: #666;
}
</style>
</head>
<body>
<h1>My Bookmarks</h1>
<div class='bookmark-list'>
<div class='bookmark'>
<h2>Google</h2>
<p>The most popular search engine in the world.</p>
<a href='https://www.google.com/'>Visit Google</a>
</div>
<div class='bookmark'>
<h2>GitHub</h2>
<p>A web-based hosting service for version control using git.</p>
<a href='https://github.com/'>Visit GitHub</a>
</div>
<div class='bookmark'>
<h2>CodePen</h2>
<p>A social development environment for front-end designers and developers.</p>
<a href='https://codepen.io/'>Visit CodePen</a>
</div>
<div class='bookmark'>
<h2>Stack Overflow</h2>
<p>A question and answer site for professional and enthusiast programmers.</p>
<a href='https://stackoverflow.com/'>Visit Stack Overflow</a>
</div>
<div class='bookmark'>
<h2>Medium</h2>
<p>A blog publishing platform with a focus on quality writing and user experience.</p>
<a href='https://medium.com/'>Visit Medium</a>
</div>
<div class='bookmark'>
<h2>CSS-Tricks</h2>
<p>A website dedicated to teaching and learning CSS.</p>
<a href='https://css-tricks.com/'>Visit CSS-Tricks</a>
</div>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lQvG 著作权归作者所有。请勿转载和采集!