Photography Website Using HTML and CSS

Photography Website Using HTML and CSS

Photography Website Using HTML and CSS

A photography website is a digital space where you can store galleries of your best images. You may effectively offer yourself as a trustworthy photographer who consumers will be begging to hire by using a professional webpage to showcase your best photos.

Photography Website Using HTML and CSS

A essential component of any photographer’s website is a responsive photography portfolio website landing page. It introduces visitors to their website and displays their best work. All devices and screen sizes, including PCs, tablets, and smartphones, must be taken into consideration while designing the landing page.

We will learn about unique cursors and animations using CSS and Javascript in this project, which is of an intermediate level. Additionally, since this is a photography website, we have put many photographs inside the portfolio to give it a more enticing appearance to the viewer.

50+ HTML, CSS and JavaScript Projects With Source Code

A variety of users are catered for on this portfolio website. If you’re a photographer, you need to present your work well to show off your talent. A smart place to start is by picking website background colours that will help the photographs stand out more.

Consequently, by the time you finish reading this blog, you will be using HTML and CSS to build your own photography website. Simply reading the content once will help you understand each concept.

These best practises may help photographers develop a responsive landing page that displays their work, offers a fantastic user experience, and motivates potential customers to take action.

So now let’s start by adding the structure for our photography website using html and css.

Step1: HTML Code

We must first construct a simple HTML file in order to begin. The core framework for our landing page will be contained in this file. Simply enter the following codes into your file after you’ve created the necessary files: In order for your HTML page to be correctly seen in a web browser, make sure to save it with a.html extension.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Photography Portfolio Website Landing Page</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="hero-section">	
        <div class="about-text hover-target">about</div>
        <div class="contact-text hover-target">contact</div>
        <div class="section-center">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <h1>Christian Arete</h1>
                    </div>
                    <div class="col-12 text-center mb-2">
                        <div class="dancing">photography</div>
                    </div>
                    <div class="col-12 text-center mt-4 mt-lg-5">
                        <p>
                            <span class="travel hover-target">travel</span> 
                            <span class="wildlife hover-target">wildlife</span> 
                            <span class="nature hover-target">nature</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>	
    
    <div class="about-section">	
        <div class="about-close hover-target"></div>
        <div class="section-center">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <img src="http://www.ivang-design.com/svg-load/portfolio/freel.jpg" alt="">
                    </div>
                    <div class="col-lg-8 text-center mt-4">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
                    </div>
                    <div class="col-12 text-center">
                        <p><span>Christian Arete</span></p>
                    </div>
                </div>
            </div>
        </div>		
    </div>
    
    <div class="contact-section">	
        <div class="contact-close hover-target"></div>
        <div class="section-center">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 text-center">
                        <a href="#" class="hover-target">[email protected]</a>
                    </div>
                    <div class="col-12 text-center social mt-4">
                        <a href="#" class="hover-target">instagram</a>
                        <a href="#" class="hover-target">flickr</a>
                        <a href="#" class="hover-target">facebook</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="travel-section">	
        <div class="travel-close hover-target"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <h3>travel</h3>
                </div>
                <div class="col-12 mt-3 text-center">
                    <p><span>Canon PowerShot S95</span></p>
                </div>
                <div class="col-12 text-center">
                    <p>
                        focal length: 22.5mm<br>
                        aperture: ƒ/5.6<br>
                        exposure time: 1/1000<br>
                        ISO: 80
                    </p>
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    
    <div class="wildlife-section">	
        <div class="wildlife-close hover-target"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <h3>wildlife</h3>
                </div>
                <div class="col-12 mt-3 text-center">
                    <p><span>Canon PowerShot S95</span></p>
                </div>
                <div class="col-12 text-center">
                    <p>
                        focal length: 22.5mm<br>
                        aperture: ƒ/5.6<br>
                        exposure time: 1/1000<br>
                        ISO: 80
                    </p>
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    
    <div class="nature-section">	
        <div class="nature-close hover-target"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <h3>nature</h3>
                </div>
                <div class="col-12 mt-3 text-center">
                    <p><span>Canon PowerShot S95</span></p>
                </div>
                <div class="col-12 text-center">
                    <p>
                        focal length: 22.5mm<br>
                        aperture: ƒ/5.6<br>
                        exposure time: 1/1000<br>
                        ISO: 80
                    </p>
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
                <div class="col-md-6 col-lg-4">
                    <img src="http://www.ivang-design.com/svg-load/portfolio/photo-p.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    
    <div class='cursor' id="cursor"></div>
    <div class='cursor2' id="cursor2"></div>
    <div class='cursor3' id="cursor3"></div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src="script.js"></script>
  </body>
</html>

We’ll start by include the project’s structure, but first we’ll need to link up some specific items inside the link, such the fact that we’ve utilised various CSS and Javascript files. Additionally, our photography website uses the bootstrap and jquery javascript and CSS frameworks, therefore we must also include their links in the head section, just before the closing body tag.

<----Head Section---->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'> <link rel="stylesheet" href="styles.css" />

<----Body Section---->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'>
</script> <script src="script.js"></script>

The visible content of the web page is located in the “body” section. Three other divs—about-section, contact-section, and travel-section—follow the hero-section div, which opens the page and contains some photography-related text and photos. Hovering over particular items on the page will display these divs, which are by default hidden. We’ll construct various pages for various types of information in this section.

How To Create Music Player Using HTML , CSS and JavaScript?

We’ll include the user’s information in the about section. We shall provide their name and a list of their qualifications in the “about” section. Here, we’ve styled and formatted the text using Bootstrap classes in addition to the standard HTML tags.

We will include the user’s contact information in the contact area. We will include the user’s various social media accounts as well as their business email address so that you can get in touch with them.

We will now upload the work and all of the photos that the photographers took inside the travel area. so that we can display his or her work to several clients at once.

The overall layout and content of a landing page for a photography website is defined by this HTML code, which includes sections for the hero, about, contact, and travel.

Now let’s take a look at the structure of our photography website.

HTML Output:

Photography Website Using HTML and CSS

Step2: CSS Code

We will now make our CSS file. We’ll design our photography website in this file using some fundamental CSS guidelines.

@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');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');

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('http://www.ivang-design.com/svg-load/portfolio/photo.jpg');
    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: 5vw;
    line-height: 1;
    font-weight: 900;
}
.hero-section .dancing{
    font-family: 'Dancing Script', cursive;
    letter-spacing: 1px;
    color: #866BAF;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
}
@media screen and (max-width: 580px){
    .hero-section .dancing{
        font-size: 18px;
    }
}
.hero-section p{
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
}
.hero-section p span{
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-bottom: 35px;
}
.hero-section p span:before {
    position: absolute;
    content: '';
    bottom: 10px;
    left: 50%;
    height: 30px;
    width: 30px;
    margin-left: -15px;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/down.svg');
    opacity: 0.2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.hero-section p span:hover:before {
    opacity: 1;
    bottom: 5px;
}

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: 17px;
    line-height: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    top: 50%;
    left: 40px;
    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:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -25px;
    height: 30px;
    width: 30px;
    margin-top: -15px;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
    opacity: 0.2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.about-text:hover:before {
    opacity: 1;
    left: -30px;
}
.about-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 100vh;
    background-color: rgba(31,32,41,1);
    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: 100px;
    height: 100px;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.about-section p span {
    font-family: 'Dancing Script', cursive;
    letter-spacing: 1px;
    color: #866BAF;
    font-size: 25px;
    font-weight: 400;
}

.contact-text {
    position: absolute;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    top: 50%;
    right: 40px;
    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:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -25px;
    height: 30px;
    width: 30px;
    margin-top: -15px;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
    opacity: 0.2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.contact-text:hover:before {
    opacity: 1;
    left: -30px;
}
.contact-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 100vh;
    background-color: rgba(31,32,41,1);
    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: 600;
    letter-spacing: 1px;
    color: #866BAF;
}
@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: rgba(31,32,41,1);
    -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: 44px;
    line-height: 1.3;
    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;
}
.travel-section p span,
.wildlife-section p span,
.nature-section p span {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #866BAF;
}
/* #Link to page
================================================== */

.link-to-portfolio {
      position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 200;
    cursor: pointer;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: 65%;
  background-repeat: no-repeat;
    background-image: url('https://assets.codepen.io/1462889/fcy.png');
    box-shadow: 0 0 0 2px rgba(255,255,255,.1);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(255,255,255,.1);
}

Step1:Importing the “Poppins” font with a variety of font weights and styles from Google Fonts is the first step; this font will be utilised later in the code. The general style for the body element of the page is then specified. The body’s font family is set to the sans-serif typeface “Poppins”. With a line height of 1.6 and a font weight of 300, the font is 15 pixels in size. White (#fff) is used for the text, while a dark blue (#1f2029) is used for the backdrop. The body’s height is set to 100 vh (the entire height of the viewport), and the overflow is hidden.

In addition, it sets the perspective property to 800 px, which is needed later for 3D transformations, and applies a linear transition with a period of 300 ms to all attributes that can be transitioned.

@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');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');

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;
}

Photography Website Using HTML and CSS

ADVERTISEMENT

Step2:Next, it applies the classes “cursor”, “cursor2”, and “cursor3” to a group of three cursor components. The upper left corner of the screen is where these items are fixedly positioned. They have a 50% radius, a “difference” mix-blend mode, and a transition duration of 300 ms for all attributes that can transition.

ADVERTISEMENT

100+ JavaScript Projects With Source Code (2023)

ADVERTISEMENT

While cursor2 and cursor3 have a height and width of 36 pixels, a z-index of 99999, and a transition time of 0.3 seconds with an ease-out effect, the cursor element has a white background and is initially hidden. When the cursor2 or cursor3 element is hovered over, both its scale and border are doubled in size.

ADVERTISEMENT

On screens with a maximum width of 1200 pixels, the cursor elements are hidden using a media query.

ADVERTISEMENT

/* #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
    }
}

Step3: The “hero-section” class in the code is then used to style the hero section. It is a block-level element with a relative position, a 100% width, and an overflow of hidden. It has a backdrop image with a cover size and centred position, and its height is set to 100 vh. The hero-section element has a box-shadow, a linear transition of 300 ms for all properties that can transition, and a transition delay of 400 ms. It has a transform-origin centre top.

The hero section contains a h1 element with white text in a font size of 8 vw, a line height of 1, and a weight of 900. Another category called “dancing” features letter spacing of 1 pixel, yellow colour, font size of 25 pixel, 1 pixel line height, 700 font weight, and uppercase text transform. It is rotated -45 degrees and shifted upward by 175 pixels. In the dance class, there is also an inner span component with a yellow backdrop and white lettering. Yellow text with a font size of 20 pixels and a weight of 700 is also present in the p element of the hero section. Span element is contained within it.

.hero-section {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 100vh;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/photo.jpg');
    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: 5vw;
    line-height: 1;
    font-weight: 900;
}
.hero-section .dancing{
    font-family: 'Dancing Script', cursive;
    letter-spacing: 1px;
    color: #866BAF;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
}
@media screen and (max-width: 580px){
    .hero-section .dancing{
        font-size: 18px;
    }
}
.hero-section p{
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
}
.hero-section p span{
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding-bottom: 35px;
}
.hero-section p span:before {
    position: absolute;
    content: '';
    bottom: 10px;
    left: 50%;
    height: 30px;
    width: 30px;
    margin-left: -15px;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/down.svg');
    opacity: 0.2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.hero-section p span:hover:before {
    opacity: 1;
    bottom: 5px;
}

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: 17px;
    line-height: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    top: 50%;
    left: 40px;
    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:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -25px;
    height: 30px;
    width: 30px;
    margin-top: -15px;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
    opacity: 0.2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.about-text:hover:before {
    opacity: 1;
    left: -30px;
}
.about-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 100vh;
    background-color: rgba(31,32,41,1);
    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: 100px;
    height: 100px;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
.about-section p span {
    font-family: 'Dancing Script', cursive;
    letter-spacing: 1px;
    color: #866BAF;
    font-size: 25px;
    font-weight: 400;
}

.contact-text {
    position: absolute;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
    top: 50%;
    right: 40px;
    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:before {
    position: absolute;
    content: '';
    top: 50%;
    left: -25px;
    height: 30px;
    width: 30px;
    margin-top: -15px;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px 30px;
    background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
    opacity: 0.2;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.contact-text:hover:before {
    opacity: 1;
    left: -30px;
}
.contact-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 100vh;
    background-color: rgba(31,32,41,1);
    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: 600;
    letter-spacing: 1px;
    color: #866BAF;
}
@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: rgba(31,32,41,1);
    -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: 44px;
    line-height: 1.3;
    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;
}
.travel-section p span,
.wildlife-section p span,
.nature-section p span {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #866BAF;

We have added the styling to our photography website let’s look at the final output of our photography website after adding the styling to our project.

Output:

Photography Website Using HTML and CSS

Step3: Javascript Code

(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);

The function’s initial step involves placing three mouse-following cursor components on the page. These cursor elements’ ID properties, cursor, cursor2, and cursor3, serve as identifiers. The mousemove event listener receives the user’s mouse coordinates from the event object, which are then used to position the cursor components.

The second step of the code is the definition of two helper functions, “n” and “s,” which are used to add and remove the “hover” class from the cursor components. When a user hovers their cursor over particular items on the page, these functions are used to modify the appearance of the cursor elements.

We we will also add the classlist to our javascript function as the user clicks on any of the three section the particular class gets active using the .addClasslist method and the content appears on the screen.

Now we have added all the functionality and styling to our photography website.Let’s take a look at the final output’

Final Output Of Photography Website:

Live Codepen Preview:

Now We have Successfully created our photography website using html and css. You can use this project for your personal webpage and We hope you understood the project, If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Ivan


Leave a Reply