Scribd
Upload
20 views2 pages

InGamecode FE

Uploaded by

Tamad na Vlogger
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views2 pages

InGamecode FE

Uploaded by

Tamad na Vlogger
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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.

You might also like