Search the Community
Showing results for tags 'gallery'.
Found 18 results
-
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
-
Hello, I was hoping for some help with the slideshow gallery at this link: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp I was trying to add a slideshow to a website I am creating. However, when I add the exact same code into my own, the slideshow does not show up at load time. I wasn't sure why this might be? I made it a separate file and it loaded perfectly but when I added it to my code it did not. I assume there is an issue with something else I have already written for a different part of the website but I was not sure what would be causing the problem. The slideshow works if I click on one of the thumbnails. But I need it to show up at load time.
-
I was following the filtered photo gallery tutorial below: https://www.w3schools.com/howto/howto_js_portfolio_filter.asp I have an issue with the photos bunching up on the right side & not shifting to a new column. This is the HTML in the link below: https://www.w3schools.com/code/tryit.asp?filename=FWU52Y6W22GU What can I add to make sure the formatting is right?
-
Hi! So, I am having issues with my portfolio gallery... I can get the modal to work, finally, thanks to you guys. I was wondering if you could help with another issue. The gallery has the columns uneven and it is driving me batty. I can get them to be the same size if I adjust the size of the image, but that makes it look tacky in another way, I want the column to extend with blank space to make everything the same height. Is this possible? If so, how? http://technicolor-dreams.net/fan-001.html In the above link you can see what I am talking about =( Also attaching relevant pages of coding. Thanks! -Sarah css.css fan-001.html layout.html menu.html
-
im trying to use the code provided in the w3school's responsive image gallery (https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive) and the basic code works but when i substitute any of the pictures for a portrait rather than a landscape it rotates the portrait image 90 degrees so that it ends up landscape... i am using the exact same code with the exceptions of the images im trying to use
-
The page in question is Here For the life of me, I cannot get rid of the bottom overhang. Any suggestions? I is it possible at all? <!-- THUMBNAIL --> <style> div.gallery { margin: 4px; float: left; width: 180px; } div.gallery:hover { box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, .2), 0 0px 0px 0 rgba(0, 0, 0, 0.2); } div.gallery img { width: 100%; height: auto; } </style>
-
I have gallery that generates dynamically from CMS (ModX). There is a 'title' property for each picture. And there is also a lightbox plugin (Magnific Popup) for the gallery that is written in JS which works normally, but I cannot display those titles as captions for each popup image. ('titlesrc' property of the plugin does not take captions from titles of images) Here's what I've added to the plugin file, but it works only after an image is increased (just once), but does not work when I click on the arrow buttons to slide through the images: document.onclick = myClickHandler; function myClickHandler (e) { document.getElementsByClassName("mfp-title")[0].innerHTML = e.target.parentElement.getAttribute('title'); } So I need either to add an event listener for arrow buttons inside the lightbox to change the particular title each time a picture is changed or initially to make the 'titleSrc' property work normally so to display a caption from the 'title' of an image. Would be very glad if someone could help me with the task!
-
I am trying to center my images with a background object. http://www.appleblossomentertainment.com What is it I need to do? #tooplate_middle { clear: both; width: 880px; height: 240px; padding: 50px; overflow: hidden; background: url(../images/middle.png);}#mid_title { font-size: 30px; line-height: 38px; font-weight: 400; color: #fff; margin-bottom: 20px; }@import url(http://fonts.googleapis.com/css?family=Varela+Round);html,body { background: #333 url("http://codepen.io/images/classy_fabric.png");}.slides { padding: 0; width: 609px; height: 220px; display: block; margin: 0 auto; position: relative;}.slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }.slides input { display: none;}.slide-container { display: block;}.slide { top: 0; opacity: 0; width: 609px; height: 220px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out;}.slide img { width: 100%; height: 100%;}.nav label { width: 200px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5;}.nav label:hover { opacity: 1;}.nav .next { right: 0;}input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block;}.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);}#mid_left { float:left; width:400px; }#mid_slider { position:relative; float: right; width: 440px; height: 220px; }#tooplate_middle img { float: right; margin-left: 60px; }#mid_left p { margin-bottom: 30px; color: #fff; } The image slider I wanted was more like the one at http://www.eaglegunusa.com/, but I couldn't find code on the net for it.
-
Hi, can somebody help me with the following task? I am trying to make a gallery with small "preview" pictures, which are in form of background-images. After the click on one of these small pictures, i want to display a "window" (<div> actually) with full-sized picture. Everything works fine. But afterthat, i want to insert "<" and ">" symbols for switching on previous/next picture to my <div> "window". I tried different ways, but without success. I have no idea how to get index of active "smallImages", tj. img, whose url is now src of "largeImg". (btw. I have to convert "smallImages" Node List to array probably and then use IndexOf and nextElementSibling, but i am not sure how to do it) Code example: https://jsfiddle.net/t3yLjsoe/2/ (in reality, i have cca 20 different galleries (with differenr url path), 40 pictures in each of them. Thanks a lot and sorry for my poor English. HTML: <div id="spaceForLargeImg"> <!-- space for large pictures --> <span id="previousImg"><</span> <img id="largeImg" src="" /> <span id="nextImg">></span></div><div class="pictures"> <div class="thumb" style="background-image: url('images/mohelno/img1.jpg');" title=""></div> <div class="thumb" style="background-image: url('images/mohelno/img2.jpg');" title=""></div> <div class="thumb" style="background-image: url('images/mohelno/img3.jpg');" title=""></div></div> JS: function imgChange(){ var smallImages = document.getElementsByClassName("thumb"); var spaceForLargeImg = document.getElementById("spaceForLargeImg"); var largeImg = document.getElementById("largeImg"); function displayImg(e){ var activeImg = e.target; var url = activeImg.style.backgroundImage; var urlNew = url.slice(4, -1).replace(/"/g, ""); largeImg.src = urlNew; spaceForLargeImg.style.display = "block"; } for (i=0;i<smallImages.length;i++){ smallImages[i].addEventListener("click", displayImg); }}imgChange(); CSS: #spaceForLargeImg{ display: none;}.pictures{ overflow: scroll; overflow-y: hidden; white-space:nowrap;}
-
Hi! I modified the wordpress slideshow to make it much nicer looking and added text below, however, I am having a horrible time with the responsive aspect of it...the location of the control buttons (to move the show forward and backwards), as well as the simple text block below the slides move an enormous amount depending on the screen size! Is there anything I can do to make the location of these elements dependent on each other so that they re-locate accordingly? Otherwise, no one is going to be able to view the slides! The page I am talking about can be found here: http://annascherman.com/made-in-birmingham/
-
Hi, The website I am currently working on is this: annascherman.com I have set up the image gallery to be an un-ordered list so that I could achieve the irregular grid. I would love for the images to have a slight dark tint on top of them which goes away when you hover over an image (see example here: http://www.wallpaper.com/design/wallpaper-power-200) but for some reason, whenever I add a hover pseudo-element, I get a black background behind the image (I know this because it is also appearing to the right of the image, which I assume has to do with how I set things up as an un-ordered list - it is reading this space as part of the background). What am I doing wrong?!
-
Guys, good morning. I need a huge favor, http://ikoeh.com/arkpad/decoracao/tenha-orquideas-de-inverno-no-jardim-veja-12-especies/ this link has a photo gallery, and at the top, the small images, and wanted to make a horizontal scrolling thumbnails, the larger picture, when the person clicks and view the 8th picture, in miniature, no wheel well. Can anyone help me? Actually, this gallery would have to look like or exactly like this: delas.ig.com.br/casa/decoracao/2013-07-01/ideias-para-decorar-o-quarto-do-casal.html Please, someone help me.
-
I'm using a ZooEffect Gallery, which is great-except for two things; A) The images do not read links-despite them being a gallery option. You can't seem to change the font within the gallery-I tried being adjusting the CSS-to no avail, I put it back and then after a few days, ZooEffect got back to me with a solution, Which also didn't work. Most people seem to be able to pinpoint these issues using Safari Developer or FireBug. Can anybody pinpoint for me or at least tell me how I would do this? ThanksLauren
-
Hi all, My first post on the forum. I've learn a fair few bit from W3 website that has helped me with my blog site but I'm struggling with a couple of things that the users here might be able to help me out with. First of all, on my home page, I cannot seem to get a space between the text and image in the article list. Any ideas? 2. Also, on an article page, how can I set the padding around a gallery? I seem to get really large amounts of space below the gallery which I can't seem to remove. Any suggestions or tips would be greatly appreciated. Thanks, Lexi
-
hy everyonei have this problem, i have this gallery and i include this last one in one IFRAME when i click on thumbnails inside the IFRAME the image is not opening big because of iframe.if i clcik on thumbnails (like in the example in the attach file) the image is opening big. ATACH FILE:http://www.mediafire.com/?6g3o9q6w0bbnozy Thanks and sorry for my english
-
In my website I have Fancyboxes that pop out with an HTML website embedded in them. Those work perfectly fine. What I want to do is in one of the boxes is to scroll over in the fancybox (like in an image gallery) to an additional amount of info. The html contact page will open in a fancybox with one business location and then the viewer will be able to click an arrow to the right to shift to the next set of location information (still in the SAME fancybox). Is this possible? What is the fancybox/javascript code to allow a manually scrolling gallery to be possible? This is my current javascript coding: <script type="text/javascript"> $(document).ready(function(){$(".contact").fancybox({'width' : '50%','height' : '50%','autoScale' : false,'transitionIn' : 'fade','transitionOut' : 'fade','overlayOpacity' : 0,'speedIn' : 2000,'speedOut' : 1000,'type' : 'iframe','cyclic' : true}); }); </script> .contact is the class that leads to contact.html page. Any help would be fantastic. Thanks!
-
Dear forum, i copied a gallery and adjusted it.the problem is that i can't adjust the image size.right now the image size is like the files original size 1024x768px or 768x1024px. i changed the width to 600px and as you can see it just cuts of some part of the image.what could be the solution?http://quop.eu/quop/...ublic/quop.html here is the HTML code: <html><body><link rel="stylesheet" type="text/css" href="http://quop.eu/quop/wp-content/public/quop.css"><script type="text/javascript"></script><table align="left" style="border-spacing: 0px;width:100%;"><tbody><tr><td><table class="kl_body"><tbody><td class="kl_m"><div class="kl_box"></div><div class="kl_vorschau kl_height_1"> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg);background-repeat:no-repeat;"></div></a><img src="http://quop.eu/quop/wp-content/public/quop_logo.png"> </td></tr></tbody></table></body></html> here is the CSS code: @charset "UTF-8";* {margin:0px; padding:0px; font-family:'Arial'; text-align:left; border-collapse: collapse;}a {text-decoration:none; border:none;}img {border:none;}.kl_info {vertical-align:top;}.kl_m {width:1px; vertical-align:top;}.kl_vorschau {padding:3px;}.kl_vorschau img {border:1px solid black; width:700px; height:700px;}.kl_vorschau a img {width:100px; height:100px;}.kl_vorschau a .kl_foto {display:none; position:absolute; left:3px; width:600px; height:1024px; border:0px solid black; margin:0px; padding:0px;}.kl_vorschau a:hover .kl_foto {display:block;} sincerely,raitis
-
I have a table layout for my picture gallery live example : http://test.repsolhondanc24.co.uk/ When you minimise it or have it on a smaller screen resolution the table does not reduce in size like the other page content section does. Where am I going wrong. I want the table to be all the same size for width and heigh per square alternatively is there a better picture gallery I can use with out using a table (I'm keeping the light-box feature)
