add images
· 1 year ago
591d6be3c645d7b639b121b24af0d402101515ab
Parent:
99f470545
3 files changed +109 −65
- brazilian-jiu-jitsu.html +109 −65
- images/bjj-belts.jpg binary
- images/bjj-meditate-header.jpg binary
Diff
--- a/brazilian-jiu-jitsu.html +++ b/brazilian-jiu-jitsu.html @@ -15,8 +15,8 @@ <meta property="og:description" content="Master the essentials of BJJ with this detailed, interactive cheatsheet covering core concepts, mindset, positions, techniques (beginner to advanced), training methods, and key resources including YouTube links."> <meta property="og:type" content="article"> <meta property="og:url" content="http://cheatsheets.davidveksler.com/brazilian-jiu-jitsu.html"> - <!-- <meta property="og:image" content="[Your Image URL Here - e.g., BJJ related graphic]"> --> - <!-- <meta property="og:image:alt" content="Illustration of BJJ techniques or positions"> --> + <meta property="og:image" content="images/bjj-meditate-header.jpg"> <!-- Added OG image --> + <meta property="og:image:alt" content="Minimalist illustration of a BJJ practitioner meditating in seiza"> <meta property="og:site_name" content="BJJ Cheatsheet"> <meta property="og:locale" content="en_US"> @@ -25,8 +25,8 @@ <meta name="twitter:title" content="Brazilian Jiu-Jitsu (BJJ) Cheatsheet: Interactive Guide (Beginner to Advanced)"> <meta name="twitter:description" content="Your ultimate quick guide to BJJ! Explore fundamentals, mindset, positions, techniques (beginner to advanced), sweeps, YouTube resources, and more."> <meta name="twitter:url" content="http://cheatsheets.davidveksler.com/brazilian-jiu-jitsu.html"> - <!-- <meta name="twitter:image" content="[Your Image URL Here - e.g., BJJ related graphic]"> --> - <!-- <meta name="twitter:image:alt" content="Illustration of BJJ techniques or positions"> --> + <meta name="twitter:image" content="images/bjj-meditate-header.jpg"> <!-- Added Twitter image --> + <meta name="twitter:image:alt" content="Minimalist illustration of a BJJ practitioner meditating in seiza"> <!-- CSS --> <link rel="preconnect" href="https://fonts.googleapis.com"> @@ -39,17 +39,17 @@ <style> :root { --font-primary: 'Roboto', sans-serif; - --font-headings: 'Oswald', sans-serif; /* More impactful heading font */ - --color-bg: #f4f4f4; /* Slightly off-white */ + --font-headings: 'Oswald', sans-serif; + --color-bg: #f4f4f4; --color-text: #333; - --color-primary: #0a2e5b; /* Deeper Navy Blue */ - --color-secondary: #3a6aa0; /* Mid Blue */ - --color-accent: #d9a404; /* Gold/Yellow accent - like belt stripes */ + --color-primary: #0a2e5b; + --color-secondary: #3a6aa0; + --color-accent: #d9a404; --color-card-bg: #ffffff; --color-card-border: #ddd; --color-link: #0d6efd; --color-link-hover: #0a58ca; - --color-expand-bg: #eaf2fa; /* Very light blue */ + --color-expand-bg: #eaf2fa; --shadow-soft: 0 3px 8px rgba(0, 0, 0, 0.08); --shadow-hover: 0 6px 15px rgba(0, 0, 0, 0.12); } @@ -58,7 +58,7 @@ background-color: var(--color-bg); font-family: var(--font-primary); color: var(--color-text); - padding-top: 0; + padding-top: 0; /* Removed padding-top */ padding-bottom: 3rem; font-size: 16px; line-height: 1.7; @@ -67,8 +67,8 @@ h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--color-primary); - font-weight: 500; /* Oswald looks good at 500 */ - text-transform: uppercase; /* Martial arts feel */ + font-weight: 500; + text-transform: uppercase; letter-spacing: 0.5px; } @@ -84,19 +84,40 @@ .small { font-size: 0.85em; } .text-accent { color: var(--color-accent); } + /* Hero Image Section */ + .hero-image-container { + background-color: #edebe8; /* Match image background */ + text-align: center; + padding: 0; /* Remove padding */ + margin: 0; + line-height: 0; /* Prevent extra space below image */ + overflow: hidden; /* Ensure object-fit works well */ + width: 100%; /* Ensure it takes full width */ + } + .hero-image-container img { + width: 100%; /* Make image scale with container */ + height: auto; /* Maintain aspect ratio initially */ + max-height: 400px; /* Limit max height */ + object-fit: cover; /* Scale the image while preserving aspect ratio, covering the element */ + object-position: center bottom; /* Focus on the bottom center part of the image */ + display: block; /* Remove potential bottom space */ + } + + .page-header { - padding: 4rem 1.5rem; + padding: 2.5rem 1.5rem 3rem 1.5rem; /* Adjusted padding */ margin-bottom: 3rem; text-align: center; background-color: var(--color-primary); color: #fff; - border-bottom: 6px solid var(--color-accent); /* Accent border */ + border-bottom: 6px solid var(--color-accent); + margin-top: 0; /* Remove margin-top to connect with hero */ } .page-header h1 { color: #ffffff; font-weight: 600; margin-bottom: 0.75rem; - font-size: 3.2rem; /* Larger */ + font-size: 3.2rem; display: flex; align-items: center; justify-content: center; @@ -105,7 +126,7 @@ .page-header h1 .bi { font-size: 0.8em; opacity: 0.9; - color: var(--color-accent); /* Accent icon */ + color: var(--color-accent); } .page-header .lead { color: #e0e0e0; @@ -113,8 +134,8 @@ max-width: 750px; margin-left: auto; margin-right: auto; - font-family: var(--font-primary); /* Lead uses primary font */ - text-transform: none; /* Lead is not uppercase */ + font-family: var(--font-primary); + text-transform: none; letter-spacing: normal; } @@ -123,7 +144,7 @@ .info-card { background-color: var(--color-card-bg); border: 1px solid var(--color-card-border); - border-left: 5px solid var(--color-secondary); /* Side accent */ + border-left: 5px solid var(--color-secondary); border-radius: 0.3rem; box-shadow: var(--shadow-soft); height: 100%; @@ -134,7 +155,7 @@ .info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); - border-left-color: var(--color-accent); /* Change side accent on hover */ + border-left-color: var(--color-accent); } .info-card .card-body { padding: 1.5rem 1.75rem; @@ -142,19 +163,19 @@ } .info-card h5 { color: var(--color-primary); - text-align: left; /* Align left */ + text-align: left; margin-bottom: 1.25rem; padding-bottom: 0.5rem; - border-bottom: 1px solid var(--color-card-border); /* Underline heading */ + border-bottom: 1px solid var(--color-card-border); font-weight: 500; - font-size: 1.3rem; /* Slightly larger heading */ + font-size: 1.3rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .info-card h5 .bi { - font-size: 1.1em; /* Icon size relative to heading */ + font-size: 1.1em; color: var(--color-secondary); margin-right: 0.2rem; } @@ -173,14 +194,14 @@ margin-bottom: 0; list-style: none; } - .info-card .card-body ul > li { /* Adjusted selector */ - margin-bottom: 0.7rem; /* More space between items */ + .info-card .card-body ul > li { + margin-bottom: 0.7rem; color: var(--color-text); position: relative; font-size: 0.98rem; - padding-left: 1.8rem; /* More padding for icon */ + padding-left: 1.8rem; } - .info-card .card-body ul > li::before { /* Adjusted selector */ + .info-card .card-body ul > li::before { content: "\F632"; /* Dot icon */ font-family: 'bootstrap-icons'; position: absolute; @@ -197,17 +218,16 @@ .group-label { font-size: 0.85em; font-style: italic; - color: #6c757d; /* Bootstrap text-muted color */ + color: #6c757d; margin-top: 1rem; margin-bottom: 0.3rem; - padding-left: 0.2rem; /* Slight indent */ - font-weight: 500; /* Roboto medium */ + padding-left: 0.2rem; + font-weight: 500; } .group-label:first-of-type { - margin-top: 0; /* No top margin for the first label in a list */ + margin-top: 0; } - /* Nested list styling */ .info-card ul ol, .expandable-content ol { list-style: decimal; @@ -224,7 +244,7 @@ content: none; } .expandable-content ul:not(.list-unstyled) { - list-style: disc; /* Keep standard disc for nested UL */ + list-style: disc; padding-left: 2.5rem; margin-top: 0.6rem; margin-bottom: 0.6rem; @@ -234,7 +254,7 @@ margin-bottom: 0.4rem; } - .section-heading { /* Use for distinct sections within a card if needed */ + .section-heading { font-family: var(--font-headings); font-weight: 500; color: var(--color-secondary); @@ -254,7 +274,7 @@ cursor: pointer; text-decoration: none; color: var(--color-primary); - font-weight: 500; /* Roboto 500 */ + font-weight: 500; transition: color 0.2s, border-color 0.2s; display: inline-block; } @@ -267,24 +287,24 @@ font-size: 0.8em; margin-left: 0.2em; transition: transform 0.3s ease-in-out; - display: inline-block; /* Ensure icon is part of flow */ + display: inline-block; } .expandable-trigger[aria-expanded="true"] .bi { transform: rotate(180deg); } - .expandable-trigger .bi-youtube { /* Style YouTube icon differently */ - color: #FF0000; /* YouTube Red */ + .expandable-trigger .bi-youtube { + color: #FF0000; font-size: 0.9em; margin-left: 0.3em; vertical-align: baseline; - transform: none !important; /* Prevent rotation */ + transform: none !important; } .expandable-content { background-color: var(--color-expand-bg); border: 1px solid var(--color-card-border); border-radius: 0.3rem; - padding: 1rem 1.2rem; /* More padding */ + padding: 1rem 1.2rem; margin-top: 0.5rem; margin-bottom: 0.8rem; font-size: 0.95em; @@ -292,7 +312,7 @@ box-shadow: inset 0 1px 4px rgba(0,0,0,0.06); } .expandable-content p:last-child { margin-bottom: 0; } - .expandable-content a { font-weight: 500; } /* Roboto 500 */ + .expandable-content a { font-weight: 500; } footer { padding: 3rem 0 2rem 0; @@ -304,22 +324,56 @@ } footer a { color: var(--color-secondary); } footer a:hover { color: var(--color-primary); } - footer .bi { margin-right: 0.2em; } /* Icon spacing in footer */ + footer .bi { margin-right: 0.2em; } .disclaimer { font-size: 0.8em; font-style: italic; color: #6c757d; - margin-top: 1rem; /* Add space above disclaimer */ - /* margin-left: -1.8rem; Realign to default */ - /* padding-left: 0.2rem; */ - text-align: left; /* Ensure left align */ + margin-top: 1rem; + text-align: left; + } + + /* Responsive adjustments for header image */ + @media (max-width: 768px) { + .hero-image-container img { + max-height: 300px; /* Adjust max height for smaller screens */ + } + .page-header h1 { + font-size: 2.5rem; /* Adjust heading size */ + } + .page-header .lead { + font-size: 1.1rem; /* Adjust lead text size */ + } + } + @media (max-width: 576px) { + .hero-image-container img { + max-height: 250px; /* Further adjust max height */ + } + .page-header h1 { + font-size: 2rem; /* Smaller heading */ + flex-direction: column; /* Stack icon and text */ + gap: 0.5rem; + } + .page-header .lead { + font-size: 1rem; /* Smaller lead text */ + } + .page-header { + padding: 2rem 1rem 2.5rem 1rem; /* Adjust padding */ + } } </style> </head> <body> + <!-- Hero Image --> + <div class="hero-image-container"> + <!-- === REPLACED with actual image path === --> + <img src="images/bjj-meditate-header.jpg" alt="Minimalist illustration of a BJJ practitioner meditating in seiza, seen from behind"> + <!-- === END IMAGE REPLACEMENT === --> + </div> + <header class="page-header"> <div class="container"> <h1><i class="bi bi-diagram-2-fill"></i> Brazilian Jiu-Jitsu Cheatsheet</h1> @@ -720,16 +774,13 @@ <li><strong>Rolling (Sparring):</strong> Live grappling applying techniques against resistance. Vary intensity & partners.</li> <li><strong>Instructionals/Seminars:</strong> Supplement gym training with focused external learning.</li> </ul> + <div class="section-heading"><i class="bi bi-gem"></i> Belt System (Adult)</div> - <ul class="list-inline"> - <li class="list-inline-item"><i class="bi bi-square-fill" style="color: white; border: 1px solid black; vertical-align: middle;"></i> White</li> - <li class="list-inline-item"><i class="bi bi-square-fill" style="color: blue; vertical-align: middle;"></i> Blue</li> - <li class="list-inline-item"><i class="bi bi-square-fill" style="color: purple; vertical-align: middle;"></i> Purple</li> - <li class="list-inline-item"><i class="bi bi-square-fill" style="color: brown; vertical-align: middle;"></i> Brown</li> - <li class="list-inline-item"><i class="bi bi-square-fill" style="color: black; vertical-align: middle;"></i> Black</li> - <li class="list-inline-item"><i class="bi bi-square-fill" style="color: red; vertical-align: middle;"></i> Coral/Red</li> - </ul> - <p class="small">Stripes (0-4) mark progress within belts. Time varies greatly (avg. 8-15 yrs to Black). Focus on learning, not the belt.</p> + <!-- === REPLACE THIS SRC with the actual path to your belts image === --> + <img src="images/bjj-belts.jpg" alt="BJJ Belt Progression: White, Blue, Purple, Brown, Black" class="img-fluid rounded mb-3"> + <!-- === END IMAGE REPLACEMENT === --> + <p class="small">Stripes (0-4) mark progress within belts. Time varies greatly (avg. 8-15 yrs to Black). Focus on learning, not the belt. Kids have a different belt system.</p> + <div class="section-heading"><i class="bi bi-journal-check"></i> Gym Etiquette</div> <ul> @@ -788,14 +839,7 @@ <a href="https://www.youtube.com/@GracieBreakdown" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> Gracie Breakdown</a> | <a href="https://www.youtube.com/@JohnDanaherBJJ" target="_blank" rel="noopener noreferrer"><i class="bi bi-youtube"></i> John Danaher</a> </p> - <div> - <a href="https://www.linkedin.com/in/davidveksler/" title="David Veksler on LinkedIn" target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary"> - <i class="bi bi-linkedin"></i> LinkedIn - </a> - <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2 link-secondary"> - <i class="bi bi-collection"></i> All Cheatsheets - </a> - </div> + <p class="mb-2">© 2025 AI Assistant. Information for reference purposes only. Always prioritize safety and qualified instruction.</p> </footer> Binary files /dev/null and b/images/bjj-belts.jpg differ Binary files /dev/null and b/images/bjj-meditate-header.jpg differ