How To Create An Ocean With CSS/JavaScript

in today's video we're going to use the power of javascript to remove plastic from a css ocean [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner and in this video we're going to build this amazing css ocean with trash that you see on the right on my screen and to get started i have a few files that i already have downloaded so i'm going to show you how to get those the first is the team c's logo which you can just get straight from their website and the rest are a bunch of different icons we're using to represent trash so we have the shopping bag icon this liquor icon toys icon a smartphone icon headphones icon and a takeout dining icon and these are all from the google fonts material design icons which you can search for on here we're going to close out all of those so we don't need them then also we're going to be using a custom font in our case we're going to be using the open sans font from google fonts we're going to use the bold variant so just scroll down to where you see bold here make sure you select it and then on the right hand side you can just copy all this link code and we're going to paste that into our html page and speaking of we need to create an html page so let's just create an index.html page hit exclamation point and hit enter that'll generate us all this boilerplate code then we can just paste in those link tags that we just copied that's going to give us this custom font now in order to use that font we need a stylesheet so let's create a style sheet here we're going to call it styles.css we're going to link that and then we'll create the actual styles.css file and in here i just want to select everything so we have our everything selector our before selector and we're going to have our after selector and all i want to do is i want to take my font family and i want to set it here to open sans and then i also want to set the fallback to sans serif just like that and instead of typing this all out by hand we can also just copy this directly here and paste it in from google fonts either way is going to work just fine that's going to give us the font our entire application so now if we just put some random text inside of here like that if i save this and open it with live server you'll see in just a second that'll open up and you can see that we now have that custom font showing up instead of the default font which you can see if i just get rid of this line that's going to be the default font it just looks a lot better now the next thing i want to work on is going to be that team sees logos from the top left-hand corner you can see this logo right here which is animating in and out i think it looks really cool so i'm going to show you exactly how to do this animation first thing we need to do is to create our logo we're just going to create a single div with the class of logo and that's it that's all we need to do then instead of our css we can come in here and we can select that logo class and we're going to need a few different things we're first going to need the logo itself then we're going to need to have the before element and we're also going to need to have an after element and i'll explain why in just a second here so we have our before and after now this main logo class is just going to act as a container for both our before and our after elements which are going to be the real meat and potatoes and our before element is going to be what shows us our image as you can see we have this image right here which is our wave image and then after is going to be the thing that goes up and down in that wave animation that's going to make our image show up completely opaque or partially transparent as you can see over on our screen so in order to do that first let's get our container set up how large do we want this to be well of course the first thing we need to do is give it a width and a height so we'll say width here is 5 rem and our height is going to be 5 rem as well let's just go over the page where we're rendering this and give it a background color for now of just red so we can see what we're looking at there we go we have that red square we want to make this a circle so we're going to say border radius is going to be 100 that's going to turn into a circle which is great and then the next thing we need to do is position in the top left corner it's already there a little bit by default but i want to make sure it's always going to be there so i'm going to set the position to absolute i want the top to be 0.5 rem and the left to be 0.5 rem and now it's always going to be stuck in the top right corner even when we remove the margin from our body as you can see when we remove this margin it still stays in the top left corner which is great and you know we could move it further around from the corner if we wanted but i think 0.5 rem puts it right in the top left corner which is where we want it now obviously we don't want a background color so i'm going to remove that and the next thing that i want to do is i want to set overflow to hidden this is super important because when we do our after element here the thing that's going to swipe up and down it's actually larger than our logo so we need to make sure the overflow is hidden and the next section is going to be our actual before element which is just going to be the image so we're going to set our content equal to an empty string and then what i want to do is i want to come in here and i want to say that our background is going to be our image so our say background is going to be a url and that url is going to be slash images slash and i want to get the tmc's logo there we go now if i save you'll notice nothing actually happens and that's because i need to make sure i position this absolutely so it's going to just show up right over top of where our container is with that position absolute in place and if i set the width 100 and the height to 100 percent it's now just going to fill the entire space of that circle but you'll notice the image is quite a bit larger if i get rid of this overflow hidden you can see the image is overflowing this a bit so what i need to do instead is i need to come in here and say background size i want to set that to cover that's just going to make it so that the image is always the exact right size to fit within the container we give it so there we go now our image is set up exactly as we want it to be the next thing i need to do is this after portion so instead of here again we'll just do an empty piece of content and we're going to position it absolutely so it's going to show up in the right spot and here what i want to do is i want to essentially create a rectangle that is twice the size of our real container so width and height are going to be 200 percent then what i want to do is i want to come in here i'm going to say background color i'm gonna set that to red just so we can see what's going on so we'll say red for now you can see this is overflowing our container and if we get rid of that background size cover i'm sorry if we get rid of that overflow hidden and save you can see this rectangle takes up a lot of space it's twice as big as our original container and the next thing i want to do is i essentially want to center it inside of here so i can set the bottom to zero that's going to make it so that the very bottom of our container is at the bottom of our circle and i can set our left to negative 50 percent and that's going to center this red square over the top of our logo section now when i put this overflow hidden back on you can see that our square is essentially right here it's just the bottom is at the bottom of our circle and it's way overflowing the top now to give us that wave animation what i want to do is i want to put a border radius on this so we're going to say border radius of for example 35 if i again get rid of that overflow hidden we can kind of see that our corners now have this large rounded edge to them and in order to give the wave effect if we just rotate this square while moving it upwards it's going to make it look like there are some waves going on so let's create an animation called waves i'm going to make it be a five second long animation with an ease in ease out timing curve so we'll say ease in out make sure i put that colon there and we're also going to make it so that it alternates and that's just going to make it so the animation goes up and then down and up and down we want this to happen an infinite number of times we never want the animation to finish so we're just going to say infinite now let's create the keyframes for that waves animation and by default we want it to start from this position so we don't even need to give it a from we're just going to give it a 2 and we want to say that we're going to change our transform to have a translate y of negative 50 percent so now what's going to happen if i save you're going to notice this moves upwards all the way until it essentially gets the very top of our circle and then it's going to stop and then it's going to move back down and continue like that the last step is to make it so that it rotates and let's just make it rotate 540 degrees now you can see it has that nice rotation and you can kind of start to see the wave animation a bit if i now take this over full hit and add it back in you'll see here that we have that wavy kind of animation look and if i change this background color to white for example you can now see as it's going up it gives us that nice wave filling all the way to the top and then it's going all the way back down to the bottom now in order to give it a partially transparent feel instead of doing weight here we're just going to use hsl let's just say for example 0 and 0 and 100 and make sure this is 0 here that's going to give us a white color and we want to make this partially transparent so we'll say 0.9 for our hsala color now you can see our logo is mostly not able to be seen because that white color is mostly opaque it's 90 opaque but you can still see a little bit of logo through it and then when the white square moves up it's going to make it so the logo is 100 visible so that's how we create this really cool logo animation effect now the next thing i want to work on is going to be the actual background that we have as you can see here with this nice ocean background and this is a beautifully done background that i actually didn't create myself instead i found this on codepen by someone called paulina hetman this is absolutely beautiful and when i was looking for inspiration i found this and i just figured i could never do it better than this so what we're going to do is we're going to use this exact code pen so we're going to come in here we're going to copy the html and we're going to paste it into our page here and we can just minimize that down so we just have our html like that and then we're going to take this css and make sure that you're using the compiled css we're going to copy all of that and we're going to paste it down at the bottom of our css here and if we save and we come back over here you can see that we now have that kind of sunset animation going on and again it's a beautiful animation you'll notice though that our logo disappeared and that's because if we just scroll down here a little ways everything is set to this z index of one so we need to do is find our logo we're going to change the z index here let's just set it to 100 for example so that way it always appears over top and there we go now you will notice our animation stopped working and that's because i accidentally have hsla s down here just get rid of that a and now you can see our animation is working again but this white color just doesn't look very good over top of this nice purpley background so what we want to do is we want to find the purple color of the background in this area now i've already gone ahead and done that for you and essentially it's going to be the color here 290 as our hue we're going to have 31 here as our saturation and our lightness is going to be 67 and now this is going to give it a nicer color that's going to blend much more with the background in that area and if we zoom out here to 100 you can see that purple color really blends in perfectly with the background and it looks like it's just a partially transparent image now the next section that i want to work on is going to be the section that displays the money as you can see right here we have a number that displays the amount of money raised so far and it matches up to the team seized number over here i want to place a container for that number so what we want to do is go over to our index html and inside of here right below our logo we're going to create a div called money and actually let's make this an h1 not a div because that would be much more semantically correct and here we're just going to put an amount for now just a placeholder we'll just say dollar sign 100 20 234 dollars 100 234 dollars is going to be our money and we want to be able to display this in a specific location so back into our style css let's come down here below all of this we're just going to say dot money and for our position i want the bottom to be 50 vh i want to make sure this is position absolute like that and now if i just come in and give it a z index of 100 so it shows up you can see our text is right here showing up on our screen obviously it doesn't look that great so let's change the color here to white so we can see it a little bit better and we're going to give it a text shadow so we're just going to come in here with the text shadow which is going to be 0 0 5 pixels and we want this to be a dark color so we're going to use hsl 0 we're going to do zero percent zero percent and we're going to do 0.5 so it's 50 opacity make sure i put a colon in here and save and now our text looks a little bit better now what we need to do is just move it over to the left so we're going to give it a left of 50v min and we're going to save that and the reason i'm using v min here for the left is because these rocks are sized using v min so no matter what happens when we zoom in and out of our browser these rocks are going to stay the exact same size and in the exact same position so we want to position our text based on that also i want our font size to scale based of our screen size so we're gonna use 6v min here that's just going to make sure no matter what happens with our zooming or the size of our browser our text is always going to be the right size now all that's left inside of here is just to remove the margin that's default onto h1 that's going to push it right down to the bottom of our water which is what this 50vh is doing because our water is always 50 of the screen tall and then lastly i'm going to set an opacity on this to 0.5 this is going to make it blend a little bit better and since the screen changes colors a lot in this animation that color change is going to show up in our text and it's going to look good and one last thing i don't like the fact that you can select the text so we're going to remove the ability to select any text by changing our user select to none that just makes it so users can't select anything at all on our page which for our use case is fine now the fun part is going to be adding in all the trash onto our screen as you can see we have all this trash here the next part is to be able to create a container we can put all of our trash in so inside of our index html if i open this section up we have our landscape you can see we have all this section up here and then if we scroll all the way down we can see this section called front and this front section contains these like reeds and rocks that show up in the foreground we want our trash container to be over top of all the water stuff but behind the front stuff so we're going to create our trash container right here in between these different elements and that's where all of our trash related stuff is going to go so now in our styles here if we just scroll down all the way to here we can say our trash container and we want to make sure that we position this absolutely we're going to make sure that the width is always 100 we wanted to fill the full width of our screen we want the height to be 50 vh just like that and we want the bottom to be zero and the left to be zero because we want to show up from the very bottom left corner to the top right of our water and if we give this a background color of red for example and i save this you're going to notice you can see that showing up right here obviously we don't want this background color of red but it gives us a good example that our trash container is filling the space that we wanted to so we know this is where we want it to be and then we're going to put a bunch of elements with the class of trash inside of here we're going to position all those absolutely so i'm just going to make sure we add that position absolute right here also i'm going to change the opacity here to 0.75 just because i want them to be partially transparent to take effect of the color changing that we have in our animation now the next thing we need to do is add that script tag so let's come all the way up here we need to add a script tag we're going to have a source of script dot js we're going to make sure we defer this so it loads after html now if we save that we can create that file called script.js and inside of here we can run all the javascript we need to make this page work the first thing that i want to do inside this javascript is to get some of the elements we need so for example we need our trash container which is document.query document.queryselector and that's just trash oops trash container and then we also need to get our money element so we'll say money elem is equal to document.queryselector and that is just.money and that's just this element right here that contains the text for our money so right now we can remove this text because we're going to put that in automatically with our javascript and then what we can do is we can create a formatter we're going to call this our currency formatter and we'll just say new intl dot number format we want to format in the us format so we're going to say en us and then what we want to do is we want to change our style to be currency currency make sure it's lower case just like that we're going to change our currency here to us dollars because that's what team sees is tracking it's tracking us dollars as you can see here and then what we need to do is we need to say that our maximum fraction digits are going to be zero essentially we don't want to have any decimal places being tracked now what this currency format allows us to do is pass it a number and it's going to give us a string that's formatted in a currency very similar to what we have right here so what we can do is we can just say a random number let's just say our amount raised is equal to a random number i don't even know what this is it's just a random number what we can do is we can say that our money element dot inner text is going to be equal to our currency formatter and we want to format the amount that we have raised so now if i save this you can see we've raised 1 million 23 423 and that's just this number right here formatted as an actual currency based on this currency formatter now obviously we want to get the actual amount of money raised from the tmc site instead of just using a random number so to do that let's create a simple function call this an async function called set up trash and the reason this is an async function is because we're going to use fetch to be able to get the amount of money raised so we can say counts amount raised is going to be equal to awaiting a fetch call and we're going to fetch to this url right here which is https colonbacksockspatch.tscash.com donationtotal.json essentially i just went through and i scraped their website to figure out where they're getting the data that they're populating right here and they're getting it from this file and this file is just a simple json file so we can say that then is going to be res.json to convert the response to an actual json format and then we can take the data and this json object has one property called count which is the amount of money raised so far then i can just take this money element in our text paste it into here get rid of that placeholder variable and as long as i call set up trash you should see that this number 10823529 if i refresh this page is exactly the same number on the tmc's website actually this one's a little bit higher because someone just donated in between the time that i queried it here and the time that i queried it over here but as you can see now these numbers are exactly the same so now we're displaying this information on the page the next thing we need to do is actually figure out how much more money we have to raise so we know that the total amount of money that i want to raise is 30 million dollars so we can save that in a variable called max money raised and that's going to be equal to 30 million so 3 0 1 2 3 1 2 3 that's 30 million right there then what we can do is we can say how are we going to display this trash obviously we want to take the amount that we've raised and we want to subtract it from the max amount raised to figure out how much there's left to raise but we can't just put you know 20 million pieces of trash on the screen because that's going to destroy anyone's computer trying to render that amount of information so instead of what we're going to do is we're going to use the different icons that we have as you can see we have all these different icons we're going to use each one to represent a different amount of trash so for example the plastic bag may represent a lot of trash while the smartphone may represent a small amount of trash to explain this a little better let's say that we imagine every 1 million dollars that we have left to raise we're gonna render out one plastic bag so if we have you know 10 million dollars raised so far we need 19 million something more dollars so we're going to render 19 plastic bags then for every hundred thousand dollars we're gonna render a new icon and for every ten thousand dollars another icon every thousand hundred ten dollars and so on all the way until we get down to ten dollars because we don't really care about single dollars we're just going to track 10 100 1000 10 000 100 000 and 1 million this may sound a little bit confusing but let me just kind of explain the code and i'll show you what i'm talking about we're going to come down here a little bit we're going to try to figure out how much we have left to raise so we're going to say amount left to raise this is a pretty simple calculation all we want to do is we want to take the max money raised subtract the amount that we have raised so far and i want to make sure that this is never less than zero so we'll say math.max and we're going to say that number or zero and the reason i want to do this is because if our amount raised is like 35 million we're going to do 30 million minus 35 million which is negative 5 million and i don't want to show negative trash i just want to show no trash so it's going to either be 0 or a number greater than 0. then what i want to do is i want to take that amount left to raise and i'm actually going to convert it to a string so we're going to create another converter up here we're going to call this our trash formatter essentially all i want to do is i want to take this number i want to pad it with some zeros in the front if it's too short so for example if we only have five million dollars left to raise i want it to say zero five million and then i just wanna have no other characters and they're no spaces no commas nothing like that so we're going to use another one of these number formatters but here we're just going to pass in whatever it doesn't really matter we'll say en us here again you could put whatever it doesn't really matter for the format because all we care about are the options the minimum integer digit is what we care about we're going to make sure that that is set to eight that way it's always going to be eight digits long and it's going to put zeros in the front we again don't want any fractions we'll say max fraction digits is zero and use grouping we're going to set to false that's going to make sure that there's no commas in our number at all so in order to see what's going on i'm going to console log our amount left to raise as a format from our trash formatter so we're going to say format that number and i'm going to print it out to the screen now if we inspect over here go to our console you can see we get this number 1917552 and if for some reason our amount left to raise is a small number you can see it now pads it with zeros in the front so now we always know we have a string with eight different digits in it and those digits always represent a certain thing so for example we know this digit right here four represents that there are four thousand dollars left to raise and i said we want to display things based on how many thousands we have for example we want to display one bottle for every thousand dollars left so we can display four bottles or we can display two of the next thing we want to display and so on so having these numbers easy to access means we can really easily display the different things we want by just getting the number at the specific position inside of this string let me just close out of that and what i want to do here is i want to set this to a variable so let's say const stringified amount is going to be equal to formatting the amount left to raise make sure i spell const properly and then what i want to do is i want to create a new variable called trash amounts and this variable right here is going to be essentially an object that contains the different types of trash that we have so for example for the extra large size we'll do xxl this is going to be for our largest amount of trash so this is going to be for every 1 million dollars we want to display one of these items so we're going to say our amount here is going to be a number and we're going to figure out this number based on our stringified amount here so if you remember our stringified amount is eight digits long and it's going to go all the way up to the tens of millions so if we want to do one piece of trash for every one million we need to get the first two numbers from this string so for example if we need to raise 19 more million dollars this should say 19 right here is the amount so an easy way to do this we can say parse int and we can just get the first digit from our string of fight amount so we'll say string of fight amount digit 1 and we can add on the second digit which is the one right here so we have index zero index one that's going to give us the first two digits and this is going to convert to a number and let's just console log this trash amount as well as the amount left to raise just so i can show you what's going on and if i inspect the page over here go to the console you can see that this has an amount of 19 and you can see we have 19 million dollars left to raise so that's how we're doing this and if we want to go on to excel for example i'll just copy this down for excel we know this is going to be for every hundred thousand dollars well we know for every hundred thousand dollars that's just our stringified amount digit three which is just index two and now if i save this and i open this up you're gonna see our amount is one and that's because we have one one hundred thousand dollars left to raise what i want to do is essentially do this for every single digit all the way down to the tens place that way we know what type of trash we need to render for each amount so we're going to render 19 pieces of extra extra large trash one piece of extra large trash you know seven large trashes and so on and of course instead of rendering out the trash's different sizes we're going to render different icons to represent that amount so for example the icon we want to use for extra extra large is our bag icon and if we go over our images you can see we have bag.svg inside of here which is going to represent our bag icon for extra large we're going to do an icon and this is going to be our take out icon and again this is an icon we have inside that folder we're going to copy this down a couple more times we just want to get the very next digit and we want to change this to say large here and it's going to be an icon of headphones copy this down again this is going to be for medium small extra small so medium small extra small there we go and this is going to say four five six and a set of headphones here we're gonna have phone here we're gonna have toy car and for extra small we're gonna have a bottle so now if i save this and i inspect our page over to the console you're gonna see here that we have all of our different categories and for example extra extra large is 19. extra-large is one because that's our next digit large is seven since that's our next digit three for medium nine for small and then two for extra small right here which is our final digit because we don't care about this one dollar placement now the next thing i want to do now that we have this object is i want to convert this object to a bunch of icons on the screen so i want to loop through all the values inside this object which is our trash amount this is just going to give us all the actual objects and it doesn't care about this label here the label is just purely for our own purposes it's not actually useful any other way now we need to do is just come in here with our for each loop and for each one of these we're going to get the amount and the icon that's just the things from our object and all we want to do is we essentially want to run a function and this function is going to be a for loop which is going to loop from i equals 0 all the way up to i being less than our amount and we're going to add 1 to i each time essentially for each amount that we want we're going to run the code in this for loop once and this for loop is just going to run the code create trash where we pass in our icon this is a function we're going to create down here alt create trash it's going to take in an icon let's just move that all the way down here to the very bottom of our code so this is a very simple piece of code which is just going to create our icon and add it to our trash container which is going to give us all these pieces of trash as you can see over here so let's start really simple obviously we need to create an image which is going to be document dot create element of an image tag now we have our image and we can just say trash container dot append child of our image and we already know that we want to create the source for our image so we can say image.source and that is going to be equal to slash images slash icon dot svg let's just make sure we're using string interpolation here there we go so that's going to be the source for our image now if we save this immediately you can see all of our images are showing up in that top left corner so we are printing them out to the screen which is great but obviously we need to size them and position them so now what i want to do is i want to figure out the position of this in the water as you can see over here the stuff that's way at the top is much smaller while the stuff way at the bottom is much larger and that's because things that are closer than you appear larger things farther away appear smaller what i'll do is i want to find the top position so we're just going to say const top is equal and i want to get a random number that's going to be between 0 and 50. and that's because 0 is the very bottom of our screen and 50 is the very top of our screen up here since we're based on view height units so let's create that function random number between give it a min and a max and in order to calculate the random number between what we want to do is we want to get a random number that's going to give us a number between 0 and 1. then we're going to multiply it by our maximum minus our minimum plus 1. and the reason we're adding one here is because eventually we're going to do a floor you're going to see here we're going to say math.floor that's going to round us down so this is going to round us down which is why we're adding one because math.random is any number between zero and one but it can never actually be one point nine nine nine nine nine nine is the largest it can be which is where this plus one comes in then we're just going to make sure that we also add our minimum onto the end of this just so if we wanted to start at for example 0 it's going to add 0 so it's not going to change anything well if we want to start at 100 as our minimum this will add 100 so 100 is the lowest number we can get so this is going to give us a random number between 0 and 50 which we're going to use as our top so we can say image.style.top is going to be equal to we want to get our top value here and this is going to be a vh unit so now if we save you can see our images are kind of scattered along this left hand side based on this random position from top to bottom now obviously we want our left position to be random so i'm going to come in here set our left here this is going to be a vw unit and what i want this to be is a random number that's going to be between 0 and 100 so now you can see our things are all scattered out across the screen from left to right and top to bottom and it's completely random every time i save you can see they're in a different location which is great the next thing i want to do is make the size random as well based on this top position here so the ones further away are going to be smaller so we can just say const size is equal to our top divided by five plus one and this is essentially going to make it so that our size is never zero we always want it to be at least one that's where this min comes from and the reason for this is because things at the very top are going to have a top of zero so zero divided by five is zero plus one so their size will be one while the things at the very bottom are going to have a top of 50 so 50 divided by 5 is 10 plus 1 is 11. so it's going to be a very large difference in the actual size now we can do is we can say image.style.width here is equal to and we want to use that size variable we want to use v min for this we want to do the exact same thing for the height we want the height and width to be exactly the same so as you can see the ones way at the top are really small while the ones at the very bottom are very large and that's going to give us that nice depth of field now the last thing i want to do is make them feel a little bit more alive make them feel like they're in the water moving around so we're going to come in here with an image style and we actually want to call set property and that's because we're going to set a custom property called rotation this is the variable we're going to use in our css in a little bit but essentially i want them to be a random number we're going to use random number between negative 30 and 30. so i want to have some rotation between negative 30 degrees and 30 degrees and i'll just make sure i set this as a degree at the end here now it's not actually going to change anything because all we're doing is setting a custom property but now if we go over to our css what we can do is we can actually use that rotation to specify the rotation of our trash i'm actually going to do that in the form of an animation so they rotate back and forth so for this animation let's just call it bob because it's going to be bobbing up and down it's going to be a two second long animation with an ease in out timing and we of course want it to be infinite with an alternating pattern just like we had before so it continually animates forever now let's create those keyframes for that animation of bob i want the from position here to be a transform which is going to have a rotation and this rotation is going to be from our variable which is called rotation so we're going to start at the rotation we specified inside of our javascript right here this rotation here so it's going to be random between negative 30 and positive 30 degrees then in r2 here i want to do the exact same thing but i just want to add a little bit to our rotation so i'm just going to add 10 degrees and to do that we can just use the calc function so come in here with our calc function and that's going to give us a nice little rotation on all of our pieces you will notice however they're actually not rotating that's because we never added the class trash to these so here i just want to make sure we say image.classlist.add want to add that clash of trash in there now as you can see they're giving a little bit of rotation and they all start with a random offset which looks really good the last thing to do to make them really feel like they're in the water is to make it so that we have a translate y we're going to start with 1vh as our translate y so it starts at the top position and then it's going to bob all the way down to a translate y of zero they're going to move up and down and have that nice rotation so they look like they're in the water and actually moving with the waves and that's all it takes to build this project if you're interested in donating to team c's i'll leave a link down in the description for you and if you're interested in learning more about team c's i have a video covering that right over here thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 96,581

Rating: 4.9468942 out of 5

Keywords: webdevsimplified, team seas, teamseas, css ocean, css water, js css project, js project, css project, javascript project, javascript, js, css

Id: AWCCgQMwdik

Length: 30min 4sec (1804 seconds)

Published: Sat Nov 06 2021