Scribd
Upload
3 views

Css

The document is a CSS stylesheet that includes styles for a web page, featuring a basic reset, body styling, and navigation bar design. It also includes styles for elements like progress bars, heart animations, input fields, and buttons, with responsive design adjustments for smaller screens. The stylesheet emphasizes a cohesive color scheme and interactive elements with hover effects.

Uploaded by

olanreseun1
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

Css

The document is a CSS stylesheet that includes styles for a web page, featuring a basic reset, body styling, and navigation bar design. It also includes styles for elements like progress bars, heart animations, input fields, and buttons, with responsive design adjustments for smaller screens. The stylesheet emphasizes a cohesive color scheme and interactive elements with hover effects.

Uploaded by

olanreseun1
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

/* styles.

css */
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f8f8f8;
color: #333;
}

/* Navigation bar styling */


.navbar {
background-color: #ff3366;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
position: sticky;
top: 0;
z-index: 1000;
}

/* Navigation list styling */


.nav-list {
list-style: none;
display: flex;
}

/* Navigation list items */


.nav-list li {
margin: 0 10px;
}

/* Navigation links */
.nav-list a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}

/* Hover effect for navigation links */


.nav-list a:hover {
color: #ffccff;
}

/* Hamburger menu styling */


.nav-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger {
width: 25px;
height: 3px;
background-color: #fff;
margin: 4px 0;
transition: 0.4s;
}

/* Progress bar styling */


.progress-container {
width: 100%;
background-color: #ddd;
height: 5px;
margin-top: 10px;
}

.progress-bar {
width: 0;
height: 100%;
background-color: #ff3366;
transition: width 0.3s ease;
}

/* Heart animation styling */


.heart-animation {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
z-index: 999;
}

.heart {
width: 50px;
height: 50px;
background-color: #ff3366;
position: relative;
transform: rotate(-45deg);
animation: heartbeat 1.5s infinite;
}

.heart:before,
.heart:after {
content: '';
position: absolute;
width: 50px;
height: 50px;
background-color: #ff3366;
border-radius: 50%;
}

.heart:before {
top: -25px;
left: 0;
}

.heart:after {
left: 25px;
top: 0;
}

@keyframes heartbeat {
0% {
transform: scale(1) rotate(-45deg);
}
25% {
transform: scale(1.25) rotate(-45deg);
}
50% {
transform: scale(1) rotate(-45deg);
}
75% {
transform: scale(1.25) rotate(-45deg);
}
100% {
transform: scale(1) rotate(-45deg);
}
}

/* Section styling */
section {
padding: 20px;
text-align: center;
}

.hidden {
display: none;
}

/* Input and button styling */


input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
padding: 10px 20px;
background-color: #ff3366;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Hover effect for buttons */


button:hover {
background-color: #ff6699;
}

/* Responsive design */
@media (max-width: 600px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}

.nav-list {
flex-direction: column;
width: 100%;
}

.nav-list li {
margin: 5px 0;
}

.nav-toggle {
display: flex;
}

.progress-container {
width: 100%;
}

section {
padding: 10px;
}

input[type="text"] {
width: 100%;
}

button {
width: 100%;
}
}

You might also like