sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-20 13:14:04 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

styled message box

Browse Source
This commit is contained in:
Yanatchara JERAJA 2023-06-30 11:59:35 +07:00
parent fa14d823fd
commit 5dc2745633
3 changed files with 131 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/App.css
View File

@ -229,3 +229,131 @@ h2.MuiTypography-root {
color: #3598db;
display: flex;
}
/* mail box styles -----------------------------------------------*/
/* light theme */
#light .contactContainer {
display: flex;
justify-content: center;
padding: 10px 50px 50px 50px;
margin: 50px auto 0 auto;
max-width: 600px;
border-radius: 50px;
background: #FFF9F9;
box-shadow: 0 4px 10px 0 rgba(139, 192, 255, 0.25);
}
#light .form-group h4 {
justify-content: center;
}
/* subject */
#light h4.mail {
color: #102b5a;
text-align: center;
}
/* message box */
#light .form-group textarea {
width: 299px;
height: 153px;
flex-shrink: 0;
max-width: 450px;
border-radius: 30px;
border-width: 0;
border-color: #102b5a;
background: linear-gradient(153deg, rgba(254, 231, 211, 0.30) 0%, rgba(254, 211, 211, 0.10) 100%);
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25) inset;
}
/* button */
#light .col-md-12 {
display: flex;
margin-top: 20px;
justify-content: center;
}
#light .btn {
width: 140px;
height: 40px;
flex-shrink: 0;
border-radius: 30px;
background: linear-gradient(153deg, rgba(139, 192, 255, 0.25) 0%, rgba(254, 211, 211, 0.10) 100%);
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
border: none;
color: #102b5a;
}
#light .btn:hover {
border-radius: 30px;
background: linear-gradient(153deg, rgba(255, 181, 139, 0.25) 0%, rgba(254, 211, 211, 0.10) 100%);
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
}
/* dark theme */
.contactContainer {
display: flex;
justify-content: center;
padding: 10px 50px 50px 50px;
margin: 50px auto 0 auto;
max-width: 600px;
border-radius: 50px;
background: #2B3E52;
box-shadow: 0 4px 10px 0 rgba(139, 192, 255, 0.25);
}
.form-group h4 {
justify-content: center;
}
/* subject */
h4.mail {
color: aliceblue;
text-align: center;
}
/* message box */
.form-group textarea {
width: 299px;
height: 153px;
flex-shrink: 0;
max-width: 450px;
border-radius: 30px;
border-width: 0;
border-color: #102b5a;
background: linear-gradient(153deg, rgba(255, 255, 255, 0.30) 0%, rgba(237, 244, 255, 0.46) 100%);
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
}
/* button */
.col-md-12 {
display: flex;
margin-top: 20px;
justify-content: center;
}
.btn {
width: 140px;
height: 40px;
flex-shrink: 0;
border-radius: 30px;
background: linear-gradient(159deg, rgba(186, 218, 255, 0.59) 0%, #D3E7FE 100%);
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
border: none;
color: #102b5a;
}
.btn:hover {
border-radius: 30px;
background: linear-gradient(159deg, rgba(145, 183, 227, 0.59) 0%, #D3F6FE 100%);
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
cursor: pointer;
}

2
src/App.jsx
View File

@ -206,8 +206,8 @@ export default function App() {
))}
</Grid>
</Container>
<Contact />
</Container>
</main>
{/* Footer */}
<Box sx={{p: 6}} component="footer">

4
src/Contact.jsx
View File

@ -22,7 +22,7 @@ function Contact(){
}
return <section id="contact">
<h2 className="contact">Contact</h2>
{/*<h2 className="contact">Contact</h2>*/}
<div className="contactContainer">
<div className="col-lg-6">
<div className="contact-wrap">
@ -33,7 +33,7 @@ function Contact(){
<div className="form-group">
<h4 className="mail">Send PP any message</h4>
<textarea name="message" className="form-control" id="message" cols="30" rows="8"
placeholder="Message"></textarea>
placeholder=""></textarea>
</div>
</div>
<div className="col-md-12">