HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World</title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<nav>
<a href="##" onclick="cloz()">×</a>
<a href="#html" >Learn HTML</a>
<a href="#css" >Learn CSS</a>
<a href="#js" >Learn JS</a>
<a href="#jq" >Learn JQuery</a>
<br>
<a href="#https://code.sololearn.com/W4CV1aZldSJ5/?ref=app" >My Blog</a>
<a href="#contact" >Contact Me</a>
<a href="##" >Home</a>
</nav>
<section id="header">
<div>
<h1>Hello, World !!</h1>
</div>
</section>
<br>
<br>
<section id="html">
<div>
<h2>HTML</h2>
HTML stands for HyperText Markup Language. <br>
Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content. <br>
The ability to code using HTML is essential for any web professional. Acquiring this skill should be the starting point for anyone who is learning how to create content for the web. <br>
<center><br>
<a class="learn" href="##" >Learn HTML</a>
</center>
</div>
</section>
<br>
<section id="css" >
<div>
<h2>CSS</h2>
CSS stands for Cascading Style Sheets.<br>
- Cascading refers to the way CSS applies one style on top of another.<br>
- Style Sheets control the look and feel of web documents.<br>
<br>
CSS and HTML work hand in hand:<br>
- HTML sorts out the page structure.<br>
- CSS defines how HTML elements are displayed.<br>
<center><br>
<a class="learn" href="##" >Learn CSS</a>
</center>
</div><br>
<br>
</section>
<section id="js" >
<div>
<h2>JavaScript</h2>
JavaScript is one of the most popular programming languages on earth and is used to add interactivity to webpages, process data, as well as create various applications like : mobile apps, desktop apps, games, and more.<br>
Learning the fundamentals of a language will enable you to create the program you desire, whether client-side or server-side.<br>
<center><br>
<a class="learn" href="##" >Learn JS</a>
</center>
</div>
</section><br>
<br>
<section id="jq" >
<div>
<h2>JQuery</h2>
jQuery is a fast, small, and feature-rich JavaScript library.<br>
It makes things like HTML document traversal and manipulation, event handling, and animation much simpler.<br>
All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code.<br>
<center><br>
<a class="learn" href="##" >Learn JQuery</a>
</center>
</div>
</section><br>
<br>
<br>
<section id="contact" >
<div>
<h2>Contact Me</h2>
<form>
<input type="email" placeholder="Your Email" />
<textarea placeholder="Your Message" ></textarea>
</form><center id="feedback" ><br>
<a href="##" class="learn" id="send" >Send</a>
</center>
</div>
</section><br>
<br>
<footer>
<div>
Made by vijay<br>
Date : june, 6 2020<br>
<br>
<a href="mailto:vijaytambi7@gmail.com" >E-Mail > vijaytambi7@gmail.com</a></li>
</ul>
</div>
<div id="copy" >
©vijay tambi 2020
</div>
</footer>
<button class="open" onclick="sh()">☰</button>
<button id="scroll" >↑</button>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Raleway');
*{
font-family:'Raleway', sans-serif;
font-weight:lighter;
margin:0;
outline:0;
}
html{
height:100vh;
width:100vw; background:url("https://dl.dropbox.com/s/7np2zemanv8khda/forestbridge.jpg?raw=1");
background-attachment:fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body{
color:#fff;
}
#header {
height:40vh;
line-height:40vh;
text-align:center;
color:#fff;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
transition:linear 1s;
font-size:larger;
}
a{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
}
nav{
position:fixed;
top:0;
right:0;
width:30vw;
padding:0.5vh;
display:none;
background:#303030;
border-radius:5px;
}
nav a{
display:block;
height:40px;
line-height:40px;
text-align:center;
color:#AAA;
text-decoration:none;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
transition:500ms;
margin:0;
}
nav a:hover {
color:#fff;
}
.learn{
display:inline-block;
color:rgba(0,172,255,1);
text-decoration:none;
padding:10px;
border:0.5px solid rgba(0,172,255,1);
transition:500ms linear;
}
.learn:hover {
background:rgba(0,172,255,1);
color:#fff;
transition:500ms;
}
section {
text-align:center;
}
div{
text-align:left;
width:70vw;
display:inline-block;
background:rgba(0,0,0,0.7);
padding:10px;
border:5px solid #000;
}
div:hover {
background:rgba(0,0,0,0.8);
transition:500ms;
}
.open {
height:40px;
width:40px;
position:fixed;
bottom:1vh;
right:3vw;
background:#303030;
border:0;
font-size:larger;
color:#fff;
}
#scroll {
height:40px;
width:40px;
position:fixed;
bottom:1vh;
right:15vw;
background:#303030;
border:0;
font-size:larger;
color:#fff;
display:none;
}
h2{
border-bottom:0.5px solid #fff;
margin-bottom:1pc;
}
form input{
border:0;
background:transparent;
height:40px;
width:50vw;
line-height:40px;
font-size:20px;
color:#fff;
border-bottom:0.5px solid #fff;
}
form textarea {
margin-top:1em;
height:80px;
font-size:20px;
color:#fff;
background:transparent;
border:0;
border-bottom:0.5px solid #fff;
width:50vw;
}
input:focus, textarea:focus {
width:65vw;
transition:1s;
}
footer{
display:block;
}
footer div {
border:0;
margin-top:20%;
background:transparent;
width:auto;
}
footer div:hover {
background:transparent;
}
#copy {
margin-top:80%;
background:#000;
padding:5px;
}
footer a{
color:dodgerBlue;
text-decoration:none;
}
JS:
function sh(){
$("nav").fadeIn();
};
function cloz(){
$("nav").fadeOut();
};
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
$("#send").on("click", function(){
$(this).html("Thanks for your feedback !");
});
0 Comments
if any doubts, Please let me know...