ben/freecodecamp
1
0
Fork 0
mirror of https://github.com/BenDWit/freecodecamp.git synced 2025-12-23 11:09:59 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

finished blogpost

Browse source
This commit is contained in:
bendwit 2025-06-23 16:33:21 +02:00
parent e8ddc0ed6c
commit 3b4da4a007
2 changed files with 42 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
Certified_Full_Stack_Developer/CSS/design_blog_post_card/index.html
View file

@ -8,7 +8,12 @@
</head> </head>
<body> <body>
<div class="blog-post-card"> <div class="blog-post-card">
<img class="post-img" src="https://cdn.freecodecamp.org/curriculum/labs/cover-photo.jpg" alt="person typing on a laptop">
<div class="post-content">
<h2 class="post-title">setting up wazuh</h2>
<p class="post-excerpt">A guide on how to setup wazuh</p>
<a class="read-more">Read More</a>
</div>
</div> </div>
</body> </body>
</html> </html>

37
Certified_Full_Stack_Developer/CSS/design_blog_post_card/styles.css
View file

@ -1,3 +1,38 @@
.blog-post-card { .blog-post-card {
background-color: white;
border-radius: 25px;
width: 50%;
text-align: center;
}
.post-img {
width: 100%;
border-bottom: 10px solid red;
}
.post-content {
padding: 10px;
}
.post-title {
color: red;
margins: 10px;
}
.post-excerpt {
color: red;
margins: 10px;
}
.read-more {
color: blue;
background-color: grey;
margin: 10px;
padding: 10px;
border-radius: 25px;
display: inline-block;
}
.read-more:hover {
background-color: black;
} }