The task is to build How to play webpage as given in Design File

1.css

@@ -0,0 +1,214 @@
+@import url('https://fonts.googleapis.com/css2?family=MontserratMontserrat:wght@100&display=swap');
+
+body{
+    background: url(images/BG.png) no-repeat center center fixed; 
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+*{
+    box-sizing: border-box;
+}
+
+.navbar{    
+    display: flex;
+    justify-content: space-between;
+    flex-flow:row nowrap;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    margin: 0.5rem auto;
+    padding: 0.5rem 1rem;
+} 
+  a{
+    display: inline-block;
+    word-break: keep-all;
+    text-decoration: none;
+    color: #fff;
+    font-family: "Montserrat";
+    border-radius: 29px;
+    border: solid 1px rgb(53, 81, 93) ;
+    background: rgb(17, 52, 70, 53%);
+    text-transform: uppercase;
+    overflow: hidden;
+    font-size: 16px;
+    font-weight: 300;
+  }
+
+.button_icon{
+    padding: 0px 8px;
+    text-align: center;
+    font-weight: 500;
+}
+.logos{
+    align-items: center;
+    margin-left: 18%;
+}
+.Experios_logo{
+    margin-right: 26px;
+    height: 30px;
+    align-items:center;
+}
+.VirtualEscape_logo{
+    height: 34px;
+    margin-top: 6px;
+}
+
+.button{
+    display:inline-block;
+    text-align: center;
+    align-self: center;
+    margin-top: 12px;
+    margin-right: 18%;
+}
+.connection_button{
+    margin-left: auto !important;
+    margin-right: 16px;
+    padding: 10px 8px;
+    width: 200px;
+    text-align: center;
+}
+.Logout_button{
+    width: 141px;
+    padding: 10px 8px;
+    margin-bottom:0px ;
+    text-align: center;
+}
+
+.boxes{
+    border-radius: 10px;
+    border: 1px solid rgb(53, 81, 93);
+    margin: auto;
+    margin-top: 30px;
+    align-content: center;
+    display: flex;
+    backdrop-filter: blur(50px) brightness(50%) opacity(100%);
+    flex-direction: column;
+    margin-bottom: 40px;
+    padding: 20px 30px 40px;  
+    font-size: 20px;
+    font-family: "Montserrat";
+    color: #FFFFFF;
+}
+
+.textbox{
+    margin-bottom: 0.6rem !important;
+}
+
+.box{
+    display: flex;
+    margin-right: 20px;
+    margin-top: 12px;
+    width: 100%;
+    padding-bottom: 20px;
+    background-color: rgb(14, 38, 52,0.53);
+    border-radius: 7px;
+}
+.image{
+    align-self: flex-start;
+    margin-top: 30px;
+}
+.bold{
+    font-weight: bold;
+}
+.innerbox{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin-left: 20px;
+}
+.section{
+    display: flex;
+    flex-direction: column;
+    align-items:start;
+    margin-top:20px ;
+    margin-left: 20px;
+    margin-right: 10px;
+    text-align: start;
+}
+
+.returnbutton{
+    margin-top: 50px;
+    align-self: center;
+}
+.rtbutton{
+    background-image:linear-gradient(#f80705,#7b1e1d);
+    background-blend-mode: normal;
+    color: #fff;
+    border-radius: 29px;
+    width: 386px;
+    height: 58px;
+    margin:0px ;
+    align-self: center;
+    font-size: 18px;
+    font-weight: 500 !important;
+    border-style: none;
+    cursor: pointer;
+
+
+}
+.icon{
+    margin-right:4px;
+}
+
+@media screen and (max-width: 1500px){
+    .logos{
+        margin-left: 10%;
+    }
+    .button{
+        margin-right: 10%;
+    }
+}
+
+@media screen and (max-width: 1200px)
+{
+    .boxes
+    {
+        width: 95%;
+    }
+    .logos{
+        margin-left: 0px;
+    }
+    .button{
+        margin-right: 0px;
+    }
+}
+
+@media screen and (max-width: 800px)
+{
+    .image {
+        align-self: center!important;
+        margin-left: 0px ;
+        margin-top: 20px;
+    }
+    .innerbox{
+        flex-direction: column;
+    }
+}
+@media screen and (max-width: 500px)
+{
+    .rtbutton {
+        width: 260px !important;
+        height: 54px !important;
+        font-size: .85em !important;
+    }
+    .boxes{
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+
+@media (min-width: 768px)
+{
+    .button {
+        display: flex!important;
+        flex-basis: auto;
+    }
+
+}

1.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./1.css">
+    <title>How to play</title>
+</head>
+<body>
+  <div class="navbar">
+
+    <div class="logos"> 
+        <img class="Experios_logo" src="images/logo1.svg" alt="Logo">
+        <img class="VirtualEscape_logo" src="images/logo2.svg" alt="Logo">
+    </div>
+
+    <div class="button">
+        <a href="#" class="connection_button"><img class="button_icon" src="images/Image 7.svg" alt="Next">6 CONNECTED</a>
+        <a href="#" class="Logout_button"><img class="button_icon" src="images/Image 8.svg" alt="Next">Log out</a>
+    </div>
+
+  </div>
+
+  <div class="boxes">
+    <span class="textbox">
+        Hi team,
+    </span>
+
+    <br>
+
+    <span class="textbox">
+        Thank you for helping out the Melbourne police department.
+    </span>
+
+    <span class="textbox">
+        With your expertise and detective skills we should be able to solve this important case.
+    </span>
+
+    <br>
+    <span class="textbox">
+        We can’t afford any mistakes, so pay close attention before you get started.
+    </span>
+
+    <div class="box">
+    <div class="innerbox">
+        <img class="image" src="images/clock.svg" alt="Overview">
+        <div class="section">
+            <span class="bold">Overview</span>
+            <span>
+                You’ll have 60 minutes to solve this case. If you haven’t solved it within 60 minutes it’s game over.
+            </span>
+            <span>
+                The time starts counting down as soon as anyone presses Start Investigation.
+            </span>
+            <br>
+            <span>Make sure you have set up a video call in case you are not physically together.</span>
+            <span>You can use Zoom, Teams, The Pub Hub or any other tool you'd like.</span>
+        </div>
+    </div>
+    </div>
+
+    <div class="box">
+        <div class="innerbox">
+            <img class="image" src="images/two-men.svg" alt="Teamwork">
+        <div class="section">
+            <span class="bold">Teamwork</span>
+            <span>
+                To be successful, you'll need to work closely together.
+            </span>
+            <span>
+                You can use Google or any other website to find answers and solve this case.
+            </span>
+            <span>
+                Before submitting an answer or requesting a hint, first discuss with the team.
+            </span>
+            <br>
+            <span>Only 1 person in the team needs to submit an answer or request a hint.</span>
+            <span>After a few seconds everyone will see the result.</span>
+        </div>
+    </div>
+</div>
+    <div class="box">
+        <div class="innerbox">
+            <img class="image" src="images/x-mark.svg" alt="Penalties">
+
+        <div class="section">
+            <span class="bold">Penalties</span>
+            <span>
+                You can get help in case you’re stuck.
+            </span>
+            <span>
+                Simply press the Request Hint button and we’ll find a senior detective to help you out.
+            </span>
+            <span>
+                Once you've requested a hint, a counter shows you when your next hint becomes available.
+            </span>
+            <br>
+            <span>Requesting a hint results in a 30 second time penalty.</span>
+            <span>Submitting an incorrect answer also results in a 30 second time penalty.</span>
+        </div>
+    </div>
+</div>
+
+    <div class="returnbutton">
+        <button class="rtbutton"><img class="icon" src="images/Icon awesome-arrow-left.svg" alt="icon">RETURN TO MAIN MENU</button>
+    </div>
+
+  </div>
+
+</body>
+</html>

README.md

@@ -1 +1 @@
-# Game_Menu
+# How to play