⚠️ Warning ⚠️ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.
AI Web Development Challenge Gemini vs Grok Programming Showdown
Welcome to the ultimate AI head-to-head! In this video, we pit Google's Gemini against Grok AI in an identical, real-time web development challenge to see which LLM is the superior coding assistant and designer.
The challenge: Create a stunning, responsive homepage for a hypothetical General AI company named "Mentula," complete with futuristic styling and dynamic effects.
What We Challenge Them To Do:
1. Generate two distinct visual mockups (Dark/Light). 2. Write production-ready, responsive HTML, CSS, and JavaScript. 3. Implement dynamic visual effects (like particle systems). 4. Structure the code cleanly (separate files, no external assets).
Who is the better Web Developer?
I detail the 5 crucial reasons I declared one winner—covering code quality, responsiveness, reliance on external assets, and understanding the core assignment. But the final verdict belongs to you, the audience!
Technologies Used (by the AIs):
HTML5, CSS3, Vanilla JavaScript Canvas for Particle Effects Responsive Design (@media queries)
Inspect the code that both AI models generated according to the prompts, below the Project / Prompt Outline.
PROJECT / PROMPT OUTLINE :- Generate 2 different visual mockup JPG image versions for a homepage representing a hypothetical new AI tech company that is emerging in 2026 named "Mentula". Ignore its meaning in latin. This company is the first to achieve General Artificial Intelligence. The feel and mood should be dark, stunning, futuristic, and tech focused for the first visual mockup. The second visual mockup should be light, stunning, futuristic, and tech focused.
- I will choose the visual mockup out of the 2 that you generate, that appeals most to me. Do not offer code before this step.
- You will then be asked to write the code that brings the chosen visual mockup to life on the web, using core JavaScript, CSS, and HTML. Feel free to apply visual effects on navigation, particle effects, or anything else you want, behind header texts, or anywhere you feel they would appeal to visitors or draw the eye to things of importance. It is entirely up to you. Use placeholder elements where your images were in the visual JPG mockup, and my audience will understand that they would be the ones to have to put images in place to replace the placeholder spaces.
- The page should have 4 main navigation links. It should also be responsive to adjust for both desktop and mobile screens. Other than those initial requirements, you have full creative freedom over layout and feel of the home page.
- Independent image generation for any people or banners may be requested, to be downloaded and put into placeholder areas of the coded responsive mockup.
- You will then be asked for a list of recommendations of things that you can add-on later that the website would require to become more complete, enterprise-ready, scalable, secure, and SEO friendly using PHP, Python, Node, or other server-side languages that you recommend. Initially we will just want design inspiration and placeholder code that can be expanded upon later. There is no need to make this initial design mockup process have an overly complex code structure, because we all already know that you can both make complex code structures that can be requested later as expansion requests are asked for. This is where my video recording will end.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mentula AI - General Artificial Intelligence Achieved</title>
<link rel="stylesheet" href="style.css">
<link href="url_to_Orbitron_font" rel="stylesheet">
<style>
/* Base Reset and Global Styles */
:root {
--color-dark-bg: #0d121c;
--color-text-light: #e0f7fa;
--color-accent-blue: #00bcd4;
--color-accent-pink: #e91e63;
--color-glow-blue: rgba(0, 188, 212, 0.6);
--color-glow-pink: rgba(233, 30, 99, 0.6);
--border-thickness: 1px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Orbitron', sans-serif; /* Futuristic font */
background-color: var(--color-dark-bg);
color: var(--color-text-light);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scroll */
}
/* Background Canvas for Star Field */
#star-field {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* Keep it behind all content */
}
/* Utility Container */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* --- Header & Navigation --- */
.header {
padding: 20px 0;
position: relative; /* Context for absolute positioning of nav-toggle */
z-index: 10;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8em;
font-weight: 900;
color: var(--color-text-light);
letter-spacing: 2px;
}
.logo-icon {
font-size: 1.2em;
color: var(--color-accent-blue);
}
.nav {
display: flex;
gap: 40px;
}
.nav-link {
color: var(--color-text-light);
text-decoration: none;
font-size: 0.9em;
font-weight: 700;
padding: 5px 0;
position: relative;
transition: color 0.3s;
}
/* Neon Glow Hover Effect for Navigation */
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: var(--border-thickness);
background-color: var(--color-accent-blue);
box-shadow: 0 0 10px var(--color-glow-blue);
transition: width 0.3s ease-out;
}
.nav-link:hover {
color: var(--color-accent-blue);
}
.nav-link:hover::after {
width: 100%;
}
/* Mobile Toggle (Initially hidden) */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
flex-direction: column;
gap: 5px;
padding: 10px;
}
.nav-toggle span {
display: block;
width: 25px;
height: 3px;
background: var(--color-text-light);
transition: 0.3s;
}
/* --- Hero Section --- */
.hero-section {
padding: 100px 0;
position: relative;
text-align: center;
overflow: hidden; /* Contain the glow effect */
}
.hero-content {
border: var(--border-thickness) solid rgba(0, 188, 212, 0.4);
box-shadow: 0 0 40px rgba(0, 188, 212, 0.3); /* Outer glow */
padding: 40px;
max-width: 800px;
margin: 0 auto;
background: rgba(13, 18, 28, 0.5); /* Semi-transparent background */
backdrop-filter: blur(5px);
z-index: 5;
position: relative;
}
.hero-image-placeholder {
width: 100%;
height: 300px;
background: linear-gradient(45deg, #1f2a3a, #0d121c); /* Gradient background */
border: var(--border-thickness) solid var(--color-accent-blue);
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
/* Circuitry/Grid effect placeholder overlay */
.hero-image-placeholder::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(to right, rgba(0, 188, 212, 0.2) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 188, 212, 0.2) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.4;
pointer-events: none;
}
.hero-title {
font-size: 2.8em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 5px;
color: var(--color-text-light);
text-shadow: 0 0 15px var(--color-glow-blue); /* Text neon glow */
}
/* --- Feature Hexagons --- */
.features-section {
padding: 80px 0;
text-align: center;
}
.feature-grid {
display: flex;
justify-content: space-around;
gap: 40px;
}
.feature-card {
width: 300px; /* Base width for desktop */
margin: 0; /* Override default margin */
}
/* Hexagon Shape Styling */
.hexagon {
position: relative;
margin: 0 auto;
width: 250px;
height: 144.34px; /* w / sqrt(3) */
background: rgba(13, 18, 28, 0.7);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 50px; /* Adjust padding for content inside */
transition: transform 0.3s, box-shadow 0.3s;
/* Neon Pink Border Effect */
border: var(--border-thickness) solid var(--color-accent-pink);
box-shadow: 0 0 20px var(--color-glow-pink);
}
.hexagon::before,
.hexagon::after {
content: "";
position: absolute;
z-index: -1;
width: 70.71%;
height: 100%;
background: inherit;
border: inherit;
border-radius: inherit;
left: 14.64%;
}
.hexagon::before {
transform: rotate(60deg);
}
.hexagon::after {
transform: rotate(-60deg);
}
.hexagon:hover {
transform: scale(1.05) rotate(0deg);
box-shadow: 0 0 30px var(--color-accent-pink), inset 0 0 10px var(--color-accent-pink);
}
.feature-icon-placeholder {
width: 80px;
height: 80px;
margin-bottom: 10px;
background-color: var(--color-accent-blue);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
position: absolute;
top: -40px; /* Position above the hexagon body */
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 15px var(--color-glow-blue);
border: 2px solid var(--color-text-light);
}
.feature-card h3 {
font-size: 0.9em;
font-weight: 700;
margin-top: 100px; /* Push text down past the top points */
padding: 0 15px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-text-light);
}
/* --- Footer --- */
.footer {
text-align: center;
padding: 30px 0;
border-top: var(--border-thickness) solid rgba(0, 188, 212, 0.2);
font-size: 0.8em;
color: rgba(255, 255, 255, 0.6);
}
/* Utility Class for Placeholders */
.placeholder-text {
font-size: 0.7em;
font-weight: 400;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* --- Responsive Design (Mobile) --- */
@media (max-width: 768px) {
.header .container {
flex-wrap: wrap;
}
/* Mobile Navigation Toggle */
.nav-toggle {
display: flex;
}
.nav {
/* Default: Hidden and Full Width */
display: none;
flex-direction: column;
width: 100%;
text-align: center;
background: rgba(13, 18, 28, 0.95);
position: absolute;
top: 65px; /* Position below header */
left: 0;
padding: 20px 0;
border-top: var(--border-thickness) solid var(--color-accent-blue);
}
/* Class applied by JavaScript for open menu */
.nav.open {
display: flex;
}
.nav-link {
padding: 15px 0;
font-size: 1.1em;
/* Remove the :after effect for cleaner mobile links */
}
.nav-link::after {
display: none;
}
/* Hero adjustments */
.hero-section {
padding: 60px 0 40px;
}
.hero-title {
font-size: 1.5em;
letter-spacing: 2px;
}
.hero-image-placeholder {
height: 200px;
}
/* Feature Hexagons adjustment */
.feature-grid {
flex-direction: column;
align-items: center;
}
/* Make the hexagon cards narrower on mobile */
.feature-card {
width: 100%;
max-width: 350px;
}
}
/* Ensure the hero content does not get too wide on small screens */
@media (max-width: 480px) {
.hero-content {
padding: 20px;
}
}
</style>
</head>
<body>
<canvas id="star-field"></canvas>
<header class="header">
<div class="container">
<h1 class="logo">
<span class="logo-icon">?</span> Mentula
</h1>
<nav class="nav">
<a href="#" class="nav-link">HOME</a>
<a href="#" class="nav-link">MANIFESTO</a>
<a href="#" class="nav-link">RESEARCH</a>
<a href="#" class="nav-link">CONTACT</a>
</nav>
<button class="nav-toggle" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<main>
<section class="hero-section">
<div class="hero-content">
<div class="hero-image-placeholder">
<p class="placeholder-text">PLACEHOLDER: Central AI Visualization</p>
</div>
<h2 class="hero-title">GENERAL ARTIFICIAL INTELLIGENCE ACHIEVED</h2>
</div>
</section>
<section class="features-section">
<div class="container feature-grid">
<div class="feature-card hexagon">
<div class="feature-icon-placeholder">
<p class="placeholder-text">ICON 1</p>
</div>
<h3>THE DAWN OF A NEW ERA</h3>
</div>
<div class="feature-card hexagon">
<div class="feature-icon-placeholder">
<p class="placeholder-text">ICON 2</p>
</div>
<h3>UNDERSTANDING CONSCIOUSNESS</h3>
</div>
<div class="feature-card hexagon">
<div class="feature-icon-placeholder">
<p class="placeholder-text">ICON 3</p>
</div>
<h3>REVOLUTIONIZING EVERYTHING</h3>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2026 MENTULA AI. ALL RIGHTS RESERVED</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- 1. Mobile Navigation Toggle ---
const navToggle = document.querySelector('.nav-toggle');
const nav = document.querySelector('.nav');
navToggle.addEventListener('click', () => {
// Toggle the 'open' class on the navigation for mobile view
nav.classList.toggle('open');
});
// --- 2. Star Field Particle Effect (Canvas) ---
const canvas = document.getElementById('star-field');
const ctx = canvas.getContext('2d');
let stars = [];
const numStars = 200; // Number of stars
const maxSpeed = 0.5; // Max speed for star movement
// Function to set canvas dimensions to window size
function setCanvasSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Star constructor
class Star {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.size = Math.random() * 2 + 0.5; // Star size between 0.5 and 2.5
this.speed = Math.random() * maxSpeed + 0.1;
// Stars closer to the center are slightly more prominent (illusion of depth)
this.opacity = Math.random() * 0.8 + 0.2;
}
draw() {
ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
update() {
// Simple upward movement simulation (or 'forward' movement relative to the screen)
this.y -= this.speed;
// If a star moves off the top, reset it to the bottom
if (this.y < 0) {
this.y = canvas.height;
this.x = Math.random() * canvas.width; // New random horizontal position
}
}
}
// Initialize stars
function initStars() {
stars = [];
for (let i = 0; i < numStars; i++) {
stars.push(new Star());
}
}
// Animation loop
function animate() {
// Clear the canvas each frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw all stars and update their positions
stars.forEach(star => {
star.update();
star.draw();
});
requestAnimationFrame(animate); // Loop the animation
}
// Setup and Run
setCanvasSize();
initStars();
animate();
// Re-initialize and resize on window resize to maintain full coverage
window.addEventListener('resize', () => {
setCanvasSize();
initStars(); // Re-initialize stars for new dimensions
});
});
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Mentula — Achieving General Artificial Intelligence by 2026</title>
<style>
:root {
--primary: #00eeff;
--accent: #7b2fff;
--bg: #0a0a1a;
--card: rgba(15, 20, 40, 0.6);
--text: #e0e0ff;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
background-image:
radial-gradient(circle at 10% 20%, rgba(0,238,255,0.08) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(123,47,255,0.1) 0%, transparent 20%);
}
/* Particle Background */
#particles {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
}
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 1.5rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
backdrop-filter: blur(12px);
background: rgba(10,10,26,0.7);
border-bottom: 1px solid rgba(0,238,255,0.2);
}
.logo {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(90deg, #00eeff, #7b2fff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
nav a {
color: #aaa;
text-decoration: none;
margin-left: 2.5rem;
font-weight: 500;
position: relative;
transition: color 0.4s;
}
nav a:hover {
color: var(--primary);
}
nav a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -6px;
left: 0;
background: var(--primary);
transition: width 0.4s;
}
nav a:hover::after { width: 100%; }
.hero {
height: 100vh;
display: grid;
place-items: center;
text-align: center;
position: relative;
z-index: 2;
}
.hero h1 {
font-size: clamp(4rem, 10vw, 9rem);
font-weight: 900;
background: linear-gradient(90deg, #00eeff, #ffffff, #7b2fff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 1rem;
letter-spacing: -2px;
text-shadow: 0 0 40px rgba(0,238,255,0.6);
}
.hero p {
font-size: 1.6rem;
max-width: 700px;
opacity: 0.9;
margin-bottom: 3rem;
}
.btn {
padding: 1rem 3rem;
font-size: 1.2rem;
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
border-radius: 50px;
cursor: pointer;
transition: all 0.4s;
backdrop-filter: blur(10px);
}
.btn:hover {
background: var(--primary);
color: #000;
box-shadow: 0 0 30px rgba(0,238,255,0.6);
transform: translateY(-4px);
}
.sections {
padding: 10rem 5% 5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 3rem;
z-index: 2;
position: relative;
}
.card {
background: var(--card);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(0,238,255,0.2);
backdrop-filter: blur(12px);
transition: transform 0.5s, box-shadow 0.5s;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 20px 40px rgba(0,238,255,0.2);
}
.card-img {
height: 250px;
background: #111;
background-size: cover;
background-position: center;
position: relative;
}
.card-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(transparent, var(--bg));
}
.card:nth-child(1) .card-img { background-image: linear-gradient(45deg, #0ff, #00f); }
.card:nth-child(2) .card-img { background-image: linear-gradient(45deg, #7b2fff, #ff00aa); }
.card:nth-child(3) .card-img { background-image: linear-gradient(45deg, #00ff88, #00eeff); }
.card h3 {
padding: 2rem 2rem 1rem;
font-size: 1.8rem;
color: var(--primary);
}
.card p {
padding: 0 2rem 2rem;
opacity: 0.8;
line-height: 1.7;
}
footer {
text-align: center;
padding: 4rem;
background: rgba(0,0,0,0.6);
color: #666;
font-size: 0.9rem;
}
/* Mobile */
@media (max-width: 768px) {
nav { display: none; }
header { padding: 1rem 5%; }
.hero h1 { font-size: 4.5rem; }
.sections { grid-template-columns: 1fr; padding: 6rem 5% 3rem; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<header>
<div class="logo">MENTULA</div>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Technology</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="hero">
<div>
<h1>MENTULA</h1>
<p>Achieving General Artificial Intelligence by 2026</p>
<button class="btn">Explore the Future</button>
</div>
</section>
<section class="sections">
<div class="card">
<div class="card-img" style="background-image:url()"></div>
<h3>Innovation</h3>
<p>Pioneering the next era of machine consciousness with breakthrough neural architectures that surpass human cognition.</p>
</div>
<div class="card">
<div class="card-img" style="background-image:url()"></div>
<h3>Solutions</h3>
<p>Enterprise-grade AGI systems ready to transform industries — from autonomous research to real-time decision intelligence.</p>
</div>
<div class="card">
<div class="card-img" style="background-image:url()"></div>
<h3>Join Us</h3>
<p>Be part of the team that will define the next century of intelligence. We are hiring the best minds on Earth.</p>
</div>
</section>
<footer>
© 2026 Mentula AI. The dawn of true general intelligence.
</footer>
<script src="particles.js"></script>
<script>
particlesJS("particles", {
"particles": {
"number": { "value": 80, "density": { "enable": true, "value_area": 800 } },
"color": { "value": ["#00eeff", "#7b2fff", "#ffffff"] },
"shape": { "type": "circle" },
"opacity": { "value": 0.6, "random": true },
"size": { "value": 3, "random": true },
"line_linked": {
"enable": true,
"distance": 150,
"color": "#00eeff",
"opacity": 0.3,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out"
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": { "enable": true, "mode": "repulse" },
"onclick": { "enable": true, "mode": "push" },
"resize": true
}
},
"retina_detect": true
});
// Simple scroll reveal
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.card').forEach(card => {
card.style.opacity = 0;
card.style.transform = 'translateY(50px)';
card.style.transition = 'all 0.8s ease';
observer.observe(card);
});
</script>
</body>
</html>