web edits

main
Boyana 1 year ago
parent 1524b5c3f8
commit 053dee37d7

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 274.93 343.57"><defs><style>.cls-1{fill:none;}.cls-1,.cls-2{stroke:#000;stroke-miterlimit:10;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="87.21" y1="0.44" x2="30.34" y2="65.23"/><line class="cls-1" x1="51.15" y1="281.26" x2="30.34" y2="65.23"/><line class="cls-1" x1="87.21" y1="0.44" x2="169.73" y2="43.38"/><line class="cls-1" x1="187.76" y1="273.78" x2="169.73" y2="43.38"/><line class="cls-1" x1="51.15" y1="281.26" x2="128.47" y2="341.74"/><line class="cls-1" x1="187.76" y1="273.78" x2="128.47" y2="341.74"/><line class="cls-1" x1="30.34" y1="65.23" x2="71.26" y2="78.06"/><line class="cls-1" x1="87.21" y1="0.44" x2="71.26" y2="78.06"/><line class="cls-1" x1="125.35" y1="66.69" x2="169.73" y2="43.38"/><line class="cls-1" x1="87.21" y1="0.44" x2="125.35" y2="66.69"/><line class="cls-1" x1="71.26" y1="78.06" x2="125.35" y2="66.69"/><line class="cls-1" x1="51.15" y1="281.26" x2="98.3" y2="292.75"/><line class="cls-1" x1="187.76" y1="273.78" x2="147.54" y2="294.31"/><line class="cls-1" x1="71.26" y1="78.06" x2="98.3" y2="292.75"/><line class="cls-1" x1="125.35" y1="66.69" x2="147.54" y2="294.31"/><line class="cls-1" x1="98.3" y1="292.75" x2="147.54" y2="294.31"/><line class="cls-1" x1="51.15" y1="281.26" x2="94.47" y2="262.29"/><line class="cls-1" x1="187.76" y1="273.78" x2="147.54" y2="262.29"/><line class="cls-1" x1="94.69" y1="262.37" x2="147.25" y2="262.37"/><line class="cls-1" x1="30.34" y1="65.23" x2="79.23" y2="49.99"/><line class="cls-1" x1="169.73" y1="43.38" x2="112.83" y2="44.95"/><line class="cls-1" x1="79.23" y1="49.99" x2="112.83" y2="44.95"/><line class="cls-1" x1="98.3" y1="292.75" x2="128.47" y2="341.74"/><line class="cls-1" x1="147.54" y1="294.31" x2="128.47" y2="341.74"/><line class="cls-1" x1="207.7" y1="198.91" x2="254.88" y2="160.13"/><line class="cls-1" x1="254.88" y1="160.13" x2="274.43" y2="204.55"/><line class="cls-1" x1="207.7" y1="198.91" x2="234.52" y2="210.01"/><line class="cls-1" x1="254.88" y1="160.13" x2="234.52" y2="210.01"/><line class="cls-1" x1="274.43" y1="204.55" x2="251.18" y2="211.43"/><line class="cls-1" x1="254.88" y1="160.13" x2="251.18" y2="211.43"/><line class="cls-1" x1="207.7" y1="198.91" x2="187.86" y2="309.38"/><line class="cls-1" x1="216.99" y1="343.15" x2="187.86" y2="309.38"/><line class="cls-1" x1="234.52" y1="210.01" x2="215.37" y2="317.75"/><line class="cls-1" x1="251.18" y1="211.43" x2="234.52" y2="210.01"/><line class="cls-1" x1="274.43" y1="204.55" x2="261.03" y2="314.81"/><line class="cls-1" x1="216.99" y1="343.15" x2="261.03" y2="314.81"/><line class="cls-1" x1="236.11" y1="320.97" x2="251.18" y2="211.43"/><line class="cls-1" x1="261.03" y1="314.81" x2="236.11" y2="320.97"/><line class="cls-1" x1="215.37" y1="317.75" x2="187.86" y2="309.38"/><line class="cls-1" x1="236.11" y1="320.97" x2="215.37" y2="317.75"/><line class="cls-1" x1="216.99" y1="343.15" x2="215.37" y2="317.75"/><line class="cls-1" x1="236.11" y1="320.97" x2="216.99" y2="343.15"/><line class="cls-1" x1="207.7" y1="198.91" x2="239.76" y2="197.18"/><line class="cls-1" x1="274.43" y1="204.55" x2="252.47" y2="199.99"/><line class="cls-1" x1="239.76" y1="197.18" x2="252.47" y2="199.99"/><line class="cls-1" x1="187.86" y1="309.38" x2="217.12" y2="307.89"/><line class="cls-1" x1="261.03" y1="314.81" x2="237.82" y2="308.55"/><line class="cls-1" x1="217.12" y1="307.89" x2="237.82" y2="308.55"/><polygon class="cls-1" points="212.21 39.25 194.93 38.02 184.12 51.54 179.96 34.73 163.75 28.63 178.45 19.48 179.25 2.17 192.5 13.33 209.2 8.74 202.68 24.79 212.21 39.25"/><polygon class="cls-1" points="219.22 65.69 224.8 64.03 226.6 58.49 229.9 63.29 235.72 63.29 232.18 67.91 233.98 73.45 228.49 71.51 223.78 74.93 223.93 69.11 219.22 65.69"/><polygon class="cls-2" points="207.02 156.49 200.23 155.33 195.42 160.26 194.43 153.44 188.25 150.39 194.43 147.34 195.43 140.52 200.23 145.46 207.02 144.3 203.81 150.39 207.02 156.49"/><polygon class="cls-2" points="252.61 102.26 253.44 113.9 263.5 119.82 252.68 124.2 250.16 135.6 242.65 126.67 231.04 127.79 237.21 117.89 232.55 107.19 243.88 110 252.61 102.26"/><polygon class="cls-1" points="19.9 220.43 13.11 219.27 8.29 224.2 7.31 217.38 1.13 214.33 7.31 211.28 8.3 204.46 13.11 209.4 19.9 208.24 16.69 214.33 19.9 220.43"/><polygon class="cls-2" points="44.21 272.76 38.01 282.64 42.64 293.36 31.32 290.51 22.56 298.22 21.77 286.58 11.73 280.63 22.56 276.28 25.11 264.89 32.6 273.85 44.21 272.76"/></g></g></svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@ -13,10 +13,10 @@
<script>
console.log("hey there");
function preload(){
img=loadImage('wheel-of-fortune')
img=loadImage('wheel.svg')
}
function setup() {
createCanvas(windowWidth, windowHeight);
createCanvas(windowWidth/2, windowHeight/2);
button = createButton("spin the wheel!");
button.position(windowWidth/2-250, windowHeight/2);
button.mousePressed(spin);
@ -34,10 +34,10 @@ function card(){
console.log("hey pop up here");
}
function draw() {
background(220);
// background(220);
imageMode(CENTER);
angleMode(DEGREES);
translate (windowWidth/2, windowHeight/2);
translate (windowWidth/4, windowHeight/4);
rotate(currentSpinning);
image (img,0,0,200,200);
currentSpinning = currentSpinning+10;
@ -65,4 +65,8 @@ function draw() {
<br>I will be guiding you through a series of carefully collected questions written by different authors, some well-known and others unknown. You begin the exercise by spinning the Wheel of Fortune you will find at https://issue.xpub.nl/20/wheel.
After a few seconds, a question appears on the screen. Then, you take a photo slide from the deck and try to thankful of an answer to that question by looking at it and the tiny film simultaneously.</p>
</div>
<img class="top-left-corner" src="crystals.svg">
</body>

@ -5,16 +5,15 @@ html {
html::before { /* Add a pseudo-element to the html element */
content: "";
position: fixed;
top: 0;
left: 0;
width: 200vw;
height: 200vh;
top: -50vh;
left: -50vw;
right: 0;
bottom: 0;
z-index: -1; /* Set a negative z-index to move the pseudo-element below the content */
background: url(bg-images/bg1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 200%;
/* Add animation properties */
-webkit-animation: spin 100s linear infinite;
@ -42,6 +41,20 @@ html {
}
}
.top-left-corner{
position: fixed;
top: 0px;
left: 0px;
transform: translate(-50%,-50%);
width: 50vw;
filter: hue-rotate(180deg);
}
main{
text-align: center;
}
h2 {
text-align: center;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 67 KiB

Loading…
Cancel
Save