Scribd
Upload
2 views5 pages

CSS For Home Page

The document contains CSS styles for a responsive web layout, including general body styling, header, navigation, search bar, authentication section, main content, and footer. It features flexbox for layout management and includes hover effects for buttons and links. Media queries are used to adjust styles for smaller screens, ensuring a mobile-friendly design.

Uploaded by

chickdiamond6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views5 pages

CSS For Home Page

The document contains CSS styles for a responsive web layout, including general body styling, header, navigation, search bar, authentication section, main content, and footer. It features flexbox for layout management and includes hover effects for buttons and links. Media queries are used to adjust styles for smaller screens, ensuring a mobile-friendly design.

Uploaded by

chickdiamond6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

/* General Body & Reset */

body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f8f8f8;
color: #333;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style: none;
padding: 0;
margin: 0;
}

/* Header Styling */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
padding: 15px 30px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
flex-wrap: wrap; /* Allow header items to wrap on smaller screens */
}

.header-left, .header-center, .header-right {


display: flex;
align-items: center;
flex-grow: 1; /* Allow sections to grow */
flex-basis: 30%; /* Minimum width for flex items */
}

.header-left {
justify-content: flex-start;
}

.header-center {
justify-content: center;
flex-grow: 2; /* Search bar can take more space */
}

.header-right {
justify-content: flex-end;
}

/* Logo */
.logo {
display: flex;
align-items: center;
font-size: 1.8em;
font-weight: bold;
color: #007bff; /* A prominent blue */
margin-right: 30px;
}

.logo img {
height: 40px; /* Adjust logo size */
margin-right: 10px;
}

/* Main Navigation */
.main-nav ul {
display: flex;
gap: 25px; /* Space between links */
}

.main-nav a {
color: #555;
font-weight: 500;
transition: color 0.3s ease;
}

.main-nav a:hover {
color: #007bff;
}

/* Search Bar */
.search-bar {
display: flex;
border: 1px solid #ddd;
border-radius: 25px;
overflow: hidden;
width: 100%;
max-width: 500px; /* Max width for search bar */
}

.search-bar input[type="text"] {
border: none;
padding: 10px 20px;
flex-grow: 1;
outline: none;
font-size: 1em;
}

.search-bar button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.search-bar button:hover {
background-color: #0056b3;
}

/* Auth Section */
.auth-section {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap; /* Allow wrapping for signup options */
justify-content: flex-end;
}

.login-btn {
background-color: #007bff;
color: white;
padding: 8px 15px;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
white-space: nowrap; /* Prevent text wrapping */
}

.login-btn:hover {
background-color: #0056b3;
}

.signup-options {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}

.signup-options span {
font-size: 0.9em;
color: #666;
white-space: nowrap;
}

.social-signup-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap; /* Allow social buttons to wrap */
justify-content: flex-end;
}

.social-btn {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 0.9em;
display: flex;
align-items: center;
gap: 5px;
transition: background-color 0.3s ease;
white-space: nowrap;
}

.social-btn:hover {
background-color: #e0e0e0;
}

/* Specific social button colors (optional) */


.social-btn.google { background-color: #db4437; color: white; border-color:
#db4437; }
.social-btn.google:hover { background-color: #c23326; }
.social-btn.facebook { background-color: #3b5998; color: white; border-color:
#3b5998; }
.social-btn.facebook:hover { background-color: #2d4373; }
.social-btn.twitter { background-color: #1da1f2; color: white; border-color:
#1da1f2; }
.social-btn.twitter:hover { background-color: #0c85d0; }
.social-btn.instagram { background-image: linear-gradient(45deg, #f09433 0%,
#e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; border: none; }
.social-btn.instagram:hover { filter: brightness(1.1); }

/* Main Content & Footer (Basic Placeholders) */


.main-content {
padding: 40px 30px;
min-height: 500px; /* Ensure content area has some height */
text-align: center;
}

.main-footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
margin-top: 30px;
}

/* Responsive adjustments for smaller screens */


@media (max-width: 1024px) {
.main-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
padding: 15px 20px;
}

.header-left, .header-center, .header-right {


flex-basis: 100%; /* Take full width */
justify-content: flex-start; /* Align left */
}

.header-center {
order: 3; /* Move search below navigation and auth */
}

.header-right {
order: 2; /* Move auth below navigation */
}

.main-nav ul {
flex-wrap: wrap; /* Allow navigation links to wrap */
gap: 15px;
}

.auth-section {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}

.social-signup-buttons {
justify-content: flex-start;
}

.logo {
margin-bottom: 10px;
margin-right: 0;
}
}

@media (max-width: 600px) {


.main-header {
padding: 10px 15px;
}
.main-nav ul {
flex-direction: column;
gap: 10px;
}
.search-bar input[type="text"] {
padding: 8px 15px;
}
.search-bar button {
padding: 8px 10px;
}
.social-btn {
padding: 5px 10px;
font-size: 0.85em;
}
}

You might also like