You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

285 lines
4.4 KiB
CSS

2 years ago
@media only screen and (min-device-width: 360px) and (max-device-width: 767px) and (orientation: portrait) {
body {
overflow: hidden;
}
#home {
top: 4%;
left: 2.75%;
font-size: 0.68rem;
letter-spacing: 0.05rem;
z-index: 999;
color: black;
padding: 0.25% 0.7%;
}
#designer {
position: absolute;
z-index: 999;
width: 15%;
bottom: 0%;
right: 3%;
}
.wrapper {
width: 100%;
}
#title {
width: 68%;
padding: 0 0.15%;
margin: 3% auto;
box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
}
#title h1 {
text-align: center;
font-size: 1.2rem;
letter-spacing: 0.005rem;
line-height: 1.4;
margin-top: 2%;
margin-bottom: 2%;
}
#tape {
transform: rotate(45deg);
left: 75%;
top: -1.6%;
}
.bar {
box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 16px,
rgba(0, 0, 0, 0) 0px 7px 13px 3px, rgba(0, 0, 0, 0.1) 0px -3px 0px inset;
}
.bar1 {
top: 17%;
left: 6.5%;
width: 40%;
height: 30.5%;
}
.bar1 .frame {
width: 85%;
height: 90%;
border: 2px navy double;
justify-content: start;
}
.bar1 h3 {
font-size: 0.9rem;
line-height: 1;
margin-top: 5%;
margin-bottom: 0;
}
#adobe{
z-index: 10;
}
#nomore{
z-index:9;
display: block;
}
#adobe,
#nomore {
position: absolute;
/* z-index: 10; */
width: 18%;
top: 84.5%;
left: 80%;
transform: translate(-50%, -50%);
}
.bar1 p {
font-size: 0.7rem;
/* line-height: 125%; */
padding: 0% 6%;
}
.bar2 {
top: 20%;
left: 55.5%;
width: 36%;
height: 29.5%;
display: inline-block;
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */
}
.bar2:hover {
transform: none;
}
.deco1 {
margin-left: 0%;
}
.bar2 .frame {
position: absolute;
/* background-color: yellow; */
top: 0;
left: 5%;
width: 97%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1% 2%;
}
.bar2 h3 {
font-size: 0.9rem;
width: 90%;
margin-bottom: 0;
margin-top: 0;
}
.bar2 p {
width: 95%;
font-size: 0.7rem;
line-height: 122%;
}
.bar2 .frame img {
width: 45.5%;
}
.bar3 {
top: 57%;
left: 6.5%;
width: 32%;
height: 29.5%;
}
.bar3 h3 {
font-size: 1rem;
line-height: 0;
margin-bottom: 4%;
}
#t1{
padding-top: 5%;
}
#t1,
#t5 {
color: #2b710c;
}
#t2,
#t6 {
color: #c11818;
}
#t3,
#t4 {
color: #0b0d7f;
}
#t6 {
font-size: 0.6rem;
text-align: center;
margin-top: 40%;
padding-top: 0;
}
#note {
top: 57%;
left: 6.5%;
width: 64%;
height: 29.5%;
}
.page1 {
color: #c11818;
background: #fbfcf7;
background: linear-gradient(
to right,
#fbfcf7 0%,
#fffaed 50%,
#f0edd3 100%
);
left: 0;
justify-content: start;
align-items: flex-start;
}
.page2 {
background: #fbfcf7;
background: linear-gradient(to left, #fbfcf7 0%, #fffaed 39%, #d4d1ba 90%);
justify-content: center;
align-items: center;
left: 50%;
overflow-wrap: break-all;
}
.page1 p,
.page2 p {
}
.page1 p {
font-size: 0.6rem;
padding: 1% 5%;
width: 100%;
}
.page2 p {
font-size: 0.85rem;
line-height: 1.5;
padding: 2% 15%;
}
.bar4 {
top: 55%;
left: 43.5%;
width: 50%;
height: 39.5%;
}
.bar4 .frame {
padding: 0% 3%;
width: 90%;
display: inline-block;
}
.bar4 .frame img {
width: 20%;
position: absolute;
right: 2%;
top: 2%;
}
.bar4 h3 {
font-size: 1rem;
line-height: 0;
line-height: 1.4;
margin-top: 4.5%;
margin-bottom: 0;
cursor: pointer;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4),
-1px -1px 0 rgba(255, 255, 255, 1);
}
.bar4 p {
font-size: 0.85rem;
font-weight: 600;
line-height: 125%;
padding: 1% 2%;
margin-top: 4%;
}
.bar5 {
transform: rotate(40deg);
top: 44%;
left: 37%;
width: 20%;
z-index: 11;
padding-left: 1.5%;
padding-right: 1%;
}
.bar5 p {
/* margin: 0 auto; */
padding: 0% 2%;
font-size: 0.7rem;
letter-spacing: 0;
}
.bar5 p a {
text-decoration: underline;
color: blue;
cursor: pointer;
}
}