Skip to main content

Archive

Show more

Photographer Studio Landing Page | Rustcode

by Rustcode
Photography-Studio-Landing-Page-Design-html-and-css

Photographer Studio Landing Page Using HTML And CSS

In the starting learning phase of website development and design. we design a website landing of photographer studio then we convert this design into web development. You can see design in the image.

We simply create a logo and background image for this project then we add a navigation bar on the top landing page and a 'contact us" button at the bottom. We know this is not a professional design and development but still, we are improving our content over time.

You can check out more landing page designs on this website. We have already created a landing page playlist. We are updating this playlist regularly.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Photographer Studio Landing Page | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

You can download background image and website logo form github.

.01 Logo: download
.02 Background: download
<!DOCTYPE html>
<html>
  <head>
    <title>Photographer Studio Landing Page | Rustcode</title>
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Bree Serif' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="header-container">
        <div class="header">
          <div class="logo-container">
            <img src="logo.png" />
          </div>
          <div class="menu-container">
            <ul>
              <li><a href="#">WORK</a></li>
              <li><a href="#">PRICE</a></li>
              <li><a href="#">TEAM</a></li>
              <li><a href="#">ABOUT</a></li>
              <li><a href="#">CONTACT</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content">
        <h1>Photos.Exposure</h1>
        <h3>Capturing Is Our Passion.</h3>
        <a href="#">CONTACT US</a>
      </div>
    </div>
  </body>
</html>



03. CSS

body,
html {
  padding: 0px;
  margin: 0px;
  height: 100%;
}

.container {
  height: 100%;
  width: 100%;
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-container {
  width: 100%;
  color: white;
  text-align: center;
}

.header {
  width: auto;
  margin: auto;
  margin-top: 24px;
  overflow: auto;
  text-align: center;
  display: inline-flex;
}

.logo-container img {
  width: 96px;
  height: 48px;
  margin: auto;
  cursor: pointer;
}

.menu-container {
  padding: 10px;
  margin: auto;
}

.menu-container ul li {
  list-style: none;
  display: inline;
}

.menu-container ul li a {
  text-decoration: none;
  padding: 16px 18px;
  color: white;
  letter-spacing: 1px;
  font-family: Bree Serif;
}

.menu-container ul li a:hover {
  background: rgba(143, 0, 207, 0.8);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
}

.content h1 {
  line-height: 1px;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 48px;
}

.content h3 {
  font-family: sofia;
  font-size: 42px;
  letter-spacing: 1px;
}

.content a {
  border-radius: 2px;
  text-decoration: none;
  border: none;
  padding: 16px 42px;
  color: white;
  font-size: 24px;
  background: rgba(143, 0, 207, 0.8);
  text-transform: uppercase;
}

.content a:hover {
  background: rgba(15, 143, 128, 0.8);
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment