Website portfolio



A graphic designer website portfolio




 <!DOCTYPE html>
<html lang="en">
   <head>
      <title>Personal Portfolio</title>
      <meta charset="utf-8">
   	<meta http-equiv="X-UA-Compatible" content="IE-edge">
   		<link rel="stylesheet" href="/storage/emulated/0/style.css">
   			
   </head>

   <body>
      <section>
      	<nav id="navbar">
      		<a href="#" class="logo">Lst Web</a>
      		<ul>
      			<li><a href="#">Home</a></li>
      			<li><a href="#about">About</a></li>
      			<li><a href="#services">Services</a></li>
      			<li><a href="#contact">Contact</a></li>
      		</ul>
      	</nav>
      	<div class="text-container">
      		<p class="p1">Hello,</p>
      		<p class="p2">I am Micheal</p>
      		<p class="p3">I am a graphic designer</p>
      	</div>
      
      </section>
      
      <div class="about-container">
      	<img src="/storage/emulated/0/model.jpg" alt="lst">
      <div class="about-text">
      	<p class="text1" id="about">About Me</p>
      	<p class="text2">Graphic Designer</p>
      	<p class="text3">Hello, My name is Oyebanjo Micheal. I am a graphic designer. If you have any project or if you need any design.
      	 </p>
      	<p class="text4">If you have any project or if you need any design. I make as soon as possible.You will really like my work. 
      	<a href="">Contact me.</a></p>
      </div>
     </div>
     <div class="services">
     	<div class="services-text">
     	<p class="ser1" id="services">Services</p>
     	<p class="ser2">Services Required</p>
     	<p class="ser3">If you have any project or if you need any graphical designs. I make as soon as possible.</p>
      </div>
     </div>
     <div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">
    <img src="/storage/emulated/0/img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade"> 
    <img src="/storage/emulated/0/img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="/storage/emulated/0/img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <div class="mySlides fade"> 
    <img src="/storage/emulated/0/img4.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="/storage/emulated/0/img5.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <div class="mySlides fade"> 
    <img src="/storage/emulated/0/img6.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="/storage/emulated/0/img7.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <div class="mySlides fade"> 
    <img src="/storage/emulated/0/img8.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="/storage/emulated/0/img9.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <div class="mySlides fade"> 
    <img src="/storage/emulated/0/img10.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="/storage/emulated/0/img11.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span> 
  <span class="dot" onclick="currentSlide(5)"></span> 
  <span class="dot" onclick="currentSlide(6)"></span> 
  <span class="dot" onclick="currentSlide(7)"></span> 
  <span class="dot" onclick="currentSlide(8)"></span> 
  <span class="dot" onclick="currentSlide(9)"></span> 
  <span class="dot" onclick="currentSlide(10)"></span> 
  <span class="dot" onclick="currentSlide(11)"></span>  
</div>
<div class="contact-me">
     	<p>If you have any project in mind.</p>
     	<button onclick="myFunction()">Contact Me</button>
     </div>
     <footer>
     	<p class="ft1" id="contact">Lst Web</p>
     	<p class="ft2">I make as soon as possible.You will really like my work. Contact me.<br><span> Tel: 08132629529.</span></p>
     	
     	<p class="copyright"> &copy;  Lst Web</p>
     </footer>
     </body>
  </html>                    
                  
                



 *{
      			margin:0;
      			padding:0;
      			box-sizing:border-box;
      		}
      		body{
      			background-color:#f6f5f5;
      		}
      		ul{
      			list-style:none;
      		}
      		a{
      			text-decoration:none;
      		}
      		section{
      			width:100%;
      			height:42vh;
 background-image:url("/storage/emulated/0/Technology-237a0230-a8c5-4451-bebd-b8cb3022b438.jpg");
      			background-repeat:no-repeat;
      			background-size:cover;
      			position:relative;
      			/*background-position:bottom;*/
      		}
      		 
      		#navbar{
      			display:flex;
      			justify-content:space-between;
      			align-items:center;
      			height:110px;
      			background-color:#634E4E;
      			box-shadow:2px 2px 12px rbga(0,0,0,0.2);
      			padding:0px 5%;
      			position:sticky;
      			top:0;
      			z-index:1;
      			border-bottom:6px solid #2B2A2A;
      		}
      		#navbar ul{
      			display:flex;
      		}
      		#navbar ul li a{
      			margin:30px;
      			font-family:myriad pro regular;
      			color:#FEFEFE;
      			font-size:28px;
      			font-weight:700;
      		}
      		.logo{
      			font-family:RoadTest;
      			color:#000;
      			font-size:44px;
      		}
      		.active{
      			font-weight:bold;
      			color:#2d2a2a;
      		}
      		
      		/*text-container paragraghs*/
      		.p1{
      			font-family:calibri;
      			font-weight:bold;
      			color:#191818;
      			font-size:40px;
      			letter-spacing:5px;
      		}
      		.p2{
      			font-family:calibri;
      			font-weight:bold;
      			color:#191818;
      			letter-spacing:2px;
      			font-size:77px;
      		}
      		.p3{
      			font-family:myriad pro regular;
      			color:#fff;
      			font-size:40px;
      			line-height:30px;
      		}
      		.text-container p{
      			line-height:20px;
      			margin:45px 0px 25px;
      		}
      		.text-container{
      			position:absolute;
      			left:13%;
      			top:42%;
      			transform:translate(-13%,-42%);
      			
      		}
      		.about-container{
      			width:90%;
      			height:490px;
      			background-color:#fff;
      			box-shadow:2px 2px 12px rgba(0,0,0,0.6);
      			border-radius:20px;
      			display:flex;
      			position:relative;
      			margin:-2% auto 10px auto;
      			justify-content:space-evenly;
      			align-items:center;
      		}
      		.about-container img{
      			height:395px;
      			width:235px;
      			border-radius:10px;
      		}
      		.about-text{
      			width:590px;
      		}
      		/*about paragraghs*/
      		.text1{
      			font-family:myriad pro regular;
      			color:#403e3e;
      			font-size:40px;
      			font-weight:bold;
      	   /*line-height:0px;*/
      	   margin-top:8px;
      		}
      		.text2{
          font-family:myriad pro regular;
      			color:#3d3e3e;
      			font-size:36px;
      			font-weight:bold;
      			line-height:0px;		
      			margin-top:-10px;	
      		}
      		.text3,.text4{
      			font-family:calibri;
      			font-size:33px;
      			color:#7d7e7e;
      			line-height:40px;
      		}
      		.services{
      			background-color:#fff;
      			height:380px;
      			padding:2% 10% 0px 10%;
      		}
      		/*services paragragh*/
      		.ser1{
      			font-family:calibri;
      			font-weight:bold;
      			color:#3e3d3d;
      			font-size:35px;
      			line-height:46px;
      		}
      		.ser2{
      			font-family:calibri;
      			font-weight:bold;
      			color:#3e3e3d;
      			font-size:30px;
      			line-height:40px;
      		}
      		.ser3{
     			font-family:calibri;
      			color:#7d7e7e;
      			font-size:30px;
      		}
      		.services-text{
      			width:500px;
      			margin:50px 0px;
      		}
      		/* Slideshow container */
.slideshow-container {
  max-width: 900px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 26px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) 
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}*/

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 20px;
  width: 20px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
.contact-me{
      				width:100%;
      				height:200px;
      				background-image:url("/storage/emulated/0/ls.jpeg");
      				background-size:cover;
      				background-repeat:no-repeat;
      				display:flex;
      				justify-content:center;
      				align-items:center;
      				flex-direction:column;
      				margin-top:30px;
      			}
      			.contact-me p{
      				color:#fff;
      				font-size:32px;
      				font-family:calibri;
      				font-weight:bold;
      				border-bottom:2px solid #fff;
      				margin-top:10px;
      				line-height:50px;
      			}
      			.contact-me button{
      				width:230px;
      				height:50px;
      				background-color:#fff;
      				outline:none;
      				border:none;
      				font-size:28px;
      				font-weight:bold;
      			  margin-top:10px;
      			}
      			footer{
      				height:300px;
      				display:flex;
      				justify-content:center;
      				align-items:center;
      				flex-direction:column;
      				position:relative;
      				
      			}
      			footer p{
      				font-family:calibri;
      			}
      			.ft1{
      				font-weight:bold;
      				font-size:36px;
      				line-height:30px;
      				color:#191919;
      			}
      			.ft2{
      				font-size:33px;
      				color:#7d7e7e;
      				width:600px;
      				text-align:center;
      				line-height:40px;
      			}
      			.ft2 span{
      				font-size:36px;
      				color:#000;
      				font-weight:bold;
      				border-bottom:4px solid #F24141;
      				line-height:30px;
      			}
      			.social-icons a{
      				width:80px;
      				height:80px;
      				display:flex;
      				justify-content:center;
      				align-items:center;
      			  background-color:#e6e3e3;
      				margin:20px 10px;
      				border-radius:50%
      			}
      			.social-icons{
      				display:flex;
      				
      			}
      			.fa{
      				font-size:50px;
      			}
      			.copyright{
      				color:#565555;
      				font-size:22px;
      				position:absolute;
      				left:50%;
      				bottom:10px;
      			 transform:translateX(-50%);
      			 
      			}                
              



	// JavaScript Document
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {

  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
};