aleeza/ August 15, 2019/ BOOTSTRAP, HTML & CSS/ 0 comments

DEMO: http://aleezadev.com/litrato/

In this blog im going to share to you the codes I used to make this Photography Portfolio Website.

HOMEPAGE

Litrato is a filipino word that means “picture” in english. I created this site to add in my job portfolio. http://aleezadev.com.

You can get the codes and the photos from my github account. Click on this link https://github.com/codewithaleeza/litrato .

I downloaded the photos I used for the site from pixabay.com. I don’t own any pictures I used in the site.

So now let’s get started….!

So this is the file structure that we are going to use for the site. I named the folder as “litrato”. There’s only one folder inside the litrato folder which is the images folder. Then I placed the index.html and style.css outside.

File Structure

First we are going to create the code for the homepage, lets name it index.html.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
 <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive|Oswald&display=swap" rel="stylesheet">

  <title>Litrato-HOME</title>
</head>
<body>
  <nav class="sidebar hide-medium hide-small" style="width:40%">
    <div class="bgimg"></div>
  </nav>

<div id="mySidepanel" class="sidepanel" >
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#home"onclick="closeNav()">Home</a>
  <a href="#portfolio"onclick="closeNav()">Portfolio</a>
  <a href="#about"onclick="closeNav()">About</a>
  <a href="#contact"onclick="closeNav()">Contact</a>
</div>
<button class="openbtn" onclick="openNav()">☰</button>

<script>
function openNav() {
  document.getElementById("mySidepanel").style.width = "60%";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}
</script>
<div id="myModal" class="modal overflow-hidden">
<span class="close">×</span>
<img class="modal-content" id="img01">

<div id="caption"></div>
</div>

<div class="split left">
  <div class="centered" id=home>
    <img src="images/litrato.png" alt="Logo" height="200px">
  <br><br>
<p class="title" style="font-size:30px;">"Let's capture memories.. " </p>
  </div>
  <br><br>
  <!-- Portfolio Section -->
<div class="" id="portfolio">
  <div class="row">
  <div class="column">
    <img class ="myImg" src="images/portrait19.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait8.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait10.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait3.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait9.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait4.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait1.jpg" style="width:100%">
  </div>
  <div class="column">
    <img class ="myImg" src="images/portrait2.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait6.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait5.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait14.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait7.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait11.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait12.jpg" style="width:100%">
  </div>

  <div class="column">
    <img class ="myImg" src="images/portrait13.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait18.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait15.jpg" style="width:100%">
    <img class ="myImg" src="images/portrait16.jpg" style="width:100%">
    <!-- <img src="images/portrait17.jpg" style="width:100%">
    <img src="images/portrait20.jpg" style="width:100%"> -->
  </div>
</div>
</div>
<hr>

<br><br><br>
<div class="" id="about">
    <h2>About</h2>
    <hr>
    <div class="aboutme col">
    <p class="title">We loved making images forever. We love the colors and shapes and emotions and ideas. We love being lucky enough to make a living doing what we love.We always bring our enthusiasm, passion and loads ideas to all projects. We work round the clock to ensure the job is done excellently.    </p>
  </div> <br><br>
    <h3 class="">Our Skills</h3>
    <p class="">Photography</p>
    <div class="col">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width:95%">95%</div>
    </div>
    <p class="">Photoshop</p>
    <div class="col">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%">85%</div>
    </div>
    <br>

    <div class="mt-3" style="font-family: 'Oswald', sans-serif;
">
      <div class="d-flex mb-3">
        <div class="p-2 flex-fill bg-dark" style="color:white;">14+<br>
        Partners</div>
        <div class="p-2 flex-fill bg-dark" style="color:white;">55+<br>
        Projects Done</div>
        <div class="p-2 flex-fill bg-dark" style="color:white;">89+<br>
        Happy Clients</div>
        <div class="p-2 flex-fill bg-dark" style="color:white;">150+<br>
        Meetings</div>

      </div>

    </div>
    <br>
</div>
<hr>
<br><br>
<div class="" id="contact" style="margin-bottom:64px">
   <h2>Contact Us</h2>
   <hr>

   <div class="col">
     <p><i style='font-size:24px' class='fas'></i> 4th Floor Bldg. A SM Megamall Mandaluyong City, Philippines</p>
     <p><i class="fa fa-phone fa-fw w3-xxlarge w3-margin-right"></i> Phone: +0906 4563481</p>
     <p><i class="fa fa-envelope fa-fw w3-xxlarge w3-margin-right"> </i> Email: litrato_photography@gmail.com</p>
   </div>

   <!-- Image of location/map -->
   <img src="images/map.png" class="" style="width:90%;margin:32px 0; border:2px;">
<br>
   <h4 class="title"><b>Lets get in touch. Send us message:</b></h4><center>
   <div class="column2" align="center">
     <form action="/action_page.php">
       <label for="fname" >Full Name</label>
       <input type="text" id="fname" name="fullname" placeholder="Your name.."><br>
       <label for="email">Email address</label><br>
       <input type="text" id="email" name="email" placeholder="Your Email Address.." width="200px">
<br><br>
       <label for="message">Message</label>
       <textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea><br>
       <input type="submit" value="Submit">
     </form>

   </div></center>

 <!-- End Contact Section -->
</div>
<br>
<br>


<div class="footer">

  <footer>

    <div class="footer-copyright text-center py-3" style="color:grey;">© 2019 Copyright:
        <a href="http://aleezadev.com" style="color:white;"> Made By: Aleezadev.com</a>
      </div>

     <br><br>
   </footer>
</div>

</div>


<script>
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
    captionText.innerHTML = this.alt;
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

</script>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</html>

Now we are gonna make the style.css or the css file for designing the site.

style.css

p{
  font-family: 'Oswald', sans-serif;

}

.title{
  font-family: 'Cedarville Cursive', cursive;
  font-size: 20px;
}
.split {
  height: 100%;
  width: 60%;
  position: fixed;
  z-index: 1;
  text-align:center;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;

}
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 40%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
.bgimg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/photographer.jpg');
  min-height: 100%;
}
.sidebar {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed!important;
    z-index: 1;
    overflow: auto;
    right:0;
}

@media (max-width:992px) and (min-width:601px){
  .split {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    text-align:center;
    overflow-x: hidden;
    padding-top: 20px;
  }
.hide-medium{display:none!important}}
@media (max-width:600px){
  .split {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    text-align:center;
    overflow-x: hidden;
    padding-top: 20px;
  }
  .hide-small{display:none!important} }

.sidepanel  {
  width: 0;
  position: fixed;
  z-index: 2;
  height: 100%;
  right:0;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  align:right;

}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color:#444;
}


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: hidden;
  overflow-y:hidden;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  ::-webkit-scrollbar {
    display: none;
    overflow:hidden;
}
}

/* Modal Content (image) */
.modal-content {

  margin: auto;
  display: block;
  width:auto;
  max-width: 700px;
  overflow:scroll;
  height:auto;
max-height:100%;
object-fit: scale-down;
;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: grey;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: black;
}

@media screen and (max-width: 600px) {
  .column2, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
.column2{
  width:80%;
}

.footer {
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: black;
   color: white;
   text-align: center;
}

Im gonna show you how our site will look like….

Site Preview

Homepage
Portfolio Section
About Section
Contact Section
Footer Section

Now we’re done… Thank you for reading my blog.

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*