Hangman HTML and CSS Explanation
Game Explain Group 3
May 31, 2024
HTML Code
< !DOCTYPE html>
<html l a n g=” en ”>
<head>
<meta c h a r s e t=” u t f −8”>
< t i t l e>Hangman</ t i t l e>
<l i n k r e l=” s t y l e s h e e t ” h r e f=” c s s / s t y l e . c s s ”>
<l i n k h r e f=” h t t p s : / / f o n t s . g o o g l e a p i s . com/ c s s ? f a m i l y=Roboto+Mono” r e l=” s t y l e s h e e t ”>
< s t y l e>
body , html {
margin : 0 ;
padding : 0 ;
h e i g h t : 100%;
o v e r f l o w : hi d de n ;
}
. back−v i d e o {
position : fixed ;
top : 0 ;
l e f t : 0;
width : 100%;
h e i g h t : 100%;
object −f i t : cover ;
z−i n d e x : −1;
}
main {
position : relative ;
z−i n d e x : 1 ;
}
</ s t y l e>
< s c r i p t s r c=” s c r i p t . j s ” c h a r s e t=” u t f −8”></ s c r i p t>
</ head>
<body>
<v i d e o a u t o p l a y l o o p muted p l a y s −i n l i n e c l a s s=” back−v i d e o ”>
<s o u r c e s r c=” background . mp4” t y p e=” v i d e o /mp4”>
</ v i d e o>
<a u d i o i d=” background−a u d i o ” s r c=” background . mp3” a u t o p l a y l o o p></ a u d i o>
</ d i v>
<main>
<p i d=” h i n t ”></p>
<s e c t i o n c l a s s=” board ” i d=” board ”></ s e c t i o n>
<s e c t i o n c l a s s=” f i e l d ” i d=” g a l l o w s ”>
<d i v><img c l a s s=” gametab ” s r c=” img / s 0 . j p g ” a l t=” ”>
</ s e c t i o n>
<s e c t i o n c l a s s=” f i e l d ” i d=” a l f a b e t ”></ s e c t i o n>
</ main>
<d i v c l a s s=” audio−c o n t r o l s ”>
<b ut to n i d=”mute−b ut to n ”>Mute</ bu tt on>
<i n p u t t y p e=” r a n g e ” i d=” volume−s l i d e r ” min=” 0 ” max=” 1 ” s t e p=” 0 . 0 1 ” v a l u e=” 1 ”>
</ d i v>
1
</ body>
</ html>
Explanation
HTML Document
• <!DOCTYPE html>: Declares the document type and version of HTML.
• <html lang="en">: Root element of the HTML document with language attribute set to English.
• <head>: Contains metadata, title, links to CSS and Google Fonts, and inline CSS styles.
• <meta charset="utf-8">: Sets the character encoding for the document.
• <title>Hangman</title>: Sets the title of the webpage.
• <link rel="stylesheet" href="css/style.css">: Links the external stylesheet for additional
CSS styles.
• <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">:
Links the Google Fonts stylesheet for the Roboto Mono font.
CSS Styles
• body, html: Sets margin, padding, height, and overflow properties for the entire document.
• .back-video: Styles the background video to cover the entire viewport with object-fit set to cover.
• main: Styles the main content area with position relative and z-index to control stacking order.
