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>New Page Indian Coding Wala</title></head><body><header><div class="container__left"><div class="nav__logo">Indian Coding Wala</div><div class="content"><h1 class="title">Welcome,<br />Indian Coding Wala</h1><p class="subtitle">Creative Designer and Social Media Officer</p><p class="description">I have to be able to communicate ideas to a wide range ofstackholders in both my own voice and in Sprout's.<br />Communicatingon social.</p><div class="action__btns"><button class="btn portfolio">Portfolio</button><button class="btn portfolio">Download CV</button></div></div></div><div class="container__right"><ul class="nav__links"><li class="link"><b>Home</b></li><li class="link"><b>HTML</b></li><li class="link"><b>CSS</b></li><li class="link"><b>JS</b></li></ul><div class="image"><img src="https://images.pexels.com/photos/5007442/pexels-photo-5007442.jpeg?auto=compress&cs=tinysrgb&w=600" alt="profile" /></div></div></header></body></html>
CSS Source Code :-
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");:root {--primary-color: #fcfbfb;--secondary-color: #ec72158a;--text-light: #767268;--extra-light: #000000;}* {padding: 0;margin: 0;box-sizing: border-box;}img {width: 100%;}body {font-family: "Poppins", sans-serif;background-color: var(--primary-color);}header {display: flex;min-height: 100vh;}.container__left,.container__right {flex: 1;display: flex;align-items: center;position: relative;}.container__left {background-color: var(--secondary-color);justify-content: flex-end;}.nav__logo {position: absolute;top: 0;width: 100%;max-width: 600px;padding: 2rem;margin-left: auto;font-size: 1.2rem;font-weight: 600;color: var(--extra-light);}.content {max-width: 600px;padding: 2rem;padding-top: 5rem;flex: 1;color: var(--extra-light);display: grid;gap: 2rem;}.title {font-size: 3.5rem;font-weight: 800;line-height: 4rem;}.subtitle {font-size: 1.2rem;font-weight: 600;}.description {max-width: 500px;}.action__btns {display: flex;align-items: center;gap: 1rem;}.btn {padding: 1rem 2rem;font-size: 1.2rem;background-color: transparent;outline: none;border: none;border-radius: 5rem;cursor: pointer;}.portfolio {background-color: rgb(12, 163, 205);}.cv {color: var(--text-light);text-decoration: underline;transition: 0.3s;}.cv:hover {color: var(--extra-light);}.nav__links {position: absolute;top: 0;width: 100%;max-width: 600px;padding: 2rem;list-style: none;display: flex;align-items: center;justify-content: space-around;z-index: 1;}.link {padding: 0 0.5rem;color: var(--text-light);cursor: pointer;transition: 0.3s;}.link:hover {color: var(--extra-light);}.image {max-width: 600px;padding: 2rem;padding-top: 5rem;flex: 1;display: grid;place-content: center;position: relative;}.image img {max-width: 400px;}.image__content {color: var(--extra-light);position: absolute;bottom: 1rem;right: 1rem;display: flex;flex-direction: column;align-items: flex-end;gap: 1rem;}.image__content h4 {background-color: var(--extra-light);color: var(--primary-color);padding: 0.5rem;border-radius: 5px;}.image__content p {font-size: 0.9rem;font-weight: 600;}@media (width < 900px) {header {flex-direction: column-reverse;}.container__left,.container__right {justify-content: center;}.content {text-align: center;}.action__btns {justify-content: center;}}
Social Plugin