Jump to content

Do you want live notifications when people reply to your posts? Enable Notifications​ Fix the image gallery!


Quencyjones79
 Share

Recommended Posts

Hello good afternoon everyone.

I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:

  • How do I create text blocks about images in the image gallery?

  • What steps do I have to do so that in image 5 (man on a motorcycle), create an image with link to Behance in the image gallery?

  • What do I have to do to centralize the image gallery with the website background?

index.html

<!DOCTYPE html>
<html lang="en">
<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>Portfolio</title>
    <link rel="stylesheet" href="styles/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">


    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">


</head>
<body class="main-content">
    <header class="container header active" id="home">

        <!--datetime and weather-->

        <a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" data-theme="pure"></a>
                <script>
                !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
                </script>

<div class="datetime">
    <div class="time"></div>
    <div class="date"></div>
  </div>

  
<!-- end of datetime and weather-->


        <div class="header-content">
            <div class="left-header">
                <div class="h-shape"></div>
                <div class="image">
                    <img src="img/fotoze.jpg" alt="">
                </div>
            </div>
            <div class="right-header">
                <h1 class="name">
                    Olá Chamo-me <span>José Moreira.</span>
                   
                </h1>
                <p>
                    I'm a Web Developer, I love to create beautiful and functional websites.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, libero?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis sed aut!
                </p>
                <div class="btn-con">
                    <a href="" class="main-btn">
                        <span class="btn-text">Download CV</span>
                        <span class="btn-icon"><i class="fas fa-download"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </header>
    <main>
        <section class="container about" id="about">
            <div class="main-title">
                <h2>About <span>me</span><span class="bg-text">my stats</span></h2>
            </div>
            <div class="about-container">
                <div class="left-about">
                    <h4>Information About me</h4>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Eveniet labore nihil obcaecati consequatur. Debitis error doloremque, 
                        vero eos vel nemo eius voluptatem dicta tenetur modi. <br /> <br /> La musica
                        delectus dolore fugiat exercitationem a, 
                        ipsum quidem quo enim natus accusamus labore dolores nam. Unde.
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Harum non necessitatibus deleniti eum soluta.
                    </p>
                    <div class="btn-con">
                        <a href="#" class="main-btn">
                            <span class="btn-text">Download CV</span>
                            <span class="btn-icon"><i class="fas fa-download"></i></span>
                        </a>
                    </div>
                </div>
                
            </div>
            <div class="about-stats">
                <h4 class="stat-title">My Skills</h4>
                <div class="progress-bars">
                    <div class="progress-bar">
                        <p class="prog-title">html5</p>
                        <div class="progress-con">
                            <p class="prog-text">80%</p>
                            <div class="progress">
                                <span class="html"></span>
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <p class="prog-title">css3</p>
                        <div class="progress-con">
                            <p class="prog-text">95%</p>
                            <div class="progress">
                                <span class="css"></span>
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <p class="prog-title">javascript</p>
                        <div class="progress-con">
                            <p class="prog-text">75%</p>
                            <div class="progress">
                                <span class="js"></span>
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <p class="prog-title">ReactJS</p>
                        <div class="progress-con">
                            <p class="prog-text">75%</p>
                            <div class="progress">
                                <span class="react"></span>
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <p class="prog-title">NodeJS</p>
                        <div class="progress-con">
                            <p class="prog-text">87%</p>
                            <div class="progress">
                                <span class="node"></span>
                            </div>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <p class="prog-title">Python</p>
                        <div class="progress-con">
                            <p class="prog-text">70%</p>
                            <div class="progress">
                                <span class="python"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="stat-title">My Timeline</h4>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="tl-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <p class="tl-duration">2010 - present</p>
                    <h5>Web Developer<span> - Vircrosoft</span></h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                    </p>
                </div>
                
                <div class="timeline-item">
                    <div class="tl-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <p class="tl-duration">2016 - 2017</p>
                    <h5>C++ Programmer<span> - Slime Tech</span></h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                    </p>
                    </div>
                    <div class="timeline-item">
                        <div class="tl-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <p class="tl-duration">2008 - 2011</p>
                        <h5>Software Engineer<span> - Boogle, Inc.</span></h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                        </p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="tl-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <p class="tl-duration">2009 - 2013</p>
                        <h5>Business Degree<span> - Sussex University</span></h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                        </p>
                    </div>
                    <div class="timeline-item">
                        <div class="tl-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <p class="tl-duration">2016 - 2017</p>
                        <h5>C++ Programmer<span> - Slime Tech</span></h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                        </p>
                        </div>
                
                <div class="timeline-item">
                    <div class="tl-icon">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <p class="tl-duration">2009 - 2013</p>
                    <h5>Business Degree<span> - Sussex University</span></h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                    </p>
                </div>
                
              
                

                <div class="timeline-item">
                    <div class="tl-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <p class="tl-duration">2010 - present</p>
                    <h5>Web Developer<span> - Vircrosoft</span></h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                    </p>
                </div>
                
                <div class="timeline-item">
                    <div class="tl-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <p class="tl-duration">2016 - 2017</p>
                    <h5>C++ Programmer<span> - Slime Tech</span></h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                    </p>
                    </div>
                    <div class="timeline-item">
                        <div class="tl-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <p class="tl-duration">2008 - 2011</p>
                        <h5>Software Engineer<span> - Boogle, Inc.</span></h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                        </p>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="tl-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <p class="tl-duration">2009 - 2013</p>
                        <h5>Business Degree<span> - Sussex University</span></h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                        </p>
                    </div>
                    <div class="timeline-item">
                        <div class="tl-icon">
                            <i class="fas fa-briefcase"></i>
                        </div>
                        <p class="tl-duration">2016 - 2017</p>
                        <h5>C++ Programmer<span> - Slime Tech</span></h5>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                        </p>
                        </div>
                
                <div class="timeline-item">
                    <div class="tl-icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <p class="tl-duration">2009 - 2013</p>
                    <h5>Business Degree<span> - Sussex University</span></h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi vero fugit.
                    </p>
                </div>






            </div>
        </section>

        <!--image gallery-->
        <section class="container" id="portfolio">
            <div class="main-title">
                <h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
            </div>
            <p class="port-text">
                Here is some of my work that I've done in various programming languages.
            </p>
            

            <div class="gallery-container">
                <div class="gallery-item" data-index="1">
                    <img src="img/bandacoldplay.jpeg">
                </div>
                <div class="gallery-item" data-index="2">
                    <img src="img/Dutchplan.jpg">
                </div>
                <div class="gallery-item" data-index="3">
                    <img src="img/mascaraNY.jpg">
                </div>
                <div class="gallery-item" data-index="4">
                    <img src="img/planogeralPonteLima.jpg">
                    
                </div>
                <div class="gallery-item" data-index="5">
                   
                   <p><img src="img/deliveryadd.jpg">
                    <a href="https://www.behance.net/gallery/155636655/Empresa-de-Entregas-ao-Domicilio">Anúncio de publicidade entrega de encomendas ao domicilio</a></p>
                    </div>

                <div class="gallery-item" data-index="6">
                    <img src="img/mockupcoldplay.gif">
                </div>
            
              

                
               
            </div>

        </section>
          <!-- End of image gallery-->
        
        <section class="container contact" id="contact">
            <div class="contact-container">
                <div class="main-title">
                    <h2>Contact <span>Me</span><span class="bg-text">Contact</span></h2>
                </div>
                <div class="contact-content-con">
                    <div class="left-contact">
                        <h4>Contact me here</h4>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                            In, laborum numquam? Quam excepturi perspiciatis quas quasi.
                        </p>
                        <div class="contact-info">
                            <div class="contact-item">
                                <div class="icon">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>Location</span>
                                </div>
                                <p>
                                    : London, united Kingdom
                                </p>
                            </div>
                            <div class="contact-item">
                                <div class="icon">
                                    <i class="fas fa-envelope"></i>
                                    <span>Email</span>
                                </div>
                                <p>
                                    <span>: maclinzuniversal@gmail.com</span>
                                </p>
                            </div>
                            <div class="contact-item">
                                <div class="icon">
                                    <i class="fas fa-user-graduate"></i>
                                    <span>Education</span>
                                </div>
                                <p>
                                    <span>: Sussex University, East Sussex</span>
                                </p>
                            </div>
                            <div class="contact-item">
                                <div class="icon">
                                    <i class="fas fa-user-graduate"></i>
                                    <span>Mobile Number</span>
                                </div>
                                <p>
                                    <span>: 07522670617</span>
                                </p>
                            </div>
                            <div class="contact-item">
                                <div class="icon">
                                    <i class="fas fa-globe-africa"></i>
                                    <span>Languages</span>
                                </div>
                                <p>
                                    <span>: Afrikaans, English, Spanish</span>
                                </p>
                            </div>
                        </div>
                        <div class="contact-icons">
                            <div class="contact-icon">
                                <a href="www.facebook.com" target="_blank">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="#" target="_blank">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" target="_blank">
                                    <i class="fab fa-github"></i>
                                </a>
                                <a href="#" target="_blank">
                                    <i class="fab fa-youtube"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="right-contact">
                        <form action="" class="contact-form">
                            <div class="input-control i-c-2">
                                <input type="text" required placeholder="YOUR NAME">
                                <input type="email" required placeholder="YOUR EMAIL">
                            </div>
                            <div class="input-control">
                                <input type="text" required placeholder="ENTER SUBJECT">
                            </div>
                            <div class="input-control">
                                <textarea name="" id="" cols="15" rows="8" placeholder="Message Here..."></textarea>
                            </div>
                            <div class="submit-btn">
                                <a href="#" class="main-btn">
                                    <span class="btn-text">Download CV</span>
                                    <span class="btn-icon"><i class="fas fa-download"></i></span>
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

<!-- START: SHOUTCASTWIDGETS.COM FREE PLAYER --> <!-- RADIO STATION --> 
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE"><style>.hide { display: none !important; } button { margin: 0; padding: 0; border: 0; outline: 0; background: transparent; } #stickplayer { width: 100%; } .ap { background: #000; position: fixed; left: 0; bottom: 0; width: 100%; height: 50px; max-height: 100%; margin: auto; font-family: Arial, sans-serif; font-size: 14px; user-select: none; color: #333; background: rgba(255, 255, 255, 0.06); opacity: 0.9; border-top: 1px solid rgba(255, 255, 255, 0.19); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); z-index: 9999; -webkit-transition: all 30s ease-in-out; -moz-transition: all 30s ease-in-out; -o-transition: all 30s ease-in-out; transition: all 1s ease-in-out; }.ap-inner { max-width: 1440px; margin: 0 auto; } .ap-panel { display: flex; background: #000000; } .ap-item { display: flex; flex: 1; justify-content: center; align-items: center; } .ap--track { flex: 1 40%; padding: 0 20px; } .ap-info { width: 100%; position: relative; align-self: flex-start; padding: 5px 0 0; } .ap-title { position: relative; overflow: hidden; padding-right: 80px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: #a4c431; } .ap-title:hover { position: relative; overflow: hidden; padding-right: 80px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: #f50; font-weight: bold; } .ap-time { position: absolute; top: 5px; right: 0; color: #a4c431; } .ap-time:hover { position: absolute; top: 5px; right: 0; color: #f50; font-weight: bold; } .ap-progress-container { padding: 5px 0 10px; cursor: pointer; } .ap-progress { position: relative; height: 3px; border-radius: 5px; background: #a4c431; } .ap-preload-bar, .ap-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 5px 0 0 5px; background: rgba(0, 0, 0, 0.3); z-index: 999; } .ap-bar { background: #f50; z-index: 9999; } .ap-bar:after { position: absolute; top: 0; right: -5px; width: 12px; height: 12px; margin-top: -4px; content: ""; border-radius: 6px; background: #f50; opacity: 0; transition: opacity 0.3s ease; } .ap-progress-container:hover .ap-bar:after { opacity: 1; } .ap-controls { position: relative; z-index: 1000; display: block; height: 50px; cursor: pointer; transition: background 0.2s ease; text-align: center; color: EEEEEE; border: 0; outline: 0; background: none; } .ap-controls svg { fill: #a4c431; } .ap-controls:hover svg { fill: #f50; } .ap-controls:active { background: rgba(0, 0, 0, 3); } .ap--playback > .ap-controls, .ap--settings > .ap-controls { flex: 0 25%; } .ap--pause, .playing > .ap--play { display: none; } .playing > .ap--pause { display: inline; } .ap-volume-container { z-index: 9999; } .ap-volume { position: absolute; right: 0; bottom: 50px; overflow: hidden; width: 100%; height: 0; cursor: pointer; visibility: hidden; transition: height 0.9s cubic-bezier(0.17, 0.72, 0.26, 1.23); background: rgba(255, 255, 255, 0.02); opacity: 0.7; border: 1px solid rgba(255, 255, 255, 0.02); border-bottom: 0; z-index: 9999; } .ap-volume-btn { display: block; text-align: center; width: 100%; } .ap-volume-btn > .ap--volume-off, .muted > .ap--volume-on { display: none; } .muted > .ap--volume-off { display: inline; } .ap-volume-container:hover { background: #1e88e5; } .ap-volume-container:hover .ap-volume { height: 120px; visibility: visible; } .ap-volume-progress { display: block; width: 4px; height: 100px; margin: 10px auto; background: rgba(0, 0, 0, 0.2); position: relative; border-radius: 3px; } .ap-volume-bar { position: absolute; left: 0; right: 0; bottom: 0; background: #f50; height: 50%; border-radius: 3px; } .ap-active { background: rgba(0, 0, 0, 0.15); opacity: 1; } @keyframes blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } .playing > .ap--pause { animation: blink 1.5s linear infinite; } @media (max-width: 880px) { .ap-item > .ap-controls { flex: 1; } } @media (max-width: 550px) { .ap { min-width: 250px; } .ap, .ap-panel { height: auto; } .ap-panel { flex-wrap: wrap; } .ap--track { margin-bottom: 10px; padding: 0 20px; order: 1; flex: 1 1 100%; } .ap--playback, .ap--settings { flex: 1 1 50%; order: 2; } } ::-webkit-scrollbar { width: 0px; background: transparent; } ::-webkit-scrollbar-thumb { background: #f00; } @keyframes eq { 0% { height: 3px; } 50% { height: 20px; } 100% { height: 3px; } } .eq { display: flex; width: 20px; height: 20px; margin: 0 auto; justify-content: space-between; align-items: flex-end; } .eq-bar { width: 4px; background: rgb(255, 250, 250); } .eq-bar:nth-child(1) { animation: eq 0.8s ease-in-out infinite 0s; } .eq-bar:nth-child(2) { animation: eq 0.8s ease-in-out infinite 0.2s; } .eq-bar:nth-child(3) { animation: eq 0.8s ease-in-out infinite 0.4s; }#overflow { white-space: nowrap; max-width: 25em; overflow: hidden; }</style><div class="ap" id="ap"><div class="ap-inner"><div class="ap-panel"><div class="ap-item ap--playback"> <button style="display: none;" class="ap-controls ap-prev-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24"> <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button><button class="ap-controls ap-toggle-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="#a4c431" height="30" viewBox="0 0 24 24" width="30" class="ap--play"> <path d="M8 5v14l11-7z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="30" viewBox="0 0 24 24" width="30" class="ap--pause"> <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button> <button style="display: none;" class="ap-controls ap-next-btn"> <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="24" viewBox="0 0 24 24" width="24"> <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button></div><div class="ap-item ap--track"><div class="ap-info"><div id="overflow"><div id="Track"></div></div><div class="ap-title">Error</b></div><div class="ap-progress-container"><div class="ap-progress"><div class="ap-bar"></div><div class="ap-preload-bar"></div></div></div></div></div><div class="ap-item ap--settings"><div class="ap-controls ap-volume-container"> <button class="ap-volume-btn"> <svg fill="#ffffff" height="48" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="ap--volume-on"> <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" height="48" viewBox="0 0 24 24" width="24" class="ap--volume-off"> <path d="M7 9v6h4l5 5V4l-5 5H7z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button><div class="ap-volume"><div class="ap-volume-progress"><div class="ap-volume-bar"></div></div></div></div> <button style="display: none;" class="ap-controls ap-repeat-btn"> <svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" /> </svg> </button> <button style="display: none;" class="ap-controls ap-playlist-btn"> <svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z" /> </svg> </button></div></div></div></div><script>(function(window,undefined){"use strict";var AudioPlayer=(function(){var player=document.getElementById("ap"),playBtn,prevBtn,nextBtn,plBtn,repeatBtn,volumeBtn,progressBar,preloadBar,curTime,durTime,trackTitle,audio,index=0,playList,volumeBar,volumeLength,repeating=false,seeking=false,rightClick=false,apActive=false,pl,plLi,settings={volume:0.9,autoPlay:false,notification:false,playList:[]};function init(options){if(!("classList"in document.documentElement)){return false;} if(apActive||player===null){return;} settings=extend(settings,options);playBtn=player.querySelector(".ap-toggle-btn");prevBtn=player.querySelector(".ap-prev-btn");nextBtn=player.querySelector(".ap-next-btn");repeatBtn=player.querySelector(".ap-repeat-btn");volumeBtn=player.querySelector(".ap-volume-btn");plBtn=player.querySelector(".ap-playlist-btn");curTime=player.querySelector(".ap-time--current");durTime=player.querySelector(".ap-time--duration");trackTitle=player.querySelector(".ap-title");progressBar=player.querySelector(".ap-bar");preloadBar=player.querySelector(".ap-preload-bar");volumeBar=player.querySelector(".ap-volume-bar");playList=settings.playList;playBtn.addEventListener("click",playToggle,false);volumeBtn.addEventListener("click",volumeToggle,false);repeatBtn.addEventListener("click",repeatToggle,false);progressBar.parentNode.parentNode.addEventListener("mousedown",handlerBar,false);progressBar.parentNode.parentNode.addEventListener("mousemove",seek,false);document.documentElement.addEventListener("mouseup",seekingFalse,false);volumeBar.parentNode.parentNode.addEventListener("mousedown",handlerVol,false);volumeBar.parentNode.parentNode.addEventListener("mousemove",setVolume);document.documentElement.addEventListener("mouseup",seekingFalse,false);prevBtn.addEventListener("click",prev,false);nextBtn.addEventListener("click",next,false);apActive=true;renderPL();plBtn.addEventListener("click",plToggle,false);audio=new Audio();audio.volume=settings.volume;if(isEmptyList()){empty();return;} audio.src=playList[index].file;audio.preload="auto";trackTitle.innerHTML=playList[index].title;volumeBar.style.height=audio.volume*100+"%";volumeLength=volumeBar.css("height");audio.addEventListener("error",error,false);audio.addEventListener("timeupdate",update,false);audio.addEventListener("ended",doEnd,false);if(settings.autoPlay){audio.play();playBtn.classList.add("playing");plLi[index].classList.add("pl-current");}} function renderPL(){var html=[];var tpl='<li data-track="{count}">'+'<div class="pl-number">'+'<div class="pl-count">'+'<svg fill="#1E88E5000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">'+'<path d="M0 0h24v24H0z" fill="none"/>'+'<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>'+"</svg>"+"</div>"+'<div class="pl-playing">'+'<div class="eq">'+'<div class="eq-bar"></div>'+'<div class="eq-bar"></div>'+'<div class="eq-bar"></div>'+"</div>"+"</div>"+"</div>"+'<div class="pl-title"><b>{title}</b></div>'+'<button class="pl-remove">'+'<svg fill="#1E88E5000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">'+'<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>'+'<path d="M0 0h24v24H0z" fill="none"/>'+"</svg>"+"</button>"+"</li>";playList.forEach(function(item,i){html.push(tpl.replace("{count}",i).replace("{title}",item.title));});pl=create("div",{className:"pl-container hide",id:"pl",innerHTML:!isEmptyList()?'<ul class="pl-list">'+html.join("")+"</ul>":'<div class="pl-empty">PlayList is empty</div>'});player.parentNode.insertBefore(pl,player.nextSibling);plLi=pl.querySelectorAll("li");pl.addEventListener("click",listHandler,false);} function listHandler(evt){evt.preventDefault();if(evt.target.className==="pl-title"){var current=parseInt(evt.target.parentNode.getAttribute("data-track"),10);index=current;play();plActive();}else{var target=evt.target;while(target.className!==pl.className){if(target.className==="pl-remove"){var isDel=parseInt(target.parentNode.getAttribute("data-track"),10);playList.splice(isDel,1);target.parentNode.parentNode.removeChild(target.parentNode);plLi=pl.querySelectorAll("li");[].forEach.call(plLi,function(el,i){el.setAttribute("data-track",i);});if(!audio.paused){if(isDel===index){play();}}else{if(isEmptyList()){empty();}else{audio.src=playList[index].file;document.title=trackTitle.innerHTML=playList[index].title;progressBar.style.width=0;}} if(isDel<index){index--;} return;} target=target.parentNode;}}} function plActive(){if(audio.paused){plLi[index].classList.remove("pl-current");return;} var current=index;for(var i=0,len=plLi.length;len>i;i++){plLi[i].classList.remove("pl-current");} plLi[current].classList.add("pl-current");} function error(){!isEmptyList()&&next();} function play(){index=index>playList.length-1?0:index;if(index<0)index=playList.length-1;if(isEmptyList()){empty();return;} audio.src=playList[index].file;audio.preload="auto";document.title=trackTitle.innerHTML=playList[index].title;audio.play();notify(playList[index].title,{icon:playList[index].icon,body:"Now playing",tag:"music-player"});playBtn.classList.add("playing");plActive();} function prev(){index=index-1;play();} function next(){index=index+1;play();} function isEmptyList(){return playList.length===0;} function empty(){audio.pause();audio.src="";trackTitle.innerHTML="queue is empty";progressBar.style.width=0;preloadBar.style.width=0;playBtn.classList.remove("playing");pl.innerHTML='<div class="pl-empty">PlayList is empty</div>';} function playToggle(){if(isEmptyList()){return;} if(audio.paused){audio.play();notify(playList[index].title,{icon:playList[index].icon,body:"Now playing"});this.classList.add("playing");}else{audio.pause();this.classList.remove("playing");} plActive();} function volumeToggle(){if(audio.muted){if(parseInt(volumeLength,10)===0){volumeBar.style.height="100%";audio.volume=1;}else{volumeBar.style.height=volumeLength;} audio.muted=false;this.classList.remove("muted");}else{audio.muted=true;volumeBar.style.height=0;this.classList.add("muted");}} function repeatToggle(){var repeat=this.classList;if(repeat.contains("ap-active")){repeating=false;repeat.remove("ap-active");}else{repeating=true;repeat.add("ap-active");}} function plToggle(){this.classList.toggle("ap-active");pl.classList.toggle("hide");} function update(){if(audio.readyState===0)return;var barlength=Math.round(audio.currentTime*(100/audio.duration));progressBar.style.width=barlength+"%";var curMins=Math.floor(audio.currentTime/60),curSecs=Math.floor(audio.currentTime-curMins*60),mins=Math.floor(audio.duration/60),secs=Math.floor(audio.duration-mins*60);curSecs<10&&(curSecs="0"+curSecs);secs<10&&(secs="0"+secs);var buffered=audio.buffered;if(buffered.length){var loaded=Math.round((100*buffered.end(0))/audio.duration);preloadBar.style.width=loaded+"%";}} function doEnd(){if(index===playList.length-1){if(!repeating){audio.pause();plActive();playBtn.classList.remove("playing");return;}else{index=0;play();}}else{index=index===playList.length-1?0:index+1;play();}} function moveBar(evt,el,dir){var value;if(dir==="horizontal"){value=Math.round(((evt.clientX-el.offset().left)*100)/el.parentNode.offsetWidth);el.style.width=value+"%";return value;}else{var offset=el.offset().top+el.offsetHeight;value=Math.round(offset-evt.clientY);if(value>100)value=100;if(value<0)value=0;volumeBar.style.height=value+"%";return value;}} function handlerBar(evt){rightClick=evt.which===3?true:false;seeking=true;seek(evt);} function handlerVol(evt){rightClick=evt.which===3?true:false;seeking=true;setVolume(evt);} function seek(evt){if(seeking&&rightClick===false&&audio.readyState!==0){var value=moveBar(evt,progressBar,"horizontal");audio.currentTime=audio.duration*(value/100);}} function seekingFalse(){seeking=false;} function setVolume(evt){volumeLength=volumeBar.css("height");if(seeking&&rightClick===false){var value=moveBar(evt,volumeBar.parentNode,"vertical")/100;if(value<=0){audio.volume=0;volumeBtn.classList.add("muted");}else{if(audio.muted)audio.muted=false;audio.volume=value;volumeBtn.classList.remove("muted");}}} function notify(title,attr){if(!settings.notification){return;} if(window.Notification===undefined){return;} window.Notification.requestPermission(function(access){if(access==="granted"){var notice=new Notification(title.substr(0,110),attr);notice.onshow=function(){setTimeout(function(){notice.close();},5000);};}});} function destroy(){if(!apActive)return;playBtn.removeEventListener("click",playToggle,false);volumeBtn.removeEventListener("click",volumeToggle,false);repeatBtn.removeEventListener("click",repeatToggle,false);plBtn.removeEventListener("click",plToggle,false);progressBar.parentNode.parentNode.removeEventListener("mousedown",handlerBar,false);progressBar.parentNode.parentNode.removeEventListener("mousemove",seek,false);document.documentElement.removeEventListener("mouseup",seekingFalse,false);volumeBar.parentNode.parentNode.removeEventListener("mousedown",handlerVol,false);volumeBar.parentNode.parentNode.removeEventListener("mousemove",setVolume);document.documentElement.removeEventListener("mouseup",seekingFalse,false);prevBtn.removeEventListener("click",prev,false);nextBtn.removeEventListener("click",next,false);audio.removeEventListener("error",error,false);audio.removeEventListener("timeupdate",update,false);audio.removeEventListener("ended",doEnd,false);player.parentNode.removeChild(player);pl.removeEventListener("click",listHandler,false);pl.parentNode.removeChild(pl);audio.pause();apActive=false;} function extend(defaults,options){for(var name in options){if(defaults.hasOwnProperty(name)){defaults[name]=options[name];}} return defaults;} function create(el,attr){var element=document.createElement(el);if(attr){for(var name in attr){if(element[name]!==undefined){element[name]=attr[name];}}} return element;} Element.prototype.offset=function(){var el=this.getBoundingClientRect(),scrollLeft=window.pageXOffset||document.documentElement.scrollLeft,scrollTop=window.pageYOffset||document.documentElement.scrollTop;return{top:el.top+scrollTop,left:el.left+scrollLeft};};Element.prototype.css=function(attr){if(typeof attr==="string"){return getComputedStyle(this,"")[attr];}else if(typeof attr==="object"){for(var name in attr){if(this.style[name]!==undefined){this.style[name]=attr[name];}}}};return{init:init,destroy:destroy};})();window.AP=AudioPlayer;})(window);var iconImage="http://i.imgur.com/U3oa3Ap.png";AP.init({playList:[{icon:iconImage,title:"Totally radio",file:"https://23203.live.streamtheworld.com/T_RAD_HITS_S01_SC"}]});</script><script> function isElementOverflowing(element){var overflowX=element.offsetWidth<element.scrollWidth,overflowY=element.offsetHeight<element.scrollHeight;return(overflowX||overflowY);} function wrapContentsInMarquee(element){var marquee=document.createElement('marquee'),contents=element.innerText;marquee.innerText=contents;element.innerHTML='';element.appendChild(marquee);} var element=document.getElementById('overflow');if(isElementOverflowing(element)){wrapContentsInMarquee(element);}
</script><!-- END: SHOUTCASTWIDGETS.COM FREE PLAYER --> <!-- END OF RADIO STATION --> 



    </main>

    <div class="controls">
        <div class="control active-btn" data-id="home" >
            <i class="fas fa-home"></i>
        </div>
        <div class="control" data-id="about">
            <i class="fas fa-user"></i>
        </div>
        <div class="control" data-id="portfolio">
            <i class="fas fa-briefcase"></i>
        </div>
        
        <div class="control" data-id="contact">
            <i class="fas fa-envelope-open"></i>
        </div>
    </div>
    <div class="theme-btn">
        <i class="fas fa-adjust"></i>
    </div>

     <!-- Digital Clock JS -->
<script src="js/script.js"></script>

    <script src="app.js"></script>


    <script type="text/javascript">
        const galleryItem = document.getElementsByClassName("gallery-item");
        const lightBoxContainer = document.createElement("div");
        const lightBoxContent = document.createElement("div");
        const lightBoxImg = document.createElement("img");
        const lightBoxPrev = document.createElement("div");
        const lightBoxNext = document.createElement("div");
        
        lightBoxContainer.classList.add("lightbox");
        lightBoxContent.classList.add("lightbox-content");
        lightBoxPrev.classList.add("fa", "fa-angle-left", "lightbox-prev");
        lightBoxNext.classList.add("fa", "fa-angle-right", "lightbox-next");
        
        lightBoxContainer.appendChild(lightBoxContent);
        lightBoxContent.appendChild(lightBoxImg);
        lightBoxContent.appendChild(lightBoxPrev);
        lightBoxContent.appendChild(lightBoxNext);
        document.body.appendChild(lightBoxContainer);
        
        let index = 1;
        
        function showLightBox(n) {
            if (n > galleryItem.length) {
                index = 1;
            } else if (n < 1) {
                index = galleryItem.length;
            }
            let imageLocation = galleryItem[index-1].children[0].getAttribute("src");
            lightBoxImg.setAttribute("src", imageLocation);
        }
        
        function currentImage() {
            lightBoxContainer.style.display = "block";
        
            let imageIndex = parseInt(this.getAttribute("data-index"));
            showLightBox(index = imageIndex);
        }
        for (let i = 0; i < galleryItem.length; i++) {
            galleryItem[i].addEventListener("click", currentImage);
        }
        
        function slideImage(n) {
            showLightBox(index += n);
        }
        function prevImage() {
            slideImage(-1);
        }
        function nextImage() {
            slideImage(1);
        }
        lightBoxPrev.addEventListener("click", prevImage);
        lightBoxNext.addEventListener("click", nextImage);
        
        function closeLightBox() {
            if (this === event.target) {
                lightBoxContainer.style.display = "none";
            }
        }
        lightBoxContainer.addEventListener("click", closeLightBox);
        </script>
</body>
</html>
 
styles.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

:root {
  --color-primary: #191d2b;
  --color-secondary: #27AE60;
  --color-white: #FFFFFF;
  --color-black: #000;
  --color-grey0: #f8f8f8;
  --color-grey-1: #dbe1e8;
  --color-grey-2: #b2becd;
  --color-grey-3: #6c7983;
  --color-grey-4: #454e56;
  --color-grey-5: #2a2e35;
  --color-grey-6: #12181b;
  --br-sm-2: 14px;
  --box-shadow-1: 0 3px 15px rgba(0,0,0,.3);
}

.light-mode {
  --color-primary: #FFFFFF;
  --color-secondary: #F56692;
  --color-white: #454e56;
  --color-black: #000;
  --color-grey0: #f8f8f8;
  --color-grey-1: #6c7983;
  --color-grey-2: #6c7983;
  --color-grey-3: #6c7983;
  --color-grey-4: #454e56;
  --color-grey-5: #f8f8f8;
  --color-grey-6: #12181b;
}

body {
  background-color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: var(--color-white);
  transition: all 0.4s ease-in-out;
}

a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}

header {
  min-height: 100vh;
  color: var(--color-white);
  overflow: hidden;
  padding: 0 !important;
}

section {
  min-height: 100vh;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 3rem 18rem;
}

.container {
  display: none;
  transform: translateY(-100%) scale(0);
  transition: all 0.4s ease-in-out;
  background-color: var(--color-primary);
}

.active {
  display: block;
  animation: appear 1s ease-in-out;
  transform: translateY(0) scaleY(1);
}
@keyframes appear {
  0% {
    transform: translateY(-100%) scaleY(0);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

.controls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}
.controls .control {
  padding: 1rem;
  cursor: pointer;
  background-color: var(--color-grey-4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.7rem 0;
  box-shadow: var(--box-shadow-1);
}
.controls .control i {
  font-size: 1.2rem;
  color: var(--color-grey-2);
  pointer-events: none;
}
.controls .active-btn {
  background-color: var(--color-secondary);
  transition: all 0.4s ease-in-out;
}
.controls .active-btn i {
  color: var(--color-white);
}

.theme-btn {
  top: 15%;
  right: 3%;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: var(--color-grey-4);
  cursor: pointer;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease-in-out;
}
.theme-btn:active {
  transform: translateY(-3px);
}
.theme-btn i {
  font-size: 1.4rem;
  color: var(--color-grey-2);
  pointer-events: none;
}

/*Header-content*/
.header-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  min-height: 100vh;
}
.header-content .left-header {
  display: flex;
  align-items: center;
  position: relative;
}
.header-content .left-header .h-shape {
  transition: all 0.4s ease-in-out;
  width: 65%;
  height: 100%;
  background-color: var(--color-secondary);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);
}
.header-content .left-header .image {
  border-radius: var(--br-sm-2);
  height: 90%;
  width: 68%;
  margin-left: 4rem;
  background-color: var(--color-black);
  transition: all 0.4s ease-in-out;
}
.header-content .left-header .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease-in-out;
  filter: grayscale(100%);
}
.header-content .left-header .image img:hover {
  filter: grayscale(0);
}
.header-content .right-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 18rem;
}
.header-content .right-header .name {
  font-size: 3rem;
}
.header-content .right-header .name span {
  color: var(--color-secondary);
}
.header-content .right-header p {
  margin: 1.5rem 0;
  line-height: 2rem;
}

/*About*/
.about-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}
.about-container .right-about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}
.about-container .right-about .about-item {
  border: 1px solid var(--color-grey-5);
  border-radius: 5px;
  transition: all 0.4s ease-in-out;
  box-shadow: 1px 2px 15px rgba(0, 0, 0, 0.1);
}
.about-container .right-about .about-item:hover {
  cursor: default;
  transform: translateY(-5px);
  border: 1px solid var(--color-secondary);
  box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.32);
}
.about-container .right-about .about-item .abt-text {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.about-container .right-about .about-item .abt-text .large-text {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-secondary);
}
.about-container .right-about .about-item .abt-text .small-text {
  padding-left: 3rem;
  position: relative;
  text-transform: uppercase;
  font-size: 1.2rem;
  color: var(--color-grey-1);
  letter-spacing: 2px;
}
.about-container .right-about .about-item .abt-text .small-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 2rem;
  height: 2px;
  background-color: var(--color-grey-5);
}
.about-container .left-about {
  padding-right: 5rem;
}
.about-container .left-about p {
  line-height: 2rem;
  padding: 1rem;
  color: var(--color-grey-1);
}
.about-container .left-about h4 {
  font-size: 2rem;
  text-transform: uppercase;
}

.about-stats {
  padding-bottom: 4rem;
}
.about-stats .progress-bars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}
.about-stats .progress-bars .progress-bar {
  display: flex;
  flex-direction: column;
}
.about-stats .progress-bars .progress-bar .prog-title {
  text-transform: uppercase;
  font-weight: 500;
}
.about-stats .progress-bars .progress-bar .progress-con {
  display: flex;
  align-items: center;
}
.about-stats .progress-bars .progress-bar .progress-con .prog-text {
  color: var(--color-grey-2);
}
.about-stats .progress-bars .progress-bar .progress-con .progress {
  width: 100%;
  height: 0.45rem;
  background-color: var(--color-grey-4);
  margin-left: 1rem;
  position: relative;
}
.about-stats .progress-bars .progress-bar .progress-con .progress span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: var(--color-secondary);
  transition: all 0.4s ease-in-out;
  width: 60%;
}
.about-stats .progress-bars .progress-bar .progress-con .progress .html {
  width: 80%;
}
.about-stats .progress-bars .progress-bar .progress-con .progress .css {
  width: 95%;
}
.about-stats .progress-bars .progress-bar .progress-con .progress .js {
  width: 75%;
}
.about-stats .progress-bars .progress-bar .progress-con .progress .react {
  width: 60%;
}
.about-stats .progress-bars .progress-bar .progress-con .progress .node {
  width: 87%;
}
.about-stats .progress-bars .progress-bar .progress-con .progress .python {
  width: 70%;
}

.stat-title {
  text-transform: uppercase;
  font-size: 1.4rem;
  text-align: center;
  padding: 3.5rem 0;
  position: relative;
}
.stat-title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 40%;
  height: 1px;
  background-color: var(--color-grey-5);
  transform: translateX(-50%);
}

/*Timeline*/
.timeline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  padding-bottom: 3rem;
}
.timeline .timeline-item {
  position: relative;
  padding-left: 3rem;
  border-left: 1px solid var(--color-grey-5);
}
.timeline .timeline-item .tl-icon {
  position: absolute;
  left: -27px;
  top: 0;
  background-color: var(--color-secondary);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline .timeline-item .tl-icon i {
  font-size: 1.3rem;
}
.timeline .timeline-item .tl-duration {
  padding: 0.2rem 0.6rem;
  background-color: var(--color-grey-5);
  border-radius: 15px;
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 500;
}
.timeline .timeline-item h5 {
  padding: 1rem 0;
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: 600;
}
.timeline .timeline-item h5 span {
  color: var(--color-grey-2);
  font-weight: 500;
  font-size: 1.2rem;
}
.timeline .timeline-item p {
  color: var(--color-grey-2);
}

.port-text {
  padding: 2rem 0;
  text-align: center;
}

/*image gallery*/


.gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
  width: 115%;
  margin: 12px;
  margin-top: 2px;
  margin-left: 2px;
  margin-right: 2px;
  padding: 6px;
  box-sizing: border-box;
}
.gallery-item {
  flex-basis: 32.7%;
  margin-bottom: 6px;
  opacity: .85;
  cursor: pointer;
}
.gallery-item:hover {
  opacity: 1;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
}
.gallery-content {
  font-size: .8em;
}

.gallery-item p {
  color: #000;
  background-color: blue;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 1px;
  padding-left: 1px;
}

.lightbox {
  position: fixed;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  overflow: auto;
  top: 0;
  left: 0;
}
.lightbox-content {
  position: relative;
  width: 65%;
  height: 58%;

  margin: 5% auto;
  margin-top: 100px;
}
.lightbox-content img {
  border-radius: 3px;
  border: 6px solid white;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 9px;
  top: 45%;
  cursor: pointer;
}
.lightbox-prev {
  left: 0;
}
.lightbox-next {
  right: 0;
}
.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: .8;
}

@media (max-width: 767px) {
  .gallery-container {
      width: 100%;
  }
  .gallery-item {
      flex-basis: 49.80%;
      margin-bottom: 3px;
  }
  .lightbox-content {
      width: 80%;
      height: 60%;
      margin: 15% auto;
  }
}
@media (max-width: 480px) {
  .gallery-item {
      flex-basis: 100%;
      margin-bottom: 1px;
  }
  .lightbox-content {
      width: 90%;
      margin: 20% auto;
  }
}


/* end of image gallery*/


.contact-content-con {
  display: flex;
  padding-top: 3.5rem;
}
.contact-content-con .left-contact {
  flex: 2;
}
.contact-content-con .left-contact h4 {
  margin-top: 1rem;
  font-size: 2rem;
  text-transform: uppercase;
}
.contact-content-con .left-contact p {
  margin: 1rem 0;
  line-height: 2rem;
}
.contact-content-con .left-contact .contact-info .contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contact-content-con .left-contact .contact-info .contact-item p {
  margin: 0.3rem 0 !important;
  padding: 0 !important;
}
.contact-content-con .left-contact .contact-info .contact-item .icon {
  display: grid;
  grid-template-columns: 40px 1fr;
}
.contact-content-con .left-contact .contact-info .contact-item .icon i {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}
.contact-content-con .left-contact .contact-icon {
  display: flex;
  margin-top: 2rem;
}
.contact-content-con .left-contact .contact-icon a {
  display: flex;
  align-items: center;
  color: var(--color-white);
  background-color: var(--color-grey-5);
  cursor: pointer;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 0.4rem;
  transition: all 0.4s ease-in-out;
}
.contact-content-con .left-contact .contact-icon a:hover {
  background-color: var(--color-secondary);
}
.contact-content-con .left-contact .contact-icon a:hover i {
  color: var(--color-primary);
}
.contact-content-con .left-contact .contact-icon a i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.contact-content-con .right-contact {
  flex: 3;
  margin-left: 3rem;
}
.contact-content-con .right-contact .input-control {
  margin: 1.5rem 0;
}
.contact-content-con .right-contact .input-control input, .contact-content-con .right-contact .input-control textarea {
  border-radius: 30px;
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  padding: 0.8rem 1.1rem;
  outline: none;
  border: none;
  background-color: var(--color-grey-5);
  width: 100%;
  color: var(--color-white);
  resize: none;
}
.contact-content-con .right-contact .i-c-2 {
  display: flex;
}
.contact-content-con .right-contact .i-c-2 :last-child {
  margin-left: 1.5rem;
}
.contact-content-con .right-contact .submit-btn {
  display: flex;
  justify-content: flex-start;
}

/*Independed components*/
.btn-con {
  display: flex;
  align-self: flex-start;
}

.main-btn {
  border-radius: 30px;
  color: inherit;
  font-weight: 600;
  position: relative;
  border: 1px solid var(--color-secondary);
  display: flex;
  align-self: flex-start;
  align-items: center;
  overflow: hidden;
}
.main-btn .btn-text {
  padding: 0 2rem;
}
.main-btn .btn-icon {
  background-color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 1rem;
}
.main-btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  transition: all 0.4s ease-out;
  z-index: -1;
}
.main-btn:hover {
  transition: all 0.4s ease-out;
}
.main-btn:hover::before {
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
  transform: translateX(0);
  transition: all 0.4s ease-out;
}

.main-title {
  text-align: center;
}
.main-title h2 {
  position: relative;
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 700;
}
.main-title h2 span {
  color: var(--color-secondary);
}
.main-title h2 .bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--color-grey-5);
  transition: all 0.4s ease-in-out;
  z-index: -1;
  transform: translate(-50%, -50%);
  font-weight: 800;
  font-size: 6.3rem;
}

.about-container .left-about p {
  padding-left: 0;
}

@media screen and (max-width: 600px) {
  header {
    padding: 0 !important;
  }

  .theme-btn {
    width: 50px;
    height: 50px;
  }

  .header-content {
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 6rem;
  }

  .left-header .h-shape {
    display: none;
  }

  .right-header {
    grid-row: 1;
    padding-right: 0rem !important;
    width: 90%;
    margin: 0 auto;
  }
  .right-header .name {
    font-size: 2.5rem !important;
    text-align: center;
    padding-top: 3rem;
  }

  .header-content .left-header .image {
    margin: 0 auto;
    width: 90%;
  }

  .controls {
    top: auto;
    bottom: 0;
    flex-direction: row;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background-color: var(--color-grey-5);
  }
  .controls .control {
    margin: 1rem 0.3rem;
  }

  .about-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .about-container .right-about {
    grid-template-columns: repeat(1, 1fr);
    padding-top: 2.5rem;
  }
  .about-container .left-about {
    padding-right: 0;
  }
  .about-container .left-about p {
    padding-left: 0;
  }

  .timeline {
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 6rem;
  }

  .container {
    padding: 2rem 2.5rem !important;
  }

  .about-stats .progress-bars {
    grid-template-columns: repeat(1, 1fr);
  }

  

  .contact-content-con {
    flex-direction: column;
  }
  .contact-content-con .right-contact {
    margin-left: 0;
    margin-top: 2.5rem;
  }

  .contact-content-con .right-contact .i-c-2 {
    flex-direction: column;
  }

  .contact-content-con .right-contact .i-c-2 :last-child {
    margin-left: 0;
    margin-top: 1.5rem;
  }

  .contact-content-con .right-contact {
    margin-bottom: 6rem;
  }

  .contact-item {
    flex-direction: column;
    margin: 1rem 0;
  }
  .contact-item p {
    font-size: 15px;
    color: var(--color-grey-2);
  }
  .contact-item span {
    font-size: 15px;
  }
  .contact-item .icon {
    grid-template-columns: 25px 1fr;
  }

  .main-title h2 {
    font-size: 2rem;
  }
  .main-title h2 span {
    font-size: 2.3rem;
  }
  .main-title h2 .bg-text {
    font-size: 2.3rem;
  }
}
@media screen and (max-width: 1432px) {
  .container {
    padding: 7rem 11rem;
  }

  .contact-content-con {
    flex-direction: column;
  }
  .contact-content-con .right-contact {
    margin-left: 0;
    margin-top: 2.5rem;
  }

  .contact-content-con .right-contact .i-c-2 {
    flex-direction: column;
  }

  .contact-content-con .right-contact .i-c-2 :last-child {
    margin-left: 0;
    margin-top: 1.5rem;
  }

  .contact-content-con .right-contact {
    margin-bottom: 6rem;
  }

  .main-title h2 .bg-text {
    font-size: 5.5rem;
  }
}
@media screen and (max-width: 1250px) {
 
  .header-content .right-header {
    padding-right: 9rem;
  }
}

@media screen and (max-width: 1070px) {
  .about-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .about-container .right-about {
    padding-top: 2.5rem;
  }

  .main-title h2 {
    font-size: 4rem;
  }
  .main-title h2 span {
    font-size: 4rem;
  }
  .main-title h2 .bg-text {
    font-size: 4.5rem;
  }
}
@media screen and (max-width: 970px) {
  .container {
    padding: 7rem 6rem;
  }

  .about-container .left-about {
    padding-right: 0rem;
  }

  .header-content {
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 6rem;
  }

  .left-header .h-shape {
    display: none;
  }
  .left-header .image {
    width: 90% !important;
    margin: 0 auto !important;
  }

  .right-header {
    grid-row: 1;
    padding-right: 0rem !important;
    width: 90%;
    margin: 0 auto;
  }
  .right-header .name {
    font-size: 2.5rem !important;
    text-align: center;
    padding-top: 3rem;
  }
}
@media screen and (max-width: 700px) {
  .container {
    padding: 7rem 3rem;
  }

  .about-stats .progress-bars {
    grid-template-columns: repeat(1, 1fr);
  }

  .about-container .right-about {
    grid-template-columns: repeat(1, 1fr);
  }

  .timeline {
    grid-template-columns: repeat(1, 1fr);
  }

  .main-title h2 {
    font-size: 3rem;
  }
  .main-title h2 span {
    font-size: 3rem;
  }
  .main-title h2 .bg-text {
    font-size: 4rem;
  }
}

/*# sourceMappingURL=styles.css.map */


/*datetime*/
.datetime {
  font-size: 16px;
  padding: 24px;
  color: #ffffff;
  background: var(--color-primary)
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border-right: 10px #009578 solid;
  width: 400px;
  font-weight: 500;
  font-family:"Inter", sans-serif;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-right: 12px;
  margin-left: 12px;  
}

.time {
  font-size: 3em;
  color: #00ffcc;
}

.date {
  margin-top: 12px;
  font-size: 1.75em;
  color: var(--color-secondary);
}


/* end of datetime*/

app.js

(function () {
    [...document.querySelectorAll(".control")].forEach(button => {
        button.addEventListener("click", function() {
            document.querySelector(".active-btn").classList.remove("active-btn");
            this.classList.add("active-btn");
            document.querySelector(".active").classList.remove("active");
            document.getElementById(button.dataset.id).classList.add("active");
        })
    });
    document.querySelector(".theme-btn").addEventListener("click", () => {
        document.body.classList.toggle("light-mode");
    })
})();


/*Datetime*/
const timeElement = document.querySelector(".time");
const dateElement = document.querySelector(".date");

/**
 * @param {Date} date
 */
function formatTime(date) {
  const hours12 = date.getHours() % 12 || 12;
  const minutes = date.getMinutes();
  const isAm = date.getHours() < 12;

  return `${hours12.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")} ${isAm ? "AM" : "PM"}`;
}

/**
 * @param {Date} date
 */
function formatDate(date) {
  const DAYS = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  const MONTHS = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];

  return `${DAYS[date.getDay()]}, ${
    MONTHS[date.getMonth()]
  } ${date.getDate()} ${date.getFullYear()}`;
}

setInterval(() => {
  const now = new Date();

  timeElement.textContent = formatTime(now);
  dateElement.textContent = formatDate(now);
}, 200);


/* End of Datetime*/

I also send the source code of Codepen.:
https://codepen.io/Quencyjones79/pen/vYrxZGj thank you for your help with code

 

image gallery help.jpg

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...