Scribd
Upload
9 views

blogsite_latest.css

Blog code

Uploaded by

Hameed Abdulkabir Adebowale
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

blogsite_latest.css

Blog code

Uploaded by

Hameed Abdulkabir Adebowale
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

/* General Reset */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: 'Arial', sans-serif;

color: #333;

background-color: #f9f9f9;

line-height: 1.6;

.container {

width: 90%;

margin: 0 auto;

max-width: 1200px;

/* Header */

.header {

background-color: #222;

color: #fff;

padding: 1rem 0;
position: sticky;

top: 0;

z-index: 1000;

.logo {

font-size: 2rem;

font-weight: bold;

.navbar {

display: flex;

gap: 1.5rem;

justify-content: flex-end;

.navbar a {

color: #fff;

text-decoration: none;

font-size: 1rem;

.navbar a:hover {

text-decoration: underline;

}
/* Hero Section */

.hero {

height: 80vh;

background: url('https://via.placeholder.com/1920x1080') no-repeat center center/cover;

position: relative;

color: #fff;

.hero .overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

.hero h2 {

font-size: 3rem;
margin-bottom: 1rem;

.hero p {

font-size: 1.2rem;

margin-bottom: 2rem;

.cta-button {

display: inline-block;

padding: 0.8rem 2rem;

background: #ff7e5f;

color: #fff;

text-decoration: none;

font-size: 1rem;

border-radius: 25px;

transition: background 0.3s;

.cta-button:hover {

background: #feb47b;

/* Articles Section */

.articles-section {
padding: 4rem 0;

background-color: #fff;

.section-title {

text-align: center;

font-size: 2rem;

margin-bottom: 2rem;

.articles-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 2rem;

.article-card {

background: #f9f9f9;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

overflow: hidden;

.article-card img {

width: 100%;
}

.article-card h3 {

font-size: 1.5rem;

margin: 1rem;

.article-card p {

font-size: 1rem;

margin: 0 1rem 1rem;

color: #666;

.read-more {

display: block;

text-align: center;

margin: 1rem;

padding: 0.5rem 1rem;

background: #ff7e5f;

color: #fff;

text-decoration: none;

border-radius: 5px;

font-weight: bold;

}
.read-more:hover {

background: #feb47b;

/* About Section */

.about-section {

padding: 4rem 0;

background-color: #f0f0f0;

text-align: center;

.about-section p {

max-width: 800px;

margin: 0 auto;

font-size: 1.2rem;

color: #555;

/* Footer */

.footer {

text-align: center;

padding: 2rem 0;

background-color: #222;

color: #fff;

You might also like