StringManolo/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head prefix="og:http://ogp.me/ns#">
  <meta charset="utf-8">
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <title>Index.html</title>
  <meta property="og:type" content="website">
  <meta name="theme-color" content="#ffffff">
  <style>
    body {
      margin: 0;
    }

    #background {
      background-image: url("./bedroom.jpeg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height: 100vh;
      width: 100vw;
    }

    #rooms {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
      height: 100vh;
    }

    img {
      height: 200px;
      border-radius: 30px;
    }

    #bedroomExpanded, #kitchenExpanded {
      display: none;
      background-color: #fff;
      padding: 20px;
      position: absolute;
      margin-right: 160px;
      margin-bottom: 448px;
      border-radius: 30px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }


    .inverseBorderR, .inverseBorderL {
      display: none;
      height: 50px;
      width: 200px;
      background-color: #fff;
      border: none;
      position: absolute;
      margin-right: 160px;
      margin-bottom: 100px;
    }

    .inverseBorderR {
      width: 30px;
      margin-right: 140px;
      mask:
        radial-gradient(25px 25px at center right, transparent 80%, black 0);
      -webkit-mask:
        radial-gradient(25px 25px at center right, transparent 80%, black 0);

    }

    .inverseBorderL {
      width: 30px;
      margin-right: 180px;
      mask:
        radial-gradient(25px 25px at center left, transparent 80%, black 0);
      -webkit-mask:
        radial-gradient(25px 25px at center left, transparent 80%, black 0);
    }

    #bedroomLink, #kitchenLink {
      background-color: #555;
      color: #fff;
      opacity: 0.5;
      padding: 20px 40px;
      border-radius: 50px;
    }


    #bedroomLink:hover, #kitchenLink:hover {
      opacity: 1;
      background-color: #fff;
      color: #000;
    }

    #bedroomLink:hover ~ #bedroomExpanded {
      display: flex;
    }

    #bedroomLink:hover ~ .inverseBorderR, #bedroomLink:hover ~ .inverseBorderL {
      display: block;
    }

    #kitchenLink:hover ~ #kitchenExpanded {
      display: flex;
    }
  </style>
</head>

<body>
  <main id="background">
    <div id="rooms">

      <a id="bedroomLink">Bedroom</a>
      <div id="bedroomExpanded">
        <img src="./bedroom.jpeg">
        <h2>Bedroom</h2>
      </div>
      <div class="inverseBorderR"></div>
      <div class="inverseBorderL"></div>


      <a id="kitchenLink">Kitchen</a>
      <div id="kitchenExpanded">
        <img src="./bedroom.jpeg">
        <h2>Kitchen</h2>
      </div>
    </div>
  </main>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head prefix="og:http://ogp.me/ns#">
	<meta charset="utf-8">
	<link rel="icon" href="data:;base64,iVBORw0KGgo=">
	<title>Index.html</title>
	<meta property="og:type" content="website">
	<meta name="theme-color" content="#ffffff">
	<style>
	body {
	margin: 0;
	}

	#background {
	background-image: url("./bedroom.jpeg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100vh;
	width: 100vw;
	}

	#rooms {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
	height: 100vh;
	}

	img {
	height: 200px;
	border-radius: 30px;
	}

	#bedroomExpanded, #kitchenExpanded {
	display: none;
	background-color: #fff;
	padding: 20px;
	position: absolute;
	margin-right: 160px;
	margin-bottom: 448px;
	border-radius: 30px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}


	.inverseBorderR, .inverseBorderL {
	display: none;
	height: 50px;
	width: 200px;
	background-color: #fff;
	border: none;
	position: absolute;
	margin-right: 160px;
	margin-bottom: 100px;
	}

	.inverseBorderR {
	width: 30px;
	margin-right: 140px;
	mask:
	radial-gradient(25px 25px at center right, transparent 80%, black 0);
	-webkit-mask:
	radial-gradient(25px 25px at center right, transparent 80%, black 0);

	}

	.inverseBorderL {
	width: 30px;
	margin-right: 180px;
	mask:
	radial-gradient(25px 25px at center left, transparent 80%, black 0);
	-webkit-mask:
	radial-gradient(25px 25px at center left, transparent 80%, black 0);
	}

	#bedroomLink, #kitchenLink {
	background-color: #555;
	color: #fff;
	opacity: 0.5;
	padding: 20px 40px;
	border-radius: 50px;
	}


	#bedroomLink:hover, #kitchenLink:hover {
	opacity: 1;
	background-color: #fff;
	color: #000;
	}

	#bedroomLink:hover ~ #bedroomExpanded {
	display: flex;
	}

	#bedroomLink:hover ~ .inverseBorderR, #bedroomLink:hover ~ .inverseBorderL {
	display: block;
	}

	#kitchenLink:hover ~ #kitchenExpanded {
	display: flex;
	}
	</style>
	</head>

	<body>
	<main id="background">
	<div id="rooms">

	<a id="bedroomLink">Bedroom</a>
	<div id="bedroomExpanded">
	<img src="./bedroom.jpeg">
	<h2>Bedroom</h2>
	</div>
	<div class="inverseBorderR"></div>
	<div class="inverseBorderL"></div>


	<a id="kitchenLink">Kitchen</a>
	<div id="kitchenExpanded">
	<img src="./bedroom.jpeg">
	<h2>Kitchen</h2>
	</div>
	</div>
	</main>
	</body>
	</html>