Skip to content

Instantly share code, notes, and snippets.

@anupamhaldkar

anupamhaldkar/ah.html

Created July 25, 2020 13:38
Show Gist options
  • Save anupamhaldkar/bd9bf72a438ee9182d5ca69a89c47e09 to your computer and use it in GitHub Desktop.
Save anupamhaldkar/bd9bf72a438ee9182d5ca69a89c47e09 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
ah.html
<!DOCTYPE html>
<html>
<title>Web Hoster</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;
color:blue;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url('parallax1.jpg');
min-height: 10%;
}
.bgimg-2 {
background-image: url("parallax2.jpg");
min-height: 400px;
}
.bgimg-3 {
background-image: url("parallax3.jpg");
min-height: 400px;
}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
min-height: 400px;
}
}
</style>
<body style="background-color:#9966ff";>
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" style="color:orange" class="w3-bar-item w3-button"><i class="fa fa-home"></i> HOME</a>
<a href="#about" style="color:orange" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> ABOUT</a>
<a target="_blank" href="https://anupamhaldkar.vercel.app" style="color:orange" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> PORTFOLIO</a>
<a href="#contact" style="color:orange" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="#" class="w3-bar-item w3-button w3-hide-small w3-right w3-hover-red">
<i class="fa fa-search"></i>
</a>
</div>
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()">ABOUT</a>
<a href="#portfolio" class="w3-bar-item w3-button" onclick="toggleFunction()">PORTFOLIO</a>
<a href="#contact" class="w3-bar-item w3-button" onclick="toggleFunction()">CONTACT</a>
<a href="#" class="w3-bar-item w3-button">SEARCH</a>
</div>
</div>
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> HOSTER</span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center" style=color:black><em>I Love technologies that are live on the internet.</em></p>
<p style=color:black>We have created a fictional "personal" website,
Howdy! I'm Anupam, a software Developer pursuing bachelor degree in L N C T, Bhopal.
I'm a software developer specializing in building (and occasionally designing) exceptional websites, and applications.
I enjoy creating things that are live on the internet, whether that be websites, applications,</p>
<div class="w3-col m6 w3-center w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i><span style="color:black">My Name</span></b></p><br><span style="color:black">Anupam Haldkar</span><br><br>
<img src="hat.jpg" class="w3-round w3-image w3-hover-opacity-off" alt="Photo of Me" width="150" height="200">
</div>
<div class="bgimg-3 w3-display-container w3-opacity-min">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide"></span>
</div>
</div>
<div class="w3-content w3-container w3-padding-64" id="contact">
<h3 class="w3-center">WHAT I DO</h3>
<p class="w3-center" style="color:black"><em>I'd follow it Passionately!</em></p>
<div class="w3-row w3-padding-32 w3-section">
<div class="w3-col m4 w3-container">
<img src="map.jpg" class="w3-image w3-round" style="width:100%">
</div>
<div class="w3-col m8 w3-panel">
<div class="w3-large w3-margin-bottom"><span style="color:brown">Get In Touch</span><br><br>
<i class="fa fa-map-marker fa-fw w3-hover-text-black w3-xlarge w3-margin-right" > </i> <span style="color:black">MP, INDIA</span><br>
<i class="fa fa-envelope fa-fw w3-hover-text-black w3-xlarge w3-margin-right"></i> <span style="color:black">Email:</span><a href="mailto:ahdev2020@outlook.com"> <span style="color: blue">ahdev2020@outlook.com</span></a><br>
</div>
</div>
</div>
</div>
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off">
<a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section">
<a href="https://www.facebook.com/profile.php?id=100005353482438" target="_blank"> <i class="fa fa-facebook-official w3-hover-opacity"></i></a>
<a href="https://www.instagram.com/__procli/" target="_blank"> <i class="fa fa-instagram w3-hover-opacity"></i></a>
<a href="https://www.github.com/anupamhaldkar" target="_blank"> <i class="fa fa-github w3-hover-opacity"></i></a>
<a href="https://twitter.com/AnupamHaldkar" target="_blank"> <i class="fa fa-twitter w3-hover-opacity"></i></a>
<a href="https://www.linkedin.com/in/anupamhaldkar/" target="_blank"> <i class="fa fa-linkedin w3-hover-opacity"></i></a>
</div>
<p>Made with 💖<a href="https://anupamhaldkar.vercel.app" title="Anupam Haldkar" target=”_blank” >by Anupam Haldkar</a> & w3.css</p>
</footer>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment