One Page Photography Portfolio Website Using HTML CSS & JAVASCRIPT







Hello developers! In the world of web development, his one-page website is hugely popular due to its simplicity and ease of use. Great for showcasing a specific product, service or portfolio. This article analyzes the code of the one-page website and describes its functionality. The code above renders a simple one-page website with four sections: Home, About, Portfolio, and Contact. It has a fixed floating navigation bar that allows users to easily navigate between sections. The website design is visually appealing, with a clean and modern look. The navigation bar is positioned at the top of the page and anchored to the top of the screen so that it is always visible. The first section of the site is the home area, containing a large background image and the heading "Photo Portfolio". There is also a short message explaining the purpose of the site. This section is intended to grab your attention and encourage you to explore the rest of the site. The second section is the About Us section, which contains detailed information about the photographer team behind the website. This section is well structured and has clear headings and paragraphs. Text is easy to read, and images help break up content and make it more visually appealing. The third section is the Portfolio section where you will find various high quality images. Images are displayed in a simple gallery format, without unnecessary distractions and clutter. The sections are easy to navigate and the images are of high quality, demonstrating the team's expertise in various photographic genres. Finally, in the Contact section, users can contact our photography team. This section contains a simple contact form that users can complete to get in touch. The forms are simple and easy to use, with clear labels and fields. Overall, the code above represents a well-designed one-page her website that effectively showcases the work of her photography team. Its simplicity and ease of use make it a great example of what a one-page website should look like. Whether you're a web developer looking to create a one-page website, or a business owner looking to showcase your products and services, this code is a great place to start. In summary, the code above renders a simple but effective one-page his website that is visually appealing and easy to navigate. A clean design, high-quality images, and a clear contact form are all great examples of what a one-page website should look like. Whether you're a web developer looking to create a one-page website, or a business owner looking to showcase your products and services, this code is a great place to start. Happy coding!

One-Page Photography Portfolio Website with Fixed Vertical Navigation using HTML, CSS & JavaScript [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>One Page Website</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet"> </head> <body> <div class="menu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <section id="home"> <div class="hbg"> <img class="mainlogo" src="https://cdn.pixabay.com/photo/2016/10/08/18/34/camera-1724286__480.png"> <h1>Photography Portfolio</h1> <p>Fixed Floating Navigation Bar to navigate though sections.</p> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </section> <section id="about"> <div class="hbg"> <h1>About Us</h1> <p>Welcome to our photography about us session! We are a team of experienced photographers who are passionate about capturing the special moments in people's lives. Our mission is to create beautiful, timeless images that our clients will cherish for years to come. We believe that photography is more than just taking pictures. It's about capturing emotions, telling stories, and creating memories. That's why we work closely with our clients to understand their unique vision and style, and we strive to make each photoshoot a personalized and unforgettable experience. Our team has expertise in a wide range of photography genres, including weddings, portraits, events, commercial, and editorial. We are always learning and growing, and we stay up-to-date with the latest techniques and trends in the industry. At our studio, we use state-of-the-art equipment and editing software to ensure that each image is of the highest quality. We also offer a variety of prints and products, including albums, canvases, and digital files, to help our clients showcase their images in the best way possible. Thank you for considering us as your photography team. We can't wait to work with you and capture your special moments!</p> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </section> <section id="portfolio"> <div class="hbg"> <h1>Recent Photos</h1> <div class="gallery"> <img src="https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636__480.jpg"> <img src="https://cdn.pixabay.com/photo/2017/10/25/16/54/african-lion-2888519__480.jpg"> <img src="https://cdn.pixabay.com/photo/2015/02/13/11/57/wolf-635063__480.jpg"> <img src="https://cdn.pixabay.com/photo/2017/10/27/15/52/jaguar-2894706__480.jpg"> <img src="https://cdn.pixabay.com/photo/2017/06/21/13/37/lizard-2427248__480.jpg"> <img src="https://cdn.pixabay.com/photo/2017/02/05/11/43/iguana-2039719__480.jpg"> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </section> <section id="contact"> <div class="hbg"> <h1>Contact Us</h1> <div class="contact-form"> <form> <label for="name">Name</label> <input type="text" id="name" name="name" required> <label for="email">Email</label> <input type="email" id="email" name="email" required> <label for="message">Message</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </div> </section> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


* {
    margin: 0;
    padding: 0;
}
body{
    background: #2C5364; 
    
}
.menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #141E30;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	color: #fff;
	height:88%;
    width:15%;
	position: fixed;
    top:3%;
    bottom:3%;
	left: 10px;
    border-radius: 20px;
	padding: 20px;
}

.menu ul {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
	list-style: none;
}

.menu li {
    text-align: center;
	margin-bottom: 20px;

}

.menu a {
	color: #bbbbbb;
	text-decoration: none;
	font-size: 30px;
    font-family: 'Aladin', cursive;
}
.menu a:hover {
	color: #f5af19;
}
.menu a:active {
	color: #f59;
}
.contact-form {
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    margin: 0 auto;
  }
  .contact-form form {
    display: flex;
    flex-direction: column;
  }
  
  .contact-form label {
    color: #bbbbbb;
    margin-bottom: 10px;
    font-family: 'Aladin', cursive;
  }
  
  .contact-form input[type="text"],
  .contact-form input[type="email"]
   {
    height: 30px;
    padding: 10px;
    border-radius: 5px;
    border:none;
    border-bottom:2px solid #f5af19;
    margin-bottom: 10px;
    background-color: transparent;
    color: #bbbbbb;
    font-size: 20px;
  }
  .contact-form textarea{
    padding: 10px;
    height: 200px;
    border-radius: 5px;
    border: none;
    margin-bottom: 10px;
    background-color: transparent;
    border-bottom:2px solid #f5af19;
    color: #bbbbbb;
    font-size: 20px;
  }
  .contact-form button[type="submit"] {
    background-color: #2C5364;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    width: 20%;
    transition: background-color 0.5s ease;
  }
  
  .contact-form button[type="submit"]:hover {
    background-color: #3e8e41;
  }
  

section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	margin:20px 20px 20px 270px ;
}
.hbg {
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:40px;
    height: 85vh;
    width: 90%;
    background: #141E30;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: auto;
}
/* Customize the scrollbar */
.hbg::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
  }
  
  .hbg::-webkit-scrollbar-track {
    background: transparent; /* Set the background color of the scrollbar track */
  }
  
  .hbg::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f12711 0%, #f5af19 100%); /* Set the background color of the scrollbar thumb using a gradient */
    border-radius: 5px; /* Set the border radius of the scrollbar thumb */
  }
.mainlogo{
    width:200px;
    height:200px;
}

.hbg h1 {
   padding-top: 20px;
    font-size: 78px;
    background-image: linear-gradient(to right, #ee00ff 0%, #fbff00 100%);
    color: transparent;
    -webkit-background-clip: text;
    font-family: 'Aladin', cursive;
}


p {
    font-size: 24px;
    color: #bbbbbb;
}

.gallery {
    margin-top:0px;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.gallery img {
	margin: 10px;
	max-width: 300px;
	height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media only screen and (max-width: 860px) {
    .hbg h1
      {
         font-size: 68px;
     }
     p{
        font-size: 12px;
     }
   }
   @media only screen and (max-width: 600px) {
    .hbg h1
      {
         font-size: 29px;
     }
     p{
        font-size: 12px;
     }
   }
.credit a {
    text-decoration: none;
    color: #fff;
    font-weight: 800;
  }
  
  .credit {
      color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
  }
  @media only screen and (max-width: 860px) {
    .menu{
        position: fixed;
    width: 40%;
    height:40px;
        margin:0px 7.5%;
    }
    .menu ul
     {
      
        flex-direction:row;
    }
    .menu a {
        margin-left:10px;
    }
    section{
        margin:80px; 
    }
    .hbg{
        height:80vh;
        width: 95%;
    }
        
  }
  @media only screen and (max-width: 600px) {
    .menu{
        position: fixed;
    width: 80%;
    height:40px;
        margin:0px;
    }
    .menu ul
     {
        flex-direction:row;
    }
    .menu a {
        margin-left:10px;
    }
    section{
        margin:10px; 
        margin-top: 70px;
    }
    .hbg{
        height:80vh;
        width: 95%;
    }
  }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name script.js and remember that you have got need to make a file with a .js extension.


let navLinks = document.querySelectorAll('.menu a');
let sections = document.querySelectorAll('section');

navLinks.forEach(link => {
    link.addEventListener('click', e => {
        e.preventDefault();
        const target = document.querySelector(link.getAttribute('href'));
        const targetTop = target.offsetTop;
        window.scrollTo({
            top: targetTop,
            behavior: "smooth"
        });
    });
});

window.addEventListener('scroll', () => {
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
            current = section.getAttribute('id');
        }
    });
    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href').includes(current)) {
            link.classList.add('active');
        }
    });
});

We hope you would like this One-Page Photography Portfolio Website with Fixed Vertical Navigation using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this One-Page Photography Portfolio Website with Fixed Vertical Navigation using HTML, CSS & JavaScript, then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome