TRUkae/quote_randomizer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upload files to "/"

Browse source
This commit is contained in:
Lou 2025-09-17 11:36:48 +00:00
parent 773368764e
commit 381cc3f098
3 changed files with 164 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

101
style.css Normal file
View file

@ -0,0 +1,101 @@
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'calisto mt', serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #88648c;
height: 100vh;
}
.container {
width: 750px;
height: 650px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.header {
text-align: center;
margin-bottom: 50px;
}
.header h2 {
font-weight: 400;
color: #fff;
}
.main-content {
width: 100%;
padding: 50px 40px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 25px 31px 0 rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
.text-area {
text-align: center;
font-size: 25px;
color: #262626;
line-height: 1.5;
height: 200px; /* Add this fixed height */
overflow: auto; /* Add this to enable scrolling if the text exceeds the fixed height */
}
.main-content .image-container {
width: 50%;
height: 200px; /* Add this fixed height */
display: flex;
justify-content: center;
align-items: center;
}
.main-content .image-container .img {
max-width: 100%;
max-height: 100%; /* Add this to fit the image within the fixed height */
}
.main-content .writer {
text-transform: uppercase;
letter-spacing: 5px;
color: #88648c;
text-align: center;
margin-top: 20px;
font-size: 25px;
}
.button-area {
display: flex;
justify-content: center;
align-items: flex-end;
padding: 10px 0;
}
.button-area .btn button {
background-color: #aca5b0;
color: #000;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
border: none;
outline: none;
padding: 10px;
}
.button-area button:active {
background-color: #88648c;
}
</style>