Skip to content

Instantly share code, notes, and snippets.

@lmas3009
Created January 31, 2021 14:44
Show Gist options
  • Save lmas3009/d9e6e67070761c53491245e3221920d8 to your computer and use it in GitHub Desktop.
Save lmas3009/d9e6e67070761c53491245e3221920d8 to your computer and use it in GitHub Desktop.
A Simple MERN Full Stack Application
.root {
margin: 0px;
padding: 0px;
}
.App {
width: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.App .navbar {
background-color: red;
width: 100%;
height: 50px;
margin-top: -10px;
position: fixed;
}
.App .navbar .right ul {
list-style-type: none;
padding: 0px;
}
.App .navbar .right ul li {
float: left;
font-size: 20px;
margin-left: 10px;
color: white;
}
.App .navbar .left ul {
list-style-type: none;
}
.App .navbar .left ul li {
float: right;
font-size: 20px;
margin-right: 10px;
cursor: pointer;
color: white;
}
.App .adddetails {
margin-right: 20px;
margin-top: 50px;
margin-bottom: -20px;
height: 100px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-decoration: none;
}
.App .adddetails .link {
text-decoration: none;
}
.App .adddetails .btn {
background-color: red;
height: 40px;
width: 130px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 10px;
}
.App .adddetails .btn p {
text-align: center;
color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.App .adddetails .btn p strong {
margin-right: 5px;
font-size: 30px;
margin-top: -4px;
}
.App .Main {
margin-top: -30px;
width: 100%;
}
.App .Main table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
.App .Main td, .App .Main th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.App .Main tr:nth-child(even) {
background-color: #dddddd;
}
.form {
width: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: tan;
}
.form form {
background-color: skyblue;
padding: 10px;
}
.form form label {
font-size: 20px;
font-weight: bold;
}
.form form .Name {
margin: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.form form .Name label {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.form form .Name input {
height: 40px;
width: 300px;
font-size: 15px;
}
.form form .FName {
margin: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.form form .FName label {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.form form .FName input {
height: 40px;
width: 300px;
font-size: 15px;
}
.form form .Address {
margin: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.form form .Address label {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.form form .Address input {
height: 40px;
width: 300px;
font-size: 15px;
}
.form form .PhonNo {
margin: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.form form .PhonNo label {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.form form .PhonNo input {
height: 40px;
width: 300px;
font-size: 15px;
}
.form form .Email {
margin: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.form form .Email label {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.form form .Email input {
height: 40px;
width: 300px;
font-size: 15px;
}
.form form .submit {
margin: 20px;
}
/*# sourceMappingURL=App.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment