Headings and Paragraphs

CSS selector:

h1, h2, h3, p

Sample code:

<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p>Paragraph text</p>

Rendered element:

Heading 1

Heading 2

Heading 3

Paragraph text

Navigation Bar

CSS selector:

.navbar, .navbar ul, .navbar li, .navbar a

Sample code:


        <nav class="navbar">

          <ul>

            <li><a href="index.html">Home</a></li>

            <li><a href="about.html">About</a></li>

            <li><a href="contact.html">Contact</a></li>

          </ul>

        </nav>

Rendered element:

Game Box

The game box is used to feature games on the portfolio. It includes an image of the game, the game title, and some details about the project.

Example Game Box

Storge (2023)

Duration: September 2023-January 2024

Type: University Project

Role: Lead mechanics gameplay programmer and SFX designer

Engine and Tools: Unity

Sample Code:


                <div class="game-box" onclick="location.href='storge.html';">
                    <img src="images/storge1.png" alt="The Storge">
                    <div class="game-info">
                        <h3>Storge (2023)</h3>
                        <p>Duration: September 2023-January 2024</p>
                        <p>Type: University Project</p>
                        <p>Role: Lead mechanics gameplay programmer and SFX designer</p>
                        <p>Engine and Tools: Unity </p>
                    </div>
                </div>

Video Slider

The video slider is used to showcase various video clips of games, providing a dynamic visual representation of gameplay, mechanics, and other features.

Example Video Slider

Game Mechanics

Sample Code:


                <div id="video-slider">
                    <button class="slide-arrow prev-arrow" onclick="slide(-1)">❮</button>
                    <button class="slide-arrow next-arrow" onclick="slide(1)">❯</button>
                    <div class="video-slide">
                        <div class="video-title">Game Mechanics</div>
                        <video width="100%" height="auto" autoplay muted loop controls>
                            <source src="videos/slowandsteady_video.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                    <!-- ... more video slides can be added here -->
                </div>

Buttons

CSS selector:

button, .button-primary, .button-secondary

Sample code:

<button class="button-primary">Primary Button</button><button class="button-secondary">Secondary Button</button>

Rendered element:

Form Elements

CSS selector:

input[type="text"], input[type="email"], textarea

Sample code:


        <input type="text" placeholder="Text Input" class="input-text"/>

        <input type="email" placeholder="Email Input" class="input-email"/>

        <textarea placeholder="Textarea"></textarea>

A.S.

Headings and Paragraphs

CSS selector:

Sample code:

Rendered element:

Heading 1

Heading 2

Heading 3

Navigation Bar

CSS selector:

Sample code:

Rendered element:

Game Box

Example Game Box

Storge (2023)

Sample Code:

Video Slider

Example Video Slider

Sample Code:

Buttons

CSS selector:

Sample code:

Rendered element:

Form Elements

CSS selector:

Sample code:

Rendered element:

Color Palette

Colors used: