Untitled

<!DOCTYPE html>
<html>

<head>
	<link href="https://fonts.googleapis.com/css?family=Gaegu" rel="stylesheet">
    <style>
		a{cursor:pointer}
		body{
			font-family:Arial;
			/*background-color:blue;*/
		}
		pre{font-family:Arial;}
        .cheap {
            display: none;
        }

        .moderate {
            display: none;
        }

        #divid {
            padding-top: 10px;
            padding-right: 30px;
            padding-bottom: 50px;
            padding-left: 80px;
        }

        /*.image {
            height: 200px;
            width: 600px;
        }*/

        .eachclass {
            display: inline-block;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
        }

        #divid1 {
            padding-top: 10px;
            padding-right: 30px;
            padding-bottom: 50px;
            padding-left: 80px;
        }

        /*.image1 {
            height: 200px;
            width: 600px;
        }*/

        .food {
            display: inline-block;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
        }

        h2,
        a,
        h1,
        p,
        #link {
            text-align: center
        }

        .store_links {
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            display: inline-block;
        }
		/*#divid2{display:flex;}*/
		.align{width:20%}
		.a_something{display:inline-block;}
		.a_somethings{display:inline-block;}
		#bus1
		{
			display:block;
			margin:0 auto;
		}
		/*#store
		{
			display:block;
			margin:0 auto;
		}
		#stores
		{
			display:block;
			margin:0 auto;
		}*/

		/*a_somethings
		{
			padding-top: 100px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
		}*/
		.a_somethings,aligns, align3 {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		.a_something,align,alignss {
			width: 35%;
			margin: 2%;
		}
		.shop {
			display: inline-block;
			margin:1% 10%
		}
		.shop-links {
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		}
    </style>

	<style id="styles"></style>
</head>

<body>
    <h1>Suggestions Menu</h1>
	<div style="background-color:Red">
    <h2>Housing</h2>
    <p>Get some cheap apartments here that fits within your budget. Look at the apartments and find what's right for you</p>
    <p class="cheap">All these apartments are less than 750 dollars</p>
    <p class="moderate">All these apartments are less than 900 dollars</p>
	<div class="a_somethings">
		<div class="a_something">
			<img src="RA_1.jpg" width="100%" height="100%"/>
		</div>
		<div class="a_something">
			<img src="RA_2.jpg" width="100%" height="100%"/>
		</div>
		<div class="a_something">
			<img src="PA_1.jpg" width="100%" height="100%"/>
		</div>
		<div class="a_something">
			<img src="PR.jpg" width="100%" height="100%"/>
		</div>
	</div>
	</div>
	<div style="background-color:brown">
    <div id="divid">
	<div class="cheap aligns" id="divid2">
		<pre>

		<div class="align">
		Studio-$430

		1 Bed and 1 Bath-$600-$650

		Transforming Housing I
		6800 S. Normal Avenue, Chicago, IL 60621

		</div>

		<div class="align">

		Studio-$550-$575

		1 Bedroom and 1 Bathroom-$625-$675

		6126-28 S. Woodlawn, Chicago, IL 60637

		</div>

		<div class="align">
		Studio-$550-$600

		1 Bedroom and 1 Bathroom-$650-$725

		1236 E. 46th Street, Chicago, IL 60653

		</div>

		<a target="_blank" href="https://www.rentcafe.com/cheap-apartments-for-rent/us/il/chicago/?gclid=CjwKCAjws8vaBRBFEiwAQfhs-A0qRkGzzrbumvuuTqdE-7n65yQ7ycC9ztScEm7Bfqx3UkQ5lj6oJRoCVQQQAvD_BwE">Find Apartments Here!</a>
		</pre>
	</div>
	</div>
     <div class="moderate">
		<pre>
		2 Beds and 2 Baths-$700-$850

		3 Beds and 1 Bath-$875-$900

		KRMB Limited Partnership
		4001-4013 South Ellis, Chicago, IL 60653

		Studio-$550-$575

		2 Beds and 2 Baths-$750-$800

		3 Beds and 1 Bath-$950-$1100

		Ingleside Buildings
		4737-9 & 4746-8 S. Ingleside, Chicago, IL 60615

		2 Bedrooms and 1 Bathroom-$825-$840

		8000 S Paulina, Chicago, IL 60620

		<a target="_blank" href="https://www.rentcafe.com/cheap-apartments-for-rent/us/il/chicago/?gclid=CjwKCAjws8vaBRBFEiwAQfhs-A0qRkGzzrbumvuuTqdE-7n65yQ7ycC9ztScEm7Bfqx3UkQ5lj6oJRoCVQQQAvD_BwE">Find Apartments Here!</a>
		</pre>
	</div>


    <div id="link">

    </div>
	<div style="background-color:blue">
    <h2>Food</h2>
    <div id="divid1 align3">
        <div class="food">
            <p>1. BIG & little's</p>
            <img src="CR_1.png" class="image1 alignss" width="50%" height="50%"/>
        </div>
        <div class="food">
            <p>2. Birrieria Zaragoza</p>
            <img src="CR_2.png" class="image1 alignss" width="100%" height="100%" />
        </div>
        <div class="food">
            <p>3. Calumet Fisheries</p>
            <img src="CR_3.png" class="image1 alignss" width="100%" height="100%"/>
        </div>
        <div>
            <p>4. Stanley's Fresh Fruits and Vegetables</p>
            <img src="GS_1.png" class="image1 alignss" width="25%" height="25%"/>
        </div>
    </div>
	</div>
	<div style="background-color:green">
    <h2>Transportation</h2>
	<img src="cbus.jpg" width="30%" height="30%" id="bus1"/>
    <p>Some riders, such as students and people with disabilities, qualify for reduced fares. There are also some free ride programs for those who qualify.</p>
    <a target="_blank" href="https://www.transitchicago.com/reduced-fare-programs/" class="cheap"> Chicago Transit Authority</a>
	</div>
	<div style="background-color:yellow">
    <h2>Clothing</h2>
    <p>Different incomes mean different types of stores will fit within your budget. Click on the link to see what is right for you.</p>
	<center>
	<img class="cheap" src="TJ.jpg" id="store" width="40%" height="40%"/>
	<img class="moderate" src="Macy's.jpg" width="40%" height="40%" id="stores"/>

	<div class="shop-links">
		<div class="shop">
			<a target="_blank" href="https://www.buffaloexchange.com/locations/chicago/wicker-park/" class="cheap ">Bolton's</a>
		</div>
		<div class="shop">
			<a target="_blank" href="https://tjmaxx.tjx.com/store/index.jsp" class="cheap ">TJ Max</a>
		</div>
		<div class="shop">
			<a target="_blank" href="https://www.shopakira.com/" class="cheap ">AKIRA</a>
		</div>
		<div class="shop">
			<a target="_blank" href="https://l.macys.com/chicago-il" class="moderate ">Macy's</a>
		<div class="shop">
			<a target="_blank" href="https://shop.nordstrom.com/st/nordstrom-michigan-avenue" class="moderate ">Nordstrom Michigan Avenue</a>
		</div>
	</div>
	</center>
	</div>


	<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@14/dist/smooth-scroll.polyfills.min.js"></script>
    <script>
		/*window.sr = ScrollReveal();
		sr.reveal(".section-header", {
				duration: 700,
				orgin: "left",
				delay: 50,
				opacity: 0.6,
				viewFactor: 0.4,
				distance: '500px',*/
        var style = function(input) {
            document.getElementById('styles').innerHTML = input;
        }
        var salary=document.getElementById("textbox").value;
        if (salary < 4000)
		{
            style('.cheap { display: block;} .moderate { display: none;}');

        }
		else
		{
           style('.moderate { display: block;} .cheap { display: none;}');

        }

    </script>
</body>

</html>