Styling with CSS3 Fresco Play Hands-On Solutions

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;

}

• List of Fresco Play Courses without Hands-On | Fresco Play
• HMTL5 Semantics Elements MCQs Answers | Fresco Play
• HMTL5 Semantics Elements Hands-On Solutions | Fresco Play
• Styling with CSS3 Hands-On Solutions | Fresco Play
• Blockchain Intermedio MCQs Answers | Fresco Play
• Blockchain - Potentes Nexus MCQs Answers | Fresco Play
• Azure Essentials MCQs Answers | Fresco Play
• AWS Essentials MCQs Answers | Fresco Play
• Drupal - A Content Vault Fresco Play MCQs Answers

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.