15 July, 2025 Jorge Ruiz Centelles 0 Comments 1 category

Chess site

Based on your request, I’ll create a WordPress theme that mimics the Google Sites layout you provided. This theme will maintain the design and structure while making it compatible with WordPress.

<!DOCTYPE html>
<html lang="es"  ="http://schema.org/WebPage">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <title>IJCCRL Rating list</title>
    <style>
        /* Theme Variables */
        :root {
            --primary-color: #857251;
            --secondary-color: #ce9a64;
            --dark-color: #333333;
            --light-color: #f7f4ee;
            --accent-color: #d6b676;
            --white: #ffffff;
            --black: #000000;
            --gray: #6a6a6a;
            --header-height: 60px;
            --section-padding: 60px;
            --transition: all 0.3s ease;
        }
        
        /* Reset & Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            color: var(--dark-color);
            line-height: 1.6;
            background-color: var(--white);
        }
        
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
        }
        
        a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Roboto', sans-serif;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        
        p {
            margin-bottom: 1rem;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .section {
            padding: var(--section-padding) 0;
            position: relative;
        }
        
        .text-center {
            text-align: center;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--primary-color);
            color: var(--white);
            border: none;
            border-radius: 4px;
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btn:hover {
            background-color: var(--secondary-color);
            color: var(--white);
            text-decoration: none;
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        
        .btn-outline:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }
        
        /* Header Styles */
        .site-header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: var(--header-height);
        }
        
        .site-branding {
            display: flex;
            align-items: center;
        }
        
        .site-title {
            font-size: 20px;
            font-weight: 500;
            letter-spacing: 1px;
            color: var(--primary-color);
            margin: 0;
        }
        
        .site-navigation ul {
            display: flex;
            list-style: none;
        }
        
        .site-navigation ul li {
            margin-left: 20px;
        }
        
        .site-navigation ul li a {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--dark-color);
            text-transform: uppercase;
        }
        
        .site-navigation ul li a:hover,
        .site-navigation ul li.current-menu-item a {
            color: var(--primary-color);
        }
        
        .mobile-menu-toggle {
            display: none;
            font-size: 24px;
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background-image: url('https://lh4.googleusercontent.com/syO5a3CnSIBnnhTAptEhxq-D9AFr64AryzHnSRDpY-S4Oalw18DLjv5irT_Mk9ArW9rkeTnVOEdO98uRmhILpJ4ZxmJmE2iZlxSua72GQT-XRV8KePL5RzJyusmgaXAK9QXcBkaLKEA=w16383');
            background-size: cover;
            background-position: center;
            position: relative;
            margin-top: var(--header-height);
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .hero-content {
            position: relative;
            color: var(--white);
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            padding: 40px;
        }
        
        .hero-title {
            font-size: 45px;
            font-weight: 500;
            letter-spacing: -0.5px;
            line-height: 1.26;
            margin-bottom: 45px;
            position: relative;
        }
        
        .hero-title::before {
            content: '';
            position: absolute;
            bottom: -18px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 8px;
            background-color: var(--secondary-color);
        }
        
        .hero-subtitle {
            font-size: 21px;
            font-weight: 700;
            margin-bottom: 30px;
        }
        
        /* Content Sections */
        .content-section {
            padding: 80px 0;
        }
        
        .section-title {
            font-size: 36px;
            position: relative;
            margin-bottom: 45px;
            text-align: center;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 6px;
            background-color: var(--primary-color);
        }
        
        .section-description {
            font-size: 18px;
            max-width: 800px;
            margin: 0 auto 40px;
            text-align: center;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .feature-card {
            background-color: var(--light-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .feature-image {
            height: 200px;
            overflow: hidden;
        }
        
        .feature-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .feature-card:hover .feature-image img {
            transform: scale(1.05);
        }
        
        .feature-content {
            padding: 20px;
        }
        
        .feature-title {
            font-size: 20px;
            margin-bottom: 10px;
            color: var(--primary-color);
        }
        
        /* CTA Section */
        .cta-section {
            background-color: var(--light-color);
            text-align: center;
        }
        
        .cta-title {
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .cta-text {
            font-size: 18px;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        /* Footer */
        .site-footer {
            background-color: var(--primary-color);
            color: var(--white);
            padding: 40px 0 20px;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .footer-widget h3 {
            color: var(--white);
            font-size: 20px;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-widget h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background-color: var(--secondary-color);
        }
        
        .footer-widget ul {
            list-style: none;
        }
        
        .footer-widget ul li {
            margin-bottom: 10px;
        }
        
        .footer-widget ul li a {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .footer-widget ul li a:hover {
            color: var(--white);
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        /* Responsive Styles */
        @media (max-width: 991px) {
            .hero-title {
                font-size: 38px;
            }
            
            .section-title {
                font-size: 32px;
            }
        }
        
        @media (max-width: 767px) {
            .mobile-menu-toggle {
                display: block;
            }
            
            .site-navigation {
                position: fixed;
                top: var(--header-height);
                left: -100%;
                width: 80%;
                height: calc(100vh - var(--header-height));
                background-color: var(--white);
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                transition: var(--transition);
                z-index: 999;
                padding: 20px;
            }
            
            .site-navigation.active {
                left: 0;
            }
            
            .site-navigation ul {
                flex-direction: column;
            }
            
            .site-navigation ul li {
                margin: 0 0 15px 0;
            }
            
            .hero-title {
                font-size: 30px;
            }
            
            .hero-subtitle {
                font-size: 18px;
            }
            
            .section-title {
                font-size: 28px;
            }
            
            .content-section {
                padding: 60px 0;
            }
        }
        
        @media (max-width: 575px) {
            .hero-title {
                font-size: 25px;
            }
            
            .section-title {
                font-size: 24px;
            }
            
            .cta-title {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header class="site-header">
        <div class="container header-container">
            <div class="site-branding">
                <h1 class="site-title">IJCCRL Rating List</h1>
            </div>
            
            <div class="mobile-menu-toggle">☰</div>
            
            <nav class="site-navigation">
                <ul>
                    <li class="current-menu-item"><a href="#">Inicio</a></li>
                    <li><a href="#">Chess Engines</a></li>
                    <li><a href="#">Bullet</a></li>
                    <li><a href="#">Blitz</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h2 class="hero-title">Chess Engines Rating List</h2>
                <h3 class="hero-subtitle">Test of ssse3 chess engines</h3>
                <a href="#" class="btn">Learn More</a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="content-section">
        <div class="container">
            <h2 class="section-title">You want to talk?</h2>
            <p class="section-description">The current methodologies for rating chess engines, while robust, are not without limitations. Future research may focus on integrating more dynamic models that better capture the non-linear progressions seen in engine development.</p>
            
            <div class="text-center">
                <a href="#" class="btn">Call me</a>
            </div>
        </div>
    </section>

    <!-- Tournaments Section -->
    <section class="content-section" style="background-color: #f9f9f9;">
        <div class="container">
            <h2 class="section-title">Tournaments Info</h2>
            <p class="section-description">Expanding the scope of ratings to include specialized tests may provide a more granular view of engine capabilities.</p>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-image">
                        <img src="https://lh4.googleusercontent.com/MWTNlP9WrC7AX5EebF7OJiR7ZEfBv_W1qtRb1My1CgoE1JhHgO7nAGsyaATd3bTtGZpoRm7Yy0TdrNl7hu1f9F5OKg2HAg59N_oYCxol3f3roeNVRGmCOH0Gxfl2KWqdGBbR43HJZm8hXl6vmDciiJ5STsaj-s69nyKFZC5HnGfQCwZTGruSzg=w1280" alt="Blitz Tournament">
                    </div>
                    <div class="feature-content">
                        <h3 class="feature-title">Blitz Tournament</h3>
                        <p>Fast-paced chess competitions with time controls between 3-10 minutes per player.</p>
                        <a href="#" class="btn btn-outline">Learn More</a>
                    </div>
                </div>
                
                <div class="feature-card">
                    <div class="feature-image">
                        <img src="https://lh6.googleusercontent.com/OGrh_z9_ZHdvUTS7jw6FfMO-VQzi8OYkZRbOw5XsvwbFacu83bH-ayNSH5porqdSLrlDthIAPwN4nybMkMnZn_nJzDrzZhtgvRZaz0PPILzEYsN8WdCkpnw23PJ07Tlsxl3iZZXQmrIfCMcAiMkAqoEwstpkpYwz7BMvskbfy5l82vtXFdNi4A=w1280" alt="Bullet Tournament">
                    </div>
                    <div class="feature-content">
                        <h3 class="feature-title">Bullet Tournament</h3>
                        <p>Ultra-fast chess with time controls under 3 minutes per player.</p>
                        <a href="#" class="btn btn-outline">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="cta-section section">
        <div class="container">
            <h2 class="cta-title">Join Our Community</h2>
            <p class="cta-text">The potential for machine learning to continuously adapt and refine rating algorithms represents an exciting frontier in the evaluation of chess engines.</p>
            <a href="#" class="btn">Get Started</a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="site-footer">
        <div class="container">
            <div class="footer-container">
                <div class="footer-widget">
                    <h3>About Us</h3>
                    <p>IJCCRL is dedicated to providing accurate ratings and analysis of chess engines through comprehensive testing methodologies.</p>
                </div>
                
                <div class="footer-widget">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Chess Engines</a></li>
                        <li><a href="#">Bullet Ratings</a></li>
                        <li><a href="#">Blitz Ratings</a></li>
                        <li><a href="#">About Us</a></li>
                    </ul>
                </div>
                
                <div class="footer-widget">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>Email: info@ijccrl.com</li>
                        <li>Twitter: @ijccrl</li>
                        <li>Discord: IJCCRL Community</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>Copyright © 2024-2025 Jorge Ruiz. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.querySelector('.mobile-menu-toggle').addEventListener('click', function() {
            document.querySelector('.site-navigation').classList.toggle('active');
        });
        
        // Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.querySelector('.site-header');
            if (window.scrollY > 50) {
                header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
            } else {
                header.style.boxShadow = 'none';
            }
        });
    </script>
</body>
</html>

WordPress Theme chess site Features

WordPress Theme Features:

  1. Responsive Design – Works on all device sizes with a mobile-friendly navigation menu
  2. Modern Layout – Clean and professional design with a chess-themed color palette
  3. Key Sections:
  • Fixed header with navigation
  • Hero section with background image
  • Content sections with descriptive text
  • Tournament information cards
  • Call-to-action section
  • Comprehensive footer
  1. Performance Optimized:
  • Minimal CSS and JavaScript
  • Efficient code structure
  • No external dependencies
  1. WordPress Compatibility:
  • Properly structured for WordPress integration
  • Semantic HTML for easy content management
  • Class names that can be easily mapped to WordPress template tags

To implement this as a WordPress theme, you would need to:

  1. Create a theme folder with the required WordPress files (style.css, index.php, header.php, footer.php, functions.php)
  2. Split the HTML into header.php and footer.php
  3. Convert static content to WordPress template tags and loops
  4. Add WordPress functions for enqueueing styles and scripts
  5. Implement WordPress menu functionality

The theme uses a gold/beige color scheme that matches the original Google Sites design while providing a professional and modern layout suitable for a chess site rating.

Jorge Ruiz

Jorge Ruiz Centelles

Filólogo y amante de la antropología social africana

SÍGUEME
Tags:
Category: Wordpress

Related Posts