the following is the code used:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Home</title>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div data-class-network="container">
<div data-class-network="nav-wrapper">
<div data-class-network="left-side">
<html>
<head>
<meta charset="utf-8"/>
<title>Home</title>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div data-class-network="container">
<div data-class-network="nav-wrapper">
<div data-class-network="left-side">
<div data-class-network="nav-link-wrapper active-nav-link">
<a href="index.html">Home</a>
</div>
<a href="index.html">Home</a>
</div>
<div data-class-network="nav-link-wrapper">
<a href="about.html">About</a>
</div>
<a href="about.html">About</a>
</div>
<div data-class-network="nav-link-wrapper">
<a href="https://www.behance.net/Luminouscrawler">Behance</a>
</div>
</div>
<div data-class-network="right-side">
<div data-class-network="brand">
<div> VAIBHAV SHARMA</div>
</div>
</div>
</div>
<div data-class-network="content-wrapper">
<div data-class-network="portfolio-items-wrapper">
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/duck.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A serene scenery of blissfully ignorant animals of worldly affairs.
</div>
</div>
</div>
<a href="https://www.behance.net/Luminouscrawler">Behance</a>
</div>
</div>
<div data-class-network="right-side">
<div data-class-network="brand">
<div> VAIBHAV SHARMA</div>
</div>
</div>
</div>
<div data-class-network="content-wrapper">
<div data-class-network="portfolio-items-wrapper">
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/duck.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A serene scenery of blissfully ignorant animals of worldly affairs.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/flash.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
It aint plagarism! its inspiration :)
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/flash.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
It aint plagarism! its inspiration :)
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/gentle.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
website design of one of my attempts at entrepreneurship that didnt go so well but I learned a lot about production, sales and marketting.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/gentle.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
website design of one of my attempts at entrepreneurship that didnt go so well but I learned a lot about production, sales and marketting.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/gogreen.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An app to safe water, electricity and fuel while earnign redeemable points. The app also promotes a competetive vibe within localities, measures metrics and relays realtime data to get a betetr idea about our country.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/gogreen.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An app to safe water, electricity and fuel while earnign redeemable points. The app also promotes a competetive vibe within localities, measures metrics and relays realtime data to get a betetr idea about our country.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/GoGreen3.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A calm and relaxing color palette with some interesting composition.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/GoGreen3.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A calm and relaxing color palette with some interesting composition.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/niki.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An attempt at capturing the unitiy within a frame with all its individual elements.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/niki.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An attempt at capturing the unitiy within a frame with all its individual elements.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/pool.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A pool cleaning boat that acts as a floating sculpture but beneath the water collects garbage.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/pool.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A pool cleaning boat that acts as a floating sculpture but beneath the water collects garbage.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/srishti.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A platform design for an educational institutions for students and faculty to easily navigate the many tasks of college life like GPA, assignments, feedback and groupwork.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/srishti.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A platform design for an educational institutions for students and faculty to easily navigate the many tasks of college life like GPA, assignments, feedback and groupwork.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/surreal.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An attempt at a distinct perspective merging nature within and around humans.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/surreal.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An attempt at a distinct perspective merging nature within and around humans.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/tres.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A music studio to produce and market local talent.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/tres.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
A music studio to produce and market local talent.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/vala.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An ambitious project, building a platform for artisans of kutch to maintain and run their business themselves online without relying on big brands.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/vala.jpg)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
An ambitious project, building a platform for artisans of kutch to maintain and run their business themselves online without relying on big brands.
</div>
</div>
</div>
<div data-class-network="portfolio-item-wrapper">
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/valkart.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
App design for a grocery shopping app which helps its users save on monthly bills.
</div>
</div>
</div>
<div data-class-network="portfolio-img-background" data-style-network="background-image:url(images/valkart.png)"></div>
<div data-class-network="text-wrapper">
<div data-class-network="subtitle">
App design for a grocery shopping app which helps its users save on monthly bills.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')
</body>
<script>
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover',() => {
portfolioItem.childNodes[1].classList.add('img-darken');
})
portfolioItem.addEventListener('mouseover',() => {
portfolioItem.childNodes[1].classList.add('img-darken');
})
portfolioItem.addEventListener('mouseout',() => {
portfolioItem.childNodes[1].classList.remove('img-darken');
})
})
</script>
</html>
</script>
</html>
About.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>About</title>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div data-class-network="container">
<div data-class-network="nav-wrapper">
<div data-class-network="left-side">
<html>
<head>
<meta charset="utf-8"/>
<title>About</title>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div data-class-network="container">
<div data-class-network="nav-wrapper">
<div data-class-network="left-side">
<div data-class-network="nav-link-wrapper">
<a href="index.html">Home</a>
</div>
<a href="index.html">Home</a>
</div>
<div data-class-network="nav-link-wrapper active-nav-link">
<a href="about.html">About</a>
</div>
<a href="about.html">About</a>
</div>
<div data-class-network="nav-link-wrapper">
<a href="https://www.behance.net/Luminouscrawler">Behance</a>
</div>
</div>
<div data-class-network="right-side">
<div data-class-network="brand">
<div> VAIBHAV SHARMA</div>
</div>
</div>
</div>
<div data-class-network="content-wrapper">
<div data-class-network="two-column-wrapper">
<div data-class-network="profile-img-wrapper">
<img src="images/Profile_image.jpg">
</div>
<div data-class-network="profile-content-wrapper">
<h1> Hi, hope you liked my portfolio.</h1>
<p>Over the past 4 years I have worked on both freelance and full time on site basis, for Companies both from India and abroad. I am writing this mail to you to offer my services as a UI/UX Designer for your firm. I have Freelanced for AAPNA Infotech (Delhi), Valkart (Mumbai), SimplySecure (UK), Ebji co. (Oman), Sleepycat (Banglore) and worked Fulltime at Ideafarms (Gurgaon).</p>
</div>
</div>
</div>
<a href="https://www.behance.net/Luminouscrawler">Behance</a>
</div>
</div>
<div data-class-network="right-side">
<div data-class-network="brand">
<div> VAIBHAV SHARMA</div>
</div>
</div>
</div>
<div data-class-network="content-wrapper">
<div data-class-network="two-column-wrapper">
<div data-class-network="profile-img-wrapper">
<img src="images/Profile_image.jpg">
</div>
<div data-class-network="profile-content-wrapper">
<h1> Hi, hope you liked my portfolio.</h1>
<p>Over the past 4 years I have worked on both freelance and full time on site basis, for Companies both from India and abroad. I am writing this mail to you to offer my services as a UI/UX Designer for your firm. I have Freelanced for AAPNA Infotech (Delhi), Valkart (Mumbai), SimplySecure (UK), Ebji co. (Oman), Sleepycat (Banglore) and worked Fulltime at Ideafarms (Gurgaon).</p>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
Style.css
/* Master styles */
body{
margin: 0px;
font-family: "Lato", sans-serif;
}
body{
margin: 0px;
font-family: "Lato", sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
display: grid;
grid-template-columns: 1fr;
}
/* Nav styles */
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 38px;
}
.left-side {
display: flex;
}
display: flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
margin-right: 20px;
font-size: 0.9em;
text-transform: uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s;
}
color: #8a8a8a;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover {
border-bottom: 1px solid black;
}
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover {
color: black;
}
color: black;
}
/* Portfolio styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
position: relative;
}
.portfolio-img-background {
height: 300px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
height: 300px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.text-wrapper .subtitle {
transition: 1s;
font-weight: 600;
color: transparent;
}
transition: 1s;
font-weight: 600;
color: transparent;
}
.text-wrapper:hover .subtitle {
font-weight: 600;
color: lightseagreen;
}
font-weight: 600;
color: lightseagreen;
}
.img-darken {
transition: 1s;
filter: brightness(10%);
}
transition: 1s;
filter: brightness(10%);
}
/* about */
.two-column-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
.profile-img-wrapper img{
width: 100%;
}
.two-column-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
.profile-img-wrapper img{
width: 100%;
}
.profile-content-wrapper {
padding: 30px;
}
padding: 30px;
}
.profile-content-wrapper h1{
color: lightseagreen;
}
color: lightseagreen;
}
.active-nav-link {
border-bottom: 1px solid black;
}
border-bottom: 1px solid black;
}
.active-nav-link a {
color: black !important;
}
color: black !important;
}
