Scribd
Upload
37 views15 pages

Code Part4

Uploaded by

shubham raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views15 pages

Code Part4

Uploaded by

shubham raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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>
<!-- -----------about---------- -->
<div id="about">
<div class="container">
<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>
<!-- ---------services---------------- -->
<div id="services">
<div class="container">
<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>
<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="fab fa-app-store"></i>
<h2>App 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>
</div>
</div>
<!-- ----------portfolio------------ -->
<div id="portfolio">
<div class="container">
<h1 class="sub-title">My Work</h1>
<div class="work-list">
<div class="work">
<img src="IMAGES/IMAGE5.jpg">
<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">
<img src="IMAGES/IMAGE6.jpg">
<div class="layer">
<h3>Music 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">
<img src="IMAGES/IMAGE7.jpg">
<div class="layer">
<h3>Online Shopping 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>
<a href="#" class="btn">See more</a>
</div>
</div>
<!-- ----------contact------------- -->
<div id="contact">
<div class="container">
<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;
background: #ff004f;
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{
background: #262626;
padding: 40px;
font-size: 13px;
font-weight: 300;
border-radius: 10px;
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;
margin-bottom: 15px;
}
.services-list div a{
text-decoration: none;
color: #fff;
font-size: 12px;
margin-top: 20px;
display: inline-block;
}
.services-list div:hover{
background: #ff004f;
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{
border-radius: 10px;
position: relative;
overflow: hidden;
}
.work img{
width: 100%;
border-radius: 10px;
display: block;
transition: transform 0.5s;
}
.layer{
width: 100%;
height: 0;
background: linear-gradient(rgba(0,0,0,0.6), #ff004f);
border-radius: 10px;
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;
margin-bottom: 20px;
}
.layer a{
margin-top: 20px;
color: #ff004f;
text-decoration: none;
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;
text-decoration: none;
color: #fff;
transition: background 0.5s;
}
.btn:hover{
background: #ff004f;
}

/* ---------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{
text-decoration: none;
font-size: 30px;
margin-right: 15px;
color: #ababab;
display: inline-block;
transition: transform 0.5s;
}
.social-icons a:hover{
color: #ff004f;
transform: translateY(-5px);
}
.btn.btn2{
display: inline-block;
background: #ff004f;
}
.contact-right form{
width: 100%;
}
form input, form textarea{
width: 100%;
border: 0;
outline: none;
background: #262626;
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;
background: #262626;
font-weight: 300;
margin-top: 20px;
}
.copyright i{
color: #ff004f;
}
.copyright a{
color: #ff004f;
text-decoration: none;
}
/* -----------------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{
background: #ff004f;
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{
margin-bottom: 30px;
}
.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) }

You might also like