Scribd
Upload
12 views

blogsite_latest.css

Blog code

Uploaded by

Hameed Abdulkabir Adebowale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views

blogsite_latest.css

Blog code

Uploaded by

Hameed Abdulkabir Adebowale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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