Code Part4

CODE:
(1) DIGITAL PORTFOLIO:
<!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">
<title>Personal Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/c4254e24a8.js"
crossorigin="anonymous"></script>
</head>
<body>
<div id="header">
<div class="container">
<nav>
<img src="images/logo.png" class="logo">
<ul id="sidemenu">
<li><a href="#header">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
<i class="fas fa-times" onclick="closemenu()"></i>
</ul>
<i class="fas fa-bars" onclick="openmenu()"></i>
</nav>
<div class="header-text">
<p>UI/UX Designer</p>
<h1>Hi, I'm <span>Nishant</span><br>Kumar from INDIA</h1>
</div>
</div>
</div>

<div id="about">
<div class="row">
<div class="about-col-1">
<img src="IMAGES/IMAGE3.jpg">
</div>
<div class="about-col-2">
<h1 class="sub-title">About Me</h1>
<p>HII!!,I am Nishant Kumar. Highly motivated Computer Science
Student with a passion for developing innovative solutions. Skilled in machine
learning, database design, and software development, with a proven track
record of improving system performance, reducing processing time, and
increasing user engagement.</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>UI/UX</span><br>Designing Web/App
interfaces</li>
<li><span>Web Development</span><br>Web app
Development</li>
<li><span>App Development</span><br>Building
Android/iOS apps</li>
</ul>
</div>
<div class="tab-contents" id="experience">
<ul>
<li><span>2021 - Current</span><br>UI/UX Design
Training at ET Institute</li>
<li><span>2019 - 2021</span><br>Team lead at StarApp
LLC.</li>
<li><span>2017 - 2019</span><br>UI/UX Design Executive
at Coin Digital Ltd.</li>
<li><span>2016 - 2017</span><br>Internship at ekart
eCommerce.</li>
</ul>
</div>
<div class="tab-contents" id="education">
<ul>
<li><span>2016</span><br>UI/UX Design Training at ET
Institute</li>
<li><span>2016</span><br>MBA from MIT Bangalore.</li>
<li><span>2014</span><br>BBA from ISM Bangalore.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div id="services">
<h1 class="sub-title">My Services</h1>
<div class="services-list">
<div>
<i class="fas fa-code"></i>
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed nulla nibh, tincidunt sit amet sapien quis.</p>
<a href="#">Learn more</a>
</div>
<div>
<i class="fas fa-crop-alt"></i>
<h2>UI/UX Design</h2>
</div>
<div>
<i class="fab fa-app-store"></i>
<h2>App Design</h2>
</div>
</div>
</div>
</div>

<div id="portfolio">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<div class="layer">
<h3>Social Media App</h3>
<p>The app connects you yo the talented people around the
world. Download it from play store.</p>
<a href="#"><i class="fas fa-external-link-alt"></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="fas fa-paper-plane"></i> [email protected]</p>
<p><i class="fas fa-phone-square-alt"></i> 0123456789</p>
<div class="social-icons">
<a href="https://facebook.com/"><i class="fab fa-
facebook"></i></a>
<a href=""><i class="fab fa-twitter-square"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-linkedin"></i></a>
</div>
<a href="images/my-cv.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 © Kevin. Made wtih <i class="fas fa-heart"></i> by <a
href="https://www.youtube.com/channel/UCkjoHfkLEy7ZT4bA2myJ8xA?
sub_confirmation=1">Easy Tutorials</a></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 sidemeu = document.getElementById("sidemenu");

function openmenu(){
sidemeu.style.right = "0";
}
function closemenu(){
sidemeu.style.right = "-200px";
}
</script>
<script>
const scriptURL = '< add you own link here >' // add your own app script
link here
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>
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
background: #080808;
color: #fff;
}
#header{
width: 100%;
height: 100vh;
background-image: url(IMAGES/IMAGE1.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.container{
padding: 10px 10%;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.logo{
width: 140px;
}
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 0;
color: #ababab;
}
.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 0 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 0;
}
.tab-contents ul li span{
color: #b54769;
font-size: 14px;
}
.tab-contents{
display: none;
}
.tab-contents.active-tab{
display: block;
}
/* ----------------services------------- */
#services{
padding: 30px 0;
}
.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{
transform: translateY(-10px);
}
/* -------portfolio----------- */
#portfolio{
padding: 50px 0;
}
.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;
}
.copyright a{
color: #ff004f;
}
/* -----------------css for small screens--------- */
nav .fas{
display: none;
}
@media only screen and (max-width: 600px){

#header{
background-image: url(images/phone-background.png);
}
.header-text{
margin-top: 100%;
font-size: 16px;
}
.header-text h1{
font-size: 30px;
}
nav .fas{
display: block;
font-size: 25px;
}
nav ul{
position: fixed;
top: 0;
right: -200px;
width: 200px;
height: 100vh;
padding-top: 50px;
z-index: 2;
transition: right 0.5s;
}
nav ul li{
display: block;
margin: 25px;
}
nav ul .fas{
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;
}
(2) FORM VALIDATION:
(3) <!DOCTYPE html>
(4) <html>
(5) <head>
(6) <title>Form Validation Example</title>
(7) <script>
(8) function validateForm() {
(9) var name = document.forms["myForm"]["name"].value;
(10) var email = document.forms["myForm"]["email"].value;
(11)
(12) if (name == "") {
(13) alert("Please enter your name.");
(14) return false;
(15) }
(16)
(17) if (email == "") {
(18) alert("Please enter your email address.");
(19) return false;
(20) }
(21) }
(22) </script>
(23) </head>
(24) <body>
(25) <form name="myForm" onsubmit="return validateForm()">
(26) <label for="name">Name:</label>
(27) <input type="text" id="name" name="name"><br><br>
(28)
(29) <label for="email">Email:</label>
(30) <input type="email" id="email" name="email"><br><br>
(31)
(32) <input type="submit" value="Submit">
(33) </form>
(34) </body>
(35) </html>
(36) {
(37) "liveServer.settings.port": 5501
(38) }

Code Part4

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

Code Part4

Uploaded by

Copyright:

Available Formats

CODE:

(1) DIGITAL PORTFOLIO:

var tablinks = document.getElementsByClassName("tab-links");

var sidemeu = document.getElementById("sidemenu");

@media only screen and (max-width: 600px){

You might also like