One Page Site

Developer
Azizur Rahman
Size
2,736 Kb
Views
4,048
  1. One Page Site Previews
  2. One Page Site HTML Codes
  3. One Page Site CSS Codes
  4. One Page Site JS Codes

How do I make an one page site?

FreeCodeCamp Project. What is a one page site? How do you make a one page site? This script and codes were developed by Azizur Rahman on 09 January 2023, Monday.

One Page Site Previews
IQ Test

One Page Site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One Page Site</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html><html lang="en">
<head> <title>Portfolio</title> </head> <body>
<div class="container-fluid"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <ul class="nav navbar-nav pull-right"> <li role="presentation" class="active"><a href='#description'>ABOUT</a></li> <li role="presentation"><a href="#portfolio">PORTFOLIO</a></li> <li role="presentation"><a href="#contact">CONTACT</a></li> </ul> </div> </nav>
</div>
<div class="container"> <div class="bg-primary text-center" id="description"> <h1>Azizur Rahman</h1> <hr> <h3><em>Front End Developer</em></h3> </div> <div class="text-center" id="portfolio"> <h2>PORTFOLIO</h2> <hr> <div class="row center-block"> <div class="col-md-6"><img class="img-responsive" src="http://dummyimage.com/600x400/808080/fff" alt="dummy image"></div> <div class="col-md-6"><img class="img-responsive" src="http://dummyimage.com/600x400/808080/fff" alt="dummy image"></div> </div> <div class="row center-block"> <div class="col-md-6"><img class="img-responsive" src="http://dummyimage.com/600x400/808080/fff" alt="dummy image"></div> <div class="col-md-6"><img class="img-responsive" src="http://dummyimage.com/600x400/808080/fff" alt="dummy image"></div> </div> </div> <div id="contact" class="text-center"> <h2>Contact Me</h2> <hr> <div class="row"> <div class="col-md-5"> <form class="text-left"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" placeholder="name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" placeholder="email address"> </div> </form> </div> <div class="col-md-7"> <form class="text-left"> <label for="message">Message</label><textarea class="form-control" rows="4" placeholder="message"></textarea><br><button type="submit" class="btn btn-default">Submit</button></form> </div> </div> </div> <div id="socialmedia" class="bg-primary center-block text-center"> <a href="https://twitter.com/decabytedev" target="_blank"><i class="fa fa-twitter fa-4x"></i></a> <a href="https://github.com/Astrosiphic" target="_blank"><i class="fa fa-github fa-4x"></i></a> <a href="https://gitlab.com/u/azizurrahman" target="_blank"<i class="fa fa-gitlab fa-4x"></i></a>
<a href="https://codepen.io/azizurrahman" target="_blank"<i class="fa fa-codepen fa-4x"></i></a>
<br><br><p>Azizur Rahman &copy; 2016 All Rights Reserved </a> </div>
</div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

One Page Site - Script Codes CSS Codes

li{ margin:10px; display:inline-block;
}
nav { z-index:1;
}
#description { padding:80px 30px 60px 30px ; width:80%; margin: 0 auto; margin-top:60px;
}
hr { width:50%;
}
#portfolio{ margin: 0 auto; width:80%; padding:80px 30px 60px 30px; background-color:#e5e5e5; color:gray;
}
img { margin:10px;
}
#contact { margin: 0 auto; background-color:grey; width:80%; padding:60px 30px 60px 30px; color:white;
}
#socialmedia {
width:80%; padding:30px;
}
.fa { margin:10px;
}
a{ color:#fff;
}

One Page Site - Script Codes JS Codes

$(document).ready(function(){
$(document).ready(function(){	$('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top }, 900, 'swing', function () { window.location.hash = target; });	});
});
});
One Page Site - Script Codes
One Page Site - Script Codes
Home Page Home
Developer Azizur Rahman
Username azizurrahman
Uploaded January 09, 2023
Rating 3
Size 2,736 Kb
Views 4,048
Do you need developer help for One Page Site?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Azizur Rahman (azizurrahman) Script Codes
Name
Gradient Background Animation
Working Daily Currency Status
Tribute Page
Working Weather Search
Fitness Card
Temperature Converter
T-Shirt Creator
Login Form
Text Bounce
Payment Form
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!