Front-End Angular Developer

Monday, January 25, 2021

Simple Example of div tag in html with css

HTML and CSS Code :

<!DOCTYPE html>

<head>

<style>

* {

box-sizing: border-box;

}

body {

margin: 0;

}

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

}

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

}

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: black;

}

/* Create three unequal columns that floats next to each other */

.column {

float: left;

padding: 10px;

}

/* Left and right column */

.column.side {

width: 25%;

}

/* Middle column */

.column.middle {

width: 50%;

}

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

.column.side, .column.middle {

width: 100%;

}

</style>

</head>

<body>

<h1>Header</h1>

<p>Resize the browser window to see the responsive effect.</p>

</div>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

<h2>Main Content</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>

</div>

</body>

</html>

Output :

Friday, January 1, 2021

My Portfolio in HTML and CSS

index.html

<!DOCTYPE html>

<html>

<head>

<title>Simple Webside in CSS & HTML</title>

<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>

<body>

<h1>My Portfolio</h1>

</div>

<nav>

<a href="about.html" target="_blank">About Us</a>

<a href="contact.html" target="_blank">Contact Us</a>

</nav>

</section>

<main>

<h2>Hello</h2>

<h1>This is Pramod</h1>

<h3>Software Developer</h3>

<a href="contact.html" class="btn2" target="_blank">Contact</a>

</div>

</div>

</main>

</header>

<br>

<h3>This site is created by Pramod.</h3>

</div>

</footer>

</body>

</html>

about.html

<!DOCTYPE html>

<html>

<head>

<title>About me</title>

<style>

padding: 4px;

}

.myTechBackground{

padding: 25px 70px;

font-size: large;

text-align: left;

}

</style>

</head>

<body>

<h1>My Portfolio</h1>

</div>

<nav>

<a href="about.html" target="_blank">About Us</a>

<a href="contact.html" target="_blank">Contact Us</a>

</nav>

</section>

</header>

<h1>About Me</h1><br>

<p>I am Pramod. My qualification is BSc Computer Science. I have

also completed Web Developement course from Felix-IT's Pune.

</p><br>

<h3>My Technical Knowledge is:</h3><br>

<hr>

<th>Technology</th>

<th>My knowledge in &percnt;</th>

</tr>

</tr>

</tr>

<td>Bootstrap</td>

</tr>

<td>JavaScript</td>

</tr>

<td>Angular</td>

</tr>

<td>JQuery</td>

</tr>

</tr>

<td>MySQL</td>

</tr>

<td>MongoDB</td>

</tr>

</tr>

</table>

</div>

<br>

<h3>This site is created by Pramod.</h3>

</div>

</footer>

</body>

</html>

style.css

margin: 0;

padding: 0;

}

header{

width: 100%;

height: 500px;

/* background-image: linear-gradient(to left, white 80%, pink 20%) */

}

.main{

width: 100%; height: 20vh; background-color: lightblue;

display: flex; justify-content: space-between;

align-items: center;

/* background-image: linear-gradient(to top, white 90%, pink 10%) */

}

.logo{

width: 40%;

color: orange;

text-shadow: 1px 2px pink;

box-sizing: border-box;

}

.logo h1{

text-transform: uppercase;

animation: justanimate 2s linear infinite;

animation-direction: alternate;

}

@keyframes justanimate{

from{ padding-left: 40px; }

to{ padding-right: 40px; }

}

nav{

width: 60%;

/*background-color: yellow;*/

display: flex;

justify-content: space-around;

}

nav a{

text-decoration: none;

text-transform: uppercase;

color: black;

font-weight: 900;

font-size: 17px;

position: relative;

}

nav a:first-child{

color: #4458dc;

}

nav a:before{

content: " ";

position: absolute;

top: 100%;

left: 0;

width: 0;

height: 2px;

border-bottom: 2px solid #4458dc;

transition: all 0.4s linear;

}

nav a:hover:before{

width: 100%;

}

main{

height: 80vh;

display: flex;

justify-content: space-around;

align-items: center;

}

.image{

border-radius: 100% 0% / 100% 1% ;

background-color: pink;

background: pink;

}

.image img{

max-width: 250px;

height: 250px;

}

.infon{

text-transform: uppercase;

}

.infon h2{

font-size: 40px;

margin-bottom: 20px;

position: relative;

}

.infon h2:after{

content: "";

width: 43px;

height: 3px;

position: absolute;

top: 45%

}

.infon h1{

margin-top: 20px;

font-size: 70px;

margin-bottom: 10px;

}

.infon h2{

margin-bottom: 25px;

font-weight: 500;

word-spacing: 5px;

}

.infon .btn1{

text-decoration: none;

font-weight: 900;

font-size: 15px;

text-align: center;

padding: 12px 25px;

cursor: pointer;

text-transform: uppercase;

border-radius: 5px;

display: inline-block;

margin-right: 50px;

color: pink;

border: double;

box-shadow: 0 10px 30px rgba(118, 85, 225, .3);

}

.infon .btn2{

text-decoration: none;

font-weight: 900;

font-size: 15px;

text-align: center;

padding: 12px 25px;

cursor: pointer;

text-transform: uppercase;

border-radius: 5px;

display: inline-block;

margin-right: 50px;

color: pink;

border: double;

box-shadow: 0 10px 30px rgba(118, 85, 225, .3);

}

footer{

text-align: center;

color: white;

background-color: grey;

width: 100%;

height: 100px;

}

Output:

Sunday, May 10, 2020

Multiplication using java

Program:

package firstjava;

import java.util.Scanner;

public class FirstJava {

public static void main(String[] args) {

// TODO code application logic here

int a, b;

Scanner s1 = new Scanner(System.in);

System.out.println("Enter value a : ");

a = s1.nextInt();

Scanner s2 = new Scanner(System.in);

System.out.println("Enter value b : ");

b = s2.nextInt();

int c = a * b;

System.out.println("Result is : " + c);

}

Output :

run:

Enter value a :

Enter value b :

Result is : 50

BUILD SUCCESSFUL (total time: 11 seconds)

first-angular Project

Output :

I have created "first-angular" name project and in this project have a 3 components named as header, footer and section which inside the header and footer.

This is simple and first project for starting Angular.

Program Description :

I have created 3 components named as header, footer and section which inside the header and footer.

Tuesday, March 17, 2020

Function Using Radio Buttons

CODE:

<!DOCTYPE html>
<html lang="en-US">

<head>
<title>Functions in JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
*{
padding: 10px;
}
</style>
<script>
function fun1() {
var rd1 = document.getElementById("rd1");
var rd2 = document.getElementById("rd2");

if(rd1.checked==true){
alert("The selected is : "+rd1.value);
}
else if(rd2.checked==true)
alert("The selected is : " +rd2.value);
else
alert("Nothing selected");
}
</script>
</head>

<body>

<h1>Select any one from below: </h1>
<input id="rd1" name="radio1" type="radio" value="JavaScript" required></input>
<labeL><strong>JavaScript</strong></label><br />

<input id="rd2" type="radio" name="radio1" value="Bootstrap" required>
<labeL><strong>Bootstrap</strong></label><br />

<button onclick="fun1()" id="btn1">Click Me</button>

</body>
</html>

OUTPUT:

Friday, March 13, 2020

Simple JavaScript Functions

CODE:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Addition</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<style>
.container{
background-color: buttonface;
height: auto;
border-radius: 30px;
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>This is simple Addition.</h1>
<button type="button" onclick="forSum()">Click for Sum</button>
<h2 id="demo1"></h2>
<br />
<h1>The current date is:</h1>
<button type="button" onclick="document.getElementById('demo2').innerHTML=Date()">Click for Date</button>
<h2 id="demo2"></h2>
</div>
<script>
function forSum() {
var a = 5, b = 4;
var sum = a + b;
document.getElementById('demo1').innerHTML = "Sum is : " + sum;
}
</script>
</body>
</html>

OUTPUT:

Thursday, March 5, 2020

Buttons in Bootstrap

CODE:

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Buttons in Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button><br /><br />

<button type="button" class="btn btn-primary btn-lg btn-block">Block level Primary button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level secondary button</button>
<br /><br />
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Secondary Link</a>

</div>

</body>

</html>

OUTPUT:

Tuesday, March 3, 2020

Container Class in Bootstrap

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Container class in bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<style>
.container{
background-color: yellow;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.</div>
<div class="col-sm-2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
</div>
</body>
</html>

OUTPUT:

Monday, March 2, 2020

JavaScript Certificate SoloLearn

Thursday, February 27, 2020

Table in HTML with CSS

CODE:

<!DOCTYPE html>
<html>
<head>
<title>Simple table</title>
<style>
.table1{
outline-width: 2px; outline-style: double;
outline-color:rgb(255, 47, 161);}
th{padding: 15px; background-color: gray;}
td{padding: 10px;}
.table1, th, td{border: 1px solid red;
border-collapse: collapse;}
tr :hover{background-color: yellow;
border: 2px solid green;font-size: 20px;
color: red;border-radius: 10px 20px;}
</style>
</head>
<body>
<table class="table1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Mobile No</th>
<th>Course</th>
</tr>
<tr>
<td>001</td>
<td>John</td>
<td>john@yahoo.com</td>
<td>424323</td>
<td>Java</td>
</tr>
<tr>
<td>002</td>
<td>Rohan</td>
<td>rohann@yahoo.com</td>
<td>15966</td>
<td>Android</td>
</tr>
<tr>
<td>003</td>
<td>Sandy</td>
<td>sandy@yahoo.com</td>
<td>424323</td>
<td>Webside Developer</td>
</tr>
<tr>
<td>004</td>
<td>Shawn</td>
<td>shawn@gmail.com</td>
<td>424323</td>
<td>iOS</td>
</tr>
</table>
</body>
</html>

OUTPUT:

Simple Tooltip use

CODE:

<!DOCTYPE html>
<html>
<head>
<title>Simple tooltip task</title>
<style>
div{border-bottom: 1px dotted red;
width: 230px; height: 50px;padding: 20px;
display: inline-block; position: absolute;}

div span{ visibility: hidden; width: 120;
background-color: red;color: white;
text-align: center; z-index: 1;}

div:hover span{visibility: visible;}
</style>
</head>
<body>
<div>Hover over me.<br/>
<span>This is simple division tag in html.</span>
</div>
</body>

</html>

OUTPUT: