This is the 7th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

Near the end of the semester, are you still writing an HTML web design class assignment and the teacher’s homework requirements are overwhelming? Is the total number of pages required too high? Don’t know how to do your HTML web homework? Don’t have the right template? And so on. The problem you’re trying to solve, There are personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding, military, games, festivals, smoking cessation, film, photography school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, Clothing, culture, hometown, flowers, gifts, cars, other web design topics, A+ level homework, can meet college students web design needs can meet your needs. Original HTML+CSS+JS page design, Web college students web design homework source code, this is a good fitness web page production, picture smart, very suitable for beginners to learn to use.

Choose insects:

Effect display:

Don’t play if you have trypophobia. The game will never stop playing

Project source code structure:

Image and JS as well as CSS and other basic file code

Main source code display:

Index.html: Introduces images and CSS files as well as JS

<! DOCTYPEhtml>`
`<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"` ` >`
`<title>insect-``catch``-game</title>`
`<link rel= ` `"stylesheet"` `href= ` `"./style.css"` ` >`

`</head>`
`<body>`

`<div id= ` `"tab-container"` `class= ` `"tab-container"` ` >`
`<div class= ` `"tab-item active"` `data-value= ` `"en"` ` >en</div>`
`<div class= ` `"tab-item"` `data-value= ` `"zh"` ` >zh</div>`
`</div>`

`<div class= ` `"screen"` ` >`
`<h1 id= ` `"firstTitle"` ` >Catch The Insect</h1>`
`<button id= ` `"play"` `class= ` `"btn play"` ` >Play Game</button>`
`</div>` `<div class= ` `"screen"` ` >`

`<h2 id= ` `"secondTitle"` ` >What is your  ``"favorite"` `insect?</h2>`
`<ul id= ` `"inspect-list"` `class= ` `"inspect-list"` ` >`
`<li>` `<div class= ` `"choose-btn"` ` >`
`<p>Fly</p>`
`<img src= ` `"img/fly_PNG3946.png"` `alt= ` `"fly"` ` >` `</div>`
`</li>` `<li>`
`<div class= ` `"choose-btn"` ` >`
`<p>mosquito</p>`
`<img src= ` `"img/mosquito_PNG18175.png"` `alt= ` `"mosquito"` ` / >`
`</div>` `</li>` `<li>`
`<div class= ` `"choose-btn"` ` >`
`<p>spider</p>`

`<img src= ` `"img/spider_PNG12.png"` `alt= ` `"spider"` ` / >`
`</div>` `</li>` `<li>`
`<div class= ` `"choose-btn"` ` >`
`<p>roach</p>`
`<img src= ` `"img/roach_PNG12163.png"` `alt= ` `"roach"` ` / >`
`</div>` `</li>` `</ul>` `</div>`
`<div class= ` `"screen game-container"` `id= ` `"game-container"` ` >`
`<h3 id= ` `"time"` `class= ` `"time"` ` >Time:<span>00:00</span></h3>`
`<h3 class= ` `"score"` `id= ` `"score"` ` >Score:<span>0</span></h3>`
`<h5 id= ` `"message"` `class= ` `"message"` ` >`

`            ``Tell you a bad news, will you be angry? <br>Actually you are playing a game that never ends!! ` `<button class= ` `"btn continue-btn"` `id= ` `"continue"` ` >Continue Play</button>`
`<button class= ` `"btn restart-btn"` `id= ` `"restart"` ` >Restart Play</button>`
`</h5>` `</div>` `</body>`
`<script src= ` `"./data.js"` ` ></script>`
`<script src= ` `"./script.js"` ` ></script>`

`</html>
Copy the code

Partial style.css style layout

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

* {

margin: 0;
padding: 0;
box-sizing: border-box;

}
body {

color: #fff;
text-align: center;
font-family: 'Press Start 2P', sans-serif;
overflow: hidden;
background: linear-gradient(135deg.#9cc8e9 10%.#0b6be0 90%);
min-height: 100vh;

}
.screen {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
transition: all .4s cubic-bezier(0.165.0.84.0.44.1);
posit
overflow: hidden;
}
.screen.hidden {
margin-top: -100vh;
}
.screen h1..screen h2 {
letter-spacing: 2px;
margin-bottom: 1rem;
line-eight: 1.5; }.screen .btn {
background: linear-gradient(135deg.#dfe0e2 10%.#f6f7f7 90%);
outline: none;
border-radius: 8px;
padding:.8rem 4rem;
color: #2396ef;
display: inline-block;
border: 1px solid transparent;
letter-spacing: 2px;
cursor: pointer;
font-size: 18px;

}
.screen .btn.play {
margin-top: 1rem;
}
Copy the code

Some works come from network collection, tort stand delete

Get the full source code:

Everyone likes, favorites, follows, comments, check the home page to get

Clocked articles updated 93/100 days