HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main class='main'>
<nav class='navBar'>
<h1>Aditya Gusain Portfolio</h1>
<div class='navigationMenu'>
<a href="#aboutMe">About Me</a>
<a href="#skills">Skills</a>
<a href="#projects">Projects</a>
<a href="#contactForm">Let's Connect!</a>
<div>
</nav>
<section class='heroSection'>
<img
class='profileImage'
src='<https://uploads-ssl.webflow.com/60798d9b0b61160814b3d8c3/611e2bb5e961e3667e64d413_WhatsApp%20Image%202021-08-19%20at%203.21.00%20PM.jpeg>'/>
<div class='herosectionDetails'>
<h1>Aditya Gusain</h1>
<h3>Full-Stack Developer at ShapeAI</h3>
</div>
</section>
<section class='aboutMe' id='aboutMe'>
<h1>What I Do...</h1>
<p>Some basic details can be added hear regarding what you are realy known for. What you have done in your past job experience. Why do you think you are doing well and more compatible with respect to other users and creators. Some basic details can be added hear regarding what you are realy known for. What you have done in your past job experience. Why do you think you are doing well and more compatible with respect to other users and creators. Some basic details can be added hear regarding what you are realy known for. What you have done in your past job experience. Why do you think you are doing well and more compatible with respect to other users and creators.</p>
</section>
<section class='skillsAndProjects'>
<div class='skills' id='skills'>
<h1 class='cardHeading'>Skills</h1>
<img title='HTML' src='./images/html.svg'>
<img title='CSS' src='./images/css.svg'>
<img title='Javascript' src='./images/javascript.svg'>
<img title='Node.JS' src='./images/node.svg'>
<img title='React' src='./images/react.svg'>
<img title='MongoDB' src='./images/mongodb.svg'>
<img title='Firebase' src='./images/firebase.svg'>
<img title='Redux' src='./images/redux.svg'>
</div>
<div class='projects' id='projects'>
<h1 class='cardHeading'>Projects</h1>
<div class='projectContainer'>
<img src='./images/css.svg'/>
<div class='projectDescription'>
<h4>Project Name</h4>
<p>Some details of the project.Some details of the project.Some details of the project.</p>
</div>
</div>
<div class='projectContainer'>
<img src='./images/css.svg'/>
<div class='projectDescription'>
<h4>Project Name</h4>
<p>Some details of the project</p>
</div>
</div>
</div>
</section>
<section class='contactForm' id='contactForm'>
<h1>Let's Connect!</h2>
<div class='formGroup'>
<label for='name'>Enter Full Name</label><br/>
<input type='text' id='name' placeholder='Full Name'/>
</div>
<div class='formGroup'>
<label for='email'>Email</label><br/>
<input type='text' id='email' placeholder='Email'/>
</div>
<div class='formGroup'>
<label for='message'>Message</label><br/>
<textarea placeholder="Send some message!" id="message" name="w3review" rows="4" cols="50"></textarea>
</div>
<button class='submitButton' onClick={submit()}>Connect</button>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS
@import url("<https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap>");
/* universal selector */
* {
outline: none;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Smooth Scroll */
html{
scroll-behavior: smooth;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Custom Scrollbar END */
/* Styles for background */
body::before{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: linear-gradient(
180deg
, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.45) 100%);
-webkit-backdrop-filter: saturate(3);
backdrop-filter: saturate(3);
}
body {
font-family: "Poppins", sans-serif;
background-image: url(<https://4kwallpapers.com/images/wallpapers/macos-big-sur-apple-layers-fluidic-colorful-dark-wwdc-2020-5120x2880-1432.jpg>);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2em;
margin: 0;
width: 100%;
height: 100vh;
}
@media screen and (max-width: 480px) {
body {
padding: 0.8em;
}
}
main {
background-color: rgb(255 255 255 / 31%);
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 1250px;
width: 100%;
border-radius: 5px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
font-weight: 500;
padding: 1rem 1rem 2rem 1rem;
overflow: auto;
}
main::-webkit-scrollbar{
display: none;
}
/* navbar styles */
.navBar{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border-bottom: 1.5px solid rgb(255 255 255 / 35%);
}
.navBar > h1,.navBar > navigationMenu{
margin: 10px;
}
.navigationMenu > a{
padding: 5px 10px;
margin-left: 10px;
text-decoration: none;
color: black;
display: inline-block;
}
.navigationMenu > a:hover{
transition: ease-in-out 300ms;
background: white;
}
@media only screen and (max-width: 760px){
.navigationMenu{
display: none;
}
}
/* navbar styles end */
/* Hero section styles */
.heroSection{
margin: 2rem 0;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
.profileImage{
width: 350px;
height: 350px;
object-fit: cover;
object-position: center;
border-radius: 5px;
}
.herosectionDetails{
text-align: center;
}
.herosectionDetails > h1{
font-size: 50px;
margin: 10px;
}
/* Hero section styles end */
/* about me styles */
.aboutMe{
margin: 1rem;
text-align: center;
}
/* about me styles end */
.skillsAndProjects{
margin: 1rem;
display: grid;
grid-template-columns: [one] 50% [two] 50%;
grid-gap: 10px;
align-items: center;
justify-content: center;
width: calc(100% - 2rem);
}
@media only screen and (max-width: 720px){
.skillsAndProjects{
grid-template-columns: [one] 100%;
grid-template-rows: [one] [two];
}
}
.skillsAndProjects > .skills,.skillsAndProjects> .projects{
min-width: 250px;
margin: 1rem;
min-height: 250px;
}
.skillsAndProjects > .skills, .skillsAndProjects > .projects{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
align-content: center;
background-color: rgb(255 255 255 / 31%);
border: 1px solid rgb(255 255 255 / 31%);
border-radius: 5px;
padding: 1rem;
margin-bottom: 2rem;
}
.cardHeading{
display: block;
width: 90%;
/* text-align: center; */
margin: 0;
margin-bottom: 1rem;
}
.skillsAndProjects > .skills > img{
width: 60px;
height: 60px;
margin-bottom: 15px;
margin-right: 15px;
}
.skillsAndProjects > .skills > img:hover{
transition: ease-in 300ms;
transform: scale(0.85);
cursor: pointer;
}
.projectContainer{
display: flex;
width: 90%;
}
.projectContainer > img{
width: 60px;
height: 60px;
padding-right: 10px;
}
.projectContainer > .projectDescription > h4{
margin: 0;
}
.projectContainer > .projectDescription > p{
margin: 0;
margin-bottom: 1rem;
}
.contactForm{
margin: 2rem;
width: calc(100% - 4rem);
background-color: rgb(255 255 255 / 31%);
border: 1px solid rgb(255 255 255 / 31%);
border-radius: 5px;
padding: 1rem;
}
.contactForm > .formGroup{
margin-bottom: 1rem;
}
.formGroup > input, .formGroup > textarea{
width: 100%;
padding: 5px 10px;
margin-top: 5px;
font-weight: 600;
}
.submitButton{
padding: 10px 20px;
font-weight: 600;
font-size: 15px;
}
@media only screen and (max-width: 460px){
.profileImage{
width: 250px;
height: 250px;
object-fit: cover;
object-position: center;
border-radius: 5px;
}
.herosectionDetails > h1{
font-size: 30px;
margin-top: 1.5rem;
margin-bottom: 0rem;
}
.herosectionDetails > h3{
font-size: 20px;
margin: 0;
font-weight: 400;
}
}