CK642509/index.html Secret

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

<head>
  <meta charset="UTF-8">
  <title>Ironman</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0px;
      padding: 0px;
    }

    .clearfix {
      clear: both;
    }

    .container {
      max-width: 1170px;
      margin: 0 auto;
    }

    /* Navigation */

    #topbar {
      background-color: #274358;
      width: 100%;
      position: fixed;
    }


    #nav-logo {
      float: left;
    }

    section,
    #menu a {
      /*   border: 2px solid red; */
    }

    #menu {
      float: right;
    }

    #menu a {
      color: white;
      display: inline-block;
      padding: 10px;
    }

    #menu a:hover {
      background-color: #1f1f7a;
    }

    #banner {
      background-image: url('https://picsum.photos/1170/450?image=1067');
      height: 460px;
      background-size: cover;
      background-position: center;
    }

    /* Main Content */

    main {
      padding-top: 40px;
    }

    .city {
      margin: 30px;
      /*   background-color: blue; */
    }

    .city:hover {
      background-color: #eee;
    }

    #cities {
      /*   background-color: yellow; */
      display: grid;
      grid-template-columns: 33.3% 33.3% 33.3%
    }

    h1 {
      text-align: center;
    }

    .city-photo {
      display: block;
      /* it only works with block elements! */
      margin: 0 auto;
      width: 100%;
    }
  </style>
</head>

<body>
  <header>
    <nav id="topbar">
      <div class="container">
        <img id="nav-logo" src="https://picsum.photos/80/40?image=964" alt="My Logo">
        <nav id="menu">
          <a href="#">Profile</a>
          <a href="#">Portfolio</a>
          <a href="#">Contact Me</a>
        </nav>
        <div class="clearfix"></div>
      </div>
    </nav>
  </header>
  <main>
    <div id="banner"></div>
    <div class="container">
      <section id="cities">
        <section class="city">
          <img class="city-photo" src="https://picsum.photos/300/200?image=953" alt="Barcelona">
          <h1>Barcelona</h1>
          <p>Barcelona is my #1 favorite city in the world. What I love about Barcelona:</p>
          <ul>
            <li>Great food</li>
            <li>24-hour public transport</li>
          </ul>
        </section>
        <section class="city">
          <img class="city-photo" src="https://picsum.photos/300/200?image=952" alt="Paris">
          <h1>Paris</h1>
          <p>There is so much more than the Eiffel Tower here. Strolling from coffee shop to patisserie will keep you
            entertained for days. Then there's still the museums and amazing architecture to enjoy!</p>
        </section>
        <section class="city">
          <img class="city-photo" src="https://picsum.photos/300/200?image=1047" alt="">
          <h1>Washington</h1>
          <p>Aside from the Capitol building and all the political and historical attractions, Washington has a charm
            all its own. Strolling through the back streets will open a whole new world that you can't even imagine.</p>
        </section>
      </section>
    </div>
  </main>
</body>

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

	<head>
	<meta charset="UTF-8">
	<title>Ironman</title>
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	margin: 0px;
	padding: 0px;
	}

	.clearfix {
	clear: both;
	}

	.container {
	max-width: 1170px;
	margin: 0 auto;
	}

	/* Navigation */

	#topbar {
	background-color: #274358;
	width: 100%;
	position: fixed;
	}


	#nav-logo {
	float: left;
	}

	section,
	#menu a {
	/* border: 2px solid red; */
	}

	#menu {
	float: right;
	}

	#menu a {
	color: white;
	display: inline-block;
	padding: 10px;
	}

	#menu a:hover {
	background-color: #1f1f7a;
	}

	#banner {
	background-image: url('https://picsum.photos/1170/450?image=1067');
	height: 460px;
	background-size: cover;
	background-position: center;
	}

	/* Main Content */

	main {
	padding-top: 40px;
	}

	.city {
	margin: 30px;
	/* background-color: blue; */
	}

	.city:hover {
	background-color: #eee;
	}

	#cities {
	/* background-color: yellow; */
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%
	}

	h1 {
	text-align: center;
	}

	.city-photo {
	display: block;
	/* it only works with block elements! */
	margin: 0 auto;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<header>
	<nav id="topbar">
	<div class="container">
	<img id="nav-logo" src="https://picsum.photos/80/40?image=964" alt="My Logo">
	<nav id="menu">
	<a href="#">Profile</a>
	<a href="#">Portfolio</a>
	<a href="#">Contact Me</a>
	</nav>
	<div class="clearfix"></div>
	</div>
	</nav>
	</header>
	<main>
	<div id="banner"></div>
	<div class="container">
	<section id="cities">
	<section class="city">
	<img class="city-photo" src="https://picsum.photos/300/200?image=953" alt="Barcelona">
	<h1>Barcelona</h1>
	<p>Barcelona is my #1 favorite city in the world. What I love about Barcelona:</p>
	<ul>
	<li>Great food</li>
	<li>24-hour public transport</li>
	</ul>
	</section>
	<section class="city">
	<img class="city-photo" src="https://picsum.photos/300/200?image=952" alt="Paris">
	<h1>Paris</h1>
	<p>There is so much more than the Eiffel Tower here. Strolling from coffee shop to patisserie will keep you
	entertained for days. Then there's still the museums and amazing architecture to enjoy!</p>
	</section>
	<section class="city">
	<img class="city-photo" src="https://picsum.photos/300/200?image=1047" alt="">
	<h1>Washington</h1>
	<p>Aside from the Capitol building and all the political and historical attractions, Washington has a charm
	all its own. Strolling through the back streets will open a whole new world that you can't even imagine.</p>
	</section>
	</section>
	</div>
	</main>
	</body>

	</html>