msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

Update style.css

Browse Source 
Setting maximum width to 420 pixels and rest jar components accordingly. For better presentation.
pull/1141/head
Shashwat Singh 2 years ago committed by GitHub
parent 207136a537
commit e26e15d487
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 67 deletions
Show Stats Download Patch File Download Diff File

142
3-terrarium/solution/style.css
Unescape View File

@ -1,105 +1,113 @@
body { body {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
} }
h1 { h1 {
color: #3a241d; color: #3a241d;
text-align: center; text-align: center;
} }
#left-container { #left-container {
left: 0px; left: 0px;
} }
#right-container { #right-container {
right: 0px; right: 0px;
} }
.container { .container {
background-color: #eee; background-color: #eee;
width: 15%; width: 15%;
top: 0px; top: 0px;
position: absolute; position: absolute;
height: 100%; height: 100%;
padding: 10px; padding: 10px;
} }
.plant-holder { .plant-holder {
position: relative; position: relative;
height: 13%; height: 13%;
left: -10px; left: -10px;
} }
.plant { .plant {
position: absolute; position: absolute;
max-width: 150%; max-width: 150%;
max-height: 150%; max-height: 150%;
z-index: 2; z-index: 2;
} }
/*https://codepen.io/Rotarepmi/pen/rjpNZY*/
.jar-walls { .jar-walls {
height: 80%; height: 80%;
width: 60%; width: 60%;
background: #d1e1df; max-width: 420px;
border-radius: 1rem; background: #d1e1df;
position: absolute; border-radius: 1rem;
bottom: 0.5%; position: absolute;
left: 20%; bottom: 0.5%;
opacity: 0.5; left: 50%;
z-index: 1; transform: translateX(-50%);
opacity: 0.5;
z-index: 1;
} }
.jar-top { .jar-top {
width: 50%; width: 50%;
height: 5%; max-width: 350px;
background: #d1e1df; height: 5%;
position: absolute; background: #d1e1df;
bottom: 80.5%; position: absolute;
left: 25%; bottom: 80.5%;
opacity: 0.7; left: 50%;
z-index: 1; transform: translateX(-50%);
opacity: 0.7;
z-index: 1;
} }
.jar-bottom { .jar-bottom {
width: 50%; width: 50%;
height: 1%; max-width: 350px;
background: #d1e1df; height: 1%;
position: absolute; background: #d1e1df;
bottom: 0%; position: absolute;
left: 25%; bottom: 0%;
opacity: 0.7; left: 50%;
transform: translateX(-50%);
opacity: 0.7;
} }
.dirt { .dirt {
width: 60%; width: 60%;
height: 5%; max-width: 420px;
background: #3a241d; height: 5%;
position: absolute; background: #3a241d;
border-radius: 0 0 1rem 1rem; position: absolute;
bottom: 1%; border-radius: 0 0 1rem 1rem;
left: 20%; bottom: 1%;
opacity: 0.7; left: 50%;
z-index: -1; transform: translateX(-50%);
opacity: 0.7;
z-index: -1;
} }
.jar-glossy-long { .jar-glossy-long {
width: 3%; width: 3%;
height: 20%; height: 20%;
border-radius: 2rem; border-radius: 2rem;
background: #ddfbff; background: #ddfbff;
position: absolute; position: absolute;
bottom: 20%; bottom: 20%;
left: 5%; left: 50%;
transform: translateX(-50%);
} }
.jar-glossy-short { .jar-glossy-short {
width: 3%; width: 3%;
height: 5%; height: 5%;
border-radius: 2rem; border-radius: 2rem;
background: #ddfbff; background: #ddfbff;
position: absolute; position: absolute;
bottom: 45%; bottom: 45%;
left: 5%; left: 50%;
transform: translateX(-50%);
} }

Write Preview
Loading…
Cancel
Save