Latest Deals

Styling with CSS3 Fresco Play Hands-On Solutions

Disclaimer: The main motive to provide this solution is to help and support those who are unable to do these courses due to facing some issue and having a little bit lack of knowledge. All of the material and information contained on this website is for knowledge and education purposes only.

Try to understand these solutions and solve your Hands-On problems. (Not encourage copy and paste these solutions)




Course Path: Modern Web Development/WEB BASICS/Styling with CSS3


Please follow the below steps before Run Tests to run your code successfully otherwise you will face some server issues even Hands-On code is correct.

Step 1: Run->Install
Step 2: Run->Run
Step 3: Run Tests

1.CSS3 HandsOn - Morphing Div(30 Min)



File Name: styles.css


#shape {

height: 300px;

width: 300px;

margin: autoautoautoauto;

background: tomato;

border: 1pxsolidblack;

animation: colorchange5sinfinite;

animation-duration: 5s;

animation-timing-function: ease-in-out;

animation-delay: 0;

animation-duration: alternate;

animation-iteration-count: infinite;

animation-fill-mode: none;

animation-play-state: running;

}

@keyframes colorchange5sinfinite {

0% {

background: red;

}

25% {

background: yellow;

}

50% {

background: blue;

border-radius: 50%;

}

75% {

background: green;

}

100% {

background: red;

}

}

html{

width: 100%;

height: 100%;

display: flex;

}

body{

display: flex;

margin: auto auto auto auto;

}



2.CSS3 HandsOn - Scroll Bar(30 Min)




File Name: styles.css


.container::-webkit-scrollbar {

background-color:#fff;

width:13px

}

.container::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);

background-color: #F5F5F5;

border-radius: 10px;

}

.container::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #55;

}

.container {

height: 200px;

width: 300px;

min-width: 150px;

background: #fff;

margin: auto auto auto auto;

overflow-y: scroll;

overflow-x: scroll;

}

.overflow{

min-width: 350px;

min-height:250px;

}

html{

width: 100%;

height: 100%;

display: flex;

}

body{

display: flex;

margin: auto auto auto auto;

font-size:22px;

font-weight:600;

font-family: comic sans ms;

}


3.CSS3 HandsOn - Menu Bar(30 Min)




File Name: styles.css


.menu {

height: 24%;

width: 600px;

margin: auto;

border: 1px solid RGBA(0,0,0,.4);

font-family: calibri, monospace;

}

.button{

width: 150px;

height: 32%;

background: #333;

border:1px solid white;

color: #e7e7e7;

font-weight: 600;

display: flex;

cursor:pointer;

align-items:center;

justify-content:center;

}

.button:focus, .button:hover {

background: blue;

}

.button:focus + .content{

display: block;

}

.content{

background: #f3f3f3;

width: 440px;

height: 23%;

margin-left: 155px;

border: 1px solid #e7e7e7

display: none;

position:absolute;

align-items:center;

justify-content:center;

}

html{

width: 100%;

height: 100%;

display: flex;

}

body{

display: flex;

margin: auto;

}


4.CSS3 HandsOn - Flying Bird




File Name: styles.css


h1 {

font-family: 'comic sans', cursive;

font-size: 25px;

}

body,html{

min-width:100%;

min-height:100%;

display: flex;

align-items: center;

justify-content: center;

}

.container {

min-height: 30rem;

min-width:50rem;

background-size: cover;

background-position: center center;

overflow:hidden;

position:relative;

display:flex;

align-items:center;

justify-content:center;

background-image:url(.*bg.jpg.*);

}

.bird {

background-size: auto 100%;

width: 88px;

height: 125px;

animation-timing-function: steps(10);

animation-iteration-count: infinite;

animation-duration: 1s;

animation-delay: -0.5s;

background-image:url(.*bird-cells.svg.*);

will-change:background-position;

animation-name:fly-cycle;

}

.bird-container {

top: 20%;

left: -10%;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-duration: 15s;

animation-delay: 0;

position:absolute;

will-change:transform;

transform:scale(.*)translateX(.*);

animation-name:fly-right-one;

}

@keyframes fly-cycle {

100% {

background-position: -900px 0;

}

}

@keyframes fly-right-one {

0% {

transform: scale(0.3) translateX(-10vw);

}

10% {

transform: translateY(2vh) translateX(10vw) scale(0.4);

}

20% {

transform: translateY(0vh) translateX(30vw) scale(0.5);

}

30% {

transform: translateY(4vh) translateX(50vw) scale(0.6);

}

40% {

transform: translateY(2vh) translateX(70vw) scale(0.6);

}

50% {

transform: translateY(0vh) translateX(90vw) scale(0.6);

}

60% {

transform: translateY(0vh) translateX(110vw) scale(0.6);

}

100% {

transform: translateY(0vh) translateX(110vw) scale(0.6);

}

}

@keyframes fly-right-two {

0% {

transform: translateY(-2vh) translateX(-10vw) scale(0.5);

}

10% {

transform: translateY(0vh) translateX(10vw) scale(0.4);

}

20% {

transform: translateY(-4vh) translateX(30vw) scale(0.6);

}

30% {

transform: translateY(1vh) translateX(50vw) scale(0.45);

}

40% {

transform: translateY(-2.5vh) translateX(70vw) scale(0.5);

}

50% {

transform: translateY(0vh) translateX(90vw) scale(0.45);

}

51% {

transform: translateY(0vh) translateX(110vw) scale(0.45);

}

100% {

transform: translateY(0vh) translateX(110vw) scale(0.45);

}

}


If you want answers to any of the Fresco Play courses feel free to ask in the comment section, we will surely help.

11 Comments

Any comments and suggestion will be appreciated.

  1. #Miniproject - Java Complete Beginner (Fresco Play Course)

    ReplyDelete
  2. Replies
    1. What error you are getting can you please specify.

      Delete
  3. Getting error
    Can't find run before running test cases

    ReplyDelete
    Replies
    1. Have you follow this pre-steps before RUN TESTS
      Step 1: Run->Install
      Step 2: Run->Run
      Step 3: Run Tests

      Delete
  4. Replies
    1. What error you are getting can you please specify. Also you can mail error screenshot to notesbureau2021@gmail.com

      Delete
  5. Replies
    1. Selenium MCQs as well as Handson are uploaded. Please Check. Or you can click selenium in category tab to get directly.

      Delete

Post a Comment

Any comments and suggestion will be appreciated.

Previous Post Next Post

Join Telegram Channel

Join Notes Bureau Lets Teach and Learn

Join Telegram Channel