Sorry For Inconvenience, Site is Under Maintenance. Please Goto HomePage

Styling with CSS3 Fresco Play Hands-On Solutions

Notes Bureau

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

  1. #Miniproject - Java Complete Beginner (Fresco Play Course)
  2. Need hands on for Python Qualis
    1. It is uploaded now you can check.
  3. Error in flying bird code
    1. What error you are getting can you please specify.
  4. Getting error
    Can't find run before running test cases
    1. Have you follow this pre-steps before RUN TESTS
      Step 1: Run->Install
      Step 2: Run->Run
      Step 3: Run Tests
  5. code not working in flying bird
    1. What error you are getting can you please specify. Also you can mail error screenshot to notesbureau2021@gmail.com
  6. Selenium hands on answers
    1. Selenium MCQs as well as Handson are uploaded. Please Check. Or you can click selenium in category tab to get directly.
Any comments and suggestion will be appreciated.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.

Join Telegram Channel

Join Notes Bureau Lets Teach and Learn

Join Telegram Channel
CLOSE ADS
CLOSE ADS