127 portTape/css/style.css
View file
@@ -0,0 +1,127 @@
html, body {
padding: 0;
margin: 0;
overflow: auto;
}

p {
font-family: courier, Arial, Helvetica, sans-serif;
font-size: 20px;
margin: 0;
line-height: 145%;
}

#title {
padding-left: 930px; /* 50% alt. 930px; */
padding-top: 30px;
background-color: dodgerblue;
}

.divGen{
height: 200vh;
width: 100vw;
overflow: hidden;
}

/* DIV BACKGROUND COLOURS */
/* ====================== */

#div1 {background-color: dodgerblue;}
#div2 {background-color: deeppink;}
#div3 {background-color: limegreen;}
#div4 {background-color: #ffff00;}

.infocard {
width: 500px;
background: #f8f8f8;
border-radius: 2%;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.40);
margin: 10px;
padding: 20px;
position: relative;
}

.infocard img {
margin: 10px;
}

#info01{
top: 55vh;
left: -100%;
}

#info02{
top: 80vh;
left: 100%;
}

#info03{
top: 95vh;
left: -100%;
}

#info04{
top: 10vh;
left: 100%;
}

#info05{
top: 20vh;
left: -100%;
}

#info06{
top: 30vh;
left: 100%;
}

#info07{
top: 50vh;
left: -100%;
}

#info08{
top: 20vh;
left: 100%;
}

#info09{
top: 50vh;
left: -100%;
}


#tape {
margin-left: -300px;
margin-top: -200px;
top: 50%;
left: 50%;
position: fixed;
}

#spool1 {
top: 151px;
left: 153px;
position: absolute;
}

#spool2 {
top: 152px;
left: 383px;
position: absolute;
}

#div4 {
height: 170vh;
}

#end {
width: 146px;
/* top: 200vh; */
margin: auto;
display: none;
}