Design Your Personal Responsive Portfolio Website with HTML and CSS By Indian Coding Wala

Omnath Dubey 5/13/2023 02:49:00 AM

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
href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Indian Coding Wala Responsive Portfolio</title>
</head>
<body>
<nav>
<div class="nav__content">
<div class="logo"><a href="#">Indian Coding Wala</a></div>
<label for="check" class="checkbox">
<i class="ri-menu-line"></i>
</label>
<input type="checkbox" name="check" id="check" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<section class="section">
<div class="section__container">
<div class="content">

<h1 class="title">
I'm <span class="description">Omnath Dubey<br /></span> a Web Developer
</h1>
<p class="description">
Welcome to my web developer portfolio! I'm Omnath Dubey, a skilled and
creative web developer with a passion for creating beautiful,
responsive, and user-friendly websites.
</p>
<div class="action__btns">
<button class="hire__me">Hire Me</button>

</div>
</div>
<div class="image">
<img src="https://scontent.fbom42-1.fna.fbcdn.net/v/t39.30808-6/338982164_221347343899329_8091575516380498881_n.jpg?stp=c0.122.1033.1033a_dst-jpg_s851x315&_nc_cat=106&ccb=1-7&_nc_sid=da31f3&_nc_ohc=kMX17WgPJAUAX9bEUbF&_nc_ht=scontent.fbom42-1.fna&oh=00_AfDQRihDHpJqLPNuCKkcxhakz0pd1RIocMAvpla6SjVwxg&oe=6464CDA5" alt="profile" />
</div>
</div>
</section>
</body>
</html>

CSS Source Code :-

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");

:root {
--primary-color: #fdf10a;
--primary-color-dark: #e56007;
--secondary-color: #ca8a04;
--text-dark: #ffffff;
--text-light: #f7dd1e;
--extra-light: #0a0a0a;
--max-width: 1200px;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

a {
text-decoration: none;
}

body {
font-family: "Poppins", sans-serif;
}

nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000101;
z-index: 99;
}

.nav__content {
max-width: var(--max-width);
margin: auto;
padding: 1.5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}

nav .logo a {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
transition: 0.3s;
}
nav .logo a:hover {
color: var(--primary-color-dark);
}

nav .checkbox {
display: none;
}

nav input {
display: none;
}
nav .checkbox i {
font-size: 2rem;
color: var(--primary-color);
cursor: pointer;
}

ul {
display: flex;
align-items: center;
gap: 1rem;
list-style: none;
transition: left 0.3s;
}

ul li a {
padding: 0.5rem 1rem;
border: 2px solid transparent;
text-decoration: none;
font-weight: 600;
color: var(--text-dark);
transition: 0.3s;
}

ul li a:hover {
border-top-color: var(--secondary-color);
border-bottom-color: var(--secondary-color);
color: var(--secondary-color);
}

.section {
background-color: var(--extra-light);
}

.section__container {
min-height: 100vh;
max-width: var(--max-width);
margin: auto;
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
}

.content {
display: flex;
flex-direction: column;
justify-content: center;
}

.subtitle {
letter-spacing: 2px;
color: var(--text-light);
font-weight: 600;
margin-bottom: 0.5rem;
}

.title {
font-size: 2.5rem;
font-weight: 400;
line-height: 3rem;
color: var(--text-dark);
margin-bottom: 1rem;
}

.title span {
font-weight: 600;
}

.description {
line-height: 1.5rem;
color: var(--text-light);
margin-bottom: 2rem;
}

.action__btns {
display: flex;
gap: 1rem;
}

.action__btns button {
font-size: 1rem;
font-weight: 600;
letter-spacing: 2px;
padding: 1rem 2rem;
outline: none;
border: 2px solid var(--primary-color);
border-radius: 10px;
transition: 0.3s;
cursor: pointer;
}

.hire__me {
background-color: var(--primary-color);
color: #0a0606;
}

.hire__me:hover {
background-color: var(--primary-color-dark);
}

.portfolio {
color: var(--primary-color);
}

.portfolio:hover {
background-color: var(--primary-color-dark);
color: #ffffff;
}

.image {
display: grid;
place-items: center;
}

.image img {
width: min(25rem, 90%);
border-radius: 100%;
}

@media (width < 750px) {
nav .checkbox {
display: block;
}

ul {
position: absolute;
width: 100%;
height: calc(100vh - 85px);
left: -100%;
top: 85px;
background-color: var(--extra-light);
flex-direction: column;
justify-content: center;
gap: 3rem;
}

nav #check:checked ~ ul {
left: 0;
}

ul li a {
font-size: 1.25rem;
}

.section__container {
padding: 10rem 1rem 5rem 1rem;
text-align: center;
grid-template-columns: repeat(1, 1fr);
}

.image {
grid-area: 1/1/2/2;
}

.action__btns {
margin: auto;
}
}

Personal Responsive Portfolio

There are millions of websites created every day, also, there is much fake content spread on the internet. So, Our main goal is to provide you with 100% Original and Safe content that provides you a great and better experience on the world wide web. We mainly focus on our service so and improving it regularly to provide a better user experience to all users. Basically, we focus on the News niche so, our main priority is to search for new content and present it in front of you to learn something new.