Home
Fresco Play
HackerRank

Styling with CSS3 Fresco Play HackerRank Handson Solution

Styling with CSS3 Fresco Play Hacker Rank Hands-on Solution, CSS3 HandsOn - Morphing Div, Scroll Bar, Menu Bar, Styling with CSS3 HandsOn Flying Bird.
D Shwari
Styling with CSS3 Fresco Play HackerRank Handson Solution - www.pdfcup.com

LAB 1 : CSS3 HandsOn - Morphing Div

Solution: CSS3 HandsOn - Morphing Div

Solution: CSS3 HandsOn - Morphing Div

<-- Only needs to work on .CSS File -->
<html>
<head>
  <link rel="stylesheet"
type="text/css" href="styles.css">
</head>
<body>
 
<div id="shape">
  </div>
</body>
</html>



/*
Task: Create a Morphing div as shown in above image.
A div starts like a square and morphs shape to become a circle while changing colors.
(1). Use CSS animations, name the animation as 'colorchange' and with a duration of 5 seconds and the animation should run infinitely.
(2). Split the animation intervals into 5.
(3). The order of change in color is as follows:
    Red,Yellow, Blue, Green, and again Red.
*/

#shape {
    height: 300px;
    width: 300px;
    background: tomato;
    margin: auto auto auto auto;
    border: 1px solid black;
    animation:   colorchange5sinfinite;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@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;
}

/* Only needs to work on .CSS File */
var fs = require('fs');

describe("Filter function", () => {
  let file;
  beforeAll(() => {
    file = fs.readFileSync('styles.css').toString();
    file = file.replace(/\r?\n|\r| /g, "")
    console.log(file);
  })
  test("check for animation", () => {
    expect(file).toContain('animation:colorchange5sinfinite;');
  });

  test("check 0% and 25% animation", () => {
    expect(file).toContain('0%{background:red;}25%{background:yellow;}');
  });

  test("check 75% and 100% animation", () => {
    expect(file).toContain('75%{background:green;}100%{background:red;}');
  });

  test("check for border radius", () => {
    expect(file).toContain('border-radius:');
  });
});

LAB 2 : CSS3 HandsOn - Scroll Bar

Solution: CSS3 HandsOn - Scroll Bar

Solution: CSS3 HandsOn - Scroll Bar

<-- Only needs to work on .CSS File -->

<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="overflow">
      “Cowards die many times before their deaths; 
The valiant never taste of death but once. 
Of all the wonders that I yet have heard, 
It seems to me most strange that men should fear; 
Seeing that death, a necessary end, 
Will come when it will come.” 
― William Shakespeare, Julius Caesar
    </div>
  </div>
</body>
</html>


.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;
}

}

LAB 3 : CSS3 HandsOn - Menu Bar

Solution: CSS3 HandsOn - Menu Bar

Solution: CSS3 HandsOn - Menu Bar

<-- Only needs to work on .CSS File -->
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="menu">
  		<div tabindex="0" class="button">Home</div>
  		<div class="content">
  			“A house is made of bricks and beams. A home is made of hopes and dreams. Home is where our story begins…”
  		</div>
  		<div tabindex="0" class="button">Contact</div>
  		<div class="content">
  			“Contacts added but not one is worthy enough to remain as their priority.”
  		</div>
  		<div tabindex="0" class="button">About</div>
  		<div class="content">
  			“To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment.”
  		</div>
  	</div>
</body>
</html>

.menu {
    height: 24%;
    width: 600px;
    margin: auto;
    border: 1px solid RGBA(0, 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 + .content {
    display: block;
  }
  
  .button:focus,
  .button:hover {
    background: blue;
  }
  .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;
  }
  


/* Only needs to work on .CSS File */
var fs = require("fs");

describe("Filter function", () => {
  let file;
  beforeAll(() => {
    file = fs.readFileSync("styles.css").toString();
    file = file.replace(/\r?\n|\r| /g, "");
  });
  test("button's cursor should be pointer", () => {
    expect(file).toMatch(/\.button{*[^}]*cursor:pointer;/);
  });

  test("button's desplay should be flex", () => {
    expect(file).toMatch(/\.button{*[^}]*display:flex;/);
  });

  test("button's should be align center", () => {
    expect(file).toMatch(/\.button{*[^}]*align-items:center;/);
  });

  test("button's content should be justify center", () => {
    expect(file).toMatch(/\.button{*[^}]*justify-content:center;/);
  });

  test("content should display none", () => {
    expect(file).toMatch(/\.content{*[^}]*display:none;/);
  });

  test("content position should be absolute", () => {
    expect(file).toMatch(/\.content{*[^}]*position:absolute;/);
  });

  test("content items should be align center", () => {
    expect(file).toMatch(/\.content{*[^}]*align-items:center;/);
  });

  test("content should be justify center", () => {
    expect(file).toMatch(/\.content{*[^}]*justify-content:center;/);
  });

  test("button hover and focus should exists", () => {
    expect(file).toMatch(/\.button:focus,\.button:hover{*[^}]*/);
  });

  test("button focus and content should exists", () => {
    expect(file).toMatch(/\.button:focus\+\.content{*[^}]*/);
  });
});

LAB 4 : CSS3 HandsOn - Flying Bird

Solution: CSS3 HandsOn - Flying Bird

Solution: CSS3 HandsOn - Flying Bird

<-- Only needs to work on .CSS File -->
<!DOCTYPE html>
<html>
<head>
	<title>flying birds</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div class="container">	
		<h2>“Soft feathers cannot make a cruel bird kind” </h2>
		<div class="bird-container">
			<div class="bird"></div>
		</div>
	</div>
</body>
</html>

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);  
  }
  }

<-- Only needs to work on .CSS File -->

About the author

D Shwari
I'm a professor at National University's Department of Computer Science. My main streams are data science and data analysis. Project management for many computer science-related sectors. Next working project on Al with deep Learning.....

Post a Comment