HTML Source Code :-
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="style.css" /><title>Portfolio Indian Coding Wala</title></head><body><main class="container"><div class="container__left"><div class="ribbon__white"><h3><span>I</span>CW<span>.</span></h3></div><div class="ribbon__red"></div><img src="https://images.pexels.com/photos/13079892/pexels-photo-13079892.jpeg?auto=compress&cs=tinysrgb&w=600" alt="profile" /></div><div class="container__right"><div class="navbar"><span>Home</span><span>All Team</span><span>Cricket </span><span>Contact</span><span class="join">Join</span></div><div class="content"><h1>Indian<br /><span>Coding Wala</span><br />Cricket Academy<span>.</span></h1><p>A cricket academy is a training center for aspiring cricket players, where they can receive professional coaching and guidance to improve their skills and prepare for competitive cricket. The academy provides a structured learning environment where players can work on their batting, bowling, fielding, and overall fitness, under the supervision of experienced coaches.</p></div></div></main></body></html>
CSS Source Code :-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;800&display=swap");:root {--primary-color: #e79b0c;--primary-color-dark: #d7204e;--secondary-color: #000000;--text-dark: #1f2937;--extra-light: #ffffff;--max-width: 600px;}* {padding: 0;margin: 0;box-sizing: border-box;}a {text-decoration: none;}body {font-family: "Poppins", sans-serif;}.container {min-height: 100vh;background-color: var(--secondary-color);display: flex;}.container__left,.container__right {flex: 1;position: relative;}.ribbon__white {position: absolute;height: 100%;width: 400px;top: 0;right: 5rem;text-align: center;background-color: var(--extra-light);}.ribbon__white h3 {padding: 2rem;font-size: 2.5rem;font-weight: 800;color: var(--text-dark);}.ribbon__white h3 span {color: var(--primary-color);}.container__left img {position: absolute;bottom: 0;right: calc(5rem + 40px);width: 320px;}.container__right {padding-left: 2rem;display: flex;align-items: center;justify-content: flex-start;}.navbar {padding: 2.5rem 0;position: absolute;top: 0;display: flex;align-items: center;gap: 3rem;}.navbar span {padding: 0.5rem;color: var(--extra-light);font-size: 1rem;font-weight: 500;transition: 0.3s;}.navbar span:hover {color: var(--primary-color);cursor: pointer;}.navbar .join {width: 80px;text-align: center;font-weight: 500px;border-radius: 5rem;background-color: var(--primary-color);color: var(--extra-light) !important;transition: 0.3s;}.navbar .join:hover {background-color: var(--primary-color-dark);}.content {max-width: var(--max-width);display: grid;gap: 1rem;}.content h1 {color: var(--extra-light);font-size: 4rem;line-height: 4rem;}.content h1 span {color: var(--primary-color);}.content p {color: var(--extra-light);}
Social Plugin