Learn how to design a beautiful and functional responsive photography portfolio website landing page using HTML, CSS, and JavaScript. Follow our step-by-step guide for best results.
Table of Contents
A responsive photography portfolio website landing page is a crucial element of any photographer's website. It serves as the entry point to their website and showcases their best work. The landing page must be designed to look great on all devices and screen sizes, including desktops, tablets, and smartphones.
In today's mobile-first world, having a responsive landing page is not only important, but it is also expected. With the increasing number of people using mobile devices to browse the internet, it is vital that photographers have a website that can adapt to any device and screen size. A responsive landing page ensures that potential clients can view the photographer's work on any device without compromising on the user experience.
The purpose of this blog post is to provide photographers with a step-by-step guide on how to create a responsive photography portfolio website landing page using HTML, CSS, and JavaScript. This guide will provide detailed instructions and best practices for designing a functional and visually appealing landing page. By following the steps outlined in this guide, photographers can create a landing page that not only showcases their best work but also provides potential clients with an exceptional user experience.
Importance of having a responsive landing page for a photography portfolio website
Having a responsive landing page for a photography portfolio website is crucial for several reasons. Firstly, it allows potential clients to view the photographer's work on any device without compromising on the user experience. In today's world, people are increasingly using mobile devices to browse the internet, and having a responsive landing page ensures that potential clients can view the photographer's work on any device, including desktops, tablets, and smartphones.
Secondly, a responsive landing page is essential for search engine optimization (SEO). Google has stated that it prefers websites that are mobile-friendly and will rank them higher in search results. Therefore, having a responsive landing page can help improve a photographer's website's visibility in search results, making it easier for potential clients to find them.
Finally, a responsive landing page is a must-have in today's competitive market. With so many photographers vying for clients' attention, having a responsive landing page can set a photographer apart from their competitors. By providing potential clients with an exceptional user experience, photographers can build trust and credibility, increasing the likelihood of securing new clients.
Overall, having a responsive landing page is not only important but expected in today's mobile-first world. By ensuring that their website is accessible on any device and providing a great user experience, photographers can increase their visibility, build trust with potential clients, and stand out in a competitive market.
Best Practices for Designing a Responsive Photography Portfolio Website Landing Page
Designing a responsive photography portfolio website landing page requires following some best practices to ensure that the landing page is functional, visually appealing, and provides a great user experience. Here are some of the best practices to consider:
- Use a simple layout: A simple and clean layout makes it easier for visitors to navigate the landing page and find the information they need. Avoid cluttering the landing page with too many elements.
- Choose a color scheme that complements the photographer's work: The color scheme of the landing page should complement the photographer's work and not distract from it. Choose a color scheme that is neutral and doesn't clash with the colors in the photographs.
- Use high-quality images: The landing page's images should be of high quality and showcase the photographer's best work. Consider using a slideshow or gallery to showcase a variety of images.
- Make sure the landing page is mobile-friendly: With more people browsing the internet on their mobile devices, it is essential to ensure that the landing page is mobile-friendly. Test the landing page on different devices to ensure that it looks and functions well on all screen sizes.
- Keep the page load times to a minimum: Slow page load times can be frustrating for visitors and can result in them leaving the site. Optimize images and minimize the use of scripts and plugins to keep the landing page load times to a minimum.
- Include clear calls to action: The landing page should include clear calls to action that encourage visitors to take action, such as booking a session or contacting the photographer.
By following these best practices, photographers can create a responsive landing page that showcases their work, provides a great user experience, and encourages potential clients to take action.
Let's start making an amazing photography portfolio website landing page using HTML, CSS and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Code by: Ivan Grozdic
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our landing page.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
The code starts with the <!DOCTYPE html> declaration, which specifies the version of HTML being used, in this case, HTML5. The <html> tag encloses the entire document and specifies that the language used is English.
The <head> section contains information about the web page, such as its title, character encoding, and external resources. In this case, it includes the title "Photography Landing Page," the character encoding UTF-8, and two external resources: a Bootstrap CSS framework from a content delivery network (CDN) and a custom CSS file named "styles.css" located in the same directory as the HTML file.
The <body> section contains the visible content of the web page. It starts with a hero-section div that contains some text and images related to photography, followed by three more divs: about-section, contact-section, and travel-section. These divs are hidden by default, but can be revealed by hovering over specific elements on the page.
The class attribute is used to assign a name to an HTML element so that it can be styled with CSS. The id attribute is used to uniquely identify an element, and it can be used to create links to specific parts of the page.
Overall, this HTML code defines the basic structure and content of a landing page for a photography website, with a hero section, an about section, a contact section, and a travel section.
This is the basic structure of our photography portfolio website landing page using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the photography website is in place, the next step is to add styling to the photography website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our photography website.
Below is a CSS code that styles a webpage. It starts by importing the "Poppins" font from Google Fonts with a range of font weights and styles, which will be used later in the code. Then, it defines the overall style for the page's body element.
The font family for the body is set to "Poppins", a sans-serif font. The font weight is set to 300, and the font size to 15 pixels with a line-height of 1.6. The color of the text is white (#fff), and the background color is a dark shade of blue (#1f2029).
The overflow is set to hidden, and the height of the body is set to 100vh (the full height of the viewport). It also applies a linear transition with a duration of 300ms to all properties that can be transitioned, and sets the perspective property to 800px, which is used later for 3D transformations.
The code also styles links by setting the cursor to a pointer when hovering over them and removing their text decoration. It sets the color and background-color for selected text and the color for selected text in Firefox.
Next, it styles a set of three cursor elements with a class of "cursor", "cursor2", and "cursor3". These elements are positioned fixed on the screen and centered at the top left corner of the screen. They are circular with a radius of 50%, have a mix-blend-mode of "difference", and a transition of 300ms for all properties that can be transitioned.
The cursor element has a white background and is initially hidden, while cursor2 and cursor3 have a height and width of 36 pixels, a z-index of 99998, and a transition duration of 0.3 seconds with an ease-out effect. When the cursor2 or cursor3 element is hovered over, its scale is increased to twice its size, and its border is removed.
A media query is used to hide the cursor elements on screens with a maximum width of 1200 pixels.
The code then styles the hero section, which has a class of "hero-section". It is a block-level element with a relative position, a width of 100%, and an overflow of hidden. Its height is set to 100vh and has a background image with a cover size and centered position.
The hero-section element has a box-shadow, a linear transition of 300ms for all properties that can be transitioned, and a transition delay of 400ms. It has a transform-origin of center top.
Within the hero section, there is an h1 element with white text, a font size of 8vw, a line-height of 1, and a font weight of 900. There is also a class of "dancing" with a letter-spacing of 1px, a yellow color, a font size of 25 pixels, a line-height of 1, a font weight of 700, and a text-transform of uppercase. It is rotated by -45 degrees and translated up 175 pixels.
The dancing class also has an inner span element with a yellow background color and white text.
The hero section also has a p element with a font size of 20 pixels, a font weight of 700, and yellow text. It has an inner span element with a cursor pointer.
Finally, the code styles different elements that are shown on specific pages, such as the about, contact, travel, wildlife, and nature pages. These pages are identified by classes added to the body element. For example, the hero section will have a different transformation applied when the class "about-on" is added to the body element.
This will give our photography website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body{
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.6;
color: #fff;
background-color: #1f2029;
overflow: hidden;
height: 100vh;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
perspective: 800px;
}
a {
cursor: pointer;
}
a:hover {
text-decoration: none;
}
::selection {
color: #c4c3ca;
background-color: #000;
}
::-moz-selection {
color: #c4c3ca;
background-color: #000;
}
/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
mix-blend-mode: difference;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.cursor{
background-color: #fff;
height: 0;
width: 0;
z-index: 99999;
}
.cursor2,.cursor3{
height: 36px;
width: 36px;
z-index:99998;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
transform:scale(2) translateX(-25%) translateY(-25%);
border:none
}
.cursor2{
border: 2px solid #fff;
}
.cursor2.hover{
background: rgba(255,255,255,1);
border-color: transparent;
}
@media screen and (max-width: 1200px){
.cursor,.cursor2,.cursor3{
display: none
}
}
/* #Primary style
================================================== */
.hero-section {
position: relative;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
background-image: url('https://assets.codepen.io/1462889/photo.jpeg');
background-size: cover;
background-position: center;
transform: scale(1) rotateX(0);
box-shadow: 0 0 40px rgba(0,0,0,0.2);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
transform-origin: center top;
}
.hero-section h1{
color: #fff;
font-size: 8vw;
line-height: 1;
font-weight: 900;
}
.hero-section .dancing{
letter-spacing: 1px;
color: #ffeba7;
font-size: 25px;
line-height: 1;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
transform: translateY(-175px) rotate(-45deg);
z-index: 2;
}
.hero-section .dancing span{
padding: 8px 15px;
padding-right: 10px;
display: inline-block;
border-radius: 5px;
background-color: #102770;
}
@media screen and (max-width: 580px){
.hero-section .dancing{
font-size: 18px;
}
}
.hero-section p{
font-size: 20px;
line-height: 1;
font-weight: 700;
color: #ffeba7;
}
.hero-section p span{
margin-left: 15px;
margin-right: 15px;
position: relative;
display: inline-block;
cursor: pointer;
}
body.about-on .hero-section {
transform: scale(0.75);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.contact-on .hero-section {
transform: scale(0.75);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.travel-on .hero-section {
transform: rotateX(-10deg);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.wildlife-on .hero-section {
transform: rotateX(-10deg);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
body.nature-on .hero-section {
transform: rotateX(-10deg);
-webkit-transition-delay: 0ms;
transition-delay: 0ms;
}
.about-text {
position: absolute;
font-size: 30px;
line-height: 1;
opacity: 0.5;
font-weight: 700;
color: #ffeba7;
letter-spacing: 2px;
top: 50%;
left: 20px;
cursor: pointer;
z-index: 2;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
transform: translateY(-50%);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.about-text:hover {
opacity: 1;
}
.about-section {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
background-color: #102770;
transform: translateX(-100%);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 10;
}
body.about-on .about-section {
transform: translateX(0);
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.about-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
display: block;
overflow: hidden;
height: 30px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
cursor: pointer;
z-index: 11;
}
.about-close:hover {
transform: rotate(90deg);
}
.section-center {
position: absolute;
width: 100%;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.about-section img {
width: 240px;
height: 240px;
border-radius: 50%;
display: block;
margin: 0 auto;
box-shadow: 0 6px 25px rgba(255,235,167,.35);
}
.about-section p {
letter-spacing: 1px;
color: #fff;
font-size: 16px;
font-weight: 500;
}
.about-section p span {
letter-spacing: 1px;
color: #ffeba7;
font-size: 20px;
font-weight: 700;
}
.contact-text {
position: absolute;
font-size: 30px;
line-height: 1;
opacity: 0.5;
font-weight: 700;
color: #ffeba7;
letter-spacing: 2px;
top: 50%;
right: 20px;
cursor: pointer;
z-index: 2;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
transform: translateY(-50%) rotate(180deg);
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
}
.contact-text:hover {
opacity: 1;
}
.contact-section {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: block;
overflow: hidden;
height: 100vh;
background-color: #102770;
transform: translateX(100%);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 10;
}
body.contact-on .contact-section {
transform: translateX(0);
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.contact-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
display: block;
overflow: hidden;
height: 30px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
cursor: pointer;
z-index: 11;
}
.contact-close:hover {
transform: rotate(90deg);
}
.contact-section a{
margin: 0 auto;
font-size: 32px;
font-weight: 900;
letter-spacing: 1px;
color: #fff;
display: inline-block;
}
.contact-section .social a{
margin-left: 8px;
margin-right: 8px;
font-size: 15px;
font-weight: 700;
letter-spacing: 1px;
color: #ffeba7;
}
@media screen and (max-width: 580px){
.contact-section a{
font-size: 17px;
}
.contact-section .social a{
margin-left: 3px;
margin-right: 3px;
font-size: 13px;
letter-spacing: 0;
}
}
.travel-section,
.wildlife-section,
.nature-section {
position: fixed;
top: 100%;
left: 0;
padding: 100px 0;
width: 100%;
height: 100vh;
display: block;
overflow-x: hidden;
overflow-y: auto;
background-color: #102770;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 10;
}
.travel-close,
.wildlife-close,
.nature-close {
position: absolute;
top: 20px;
right: 20px;
width: 30px;
display: block;
overflow: hidden;
height: 30px;
-webkit-transition: all 200ms linear;
transition: all 200ms linear;
background-repeat: no-repeat;
background-position: center;
background-size: 36px 36px;
background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
cursor: pointer;
z-index: 11;
}
.travel-close:hover,
.wildlife-close:hover,
.nature-close:hover {
transform: rotate(90deg);
}
body.travel-on .travel-section {
top: 0;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
body.wildlife-on .wildlife-section {
top: 0;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
body.nature-on .nature-section {
top: 0;
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.travel-section img,
.wildlife-section img,
.nature-section img {
margin-top: 30px;
width: 100%;
height: auto;
display: block;
border-radius: 4px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.travel-section h3,
.wildlife-section h3,
.nature-section h3 {
font-size: 7vw;
line-height: 1;
font-weight: 700;
letter-spacing: 1px;
color: #fff;
}
.travel-section p,
.wildlife-section p,
.nature-section p {
font-size: 14px;
line-height: 1.7;
letter-spacing: 1px;
font-weight: 500;
}
.travel-section p span,
.wildlife-section p span,
.nature-section p span {
font-size: 20px;
line-height: 1.3;
font-weight: 700;
color: #ffeba7;
}
/* #Link to page
================================================== */
.logo {
position: fixed;
bottom: 30px;
right: 30px;
display: block;
z-index: 200000;
transition: all 250ms linear;
}
.logo img {
height: 26px;
width: auto;
display: block;
mix-blend-mode: difference;
}
@media (max-width: 1200px) {
.hero-section .dancing{
font-size: 15px;
transform: translateY(-80px) rotate(-45deg);
}
}
@media (max-width: 967px) {
.hero-section h1{
font-size: 11vw;
}
.hero-section p{
font-size: 18px;
}
.hero-section p span{
margin-left: 10px;
margin-right: 10px;
}
.travel-section h3,
.wildlife-section h3,
.nature-section h3 {
font-size: 13vw;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
The below code is a JavaScript function that uses the jQuery library. It starts by defining a function that uses strict mode to ensure that the code follows certain best practices.
The first part of the function creates three cursor elements on the page, which follow the user's mouse movements. These cursor elements are identified by their ID attributes: cursor, cursor2, and cursor3. The cursor elements are positioned based on the user's mouse coordinates, which are obtained from the event object passed to the mousemove event listener.
Next, the function defines two helper functions, "n" and "s", which are used to add and remove a "hover" class from the cursor elements. These functions are used to change the appearance of the cursor elements when the user hovers over certain elements on the page.
The function then calls the "s" function to remove the "hover" class from the cursor elements, and iterates over all the elements on the page with a class of "hover-target". For each of these elements, it adds event listeners to call the "n" and "s" functions when the user hovers over or moves away from the element.
The rest of the function defines event listeners for various elements on the page. When the user clicks on an element with a class of "about-text", "contact-text", "travel", "wildlife", or "nature", the function adds a corresponding class to the body element. These classes are used to show or hide different parts of the page, such as pop-up windows or portfolio sections. When the user clicks on an element with a class of "about-close", "contact-close", "travel-close", "wildlife-close", or "nature-close", the function removes the corresponding class from the body element.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
(function($) { "use strict";
//Page cursors
document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
t.style.left = n.clientX + "px",
t.style.top = n.clientY + "px",
e.style.left = n.clientX + "px",
e.style.top = n.clientY + "px",
i.style.left = n.clientX + "px",
i.style.top = n.clientY + "px"
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
e.classList.add("hover"), i.classList.add("hover")
}
function s(t) {
e.classList.remove("hover"), i.classList.remove("hover")
}
s();
for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
o(r[a])
}
function o(t) {
t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
//About page
$(".about-text").on('click', function () {
$("body").addClass("about-on");
});
$(".about-close").on('click', function () {
$("body").removeClass("about-on");
});
//Contact page
$(".contact-text").on('click', function () {
$("body").addClass("contact-on");
});
$(".contact-close").on('click', function () {
$("body").removeClass("contact-on");
});
//Travel portfolio page
$(".travel").on('click', function () {
$("body").addClass("travel-on");
});
$(".travel-close").on('click', function () {
$("body").removeClass("travel-on");
});
//Wildlife portfolio page
$(".wildlife").on('click', function () {
$("body").addClass("wildlife-on");
});
$(".wildlife-close").on('click', function () {
$("body").removeClass("wildlife-on");
});
//Nature portfolio page
$(".nature").on('click', function () {
$("body").addClass("nature-on");
});
$(".nature-close").on('click', function () {
$("body").removeClass("nature-on");
});
})(jQuery); Final Output:
Conclusion:
In conclusion, designing a responsive photography portfolio website landing page requires attention to detail and a focus on providing a great user experience. A well-designed landing page can be the difference between a potential client choosing to work with a photographer or not. By following the best practices outlined in this blog post, photographers can create a landing page that showcases their work, provides a great user experience, and encourages potential clients to take action.
One key takeaway is the importance of simplicity. A simple and clean layout, a neutral color scheme, and high-quality images can greatly impact the landing page's effectiveness. It's also essential to ensure that the landing page is mobile-friendly and has fast page load times, as this can significantly impact user experience and search engine rankings.
Another key takeaway is the importance of clear calls to action. Encouraging potential clients to take action, such as booking a session or contacting the photographer, is vital to converting visitors into clients. By using clear and compelling calls to action, photographers can increase the likelihood of potential clients taking the next step.
Overall, designing a responsive photography portfolio website landing page requires attention to detail and a focus on providing a great user experience. By following the best practices outlined in this blog post, photographers can create a landing page that showcases their work, provides a great user experience, and encourages potential clients to take action.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
