Portofolio

 

Hii.. Here is a program to make a Portofolio site using HTML and CSS




HTML Source Code :

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="Porto.css">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portofolio</title>
    </head>
    <body>
        <div class="div1">  <a href="file:///D:/Materi/HTML/Tugas%201/Portofolio.html">
            <div class="header">
                <div class="logo"><img src="Pride.png" height="125px" ></div>
                <h1 class="judul">Webpage</h1></a>
                <ul>
                    <li><a href="https://www.instagram.com/reggyarios/">
                            <img src="ig.png" height="25px"> Instagram </a>
                    </li>
                   
                    <li><a href="https://wa.me/6281268555029">
                        <img src="wa.png" height="25    px"> Whatsapp </a>  
                    </li>

                    <li><a href="https://discord.gg/user/Lenn#2549/">
                        <img src="dc.png" height="25px"> Discord </a>
                    </li>
                </ul>
            </div>

        <div class="content">  
            <div class="slideshow-container">
                <div class="mySlides fade">
                  <img src="CSA.jpg" style="width:100%">
                  <div class="text">All About Computer Science</div>
                </div>
               
                <div class="mySlides fade">
                  <img src="First.jpg" style="width:100%">
                  <div class="text">The day that I Remember</div>
                </div>
               
                <div class="mySlides fade">
                    <img src="PMM.jpg" style="width:100%">
                    <div class="text">Goodbye in Peace</div>
                </div>
               
                <a class="prev" onclick="plusSlides(-1)">❮</a>
                <a class="next" onclick="plusSlides(1)">❯</a>
               
                </div>
                <br>
               
                <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>
                </div>
               
                <script>
                let slideIndex = 1;
                showSlides(slideIndex);
               
                function plusSlides(n) {
                  showSlides(slideIndex += n);
                }
               
                function currentSlide(n) {
                  showSlides(slideIndex = n);
                }
               
                function showSlides(n) {
                  let i;
                  let slides = document.getElementsByClassName("mySlides");
                  let 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";
                }
                </script>
    </div>
               
            <div class="footer">
                <p>©2022 - Created by me ofc.</p>
            </div>
        </div>
       
       
    </body>
</html>


CSS Source Code :

*{
  margin : 0;
  padding :0;
}

.div1{
  width : 100%;
  margin : auto;
  background-color : rgb(54, 54, 54);
}

body{
  font-size : 16px;
  background-color : grey;
  -ms-overflow-style: none;
}

.logo{
  float: left;
  height: 100px;
  width: 80px;
  size: logo;
}

.header .judul{
  font-size : 90px;
  background-color: rgb(54, 54, 54);
  font-family: Brush Script MT;
}

.header ul{
  background-color: rgb(54, 54, 54);
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
}

.header ul li{
  display : inline-block;
  font-size: 25px;
  text-align: center;
  overflow: visible;
  padding: 5px 16px;
  width: auto;
  border: none;
  display: block;
  outline: 0;
  float: right;
}

.header a{
  text-decoration : none;
  color : rgb(248, 250, 255);
}

.header li:hover{
  background-color : rgb(48, 48, 48);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.content{
  background-color: grey;
  padding : 20px;
  width : 100%;
  float : left;
}
.content h2{
  font-size : 25px;
  font-weight : bold;
}
.content p{
  margin-bottom : 20px;
  font-size : 14px;
}

.footer{
  background-color : rgb(54, 54, 54);
  height: 20px;
  text-align: right;
  font-size: 10px;
 
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  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: 18px;
  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: 15px;
  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: 15px;
  width: 15px;
  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 {
  animation-name: fade;
  animation-duration: 1.5s;
}

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



And here how is it :




Komentar

Posting Komentar

Postingan populer dari blog ini

jQuerry

  <! DOCTYPE html > < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" ></ script > < script > $ ( document ). ready ( function (){   $ ( "p" ). click ( function (){     $ ( this ). hide ();   }); }); </ script > </ head > < body > < p > If you click on me, I will disappear. </ p > < p > Click me away! </ p > < p > Click me too! </ p > </ body > </ html >
Baca selengkapnya

Bootstrap

 <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center">   <h1>My First Bootstrap Page</h1>   <p>Resize this responsive page to see the effect!</p>  </div>    <div class="container">   <div class="row">     <div class="col-sm-4">       <h3>Column 1</h3>       <p>Lorem i...
Baca selengkapnya