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