Jump to content

Quencyjones79

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

Quencyjones79's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Quencyjones79
    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
  2. Quencyjones79
    Hi everyone, I'm making a personal website to promote my multimedia works. I had a question that is in the image, so I really appreciate your help. So I also send my source code and I really appreciate your help with source code to help you with this question, please. index.html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>complete responsive personal portfolio website design tutorial</title> <!-- font awesome cdn link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- custom css file link --> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> </head> <body> <!--This is the weather and datetime bar--> <!--How to put that as the weather image? (see the image weather image)?--> <!--How to fix the space between the twoo edges of the weather and datetime bar (see the image layout)--> <section class="header" id="header" style="padding:0; display:flex; min-height: 0;"> <div class="datetime" > <p id="date" style="margin-top:40px;">Sábado, 11 de setembro de 2021</p> <p id="time" style="margin-top:40px;">10:08:58</p> </div> <div class="weather"><p><a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" data-label_1="VIANA DO CASTELO" data-label_2="" data-icons="Climacons Animated" data-days="5" data-theme="sky" >VIANA DO CASTELO</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></p> </div> </section> <!-- header section starts --> <header> <div id="menu" class="fas fa-bars"></div> <nav class="navbar"> <a href="#home">home</a> <a href="#about">about</a> <a href="#services">services</a> <a href="#portfolio">portfolio</a> <a href="#blog">blog</a> <a href="#contact">contact</a> </nav> <div id="theme-toggler" class="fas fa-moon"></div> </header> <!-- header section ends --> <!-- home section starts --> <section class="home" id="home"> <div class="image"> <img src="images/foto ze.jpg" alt=""> </div> <div class="content"> <h1>Chamo-me José Moreira sou <span class="txt-rotate" data-period="2000" data-rotate='[ "Design Gráfico.", "Fotográfo.", "Web developer.",]'></span> </h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Quas, error?</p> <a href="#about" class="btn">about me</a> </div> </section> <!-- home section ends --> <section class="about" id="about"> <h1 class="heading"> about <span>me</span> </h1> <div class="row"> <div class="box"> <h3 class="title">coding skills</h3> <div class="progress"> <h3> html <span>95%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> css <span>80%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> js <span>65%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> sass <span>75%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">professional skills</h3> <div class="progress"> <h3> web design <span>98%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> web development <span>67%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> graphic design <span>75%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> seo marketing <span>60%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">experience</h3> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> <div class="box"> <h3 class="title">education</h3> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> </div> <div class="download"> <a href="#" class="btn"> download CV </a> </div> </section> <!-- service section starts --> <section class="services" id="services"> <h1 class="heading"> <span>my</span> services </h1> <div class="box-container"> <div class="box"> <span class="number">1</span> <img src="images/s1.png" alt=""> <h3>seo marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">2</span> <img src="images/s2.png" alt=""> <h3>graphic design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">3</span> <img src="images/s3.png" alt=""> <h3>digital marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">4</span> <img src="images/s4.png" alt=""> <h3>data analysis</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">5</span> <img src="images/s5.png" alt=""> <h3>web development</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">6</span> <img src="images/s6.png" alt=""> <h3>web design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> </div> </section> <!-- service section ends --> <!-- portfolio section starts --> <section class="portfolio" id="portfolio"> <h1 class="heading"> <span>my</span> portfolio </h1> <div class="button-container"> <div class="btn" data-filter="all">all</div> <div class="btn" data-filter="design">design</div> <div class="btn" data-filter="code">code</div> <div class="btn" data-filter="website">website</div> <div class="btn" data-filter="brand">brand</div> </div> <div class="image-container"> <div class="box design"> <img src="images/img1.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img2.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img3.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img4.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img5.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box website"> <img src="images/img6.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img7.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img8.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img9.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> </div> </section> <!-- portfolio section ends --> <!-- blog section start --> <section class="blog" id="blog"> <h1 class="heading"> <span>my</span> blogs </h1> <div class="box-container"> <div class="box"> <img src="images/blog1.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog2.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog3.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog4.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog5.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog6.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> </div> </section> <!-- blog section ends --> <!-- contact section starts --> <section class="contact" id="contact"> <h1 class="heading"> contact <span>me</span> </h1> <div class="box-container"> <div class="box"> <i class="fas fa-phone"></i> <h3>my number</h3> <p>+123-456-7890</p> </div> <div class="box"> <i class="fas fa-envelope"></i> <h3>my email</h3> <p>example@gmail.com</p> </div> <div class="box"> <i class="fas fa-map-marker-alt"></i> <h3>my address</h3> <p>mumbai, india - 400104</p> </div> </div> <div class="row"> <form action=""> <div class="inputBox"> <input type="text" placeholder="name"> <input type="email" placeholder="email"> </div> <input type="text" placeholder="subject"> <textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea> <button class="btn"> send message </button> </form> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1617786516134!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe> </div> </section> <!-- contact section ends --> <div id="td_container"> <div class="flex"> <div class="button-wrapper"> <i class="fa fa-play play button" id="play" onclick=" toggleplayback(this); "aria-hidden="true"></i> <i class="fa fa-pause pause button" onclick="toggleplayback(this)" id="pause" aria-hidden="true"></i> </div> <div id = "content"> <div class="now-playing-label">Now Playing</div> <div id="show"> </div> <div id="artist"> </div> </div> <div class="stream-wrapper"> <!-- <span>Stations</span> --> <div class="dropdown"> <button class="dropbtn" id="btn">22 West Music Stream</button> <i class="fa fa-caret-down" aria-hidden="true"></i> <div class="dropdown-content"> <a href="#" onclick="changeStream(this)">22 West Radio Online</a> <a href="#" onclick="changeStream(this)">22 West FM</a> <a href="#" onclick="changeStream(this)">22 West Music Stream</a> </div> </div> </div> <div id="player"> <i class="fa fa-volume-up"></i> <div id="volume"></div> </div> <div class="social-icons"> <a href="https://www.facebook.com/22WestRadio" target="_blank"><i class="fa fa-facebook icons" aria-hidden="true"></i></a> <a href="https://twitter.com/22WestRadio" target="_blank"><i class="fa fa-twitter icons" aria-hidden="true"></i></a> <a href="https://www.instagram.com/22WestRadio/" target="_blank"><i class="fa fa-instagram icons" aria-hidden="true"></i></a> </div> </div> </div> <!-- footer section --> <div class="footer"> <div class="container> <div class="container copyright d-flex-r justify-content-space-around"> <ul class="d-flex-r my-1"> <li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li> <li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li> <p class="text-center my1">&copy;Copyright 2022.Designed by José Moreira</p> </ul> </div> <div class="d-flex-r justify-content-center"> <a href="#header"><i class="fas fa-angle-up"></i></a> </div> </div> </div> <!--footer--> <!-- jquery cdn link --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- custom js file link --> <script src="js/script.js"></script> </body> </html> style.css :root{ --main-color:#4C84FF; --primary-bg-color:#fff; --secondary-bg-color:#eee; --primary-text-color:#222; --secondary-text-color:#666; } @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap'); *{ font-family: 'Roboto', sans-serif; margin:0; padding:0; box-sizing: border-box; text-transform: capitalize; outline: none; border:none; text-decoration: none; transition:all .3s cubic-bezier(.38,1.15,.7,1.12); } *::selection{ background-color: var(--main-color); color:#fff; } html{ font-size: 62.5%; overflow-x: hidden; } html::-webkit-scrollbar{ width:1.3rem; } html::-webkit-scrollbar-track{ background-color: var(--secondary-bg-color); } html::-webkit-scrollbar-thumb{ background-color: var(--main-color); } body{ background:var(--secondary-bg-color); } body.dark-theme{ --primary-bg-color:#252C48; --secondary-bg-color:#171C32; --primary-text-color:#fff; --secondary-text-color:#eee; } section{ min-height: 100vh; padding:1rem; padding:0 8%; } .btn{ display: inline-block; padding:.9rem 3.5rem; font-size: 2rem; background:none; color:#fff; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin-top: 1rem; z-index: 0; position: relative; overflow: hidden; border:.2rem solid var(--main-color); } .btn::before{ content: ''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border-radius: .5rem; background:var(--main-color); height:85%; width: 95%; z-index: -1; transition: .2s linear; } .btn:hover:before{ top:100%; transform: translate(-50%, 100%); } .btn:hover{ color:var(--primary-text-color); } .heading{ font-size: 5rem; color:var(--primary-text-color); text-align: center; padding:1rem; text-transform: uppercase; } .heading span{ color:var(--main-color); text-transform: uppercase; } /*weather and datetime*/ .header .datetime { width: auto !important; /* to kill your inline style (width:150px) */ display: flex; margin: 0 !important; padding: 8px 0 !important; /* better to use space in between date/time (see above) */ border-bottom: 5px solid blue; background-color: white; font-size: 20px; } .header .weather { flex-grow: 1; } .header .weather > p { margin: 0; border-color: black; } #weatherwidget-io-0 { position: relative !important; } .weatherwidget-io { padding: 0 !important; height: auto !important; position: static !important; margin: 0 !important; font-size: 0; } #date, #time { margin: 1em .5em; } /*weather and datetime*/ #menu{ font-size: 2rem; background:var(--main-color); color:#fff; border-radius: 5rem; height:5rem; width:5rem; text-align: center; line-height: 5rem; position: fixed; top: 2rem; right:2rem; z-index: 1000; cursor: pointer; } #menu.fa-times{ transform:rotate(-180deg); } .navbar{ position: fixed; top:2.4rem; right:2.5rem; padding:1.1rem 2rem; padding-right: 4rem; z-index: 999; border:.2rem solid var(--main-color); border-radius: 1rem; background:var(--primary-bg-color); opacity: 0; transform-origin: top right; transform: scale(0); } .navbar.nav-toggle{ opacity: 1; transform: scale(1); } .navbar a{ display: block; font-size: 2rem; padding:1rem; padding-right: 7rem; color:var(--primary-text-color); } .navbar a:hover{ color:var(--main-color); transform: translateX(1rem); } .home{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .home .image{ flex:1 1 40rem; padding:1rem; text-align: center; } .home .image img{ height:50rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); border-top: 3rem solid var(--primary-bg-color); border-right: 3rem solid var(--primary-bg-color); border-bottom: 3rem solid var(--main-color); border-left: 3rem solid var(--main-color); border-radius: .5rem; } .home .content{ flex:1 1 40rem; padding:1rem; } .home .content .hello{ display: inline-block; padding:1rem 0; font-size: 2.6rem; color:var(--secondary-text-color); } .home .content h3{ color:var(--primary-text-color); font-size: 5rem; } .home .content h3 span{ color:var(--main-color); } .home .content p{ padding:1rem 0; color:var(--secondary-text-color); font-size: 2rem; } .about .row{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .about .row .box{ flex:1 1 40rem; background-color: var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:.5rem 1.5rem; margin:1.5rem; } .about .row .box .title{ color:var(--primary-text-color); font-size: 2.5rem; padding:1rem 0; } .about .row .box .progress{ padding:1rem 0; } .about .row .box .progress h3{ font-size: 1.7rem; color:var(--secondary-text-color); display: flex; justify-content: space-between; } .about .row .box .progress .bar{ height: 2.5rem; border-radius: .5rem; border:.2rem solid var(--main-color); padding:.5rem; margin:1rem 0; } .about .row .box .progress .bar span{ height: 100%; border-radius: .3rem; background-color: var(--main-color); display: block; } .about .row .box:nth-child(1) .progress:nth-child(2) .bar span{ width: 95%; } .about .row .box:nth-child(1) .progress:nth-child(3) .bar span{ width: 80%; } .about .row .box:nth-child(1) .progress:nth-child(4) .bar span{ width: 65%; } .about .row .box:nth-child(1) .progress:nth-child(5) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(2) .bar span{ width: 98%; } .about .row .box:nth-child(2) .progress:nth-child(3) .bar span{ width: 67%; } .about .row .box:nth-child(2) .progress:nth-child(4) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(5) .bar span{ width: 60%; } .about .row .box .exp-box{ padding:0 1.8rem; margin-top: 1rem; margin-bottom: 2rem; border-left: .2rem solid var(--main-color); position: relative; } .about .row .box .exp-box h3{ color:var(--main-color); font-size: 2rem; } .about .row .box .exp-box p{ color:var(--secondary-text-color); font-size: 1.5rem; padding:1rem 0; } .about .row .box .exp-box::before{ content:''; position: absolute; top:0; left: -1rem; border-radius: 50%; height: 2rem; width: 2rem; background: var(--main-color); } .about .download{ background:var(--primary-bg-color); border-radius: .5rem; text-align: center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:2rem; padding-bottom: 3rem; margin:1rem; } .services .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .services .box-container .box{ background:var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1rem; padding:1rem; width:35rem; text-align: center; position: relative; z-index: 0; } .services .box-container .box .number{ position: absolute; top:1.5rem; left: 2rem; font-size: 2.5rem; color:var(--primary-text-color); } .services .box-container .box img{ height:7rem; width:7rem; margin:1rem; } .services .box-container .box h3{ font-size: 2rem; color:var(--main-color); } .services .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); padding:1rem; } .services .box-container .box::before{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--main-color); z-index: -1; clip-path: circle(25% at 0 0); opacity: .1; transition: .3s; } .services .box-container .box:hover::before{ clip-path: circle(100%); } .portfolio .button-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding:1rem 0; } .portfolio .button-container .btn{ margin:1rem; cursor: pointer; } .portfolio .image-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 1rem 0; } .portfolio .image-container .box{ width:35rem; margin: 1rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); overflow: hidden; height: 25rem; position: relative; border:1.5rem solid var(--primary-bg-color); cursor: pointer; } .portfolio .image-container .box img{ height: 100%; width: 100%; object-fit: cover; } .portfolio .image-container .box .info{ position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--primary-bg-color); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; opacity: .9; transform: scale(0); } .portfolio .image-container .box:hover .info{ transform: scale(1); } .portfolio .image-container .box .info h3{ font-size: 2.5rem; color:var(--primary-text-color); } .blog .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .blog .box-container .box{ width:33rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1.5rem; background: var(--primary-bg-color); overflow: hidden; } .blog .box-container .box img{ width: 100%; height: 20rem; object-fit: cover; } .blog .box-container .box .content{ padding:1.5rem; } .blog .box-container .box .content .info{ border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); text-align: center; position: relative; font-size: 1.5rem; color:var(--primary-text-color); background:var(--secondary-bg-color); padding:1rem; margin-top: -4rem; margin-bottom: 1rem; } .blog .box-container .box .content .info i{ color:var(--main-color); padding:0 1rem; } .blog .box-container .box .content .title{ color:var(--primary-text-color); display: block; font-size: 2.5rem; padding:.5rem 0; } .blog .box-container .box .content .title:hover{ text-decoration: underline; color:var(--main-color); } .blog .box-container .box .content p{ color:var(--secondary-text-color); padding:.5rem 0; font-size: 1.5rem; } .contact .row{ display: flex; justify-content: center; flex-wrap: wrap; } .contact .row form{ flex:1 1 40rem; background: var(--primary-bg-color); padding: 2rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; } .contact .row .map{ flex:1 1 40rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; border:2rem solid var(--primary-bg-color); width:100%; } .contact .row form .inputBox{ display: flex; justify-content: space-between; flex-wrap: wrap; } .contact .row form input, .contact .row form textarea{ padding:1rem 0; margin:1rem 0; font-size: 1.7rem; border-bottom: .1rem solid var(--secondary-text-color); text-transform: none; background:none; color:var(--main-color); width: 100%; } .contact .row form input::placeholder, .contact .row form textarea::placeholder{ text-transform: capitalize; color:var(--secondary-text-color); } .contact .row form input:focus, .contact .row form textarea:focus{ border-color: var(--main-color); } .contact .row form .inputBox input{ width:49%; } .contact .row form textarea{ height: 15rem; resize: none; } .contact .row form .btn{ cursor: pointer; } .contact .box-container{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .contact .box-container .box{ flex:1 1 30rem; margin:1rem; padding:3rem 1rem; background:var(--primary-bg-color); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; text-align: center; } .contact .box-container .box i{ height: 6rem; width:6rem; line-height: 6rem; border-radius: 50%; font-size: 3rem; background:var(--secondary-bg-color); color:var(--main-color); } .contact .box-container .box h3{ color:var(--primary-text-color); padding:1rem 0; font-size: 2rem; } .contact .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); } /*Radio station*/ .flex { display:flex; background:#000; width:900px; height:108px; align-items:center; justify-content:flex-start; } .button-wrapper { background: #000; height:100%; width:20%; position:relative; } .button { position:absolute; top:35%; left:0; right:0; text-align:center; font-size:2rem !important; color:#4cc8f4 !important; } #pause { display:none; } .stream-wrapper { color:#fff !important; margin-left:5%; font-size:1rem !important; min-width:200px; } .social-icons { margin-left:15%; display:inline-table; height:40px; width:200px !important; } .icons { border:1px #4cc8f4 solid; border-radius:50%; color:#4cc8f4 !important; margin-top:1%; padding:8px 12px; font-size:1.2rem !important; } .icons:hover { color:#fff !important; border-color:#fff !important; } .social-icons a { margin-left:5%; } .dropbtn { background-color: #4cc8f4; color: white; padding: 10px; font-size: 16px; border: none; min-width: 180px; } .dropdown { position: relative; display: inline-block; background-color: #4cc8f4; color: white; padding-right:5px; min-width: 199px; text-align:center; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 199px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: #4cc8f4; padding: 10px 12px; text-decoration: none; display: block; width:180px; } .dropdown-content a:hover { background-color: #4cc8f4; color:#fff; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: ##4cc8f4; } #player { width: 50px; height: 50px; position: relative; margin-left:5%; top: 25px; } #player i { position: absolute; margin-top: -6px; color: #666; } #player i.fa-volume-up { color:#4cc8f4; } #volume { position: absolute; left: 24px; margin-left:12px; margin: 0 auto; height: 3px; width: 100px; background: #555; border-radius: 10px; } #volume .ui-slider-range-min { height: 3px; width: 300px; position: absolute; background: #4cc8f4; border: none; border-radius: 10px; outline: none; } #volume .ui-slider-handle { width: 10px; height: 10px; border-radius: 10px; background: #f1f1f1; position: absolute; margin-left: -6px; margin-top: -3px; cursor: pointer; outline: none; } #content { display:none; width:150px !important; color:#4cc8f4 !important; font-size:0.9rem; } #artist { width:100% !important; margin-top:10%; } #show { width:100% !important; margin-top:5%; } .now-playing-label { color:#fff; } /*Radio Staion ends*/ .footer{ background-color:orange; color: #bbb; height: auto; } .container{ padding: 2rem 1rem; } .footer ul{ font-size: normal; list-style: none; } .footer a{ color:red; text-decoration: none; } /*Margins and padding Classes*/ .my-1{margin-top: 1rem; margin-bottom: 1rem;} /*Flex Proprieties*/ .d-flex-r{ display: flex; flex-direction: row; flex-wrap: wrap; } .justify-content-center{ justify-content:center; } .justify-content-space-around{ justify-content:space-around; } .footer i{color: white;} .footer .copyright i {margin-left: 1rem;} .footer i.fab, .footer i.fas{font-size: 1.25rem;transition: 0.3s ease;} .footer i.fab:hover{color:white important;} .footer i.fas { border-radius: 50%; border:1px solid white; margin-top: 1rem; margin-bottom: 1rem; padding: 12px 15px; #theme-toggler{ position: fixed; top:8.5rem; right:2rem; z-index: 998; height: 5rem; width:5rem; line-height: 5rem; text-align: center; font-size: 2rem; background:var(--main-color); color:#fff; cursor: pointer; border-radius: 5rem; } #theme-toggler.fa-sun{ transform:rotate(-180deg); } .home .content { font-family: 'Raleway', sans-serif; padding: 3em 2em; font-size: 18px; background: #222; color: #aaa } .home .content h1{ font-weight: 200; margin: 0.4em 0; } .home .content h1 { font-size: 3.5em; } /* media queries */ @media (max-width:991px){ html{ font-size: 55%; } section{ padding:1rem; padding: 0 3%; } } @media (max-width:768px){ .home .image img{ height: auto; width: 100%; } } @media (max-width:400px){ html{ font-size: 50%; } .services .box-container .box{ width: 100%; } .portfolio .image-container .box{ width:100%; } .blog .box-container .box{ width:100%; } .contact .row form .inputBox input{ width:100%; } } script.js $(document).ready(function(){ $('#menu').click(function(){ $(this).toggleClass('fa-times'); $('.navbar').toggleClass('nav-toggle'); }); $(window).on('scroll load',function(){ $('#menu').removeClass('fa-times'); $('.navbar').removeClass('nav-toggle'); }); $('.portfolio .button-container .btn').click(function(){ let filter = $(this).attr('data-filter'); if(filter == 'all'){ $('.portfolio .image-container .box').show('400') }else{ $('.portfolio .image-container .box').not('.'+filter).hide('200'); $('.portfolio .image-container .box').filter('.'+filter).show('400'); } }); $('#theme-toggler').click(function(){ $(this).toggleClass('fa-sun'); $('body').toggleClass('dark-theme'); }); // smooth scrolling $('a[href*="#"]').on('click',function(e){ e.preventDefault(); $('html, body').animate({ scrollTop : $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); function setDate() { const now = new Date(); const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); const monthName = [ 'January','February','March','April', 'May','June','July','August','September', 'October','November','December' ]; if (hrs > 12) { hours.innerHTML = hrs - 12; } else { hours.innerHTML = hrs; } if (secs < 10) { seconds.innerHTML = '0' + secs; } else { seconds.innerHTML = secs; } if (mins < 10) { minutes.innerHTML = '0' + mins; } else { minutes.innerHTML = mins; } month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; } setInterval(setDate,1000); window.onload = setInterval(clock,1000); function clock() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; month=montharr[month]; var year = d.getFullYear(); var day = d.getDay(); var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"]; day=dayarr[day]; var hour =d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year; document.getElementById("time").innerHTML=hour+":"+min+":"+sec; } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; I also upload my source code via codepen: https://codepen.io/Quencyjones79/pen/gOXZaEG
  3. Quencyjones79
    Hello Everyone Good Evening I'm following your w3.css tutorial but I need your help. My questions are: - How do I centralize the Work Experience, Education and Skills sections in the middle of the browser window? - How do you fix datetime on the same level as the timebar, ie on the same line as the timebar? I would appreciate your support, please. https://codepen.io/Quencyjones79/pen/eYRWgOm
×
×
  • Create New...