Quencyjones79
-
Posts
3 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by 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">©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
-
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
Do you want live notifications when people reply to your posts? Enable Notifications Fix the image gallery!
in HTML/XHTML
Posted
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
* { 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