Scribd
Upload
3 views

css

Uploaded by

Binay Tamang
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
3 views

css

Uploaded by

Binay Tamang
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/ 3

/* Resetting default styles */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.app {
width: 100%;
max-width: 1200px;
background-color: #2f2f2f;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 40px;
text-align: center;
}

.app-header {
margin-bottom: 30px;
}

.app-header h1 {
font-size: 2.8rem;
font-weight: 700;
color: #f5f5f5;
}

.app-header p {
color: #b8b8b8;
font-size: 1.2rem;
}

.input-field {
padding: 16px;
font-size: 1.1rem;
border-radius: 8px;
border: 2px solid #bbb;
width: 70%;
margin-right: 20px;
background-color: #333;
color: #f5f5f5;
}

.btn {
padding: 16px 32px;
border-radius: 8px;
border: none;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s ease;
}

.btn-add {
background-color: #00c6ff;
color: #fff;
}

.btn-add:hover {
background-color: #0099cc;
}

.habit-list-container {
list-style-type: none;
padding: 0;
margin-top: 30px;
}

.habit-list-container li {
background-color: #444;
border-radius: 10px;
padding: 15px;
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}

.habit-list-container li:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transform: scale(1.03);
}

.habit-list-container .completed {
text-decoration: line-through;
color: #777;
}

.habit-stats {
margin-top: 50px;
}

canvas {
max-width: 500px;
margin: 0 auto;
}

.app-footer {
margin-top: 30px;
color: #b8b8b8;
font-size: 1rem;
}

@media (max-width: 768px) {


.input-field {
width: 60%;
}
.habit-list-container li {
flex-direction: column;
text-align: center;
}
}

You might also like