kkrishnan90/index.php

## index.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <title>Basic Load Balancer Page</title>
    <style>
        body {
            background-image: url('https://images.unsplash.com/photo-1572451517745-feff8e0b205c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2874&q=80');
            background-color: white;
            color: white;
            font-family: 'Bebas Neue', cursive;
        }

        main {
            margin: 20px auto;
            width: 600px;
        }

        h1 {
            font-size: 71px;
        }

        p {
            font-weight: 900;
            font-size: 20px;
        }

        strong {
            color: greenyellow;
        }

        #cornerimage {
            border-radius: 25px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 200px;
            background-color: white;
            height: 100px;
        }

        @media only screen and (min-width : 850px) {
            main {
                width: 800px;
            }

            h1 {
                font-size: 150px;
            }

            p {
                font-size: 20px;
            }


        }

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

            main {
                width: 300px;
            }

            h1 {
                font-size: 45px;
            }

            p {
                font-size: 20px;
            }
        }
    </style>
</head>

<body>
    <img src="https://www.freecodecamp.org/news/content/images/2020/10/gcp.png" id="cornerimage">

    <main>
        <div class="jumbotron" style="background-color: blueviolet;padding-top:10px;padding-bottom:10px">
            <h2 class="display-4" style="color:white">Load Balancer Demo!</h2>
        </div>
        <div class="flex-container" style="display:flex">
            <div class="card" style="width: 18rem;background-color:red;flex:1;margin-right:20px">
                <img class="card-img-top" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/66f30e60686353.5afebf5d0d809.gif" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">Host machine name: <strong style="color:white"><?php echo '' . gethostname(); ?></strong> </h4>
                    <h4 class="card-title">Compute IP: <strong style="color:white"><?php echo '' . $_SERVER['SERVER_ADDR'] ?></strong> </h4>
                    <h4 class="card-title">Load Balancer IP: <strong style="color:white"><?php echo '' . $_SERVER[HTTP_HOST]; ?></strong> </h4>
                </div>
            </div>

            <div class="card" style="width: 18rem;background-color:red;flex:1">
                <img class="card-img-top" src="https://cdn.dribbble.com/users/1144777/screenshots/7202365/googlecloud.gif" alt="Card image cap">
                <div class="card-body">
                    <h3 class="card-title">Greetings!</h6>
                        <p class="card-text">
                            This page is load balanced. The only difference between the pages served
                            up by these different nodes is that this one is served up by
                            <strong><?php echo '' . gethostname(); ?>
                            </strong> with the IP <strong>
                                <?php
                                echo '' . $_SERVER['SERVER_ADDR'];
                                ?>
                            </strong>
                            served by the load balancer IP
                            <strong><?php echo '' . $_SERVER[HTTP_HOST] ?></strong>
                        </p>

                </div>
            </div>
        </div>

        <!-- <h1>Greetings!</h1>
        <p>This page is load balanced. The only difference between the pages served
            up by these different nodes is that this one is served up by
            <strong><?php echo '' . gethostname(); ?>
            </strong> with the IP <strong>
                <?php
                echo '' . $_SERVER['SERVER_ADDR'];
                ?>
            </strong>
            served by the load balancer IP
            <strong><?php echo '' . $_SERVER[HTTP_HOST] ?></strong>
        </p> -->


    </main>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
	<title>Basic Load Balancer Page</title>
	<style>
	body {
	background-image: url('https://images.unsplash.com/photo-1572451517745-feff8e0b205c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2874&q=80');
	background-color: white;
	color: white;
	font-family: 'Bebas Neue', cursive;
	}

	main {
	margin: 20px auto;
	width: 600px;
	}

	h1 {
	font-size: 71px;
	}

	p {
	font-weight: 900;
	font-size: 20px;
	}

	strong {
	color: greenyellow;
	}

	#cornerimage {
	border-radius: 25px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 200px;
	background-color: white;
	height: 100px;
	}

	@media only screen and (min-width : 850px) {
	main {
	width: 800px;
	}

	h1 {
	font-size: 150px;
	}

	p {
	font-size: 20px;
	}


	}

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

	main {
	width: 300px;
	}

	h1 {
	font-size: 45px;
	}

	p {
	font-size: 20px;
	}
	}
	</style>
	</head>

	<body>
	<img src="https://www.freecodecamp.org/news/content/images/2020/10/gcp.png" id="cornerimage">

	<main>
	<div class="jumbotron" style="background-color: blueviolet;padding-top:10px;padding-bottom:10px">
	<h2 class="display-4" style="color:white">Load Balancer Demo!</h2>
	</div>
	<div class="flex-container" style="display:flex">
	<div class="card" style="width: 18rem;background-color:red;flex:1;margin-right:20px">
	<img class="card-img-top" src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/66f30e60686353.5afebf5d0d809.gif" alt="Card image cap">
	<div class="card-body">
	<h4 class="card-title">Host machine name: <strong style="color:white"><?php echo '' . gethostname(); ?></strong> </h4>
	<h4 class="card-title">Compute IP: <strong style="color:white"><?php echo '' . $_SERVER['SERVER_ADDR'] ?></strong> </h4>
	<h4 class="card-title">Load Balancer IP: <strong style="color:white"><?php echo '' . $_SERVER[HTTP_HOST]; ?></strong> </h4>
	</div>
	</div>

	<div class="card" style="width: 18rem;background-color:red;flex:1">
	<img class="card-img-top" src="https://cdn.dribbble.com/users/1144777/screenshots/7202365/googlecloud.gif" alt="Card image cap">
	<div class="card-body">
	<h3 class="card-title">Greetings!</h6>
	<p class="card-text">
	This page is load balanced. The only difference between the pages served
	up by these different nodes is that this one is served up by
	<strong><?php echo '' . gethostname(); ?>
	</strong> with the IP <strong>
	<?php
	echo '' . $_SERVER['SERVER_ADDR'];
	?>
	</strong>
	served by the load balancer IP
	<strong><?php echo '' . $_SERVER[HTTP_HOST] ?></strong>
	</p>

	</div>
	</div>
	</div>

	<!-- <h1>Greetings!</h1>
	<p>This page is load balanced. The only difference between the pages served
	up by these different nodes is that this one is served up by
	<strong><?php echo '' . gethostname(); ?>
	</strong> with the IP <strong>
	<?php
	echo '' . $_SERVER['SERVER_ADDR'];
	?>
	</strong>
	served by the load balancer IP
	<strong><?php echo '' . $_SERVER[HTTP_HOST] ?></strong>
	</p> -->


	</main>

	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

	</body>

	</html>