CodemySite_Web development

GitHub Step1: html DOM card>img        >card_body>card_title                           >card_text Step2: css  everything in the body position centered. card:relative ::before is the white line absolutly at the right ::after is the white line absolutly at the bottom card_image is relative to card and the image cover inside. card_title::before and ::after is relative to card_title ::before is the yellow background of the title ::after is the yellow block outside of the card I learned from  Kevin Powell   video here

Css3 animation with png pictures. GitHub  step1: bg is the background which contains a static image. move1 and move2 are  png clouds. step2: Make sure set the size of each to 100%. Each animation is linear and infinite with different time. learned from here  website

Delighter.js is a tiny javascript library. Add CSS animations to delight users as they scroll down.  by  Q42 . It was written by  Martin Kool . The plugin GitHub      The demo GitHub   Demo online In this demo,I combined deligters.js and bigpicture.js. More information about bigpicture.js check here Step1: insert javascript library in body Step2: DOM contains a few sections. First section below: To apply delighters.js /  we need add data-delighter attribute in tag Second section below which applied bigpicture.js : bigpicture.js needs "data-bp" attribute. and js below Third section: This is a list section. 4th section: 5th section : a footer Step3: css style check it out in the github Abou delighter.js default setting: options = {    attribute:  'data-delighter' ,    classNames: [ 'delighter' , 'started' , 'ended' ],    start:  ...

GitHub As you known, the way to add linear gradient is linear-gradient().Here I got three thoughts about changing the colors: pick a color, random two colors and auto play random function and stop when click the button. First,link the stylesheet in head and script file in body. HTML html Assign each button an id name. Two color picker is input typed color. CSS css The background of body is linear gradient with red and yellow defaut setting. JS js1  Select all the elements would be involved. js2  setGradient() ---change two picked color value in style background,and show the html in the h3 tag.   randomColor() ---get a random color. '#' + (Math.random() * 0xFFFFFF << 0).toString(16) From I searched about this, Math.random() will get a random numbe [0,1). << equal to Math.floor(). toString(16) transfer the integrity to string like "123456789ABCDEF". randomGradient() ---give the random color to color1 and colo...

I've beening learning JavaScript lately,acturally for a long time,still a mystery for me. I'm attending the class at Udemy,and this is the small project with my customed styles. GitHub HTML Remember to link the stylesheet in head and js file in body html  With some title at the top of the list, the typing section and display section are interactive. CSS css1 Import the font "Lobster" from google fonts. The background is a picture which looks more fancy. The outside of the "Shopping list" is a container which is a box with fixed width and centered of the screen. I gave the  title a text-shadow,looks nice,right?😉 css2 The typing section is just normal styles with hovering changes. css3 Each list has a background line and every list content is centered even though the browser resizes. The reason I add the span tag inside the li is that I want to add the background to the list content with::before. With pseudo ::before a...

The demo  learned from Kevin Powell. Title html css The decorate line will keep around the title when the browser resizes. position:absolute  keep relative position to the title. .title::before  the background of the title layer down the h1. .title::after   the line around the title which should be 100 view width of screen and centered [left:50%;transform:translateX(-50%);]. hover image html The card contains an image and some description in the card-text. css1  The container aligned in the center with flex. ::before and ::after relative to .card. ::before ---the top and bottom line scale in the X axis with animation. ::after---the left and right line scale in the Y axis with animation. css2 When hovered in the card,the opacity of images change,and the card-text shows up in the middle of the card. See the Pen pseudo ::before ::after title & hover demo by Yifang Di ( @diyifang ) on CodePen .