Header+Footer: implement breakpoints
This commit is contained in:
rektdeckard
@@ -1,11 +1,101 @@
|
||||
footer {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background-color: #925bff;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
#back-to-top-button {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 759px) {
|
||||
.outro h2 {
|
||||
font-size: 28px;
|
||||
line-height: 38px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 80px 0 0;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(324px, 460px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-140px, 420px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 760px) and (max-width: 1023px) {
|
||||
.outro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 80px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(544px, 500px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(80px, 480px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1023px) {
|
||||
.outro {
|
||||
position: relative;
|
||||
margin: 292px 10% 292px;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-48px, -196px);
|
||||
}
|
||||
|
||||
#command {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(640px, -228px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
||||
footer {
|
||||
height: 920px;
|
||||
}
|
||||
|
||||
.outro {
|
||||
position: relative;
|
||||
width: 666px;
|
||||
@@ -31,24 +121,18 @@ footer {
|
||||
transform: translate(-212px, 0);
|
||||
}
|
||||
|
||||
#back-to-top-button {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(384px, 500px);
|
||||
transform: translate(384px, 512px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-80px, 500px);
|
||||
position: relative;
|
||||
/* top: 0; */
|
||||
/* left: 0; */
|
||||
transform: translate(-80px, 16px);
|
||||
}
|
||||
|
||||
#command {
|
||||
@@ -59,67 +143,53 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
/* .outro-container {
|
||||
position: relative;
|
||||
width: 1366px;
|
||||
height: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.outro-container img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.outro {
|
||||
@media screen and (min-width: 1280px) {
|
||||
.outro {
|
||||
width: 660px;
|
||||
position: absolute;
|
||||
top: 104px;
|
||||
left: 320px;
|
||||
}
|
||||
position: relative;
|
||||
margin: 160px 0 120px 468px;
|
||||
}
|
||||
|
||||
.outro h2 {
|
||||
.outro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.fine-print {
|
||||
margin: 104px 0 0;
|
||||
.fine-print {
|
||||
margin: 96px 0 0;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
#back-to-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(120px, 104px);
|
||||
}
|
||||
transform: translate(-320px, -12px);
|
||||
}
|
||||
|
||||
#back-to-top-button {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#marker-green {
|
||||
#marker-green {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(240px, 424px);
|
||||
}
|
||||
/* x and y-translate is wrong in spec? */
|
||||
transform: translate(-208px, 270px);
|
||||
}
|
||||
|
||||
#phone {
|
||||
#phone {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-211px, 414px);
|
||||
}
|
||||
/* y-translate is wrong in spec? */
|
||||
transform: translate(-684px, 236px);
|
||||
}
|
||||
|
||||
#command {
|
||||
#command {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(1213px, 464px);
|
||||
} */
|
||||
/* y-translate is wrong in spec? */
|
||||
transform: translate(744px, 352px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
header {
|
||||
width: 100%;
|
||||
height: 1435px;
|
||||
height: 1434px;
|
||||
background-color: #ffd171;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -9,27 +9,13 @@ header img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 660px;
|
||||
position: absolute;
|
||||
transform: translate(143px, 392px);
|
||||
}
|
||||
|
||||
.intro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
div.links {
|
||||
.links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 56px 0 0;
|
||||
}
|
||||
|
||||
.links a:not(:first-child) {
|
||||
margin-left: 48px;
|
||||
gap: 56px;
|
||||
margin: 48px 0;
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
@@ -39,7 +25,7 @@ a.nav-link {
|
||||
}
|
||||
|
||||
a.nav-link:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
@@ -52,54 +38,149 @@ a.nav-link:hover:after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 1366px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.inspectable {
|
||||
cursor: cell;
|
||||
}
|
||||
|
||||
#marker-purple {
|
||||
position: absolute;
|
||||
transform: translate(143px, -158px);
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#tablet {
|
||||
position: absolute;
|
||||
transform: translate(577px, -900px);
|
||||
@media screen and (max-width: 759px) {
|
||||
.intro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 52px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#billiard-ball {
|
||||
/* Illustrations remain at same layout up to 1024px */
|
||||
@media screen and (max-width: 1023px) {
|
||||
.intro {
|
||||
margin: 0 10%;
|
||||
position: absolute;
|
||||
transform: translate(917.83px, 359.83px);
|
||||
transform: translate(0, 382px);
|
||||
}
|
||||
|
||||
.intro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 52px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
#marker-purple {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(40px, -158px);
|
||||
}
|
||||
|
||||
#billiard-ball {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(130px, -98px);
|
||||
}
|
||||
|
||||
#paperclips {
|
||||
position: absolute;
|
||||
transform: translate(176px, 152px);
|
||||
}
|
||||
|
||||
#warning {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(398px, -116px);
|
||||
}
|
||||
|
||||
#tablet {
|
||||
position: absolute;
|
||||
transform: translate(672px, -900px);
|
||||
}
|
||||
|
||||
#cutting-mat {
|
||||
position: absolute;
|
||||
transform: translate(96px, 766px);
|
||||
}
|
||||
|
||||
#calculator {
|
||||
position: absolute;
|
||||
transform: translate(632px, 938px);
|
||||
}
|
||||
|
||||
#receipt {
|
||||
position: absolute;
|
||||
transform: translate(-96px, 958px);
|
||||
}
|
||||
}
|
||||
|
||||
#warning {
|
||||
position: absolute;
|
||||
transform: translate(1184px, 421px);
|
||||
@media screen and (min-width: 760px) and (max-width: 1023px) {
|
||||
.intro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 52px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
#paperclips {
|
||||
@media screen and (min-width: 1024px) {
|
||||
.image-container {
|
||||
width: 1366px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin: 0;
|
||||
width: 660px;
|
||||
position: absolute;
|
||||
transform: translate(144px, 386px);
|
||||
}
|
||||
|
||||
.intro h2 {
|
||||
font-size: 40px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
#marker-purple {
|
||||
position: absolute;
|
||||
transform: translate(144px, -158px);
|
||||
}
|
||||
|
||||
#tablet {
|
||||
position: absolute;
|
||||
transform: translate(578px, -900px);
|
||||
}
|
||||
|
||||
#billiard-ball {
|
||||
position: absolute;
|
||||
transform: translate(918px, 360px);
|
||||
}
|
||||
|
||||
#warning {
|
||||
position: absolute;
|
||||
transform: translate(1184px, 424px);
|
||||
}
|
||||
|
||||
#paperclips {
|
||||
position: absolute;
|
||||
transform: translate(982px, 621px);
|
||||
}
|
||||
}
|
||||
|
||||
#cutting-mat {
|
||||
#cutting-mat {
|
||||
position: absolute;
|
||||
transform: translate(119px, 825px);
|
||||
}
|
||||
transform: translate(120px, 824px);
|
||||
}
|
||||
|
||||
#receipt {
|
||||
#receipt {
|
||||
position: absolute;
|
||||
transform: translate(-5px, 1016px);
|
||||
}
|
||||
transform: translate(-16px, 1016px);
|
||||
}
|
||||
|
||||
#calculator {
|
||||
#calculator {
|
||||
position: absolute;
|
||||
transform: translate(924px, 940px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user