<head>
<script src="https://kit.fontawesome.com/c253558678.js" crossorigin="anonymous"></script>
<title>Shahid's Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<header>
<div class="navigation-bar">
<ul>
<li>
<a href="#about-section">About</a>
</li>
<li>
<a href="#project-grid">Skills</a>
</li>
<li>
<a href="#contact-section">Contact</a>
</li>
</ul>
</div>
</header>
<div class="intro-section">
<h1 class="intro-heading">
<b>Shahid.is( )</b> <br>Creative Frontend Developer, UI and Graphic Designer.
</h1>
</div>
<div class="about-section" id="about-section">
<div class="info">
<h1 class="about-heading">
- About Me
</h1>
<h3 class="about-desc">
I am Frontend Developer based in Hyderbad, India.<br> I love to create UI designs, Responsive Websites and Android Apps. I design and code beautifully simple things, and I love what I do.
</h3>
</div>
</div>
<div class="project-section" id="project-grid">
<h1 class="project-heading">
Skills -
</h1>
<div class="project-grid">
<div class="featured-project-one">
<img class="project-images-one" src="https://shahidayan.github.io/ui_design.svg" style="height:100%;width: 100%;">
<div class="overlay">
<div><a href="http://maxxfibernet.in" target="_blank" class="text">UI Designing</a></div>
</div>
</div>
<div class="featured-project-two">
<img class="project-images-two" src="https://shahidayan.github.io/front_end.svg" style="height:100%;width: 100%;">
<div class="overlay">
<div><a href="http://maxxfibernet.in" target="_blank" class="text">Frontend Development</a></div>
</div>
</div>
<div class="featured-project-three">
<img src="https://shahidayan.github.io/promo_graphic.svg" class="project-images-one" style="height:100%;width: 100%;background-color: #fff;">
<div class="overlay">
<div><a href="#" class="text">Promotional Graphic Content</a></div>
</div>
</div>
</div>
</div>
<div class="contact-section" id="contact-section">
<div class="heading-form">
<h1 class="contact-heading">
- Contact Me
</h1>
<form class="contact-form">
<input type="text" placeholder="Name">
<input type="email" placeholder="E-mail" required>
<input type="text" placeholder="Message">
<button class="send-msg">SEND</button>
</form>
</div>
<div class="social-media">
<div class="insta">
<a href="http://instagram.com/shahidayanofficial" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
<div class="insta">
<a href="http://facebook.com/iamyourpapa" target="_blank"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="insta">
<a href="https://github.com/shahidayan" target="_blank"><i class="fab fa-github"></i></a>
</div>
<div class="insta">
<a href="http://twitter.com/shahidayankhan1" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</body>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body{
margin: 0%;
padding: 0%;
font-family: 'Roboto', sans-serif;
background-color: #303841;
}
header{
background-color:#be3144;
margin: 0%;
padding: 0%;
}
ul{
margin: 0%;
padding: 0%;
}
a{
text-decoration: none;
color: white;
font-size: 15px;
font-weight: 600;
}
li{
list-style-type: none;
display:inline;
padding: 21px;
margin: 0%;
}
.navigation-bar{
padding:20px;
margin: 0%;
box-shadow: 0px 2px #80212e;
}
li:hover{
animation-name: colorful;
animation-duration: 1s;
background-color: #80212e;
}
@keyframes colorful {
0% {
background-color: #be3144;
}
100% {
background-color: #80212e;
}
}
.intro-section{
background-color: #303841;
height:100vh,max-content;
margin-top: 2px;
padding: 0%;
}
.intro-heading{
margin: 0px;
padding:20%;
text-align: center;
color: #fff;
font-weight: 400;
font-size: 3rem;
}
@media (max-width: 400px){
.intro-heading{
font-size:2rem;
}
.insta{
padding: 5px;
}
.about-section{
height:max-content;
}
}
.about-section{
background-color: #174259;
margin: 0%;
padding: 0%;
height: 60vh;
}
.about-heading{
padding: 0%;
margin: 0%;
padding:5%;
text-align: right;
color: #fff;
font-weight: 400;
font-size: 3rem;
}
.about-desc{
color: #fff;
padding: 10px;
text-align: right;
font-size: 1.75rem;
}
.project-section{
justify-content: center;
width: 100%;
height:130vh,max-content;
background-color: #30343f;
}
.project-heading{
margin: 0%;
padding: 0%;
color: #fff;
padding-top: 30px;
padding-left: 30px;
font-size: 3rem;
font-weight: 400;
}
.contact-section{
background-color: #143d5d;
margin: 0%;
padding: 0%;
height: 100vh, max-content;
}
.contact-heading{
margin: 0%;
padding: 0%;
color: #fff;
padding-top: 30px;
padding-right: 30px;
font-size: 3.5rem;
font-weight: 400;
text-align: right;
}
.contact-form{
padding: 10px;
}
input{
border-radius: 5;
width: 50vw;
outline: none;
background: transparent;
display: flex;
padding: 10px;
margin: 50px;
margin-top: 90px;
color: #039be5;
border: none;
border-bottom: 1px solid #039be5;
font-family: 'roboto', 'open sans';
}
input:focus{
border-bottom-color: #00ccff;
}
label{
padding: 25px;
}
input::placeholder{
color: #039be5;
font-size: 15px;
font-family: 'roboto', 'open sans';
}
.send-msg{
padding: 10px;
margin: 50px;
background:transparent;
outline: none;
border:1px solid #039be5;
color: #039be5;
width: 100px;
cursor: pointer;
}
.project-grid{
display: flex;
padding: 10px;
}
.featured-project-one{
background-color: #fff;
width: 400px;;
height: 400px;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-two{
width: 400px;
height: 400px;
background-color: #fff;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-three{
width: 400px;
height: 400px;
background-color: #4a7228;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-one {
position: relative;
width: 50%;
}
.featured-project-two {
position: relative;
width: 50%;
}
.featured-project-three {
position: relative;
width: 50%;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #D98D92;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
opacity: .8;
}
.featured-project-one:hover .overlay {
bottom: 0;
height: 100%;
}
.featured-project-two:hover .overlay {
bottom: 0;
height: 100%;
}
.featured-project-three:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
b{
font-size: 3.0rem;
}
@media(max-width:950px){
.insta{
padding: 50px;
}
.project-grid{
display: block;
}
.featured-project-one{
width:80vw;
height: 286px;
background-color: #fff;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-two{
width:80vw;
height: 286px;
background-color: #fff;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-three{
width:80vw;
height: 286px;
background-color: #4a7228;
flex: 1;
flex-direction: column;
margin: 25px;
}
.about-section{
height: 50vh, max-content;
width: 100%;
}
.about-desc{
font-size: 1.25rem;
}
.about-heading{
font-size: 2rem;
}
.contact-heading{
text-align: center;
}
.intro-heading{
font-size:2rem ;
}
.project-heading{
font-size: 2rem;
}
.project-section{
justify-content: center;
}
.intro-section{
height: 75vh,max-content;
width: 100%;
}
.about-section{
height:75vh, max-content;
}
}
@media(max-width:1240px){
.project-grid{
display: block;
}
.featured-project-one{
width:80vw;
height: 286px;
background-color: #fff;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-two{
width:80vw;
height: 286px;
background-color: #fff;
flex: 1;
flex-direction: column;
margin: 25px;
}
.featured-project-three{
width:80vw;
height: 286px;
background-color: #4a7228;
flex: 1;
flex-direction: column;
margin: 25px;
}
.project-section{
justify-content: center;
}
.intro-section{
height: 100vh,max-content;
}
.about-section{
height:50vh, max-content;
}
}
@media(max-width:642px){
.insta{
padding: 20px;
}
.intro-section{
height: 65vh,max-content;
}
.about-section{
height:65vh, max-content;
}
b{
font-size: 2.0rem;
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #D98D92;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.project-section{
justify-content: center;
}
}
.social-media{
display: flex;
justify-content: center;
}
.insta{
padding: 80px;
}
i{
font-size: 5rem;
color: #039be5;
}
i:hover{
color: #00ccff;
}
@media(max-width:800px){
.intro-section{
height: 80vh,max-content;
}
.about-section{
height:80vh, max-content;
}
.insta{
padding: 35px;
}
}
@media(max-width:502px){
.intro-section{
height: 75vh,max-content;
}
.about-section{
height:75vh, max-content;
}
.insta{
padding: 15px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.