Portfolio Code

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Charan tej Portifolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/bc7eff5545.js"
crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images\namelogo2.png" alt="logo" class="logo">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#MySkills">MySkills</a></li>
<li><a href="#portfolio">Portifolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fa-solid fa-circle-xmark" onclick="closemenu()"></i>
</ul>
<i class="fa-solid fa-bars"onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>Java FullStack Developer</p>
<h1>Hi, I'm <span>charan</span> <br> Teja From India</h1>
</div>
</div>
</div>

<div id="about">
<div class="row">
<div class="about-col-1">
<img src="images\userimg.png" alt="">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore dolorum
minima dolorem architecto animi
laboriosam, facilis blanditiis quas laudantium voluptas, qui ex corrupti,
corporis beatae hic? Ratione sequi
suscipit mollitia incidunt non dolor, et at placeat impedit quos enim quia
dolore eius fugit quam delectus
distinctio reprehenderit dolorum cum. Doloremque!</p>
<div class="tab-titles">
<p class="tab-links active-link" onclick="opentab('skills')">Skills</p>
<p class="tab-links" onclick="opentab('experience')">Experience</p>
<p class="tab-links" onclick="opentab('education')">Education</p>
</div>
<div class="tab-contents active-tab" id="skills">
<ul>
<li><span>Java</span><br>FullStack Developer</li>
<li><span>FrontEnd</span><br>FrontEnd Developer</li>
<li><span>BackEnd</span><br>BackEnd Developer</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>2023-Current</span><br>FullStack Developer Trainig at
Jspyders</li>
<li><span>2019-2021</span><br>Team lead at startApp LLC.</li>
<li><span>2017-2019</span><br>BackEnd Developer at facebook</li>
<li><span>2017-2019</span><br>BackEnd Developer at facebook</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>2019-2023</span><br>BTech In CSE department at JNTUP</li>
<li><span>2017-2019</span><br>Intermediate at Srichaitanya Vijayawada</li>
<li><span>2016-2017</span><br>10 <sup>th</sup>Class at Gautham High Scool
Proddatur</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div id="services">
<h1 class="sub-title">MySkills</h1>
<div class="services-list">
<div>
<i class="fa-solid fa-code"></i>
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam reiciendis
dignissimos consequuntur
itaque est recusandae!</p>
<a href="#">learn more</a>
</div>
<div>
<i class="fa-solid fa-crop"></i>
<h2>java developer</h2>
</div>
<div>
<i class="fa-brands fa-app-store"></i>
<h2>backend developer</h2>
</div>
</div>
</div>
</div>

<div id="portfolio">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="images\work-1.png" alt="">
<div class="layer">
<h3>Source Media App</h3>
<p>the app connects you to the talented peoplle around the world.
Download it from play store.</p>
<a href="#"><i class="fa-solid fa-up-right-from-square"></i></a>
</div>
</div>
<div class="work">
<div class="layer">
<h3>Music App</h3>
</div>
</div>
<div class="work">
<div class="layer">
<h3>Online Shopping App</h3>
</div>
</div>
</div>
<a href="#" class="btn">See more</a>
</div>
</div>

<div id="contact">
<div class="row">
<div class="contact-left">
<h1 class="sub-title">Contact Me</h1>
<p><i class="fa-solid fa-paper-plane"></i>Charantejdonthireddy@gmail.com</p>
<p><i class="fa-solid fa-phone-volume"></i>9390393945</p>
<div class="social-icons">
<a href="https://github.com/maruthicharanteja10"><i class="fa-brands fa-
github"></i></a>
<a href="https://twitter.com/Charantejcherr4"><i class="fa-brands fa-twitter-
square"></i></a>
<a href="https://www.instagram.com/maruthicharantej_donthireddy/"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/donthireddy-maruthi-charan-teja-reddy-
83505a1b4/"><i class="fa-brands fa-linkedin"></i></a>
</div>
<a href="images\CHARAN TEJA RESUME.pdf" download class="btn btn2">Download
CV</a>
</div>
<div class="contact-right">
<form name="submit-to-google-sheet">
<input type="text" name="Name" placeholder="Your Name" required>
<input type="email" name="Email" placeholder="Your Email" required>
<textarea name="Message" rows="6" placeholder="Your Message"></textarea>
<button type="Submit" class="btn btn2">Submit</button>
</form>
<span id="msg"></span>

</div>
</div>
</div>
<div class="copyright">
<p>copyright <i class="fa-regular fa-copyright"></i> Teja.Made With <i class="fa-
solid fa-heart"></i> By GreatStack
</p>
</div>
</div>


<script>
var tablinks = document.getElementsByClassName('tab-links');
var tabcontents = document.getElementsByClassName('tab-contents');
function opentab(tabname) {
for (tablink of tablinks) {
tablink.classList.remove("active-link");
}
for (tabcontent of tabcontents) {
tabcontent.classList.remove("active-tab");
}
event.currentTarget.classList.add("active-link");
document.getElementById(tabname).classList.add("active-tab")
}
</script>
<script>
var sidemenu=document.getElementById("sidemenu");
function openmenu(){
sidemenu.style.right="0";
}
function closemenu(){
sidemenu.style.right="-200px";
</script>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbxRzFui7bN6m8wfOb-
rKVWtP8gNu1IzW74GKmY1deajWQWodx9405Vyq-hOZHgzrSJV/exec'
const form = document.forms['submit-to-google-sheet']
const msg=document.getElementById("msg");
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => {msg.innerHTML="Message sent successfully"
setTimeout(function(){
msg.innerHTML=""
},5000)
form.reset()
})
.catch(error => console.error('Error!', error.message))
})
</script>
</body>
</html>
*{
padding:0;
margin: 0;
font-family: 'poppins',sans-serif;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
background: #080808;
color: #ffff;
}
#header{
width: 100%;
height: 100vh;
background-image: url(images/me.png);
background-size: cover;
background-position: center;
}
.container{
padding: 10px 10%;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 180px;
}
nav ul li{
display: inline-block;
list-style: none;
margin:10px 20px;
}
nav ul li a{
color:#fff;
text-decoration: none;
font-size: 18px;
position: relative;
}
nav ul li a::after{
content: ' ';
width: 0;
height: 3px;
background: #ff004f;
position: absolute;
left:0;
bottom:-6px;
transition: 0.5s;
}
nav ul li a:hover::after{
width:100%;
}
.header-text{
margin-top: 20%;
font-size: 30px;
}
.header-text h1{
font-size: 60px;
margin-top: 20px;
}
.header-text h1 span{
color: #ff004f;
}
/* -----------------about------------------- */
#about{
padding: 80px 0px;
color: #ababaa;
}
.row{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.about-col-1{
flex-basis: 35%;
}
.about-col-1 img{
width: 100%;
border-radius: 15px;
}
.about-col-2{
flex-basis: 60%;
}
.sub-title{
font-size: 60px;
font-weight: 600;
color: #fff;
}
.tab-titles{
display: flex;
margin: 20px 0px 40px;
}
.tab-links{
margin-right: 50px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
position: relative;
}
.tab-links::after{
content: ' ';
width: 0;
height: 3px;
position: absolute;
left: 0;
bottom: -8px;
transition: 0.5s;
}
.tab-links.active-link::after{
width:50%
}
.tab-contents ul li{
list-style: none;
margin: 10px 0px;
}
.tab-contents ul li span{
color: #b54769;
font-size: 14px;
}
.tab-contents{
display: none;
}
.tab-contents.active-tab{
display: block;
}
/* --------------------services---------------------- */
#services{
padding: 30px 0px;
}
.services-list{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-gap:40px ;
margin-top:50px;
}
.services-list div{
padding: 40px;
font-size: 13px;
font-weight: 300;
transition: background 0.5s, transform 0.5s;
}
.services-list div i{
font-size: 50px;
margin-bottom: 30px;
}
.services-list div h2{
font-size: 30px;
font-weight: 500;
}
.services-list div a{
color: #fff;
font-size:12px;
margin-top:20px;
}
.services-list div:hover{
background-color: #ff004f;
transform: translateY(-10px);
}
/* ----------------portfolio-------------- */
#portfolio{
padding:50px 0px;
}
.work-list{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-gap:40px ;
margin-top: 50px;
}
.work{
position: relative;
overflow: hidden;
}
.work img{
width:100%;
display: block;
transition: transform 0.5s;
}
.layer{
width:100%;
height:0%;
background: linear-gradient(rgba(0,0,0,0.6),#ff004f);
position: absolute;
left:0;
bottom:0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
font-size: 14px;
transition: height 0.5s;
}
.layer h3{
font-weight: 500;
}
.layer a{
margin-top:20px;
color:#ff004f;
font-size: 18px;
line-height: 60px;
background: #fff;
width: 60px;
height:60px;
border-radius: 50%;
text-align: center;
}
.work:hover img{
transform: scale(1.1);
}
.work:hover .layer{
height: 100%;
}
.btn{
display: block;
margin: 50px auto;
width: fit-content;
border:1px solid #ff004f;
padding: 14px 50px;
border-radius: 6px;
color: #fff;
transition: background 0.5s;
}
.btn:hover{
}
/* ---------------contact------------------- */
.contact-left{
flex-basis : 35%;
}
.contact-right{
flex-basis : 60%;
}
.contact-left p{
margin-top: 30px;
}
.contact-left p i{
color: #ff004f;
margin-right: 15px;
font-size: 25px;
}
.social-icons{
margin-top: 30px;
}
.social-icons a{
font-size: 30px;
margin-right: 15px;
color: #ababab;
transition: transform 0.5s;
}
.social-icons a:hover{
color:#ff004f;
transform: translateY(-5px);
}
.btn.btn2{
}
.contact-right form{
width: 100%;
}
form input ,form textarea {
width:100%;
border: 0;
outline: none;
padding: 15px;
margin: 15px 0;
color:#fff;
font-size: 18px;
border-radius: 6px;
}
form .btn2{
padding: 14px 60px;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
}
.copyright{
width: 100%;
text-align: center;
padding: 25px 0;
font-weight: 300;
margin-top: 20px;
}
.copyright i{
color: #ff004f;
}
/* ------------------------css for small screen--------- */
nav .fa-solid{
display: none;
}
@media only screen and (max-width: 600px){
#header{
background-image: url(images/phoneme.png);
.header-text{
margin-top: 100%;
font-size:16px
}
.header-text h1{
font-size: 30px;
}
nav .fa-solid{
display: block;
font-size: 25px;
}
nav ul{
position: fixed;
top:0;
right:-200px;
height:100vh;
width:200px;
padding-top: 50px;
z-index:2;
transition: right 0.5s;
}
nav ul li{
display: block;
margin:25px;
}
nav ul .fa-solid{
position: absolute;
top:25px;
left:25px;
cursor: pointer;
}
.sub-title{
font-size: 40px;
}
.about-col-1,.about-col-2{
flex-basis: 100%;
}
.about-col-1{
}
.about-col-2{
font-size: 14px;
}
.tab-links{
font-size: 16px;
margin-right: 20px;
}
.contact-left,.contact-right{
flex-basis: 100%;
}
.copyright{
font-size: 14px;
}
}
#msg{
color: #61b752;
margin-top: -40px;
display: block;
}

Portfolio Code

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Portfolio Code

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Portfolio Code

Uploaded by

Copyright:

Available Formats

<!

You might also like