Skip to content

Instantly share code, notes, and snippets.

@Olanetsoft
Created April 1, 2022 22:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Olanetsoft/856a6807dc3613b55c31587f3f6dd4a6 to your computer and use it in GitHub Desktop.
Save Olanetsoft/856a6807dc3613b55c31587f3f6dd4a6 to your computer and use it in GitHub Desktop.
image crop and resize
.App {
font-family: sans-serif;
text-align: center;
}
@import url("https://fonts.googleapis.com/css?family=Acme|Lobster");
/* This allow me to have the full width of the page without the initial padding/margin*/
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Acme;
min-width: 700px;
}
.splitdiv {
height: 100%;
width: 50%;
}
/* This part contains all of the left side of the screen */
/* ----------------------------------------- */
#leftdiv {
float: left;
background-color: #fafafa;
height: 932px;
}
#leftdivcard {
margin: 0 auto;
width: 80%;
background-color: white;
margin-top: 35vh;
transform: translateY(-50%);
box-shadow: 10px 10px 1px 0px rgba(78, 205, 196, 0.2);
border-radius: 10px;
}
#leftbutton {
background-color: #512cf3;
border-radius: 5px;
color: #fafafa;
}
.cropper {
width: 660px;
height: 400px;
}
/* ----------------------------------------- */
/* This part contains all of the left side of the screen */
/* ----------------------------------------- */
#rightdiv {
float: right;
background-color: #eff0f0;
height: 960px;
}
#itemdivcard {
margin: 0 auto;
width: 50%;
height: 100%;
margin-top: 150px;
}
#imgPreview {
width: "100%";
height: "300px";
}
/* ----------------------------------------- */
/* Basic styling */
/* ----------------------------------------- */
button {
outline: none !important;
font-family: Lobster;
border: none;
font-size: 14px;
padding: 8px;
padding-left: 20px;
padding-right: 20px;
margin-top: -15px;
cursor: pointer;
}
h1 {
font-family: Lobster;
color: #512cf3;
text-align: center;
font-size: 40px;
}
h2 {
font-family: Lobster;
color: #512cf3;
text-align: center;
font-size: 40px;
}
input {
font-family: Acme;
font-size: 16px;
font-family: 15px;
}
input {
width: 30%;
height: 20px;
padding: 16px;
margin-left: 1%;
margin-right: 2%;
margin-top: 15px;
margin-bottom: 10px;
display: inline-block;
border: none;
}
input:focus {
outline: none !important;
border: 1px solid #512cf3;
box-shadow: 0 0 1px round #719ece;
}
/* ----------------------------------------- */
.main {
height: 100%;
width: 100%;
display: inline-block;
}
.main-h2 {
padding-top: 20px;
text-align: center;
}
.body-h1 {
padding-top: 20px;
text-align: center;
color: white;
}
.inner-p {
color: white;
text-align: center;
}
.main-align {
text-align: center;
}
.form-control {
margin-left: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment