Jump to content

Search the Community

Showing results for tags 'html'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. Hi everyone, I have a file of html which contains code that fetches data from spotify api and renders it in iframes on the page. The issue is that on searching first time, it displays data in a very slow speed. Afterward that it works fine and fast. I need to make it search fast on the initial time also. fiverr.html
  2. Salam everyone, Do I have to remeber all common image formats? Or is it OK to just look back at the documentation when I need to know about it?
  3. I am using a third party tool that Auto populates the address based on whatever the customer is typing so if the customer is Typing "123 test Street", the suggestion box will show all the addresses that are close to "123 test Street". I just want the suggestion box to close if the address that a customer typed does not exists in the suggestion box so if "123 test Street" does not exits in the suggestion box then the suggestion box should close and let the customer type the address that they want. This is the HTML, I have: <div> <label>Address:</label> <div> <input type="text" id="address" value="" autocomplete="off" /> </div> <div id="suggestionContainer"> <div id="suggestionBox" class="inactive"></div> </div> <label>City:</label> <div><input type="text" id="city" value="" /></div> <label>State:</label> <div><input type="text" id="state" value="" /></div> <label>ZIP Code:</label> <div><input type="text" id="zipcode" value="" /></div> </div> I tried putting autocomplete="off" in the address field, but that did not work. Below is the Javascript that I have: const addressElement = document.getElementById("address"); const suggestionElement = document.getElementById("suggestionBox"); addressElement.addEventListener("keyup", (e) => { const searchValue = e.target.value; suggestionElement.innerHTML = ""; if (!searchValue) { suggestionElement.classList.remove("active"); suggestionElement.classList.add("inactive"); return; } suggestionElement.classList.remove("inactive"); suggestionElement.classList.add("active"); sendLookupRequest(searchValue); }); const request = await fetch( `https://vendorURL.com/lookup?${params}` ); const data = await request.json(); if (data?.suggestions?.length > 0) formatSuggestions(data.suggestions); }; This is the Javascript for formatSuggestions: const formatSuggestions = (suggestions) => { const formattedSuggestions = suggestions.map((suggestion) => { const divElement = document.createElement("div"); const { street_line, city, state, zipcode, secondary, entries } = suggestion; const hasSecondaryData = secondary && entries > 1; divElement.innerText = `${street_line} ${secondary} ${hasSecondaryData ? `(${entries} entries)` : "" } ${city} ${state} ${zipcode}`; divElement.addEventListener("click", async () => { const streetLineWithSecondary = `${street_line} ${secondary}`.trim(); if (hasSecondaryData) { suggestionElement.innerHTML = ""; const selected = `${streetLineWithSecondary} (${entries}) ${city} ${state} ${zipcode}`; await sendLookupRequest(streetLineWithSecondary, selected); } else { suggestionElement.classList.remove("active"); suggestionElement.classList.add("inactive"); } populateForm({ streetLineWithSecondary, city, state, zipcode }); }); return divElement; }); suggestionElement.append(...formattedSuggestions); }; I am very new in Javascript. Any help with this will be highly appreciated. With the above Javascript, the autosuggestion box keep showing up even if the address does not exist in the database. attached is the screen shot:
  4. Hi all, Can anyone expand on this lesson link below but to add a submenu in the menu as well? I cannot get this to work. I need a submenu between links 2 and 3. I can get the submenu to show all the time, but not be active upon hover of Link 2. When a user hovers on Link 2, another submenu should pop out to the right with more dropdown links. Where have I gone wrong here? https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp My HTML <!--header code starts here--> <a class="btn" href="homepage"><i class="fa fa-home"></i></a> <a class="active" href="index.html">Index</a> <a class="active3" href="Updates">Updates</a> <!--dropdowncode starts --> <div class="dropdown"> <button class="dropbtn">Business Updates <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="Link1.htm">Buisness Plans</a> <a href="Link2.htm">Link2</a> <a href="submenu.htm">Submenu Link 1<i class="fa fa-caret-right"></i></a> <div class="dropdown-content2"> <a class href="Submenu2.htm">Submenu Link2</a> <a href="Submenu3.htm">Submenu Link 3</a> <a href="Submenu4.htm">Submenu Link 4</a> <a href="Submenu5.htm">Submenu Link 5</a> </div> <a href="Link3.htm">Link3</a> <a href="Link4.htm">Link4</a> <a href="Link5.htm">Link5</a> <a href="Link6.htm">Link6</a> <a href="Link7.htm">Link7</a> <a href="Link8.htm">Link8</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Construction Updates <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Buisness Plans</a> <a href="Link2.htm">Link2</a> <a href="Link3.htm">Link3</a> <a href="Link4.htm">Link4</a> <a href="Link5.htm">Link5</a> <a href="Link6.htm">Link6</a> <a href="Link7.htm">Link7</a> <a href="Link8.htm">Link8</a> </div> </div> <!--header code ends --> CSS /* MENU CODE STARTS*/ /* BUTTON*/ .btn { background-color: #333; float: left; border: none; color: white; padding: 8px 16px; font-size: 22px; cursor: pointer; } .search { background-color: #333; float: right; border: none; color: white; padding: 8px 16px; font-size: 22px; cursor: pointer; } /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; color: #006666; font-weight: bold; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 12px; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; font-family: helvetica, verdana, arial, helvetica, sans-serif; } /* Add a color to the active/current link */ .topnav a.active { background-color: #0B6121; color: white; } ul.a { list-style-type: none; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } /* Add a color to the OTHER active/current link */ .topnav a.active2 { background-color: #006666; color: white; } ul.a { list-style-type: none; } ul.b { list-style-type: none; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } ul.a { list-style-type: none; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } .topnav input[type=text] { border: 1px solid #ccc; } } /* Navbar container */ .navbar { overflow: hidden; background-color: #333; font-family: Helvetica; } /* Links inside the navbar */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button INHERIT COLOR */ .dropdown .dropbtn { font-size: 12px; font-family: helvetica, verdana, arial, helvetica, sans-serif; font-weight: bold; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ } /* Add a darkgrey background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: darkgrey; } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Dropdown content (hidden by default) */ .dropdown-content2 { display: none; position: absolute; margin-top: 0px; margin-left: 320px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Text Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content2 { display: block; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } .fa-caret-right{ float:right; }
  5. 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
  6. I've implemented this Responsive Topnav Example and would like to know how I can highlight the selected menu item in the top navigation bar in a different color.
  7. i have this school assignment and i really want to make a forum page but i dont know how to make it functional. pls help me.
  8. Hello Everyone, I found the following tutorial which is what I was looking for. https://www.w3schools.com/howto/howto_custom_select.asp However it does not work with keyboard inputs. I am trying to update the javascript of this tutorial so it works like a native select. What I'm trying to do is: If custom select is focused, pressing spacebar or enter drops down the options list Pressing the up or down arrow keys, navigates/highlights previous or next option Pressing enter on highlighted option, updates and closes native and custom select Pressing escape, closes native and custom select I've managed to get point number 4 (Pressing Esc closes all select boxes) by updating the last part of the javascript as follows. /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); document.onkeydown = function(e) { e = e || window.event; if ((e.keyCode == 27) || (e.which == 27)) { closeAllSelect(); } }; However I cannot get points 1, 2 and 3 to work. Any help figuring it out or better yet suggest a script update, would be greatly appreciated. Thanks in advance.
  9. Hi, this is my first post, Hope everyone are fine. I am new in HTML,JavaScript, CSS. I am trying to make a Spin the wheel for my site. so up to confirm dialog section, it's working okay but I need when the user click ok button in confirm box the user redirect to next page or another page or to an another site. I am unable to create it, plz. help. me (However in this section, if i able to display a popup type something, where a link button and some text can be appeared, it will also solve my problem) function confirmPrize(indicatedSegment) { // Do basic alert of the segment text. You would probably want to do something more interesting with this information. confirm("Hey,you won " + indicatedSegment.text + ' click on the link and read carefully'); $('a').on('click', function() { if ( this.host != window.somewhere.com ) { if ( window.confirm() ) { // They clicked Yes console.log('you chose to Bye.'); } else { // They clicked no console.log('you chose to stay here.'); return false } } }); } </script> </body> </html>
  10. <button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" data-toggle="modal" data-target="#videoModal" data-video="https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing"> Watch&nbsp;<i class="fa fa-file-pdf-o" aria-hidden="true"></i></button> <!-- Modal --> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-dark border-dark"> <button type="button" class="close text-white" data-dismiss="modal">&times;</button> </div> <div class="modal-body bg-dark p-0"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" allowfullscreen></iframe> </div> </div> </div> </div> </div> <script> $(document).ready(function() { // Set iframe attributes when the show instance method is called $("#videoModal").on("show.bs.modal", function(event) { let button = $(event.relatedTarget); // Button that triggered the modal let url = button.data("video"); // Extract url from data-video attribute console.log(url) $(this).find("iframe").attr({ src : url, allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }); }); // Remove iframe attributes when the modal has finished being hidden from the user $("#videoModal").on("hidden.bs.modal", function() { $("#videoModal iframe").removeAttr("src allow"); }); }); </script> The link "https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing" is opening via browser but shows "Forbidden Error 403" when opened via modal
  11. Hi everyone, I'm making a personal website to promote my multimedia works. I had a question that is in the image, so I really appreciate your help. So I also send my source code and I really appreciate your help with source code to help you with this question, please. index.html <!DOCTYPE html> <html lang="pt"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>complete responsive personal portfolio website design tutorial</title> <!-- font awesome cdn link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- custom css file link --> <link rel="stylesheet" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> </head> <body> <!--This is the weather and datetime bar--> <!--How to put that as the weather image? (see the image weather image)?--> <!--How to fix the space between the twoo edges of the weather and datetime bar (see the image layout)--> <section class="header" id="header" style="padding:0; display:flex; min-height: 0;"> <div class="datetime" > <p id="date" style="margin-top:40px;">Sábado, 11 de setembro de 2021</p> <p id="time" style="margin-top:40px;">10:08:58</p> </div> <div class="weather"><p><a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" data-label_1="VIANA DO CASTELO" data-label_2="" data-icons="Climacons Animated" data-days="5" data-theme="sky" >VIANA DO CASTELO</a> <script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js'); </script></p> </div> </section> <!-- header section starts --> <header> <div id="menu" class="fas fa-bars"></div> <nav class="navbar"> <a href="#home">home</a> <a href="#about">about</a> <a href="#services">services</a> <a href="#portfolio">portfolio</a> <a href="#blog">blog</a> <a href="#contact">contact</a> </nav> <div id="theme-toggler" class="fas fa-moon"></div> </header> <!-- header section ends --> <!-- home section starts --> <section class="home" id="home"> <div class="image"> <img src="images/foto ze.jpg" alt=""> </div> <div class="content"> <h1>Chamo-me José Moreira sou <span class="txt-rotate" data-period="2000" data-rotate='[ "Design Gráfico.", "Fotográfo.", "Web developer.",]'></span> </h1> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Quas, error?</p> <a href="#about" class="btn">about me</a> </div> </section> <!-- home section ends --> <section class="about" id="about"> <h1 class="heading"> about <span>me</span> </h1> <div class="row"> <div class="box"> <h3 class="title">coding skills</h3> <div class="progress"> <h3> html <span>95%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> css <span>80%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> js <span>65%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> sass <span>75%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">professional skills</h3> <div class="progress"> <h3> web design <span>98%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> web development <span>67%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> graphic design <span>75%</span> </h3> <div class="bar"><span></span></div> </div> <div class="progress"> <h3> seo marketing <span>60%</span> </h3> <div class="bar"><span></span></div> </div> </div> <div class="box"> <h3 class="title">experience</h3> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>front end development</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> <div class="box"> <h3 class="title">education</h3> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> <div class="exp-box"> <h3>mumbai university</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p> </div> </div> </div> <div class="download"> <a href="#" class="btn"> download CV </a> </div> </section> <!-- service section starts --> <section class="services" id="services"> <h1 class="heading"> <span>my</span> services </h1> <div class="box-container"> <div class="box"> <span class="number">1</span> <img src="images/s1.png" alt=""> <h3>seo marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">2</span> <img src="images/s2.png" alt=""> <h3>graphic design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">3</span> <img src="images/s3.png" alt=""> <h3>digital marketing</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">4</span> <img src="images/s4.png" alt=""> <h3>data analysis</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">5</span> <img src="images/s5.png" alt=""> <h3>web development</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> <div class="box"> <span class="number">6</span> <img src="images/s6.png" alt=""> <h3>web design</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p> </div> </div> </section> <!-- service section ends --> <!-- portfolio section starts --> <section class="portfolio" id="portfolio"> <h1 class="heading"> <span>my</span> portfolio </h1> <div class="button-container"> <div class="btn" data-filter="all">all</div> <div class="btn" data-filter="design">design</div> <div class="btn" data-filter="code">code</div> <div class="btn" data-filter="website">website</div> <div class="btn" data-filter="brand">brand</div> </div> <div class="image-container"> <div class="box design"> <img src="images/img1.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img2.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box design"> <img src="images/img3.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img4.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box code"> <img src="images/img5.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box website"> <img src="images/img6.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img7.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img8.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> <div class="box brand"> <img src="images/img9.jpg" alt=""> <div class="info"> <h3>PROJECT TITLE</h3> </div> </div> </div> </section> <!-- portfolio section ends --> <!-- blog section start --> <section class="blog" id="blog"> <h1 class="heading"> <span>my</span> blogs </h1> <div class="box-container"> <div class="box"> <img src="images/blog1.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog2.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog3.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog4.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog5.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> <div class="box"> <img src="images/blog6.jpg" alt=""> <div class="content"> <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3> <a href="#" class="title"> blog title goes here </a> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> </div> </section> <!-- blog section ends --> <!-- contact section starts --> <section class="contact" id="contact"> <h1 class="heading"> contact <span>me</span> </h1> <div class="box-container"> <div class="box"> <i class="fas fa-phone"></i> <h3>my number</h3> <p>+123-456-7890</p> </div> <div class="box"> <i class="fas fa-envelope"></i> <h3>my email</h3> <p>example@gmail.com</p> </div> <div class="box"> <i class="fas fa-map-marker-alt"></i> <h3>my address</h3> <p>mumbai, india - 400104</p> </div> </div> <div class="row"> <form action=""> <div class="inputBox"> <input type="text" placeholder="name"> <input type="email" placeholder="email"> </div> <input type="text" placeholder="subject"> <textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea> <button class="btn"> send message </button> </form> <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1617786516134!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe> </div> </section> <!-- contact section ends --> <div id="td_container"> <div class="flex"> <div class="button-wrapper"> <i class="fa fa-play play button" id="play" onclick=" toggleplayback(this); "aria-hidden="true"></i> <i class="fa fa-pause pause button" onclick="toggleplayback(this)" id="pause" aria-hidden="true"></i> </div> <div id = "content"> <div class="now-playing-label">Now Playing</div> <div id="show"> </div> <div id="artist"> </div> </div> <div class="stream-wrapper"> <!-- <span>Stations</span> --> <div class="dropdown"> <button class="dropbtn" id="btn">22 West Music Stream</button> <i class="fa fa-caret-down" aria-hidden="true"></i> <div class="dropdown-content"> <a href="#" onclick="changeStream(this)">22 West Radio Online</a> <a href="#" onclick="changeStream(this)">22 West FM</a> <a href="#" onclick="changeStream(this)">22 West Music Stream</a> </div> </div> </div> <div id="player"> <i class="fa fa-volume-up"></i> <div id="volume"></div> </div> <div class="social-icons"> <a href="https://www.facebook.com/22WestRadio" target="_blank"><i class="fa fa-facebook icons" aria-hidden="true"></i></a> <a href="https://twitter.com/22WestRadio" target="_blank"><i class="fa fa-twitter icons" aria-hidden="true"></i></a> <a href="https://www.instagram.com/22WestRadio/" target="_blank"><i class="fa fa-instagram icons" aria-hidden="true"></i></a> </div> </div> </div> <!-- footer section --> <div class="footer"> <div class="container> <div class="container copyright d-flex-r justify-content-space-around"> <ul class="d-flex-r my-1"> <li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li> <li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li> <p class="text-center my1">&copy;Copyright 2022.Designed by José Moreira</p> </ul> </div> <div class="d-flex-r justify-content-center"> <a href="#header"><i class="fas fa-angle-up"></i></a> </div> </div> </div> <!--footer--> <!-- jquery cdn link --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- custom js file link --> <script src="js/script.js"></script> </body> </html> style.css :root{ --main-color:#4C84FF; --primary-bg-color:#fff; --secondary-bg-color:#eee; --primary-text-color:#222; --secondary-text-color:#666; } @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap'); *{ font-family: 'Roboto', sans-serif; margin:0; padding:0; box-sizing: border-box; text-transform: capitalize; outline: none; border:none; text-decoration: none; transition:all .3s cubic-bezier(.38,1.15,.7,1.12); } *::selection{ background-color: var(--main-color); color:#fff; } html{ font-size: 62.5%; overflow-x: hidden; } html::-webkit-scrollbar{ width:1.3rem; } html::-webkit-scrollbar-track{ background-color: var(--secondary-bg-color); } html::-webkit-scrollbar-thumb{ background-color: var(--main-color); } body{ background:var(--secondary-bg-color); } body.dark-theme{ --primary-bg-color:#252C48; --secondary-bg-color:#171C32; --primary-text-color:#fff; --secondary-text-color:#eee; } section{ min-height: 100vh; padding:1rem; padding:0 8%; } .btn{ display: inline-block; padding:.9rem 3.5rem; font-size: 2rem; background:none; color:#fff; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin-top: 1rem; z-index: 0; position: relative; overflow: hidden; border:.2rem solid var(--main-color); } .btn::before{ content: ''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); border-radius: .5rem; background:var(--main-color); height:85%; width: 95%; z-index: -1; transition: .2s linear; } .btn:hover:before{ top:100%; transform: translate(-50%, 100%); } .btn:hover{ color:var(--primary-text-color); } .heading{ font-size: 5rem; color:var(--primary-text-color); text-align: center; padding:1rem; text-transform: uppercase; } .heading span{ color:var(--main-color); text-transform: uppercase; } /*weather and datetime*/ .header .datetime { width: auto !important; /* to kill your inline style (width:150px) */ display: flex; margin: 0 !important; padding: 8px 0 !important; /* better to use space in between date/time (see above) */ border-bottom: 5px solid blue; background-color: white; font-size: 20px; } .header .weather { flex-grow: 1; } .header .weather > p { margin: 0; border-color: black; } #weatherwidget-io-0 { position: relative !important; } .weatherwidget-io { padding: 0 !important; height: auto !important; position: static !important; margin: 0 !important; font-size: 0; } #date, #time { margin: 1em .5em; } /*weather and datetime*/ #menu{ font-size: 2rem; background:var(--main-color); color:#fff; border-radius: 5rem; height:5rem; width:5rem; text-align: center; line-height: 5rem; position: fixed; top: 2rem; right:2rem; z-index: 1000; cursor: pointer; } #menu.fa-times{ transform:rotate(-180deg); } .navbar{ position: fixed; top:2.4rem; right:2.5rem; padding:1.1rem 2rem; padding-right: 4rem; z-index: 999; border:.2rem solid var(--main-color); border-radius: 1rem; background:var(--primary-bg-color); opacity: 0; transform-origin: top right; transform: scale(0); } .navbar.nav-toggle{ opacity: 1; transform: scale(1); } .navbar a{ display: block; font-size: 2rem; padding:1rem; padding-right: 7rem; color:var(--primary-text-color); } .navbar a:hover{ color:var(--main-color); transform: translateX(1rem); } .home{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .home .image{ flex:1 1 40rem; padding:1rem; text-align: center; } .home .image img{ height:50rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.3); border-top: 3rem solid var(--primary-bg-color); border-right: 3rem solid var(--primary-bg-color); border-bottom: 3rem solid var(--main-color); border-left: 3rem solid var(--main-color); border-radius: .5rem; } .home .content{ flex:1 1 40rem; padding:1rem; } .home .content .hello{ display: inline-block; padding:1rem 0; font-size: 2.6rem; color:var(--secondary-text-color); } .home .content h3{ color:var(--primary-text-color); font-size: 5rem; } .home .content h3 span{ color:var(--main-color); } .home .content p{ padding:1rem 0; color:var(--secondary-text-color); font-size: 2rem; } .about .row{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .about .row .box{ flex:1 1 40rem; background-color: var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:.5rem 1.5rem; margin:1.5rem; } .about .row .box .title{ color:var(--primary-text-color); font-size: 2.5rem; padding:1rem 0; } .about .row .box .progress{ padding:1rem 0; } .about .row .box .progress h3{ font-size: 1.7rem; color:var(--secondary-text-color); display: flex; justify-content: space-between; } .about .row .box .progress .bar{ height: 2.5rem; border-radius: .5rem; border:.2rem solid var(--main-color); padding:.5rem; margin:1rem 0; } .about .row .box .progress .bar span{ height: 100%; border-radius: .3rem; background-color: var(--main-color); display: block; } .about .row .box:nth-child(1) .progress:nth-child(2) .bar span{ width: 95%; } .about .row .box:nth-child(1) .progress:nth-child(3) .bar span{ width: 80%; } .about .row .box:nth-child(1) .progress:nth-child(4) .bar span{ width: 65%; } .about .row .box:nth-child(1) .progress:nth-child(5) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(2) .bar span{ width: 98%; } .about .row .box:nth-child(2) .progress:nth-child(3) .bar span{ width: 67%; } .about .row .box:nth-child(2) .progress:nth-child(4) .bar span{ width: 75%; } .about .row .box:nth-child(2) .progress:nth-child(5) .bar span{ width: 60%; } .about .row .box .exp-box{ padding:0 1.8rem; margin-top: 1rem; margin-bottom: 2rem; border-left: .2rem solid var(--main-color); position: relative; } .about .row .box .exp-box h3{ color:var(--main-color); font-size: 2rem; } .about .row .box .exp-box p{ color:var(--secondary-text-color); font-size: 1.5rem; padding:1rem 0; } .about .row .box .exp-box::before{ content:''; position: absolute; top:0; left: -1rem; border-radius: 50%; height: 2rem; width: 2rem; background: var(--main-color); } .about .download{ background:var(--primary-bg-color); border-radius: .5rem; text-align: center; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); padding:2rem; padding-bottom: 3rem; margin:1rem; } .services .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .services .box-container .box{ background:var(--primary-bg-color); border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1rem; padding:1rem; width:35rem; text-align: center; position: relative; z-index: 0; } .services .box-container .box .number{ position: absolute; top:1.5rem; left: 2rem; font-size: 2.5rem; color:var(--primary-text-color); } .services .box-container .box img{ height:7rem; width:7rem; margin:1rem; } .services .box-container .box h3{ font-size: 2rem; color:var(--main-color); } .services .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); padding:1rem; } .services .box-container .box::before{ content: ''; position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--main-color); z-index: -1; clip-path: circle(25% at 0 0); opacity: .1; transition: .3s; } .services .box-container .box:hover::before{ clip-path: circle(100%); } .portfolio .button-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding:1rem 0; } .portfolio .button-container .btn{ margin:1rem; cursor: pointer; } .portfolio .image-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 1rem 0; } .portfolio .image-container .box{ width:35rem; margin: 1rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); overflow: hidden; height: 25rem; position: relative; border:1.5rem solid var(--primary-bg-color); cursor: pointer; } .portfolio .image-container .box img{ height: 100%; width: 100%; object-fit: cover; } .portfolio .image-container .box .info{ position: absolute; top:0; left: 0; height: 100%; width: 100%; background:var(--primary-bg-color); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; opacity: .9; transform: scale(0); } .portfolio .image-container .box:hover .info{ transform: scale(1); } .portfolio .image-container .box .info h3{ font-size: 2.5rem; color:var(--primary-text-color); } .blog .box-container{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .blog .box-container .box{ width:33rem; border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); margin:1.5rem; background: var(--primary-bg-color); overflow: hidden; } .blog .box-container .box img{ width: 100%; height: 20rem; object-fit: cover; } .blog .box-container .box .content{ padding:1.5rem; } .blog .box-container .box .content .info{ border-radius: .5rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); text-align: center; position: relative; font-size: 1.5rem; color:var(--primary-text-color); background:var(--secondary-bg-color); padding:1rem; margin-top: -4rem; margin-bottom: 1rem; } .blog .box-container .box .content .info i{ color:var(--main-color); padding:0 1rem; } .blog .box-container .box .content .title{ color:var(--primary-text-color); display: block; font-size: 2.5rem; padding:.5rem 0; } .blog .box-container .box .content .title:hover{ text-decoration: underline; color:var(--main-color); } .blog .box-container .box .content p{ color:var(--secondary-text-color); padding:.5rem 0; font-size: 1.5rem; } .contact .row{ display: flex; justify-content: center; flex-wrap: wrap; } .contact .row form{ flex:1 1 40rem; background: var(--primary-bg-color); padding: 2rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; } .contact .row .map{ flex:1 1 40rem; margin:1rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; border:2rem solid var(--primary-bg-color); width:100%; } .contact .row form .inputBox{ display: flex; justify-content: space-between; flex-wrap: wrap; } .contact .row form input, .contact .row form textarea{ padding:1rem 0; margin:1rem 0; font-size: 1.7rem; border-bottom: .1rem solid var(--secondary-text-color); text-transform: none; background:none; color:var(--main-color); width: 100%; } .contact .row form input::placeholder, .contact .row form textarea::placeholder{ text-transform: capitalize; color:var(--secondary-text-color); } .contact .row form input:focus, .contact .row form textarea:focus{ border-color: var(--main-color); } .contact .row form .inputBox input{ width:49%; } .contact .row form textarea{ height: 15rem; resize: none; } .contact .row form .btn{ cursor: pointer; } .contact .box-container{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .contact .box-container .box{ flex:1 1 30rem; margin:1rem; padding:3rem 1rem; background:var(--primary-bg-color); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); border-radius: .5rem; text-align: center; } .contact .box-container .box i{ height: 6rem; width:6rem; line-height: 6rem; border-radius: 50%; font-size: 3rem; background:var(--secondary-bg-color); color:var(--main-color); } .contact .box-container .box h3{ color:var(--primary-text-color); padding:1rem 0; font-size: 2rem; } .contact .box-container .box p{ font-size: 1.5rem; color:var(--secondary-text-color); } /*Radio station*/ .flex { display:flex; background:#000; width:900px; height:108px; align-items:center; justify-content:flex-start; } .button-wrapper { background: #000; height:100%; width:20%; position:relative; } .button { position:absolute; top:35%; left:0; right:0; text-align:center; font-size:2rem !important; color:#4cc8f4 !important; } #pause { display:none; } .stream-wrapper { color:#fff !important; margin-left:5%; font-size:1rem !important; min-width:200px; } .social-icons { margin-left:15%; display:inline-table; height:40px; width:200px !important; } .icons { border:1px #4cc8f4 solid; border-radius:50%; color:#4cc8f4 !important; margin-top:1%; padding:8px 12px; font-size:1.2rem !important; } .icons:hover { color:#fff !important; border-color:#fff !important; } .social-icons a { margin-left:5%; } .dropbtn { background-color: #4cc8f4; color: white; padding: 10px; font-size: 16px; border: none; min-width: 180px; } .dropdown { position: relative; display: inline-block; background-color: #4cc8f4; color: white; padding-right:5px; min-width: 199px; text-align:center; } .dropdown-content { display: none; position: absolute; background-color: #000; min-width: 199px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: #4cc8f4; padding: 10px 12px; text-decoration: none; display: block; width:180px; } .dropdown-content a:hover { background-color: #4cc8f4; color:#fff; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: ##4cc8f4; } #player { width: 50px; height: 50px; position: relative; margin-left:5%; top: 25px; } #player i { position: absolute; margin-top: -6px; color: #666; } #player i.fa-volume-up { color:#4cc8f4; } #volume { position: absolute; left: 24px; margin-left:12px; margin: 0 auto; height: 3px; width: 100px; background: #555; border-radius: 10px; } #volume .ui-slider-range-min { height: 3px; width: 300px; position: absolute; background: #4cc8f4; border: none; border-radius: 10px; outline: none; } #volume .ui-slider-handle { width: 10px; height: 10px; border-radius: 10px; background: #f1f1f1; position: absolute; margin-left: -6px; margin-top: -3px; cursor: pointer; outline: none; } #content { display:none; width:150px !important; color:#4cc8f4 !important; font-size:0.9rem; } #artist { width:100% !important; margin-top:10%; } #show { width:100% !important; margin-top:5%; } .now-playing-label { color:#fff; } /*Radio Staion ends*/ .footer{ background-color:orange; color: #bbb; height: auto; } .container{ padding: 2rem 1rem; } .footer ul{ font-size: normal; list-style: none; } .footer a{ color:red; text-decoration: none; } /*Margins and padding Classes*/ .my-1{margin-top: 1rem; margin-bottom: 1rem;} /*Flex Proprieties*/ .d-flex-r{ display: flex; flex-direction: row; flex-wrap: wrap; } .justify-content-center{ justify-content:center; } .justify-content-space-around{ justify-content:space-around; } .footer i{color: white;} .footer .copyright i {margin-left: 1rem;} .footer i.fab, .footer i.fas{font-size: 1.25rem;transition: 0.3s ease;} .footer i.fab:hover{color:white important;} .footer i.fas { border-radius: 50%; border:1px solid white; margin-top: 1rem; margin-bottom: 1rem; padding: 12px 15px; #theme-toggler{ position: fixed; top:8.5rem; right:2rem; z-index: 998; height: 5rem; width:5rem; line-height: 5rem; text-align: center; font-size: 2rem; background:var(--main-color); color:#fff; cursor: pointer; border-radius: 5rem; } #theme-toggler.fa-sun{ transform:rotate(-180deg); } .home .content { font-family: 'Raleway', sans-serif; padding: 3em 2em; font-size: 18px; background: #222; color: #aaa } .home .content h1{ font-weight: 200; margin: 0.4em 0; } .home .content h1 { font-size: 3.5em; } /* media queries */ @media (max-width:991px){ html{ font-size: 55%; } section{ padding:1rem; padding: 0 3%; } } @media (max-width:768px){ .home .image img{ height: auto; width: 100%; } } @media (max-width:400px){ html{ font-size: 50%; } .services .box-container .box{ width: 100%; } .portfolio .image-container .box{ width:100%; } .blog .box-container .box{ width:100%; } .contact .row form .inputBox input{ width:100%; } } script.js $(document).ready(function(){ $('#menu').click(function(){ $(this).toggleClass('fa-times'); $('.navbar').toggleClass('nav-toggle'); }); $(window).on('scroll load',function(){ $('#menu').removeClass('fa-times'); $('.navbar').removeClass('nav-toggle'); }); $('.portfolio .button-container .btn').click(function(){ let filter = $(this).attr('data-filter'); if(filter == 'all'){ $('.portfolio .image-container .box').show('400') }else{ $('.portfolio .image-container .box').not('.'+filter).hide('200'); $('.portfolio .image-container .box').filter('.'+filter).show('400'); } }); $('#theme-toggler').click(function(){ $(this).toggleClass('fa-sun'); $('body').toggleClass('dark-theme'); }); // smooth scrolling $('a[href*="#"]').on('click',function(e){ e.preventDefault(); $('html, body').animate({ scrollTop : $($(this).attr('href')).offset().top, }, 500, 'linear' ); }); }); function setDate() { const now = new Date(); const mm = now.getMonth(); const dd = now.getDate(); const yyyy = now.getFullYear(); const secs = now.getSeconds(); const mins = now.getMinutes(); const hrs = now.getHours(); const monthName = [ 'January','February','March','April', 'May','June','July','August','September', 'October','November','December' ]; if (hrs > 12) { hours.innerHTML = hrs - 12; } else { hours.innerHTML = hrs; } if (secs < 10) { seconds.innerHTML = '0' + secs; } else { seconds.innerHTML = secs; } if (mins < 10) { minutes.innerHTML = '0' + mins; } else { minutes.innerHTML = mins; } month.innerHTML = monthName[mm]; day.innerHTML = dd; year.innerHTML = yyyy; } setInterval(setDate,1000); window.onload = setInterval(clock,1000); function clock() { var d = new Date(); var date = d.getDate(); var month = d.getMonth(); var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; month=montharr[month]; var year = d.getFullYear(); var day = d.getDay(); var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"]; day=dayarr[day]; var hour =d.getHours(); var min = d.getMinutes(); var sec = d.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year; document.getElementById("time").innerHTML=hour+":"+min+":"+sec; } function updateTime(k) { if (k < 10) { return "0" + k; } else { return k; } } var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 300 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css); }; I also upload my source code via codepen: https://codepen.io/Quencyjones79/pen/gOXZaEG
  12. I would like to know how to make this type of box with the text inside, like the example in the photo
  13. Hello, I would be very grateful for any help with this. Javascript is run on a page which grabs this code from remote and inserts it at the very bottom of the page (see attachment if necessary): How can I change attributes in the highlighted line, for example override the background value of #000 to be #FFF (especially because I am also not sure how to make any extra code execute after the above code since it's forced to the bottom of the page and not sure how that works). I have tried a number of approaches from other online forums but have not had success yet. Thanks so much for any advice you may have! Kind regards
  14. Hello, How may I use the <picture> tag to change the sizing of a (background or other) image depending on the device size? For example, let's say the current CSS is: .bgimg { background-position: center; background-size: cover; background-image: url("img/large.jpg"); min-height: 75%; } So rather than using the W3C code of: <!-- Header with image --> <header class="bgimg w3-display-container w3-grayscale-min" id="home"> Instead it would look something like this: <!-- Header with image --> <header id="home" class="w3-display-container w3-grayscale-min"> <div> <picture> <source media="(min-width: 1501px)" background-image="img/large.jpg" style="background-position:center, width:2000px;"> <source media="(min-width: 601px)" background-image="img/medium.jpg" style="width:1500px"> <img background-image="img/small.jpg" alt="picture" style="width:600px"> </picture> </div> Ultimately, my goal is this: 1. to specify the width and height for each image 2. have the picture change depending on the device size 3. have the image also cover the available container size to 100% width Any help would be hugely appreciated. Kind regards
  15. Hello pls How i have to format style <li> with color white or any: document.body.getElementById("li").style.Color = "#000000"; See the webpage Menu <script> switch (new Date().getDay() % 2) // { default: document.body.classList.add("day-even"); function display() { var co=document.getElementById("li"); co.style.color="red"; } OR: // document.getElementById("li").style.Color = "red"; document.write('<center><img src="https://arenas.pagesperso-orange.fr/GradientExample/eesti.png" style="height:80px; width:130px;"></center>'); document.body.style.scrollbarFaceColor="#084b8a" document.body.style.scrollbarArrowColor="#000000" document.body.style.scrollbarTrackColor="" document.body.style.scrollbarShadowColor="" document.body.style.scrollbarHighlightColor="colorname" document.body.style.scrollbar3dlightColor="" document.body.style.scrollbarDarkshadowColor="colorname" // [url=https://]This be ![/url] break; case 0: document.body.classList.add("day-odd"); document.body.getElementById("li").style.Color = "#000000"; document.body.write('<center><img src="https://arenas.pagesperso-orange.fr/GradientExample/ukraine.png" style="height:80px; width:130px;"></center>'); document.body.style.scrollbarFaceColor="#005bbb" document.body.style.scrollbarArrowColor="#ffd500" document.body.style.scrollbarTrackColor="#005bbb" document.body.style.scrollbarShadowColor="#ffffff" document.body.style.scrollbarHighlightColor="colorname" document.body.style.scrollbar3dlightColor="colorname" document.body.style.scrollbarDarkshadowColor="colorname" break; } </script> Thanks for your help Arnold
  16. Did HTML update to where you can't go to a site with a Iframe anymore? If you try to go to a site in a Iframe now you get these errors: 1. Refused to frame 'https://www.w3schools.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://mycourses.w3schools.com". 2. Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
  17. Hi. I am playing around with an old website while trying to learn about html and css and am trying to achieve something to do with the page background image and it's title or caption. The site is here: www.ancrumcrosskeys.com In the top right I have placed a custom html widget which contains the title of the image you can see in the background. However if you navigate to a different page the image changes but the 'title' stays the same. What do I need to add to have the title change with the image? Hope you can help. S
  18. I've ran in to a weird issue. I have a website that's hosted on my own server for some time now, and today I got another domain which I host on the same server. For the first website I host I can point to subpages simply by using "https://mywebsite.com/info" but with my new website I have to format links like this "https://myotherwebsite.com/info.html" I can't figure out why. The structures are the same for both websites. The first website has a root folder in which both index.html and info.html is placed. The second website has a different root folder in which both index.html and info.html are placed. Not that it's a huge isse, I just don't like that the html part shows in the address field for visitors.
  19. I apologize for posting in VBS, I was in a hurry. I searched for hours for a simple code to count "1, 2, 3, 4, 5, 6, 7, 8" as "1, 2, 4, 8, 16, 32, 64, 128" in JS or HTML or CSS; Multiplying the same number with itself didn't work. I want simple code and Google would not show anything. I found "Math.pow()" and "Math.LOG()", but can't find a simple code with an example of "Math.GMS" if Geometric Sequence, or "Math.GMP" if Geometric Progression. What is the simplest I can write? Do I have to combine two or more versions of "Math.xxx()" with my number? The formula is confusing, so I could not write it using that code. Not to be rude, but PLEASE ANSWER, my last question never got an answer. If you don't even answer this one as well, what's the point of this site? If I can't ask something without getting an answer, I will have to ask elsewhere. I SIGN UP TO GET AN ANSWER, not to just quit and go elsewhere. So if you have any help, PLEASE HELP! I would like to have it count "1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096..." when entering "1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13...". This is the closest I got; <input type="number" id="exmp" value="1"> <button onclick="myExample()">Convert</button> <p id="exmpone1"></p> <script> function myExample() { var no = document.getElementById("exmp").value; document.getElementById("exmpone1").innerHTML = Math.pow(no, no); } </script>
  20. Hello, can anyone please suggest what change should I make in order to make login using email/username either in same field or 2 different fields. <?php // Initialize the session session_start(); // Check if the user is already logged in, if yes then redirect him to welcome page if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){ header("location: welcome.php"); exit; } // Include config file require_once "c.php"; // Define variables and initialize with empty values $username = $password = ""; $username_err = $password_err = $login_err = ""; // Processing form data when form is submitted if($_SERVER["REQUEST_METHOD"] == "POST"){ // Check if username is empty if(empty(trim($_POST["username"]))){ $username_err = "Please enter username."; } else{ $username = trim($_POST["username"]); } // Check if password is empty if(empty(trim($_POST["password"]))){ $password_err = "Please enter your password."; } else{ $password = trim($_POST["password"]); } // Validate credentials if(empty($username_err) && empty($password_err)){ // Prepare a select statement $sql = "SELECT id, username, password FROM users WHERE (username = ? OR email= ?)"; if($stmt = mysqli_prepare($link, $sql)){ // Bind variables to the prepared statement as parameters mysqli_stmt_bind_param($stmt, "s", $param_username); // Set parameters $param_username = $username; // Attempt to execute the prepared statement if(mysqli_stmt_execute($stmt)){ // Store result mysqli_stmt_store_result($stmt); // Check if username exists, if yes then verify password if(mysqli_stmt_num_rows($stmt) == 1){ // Bind result variables mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password); if(mysqli_stmt_fetch($stmt)){ if(password_verify($password, $hashed_password)){ // Password is correct, so start a new session session_start(); // Store data in session variables $_SESSION["loggedin"] = true; $_SESSION["id"] = $id; $_SESSION["username"] = $username; // Redirect user to welcome page header("location: welcome.php"); } else{ // Password is not valid, display a generic error message $login_err = "Invalid username or password."; } } } else{ // Username doesn't exist, display a generic error message $login_err = "Invalid username or password."; } } else{ echo "Oops! Something went wrong. Please try again later."; } // Close statement mysqli_stmt_close($stmt); } } // Close connection mysqli_close($link); } ?> also, here is my error code- <?php // Initialize the session session_start(); // Check if the user is already logged in, if yes then redirect him to welcome page if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){ header("location: welcome.php"); exit; } // Include config file require_once "c.php"; // Define variables and initialize with empty values $username = $password = ""; $username_err = $password_err = $login_err = ""; $email = $password = ""; $email_err = $password_err = $login_err = ""; // Processing form data when form is submitted if($_SERVER["REQUEST_METHOD"] == "POST"){ // Check if username is empty if(empty(trim($_POST["username"]))){ $username_err = "Please enter username."; } else{ $username = trim($_POST["username"]); } // Check if mail is empty if(empty(trim($_POST["email"]))){ $email_err = "Please enter mail"; } else{ $email = trim($_POST["email"]); } // Check if password is empty if(empty(trim($_POST["password"]))){ $password_err = "Please enter your password."; } else{ $password = trim($_POST["password"]); } // Validate credentials if(empty($username_err) && empty($email_err) && empty($password_err)){ // Prepare a select statement $sql = "SELECT id, username, email, password FROM users WHERE (username = ? OR email= ?)"; if($stmt = mysqli_prepare($link, $sql)){ // Bind variables to the prepared statement as parameters mysqli_stmt_bind_param($stmt, "s", $param_username); // Set parameters $param_username = $username; // Attempt to execute the prepared statement if(mysqli_stmt_execute($stmt)){ // Store result mysqli_stmt_store_result($stmt); // Check if username exists, if yes then verify password if(mysqli_stmt_num_rows($stmt) == 1){ // Bind result variables mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password); if(mysqli_stmt_fetch($stmt)){ if(password_verify($password, $hashed_password)){ // Password is correct, so start a new session session_start(); // Store data in session variables $_SESSION["loggedin"] = true; $_SESSION["id"] = $id; $_SESSION["username"] = $username; // Redirect user to welcome page header("location: welcome.php"); } else{ // Password is not valid, display a generic error message $login_err = "Invalid username or password."; } } } else{ // Username doesn't exist, display a generic error message $login_err = "Invalid username or password."; } } else{ echo "Oops! Something went wrong. Please try again later."; } // Close statement mysqli_stmt_close($stmt); } } // Close connection mysqli_close($link); } ?> Please check it!
  21. Hi, I am trying to learn HTML, CSS, JavaScript and PHP and I already tried many free and paid apps and websites but most of them not covering the full language and just learn part of it so I would like to know please are the free or the paid courses here covering everything? Every tag attributes properties…etc? thanks.
  22. Hi I would like to have a kind of template file that every html file on my webserver pulls some code from. Like for example the header should be always the same. So if I change it in the template, every site will show the updated code + its own code of course. An iframe would not be the right thing (since I don’t want to pull a whole html file, only like two or three lines of code). Thanks
  23. What happens if I use style.display=""; let's say on some rows <tr> of a table. What is the output if I'm not using defined Property values but instead leaving the space empty?
  24. Here's my code: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar" id="myNavbar"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/home.htm">Home</a> <a href="https://www...">Store</a> <a href="https://www.ups.com/track?loc=en_US&requester=ST/">Track Your Package</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/aboutme.htm">About Me</a> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/artclub.htm">Andrew's Art Club</a> <div class="dropdown"> <button class="dropbtn">Need to Know <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="file:///home/chronos/u-1a42361665a19f7075d43134a693f5846d3835e8/MyFiles/returns.htm">Returns</a> <a href="#">Shipping Claims</a> <a href="#">Terms of Service</a> <a href="#">Privacy Policy</a> <a href="https://www...">Help Center</a> </div> </div> <a href="#">Deals</a> <a href="https://www...">Sign-in</a> <div class="dropdown"> <button class="dropbtn">Languages <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">English 🇺🇸/🇬🇧</a> <a href="https://www...">Español 🇪🇸/🇲🇽</a> <a href="https://www...">Français 🇫🇷/🇨🇦</a> <a href="https://www...">Русский 🇷🇺 </a> <a href="https://www...">Italiano 🇮🇹</a> <a href="https://www...">Deutsche 🇩🇪</a> <a href="https://www...">中国人 🇨🇳/🇹🇼/🇭🇰</a> <a href="https://www...">Português 🇵🇹/🇧🇷</a> </div> </div> </div> </div> </nav> I was super excited that the navbar works now, only to be crushed when the dropdowns stopped working. Any suggestions?
  25. Can you please Help Me to Fix this Issue? Please Help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML HTML 5 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" /> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" /> <title>Testing</title> <style type="text/css"> body { margin-top: 0px; margin-bottom: 0px; background-color: #CCFFCC; } #MainContainer01 { width: 620px; margin: 0 auto; } .Header { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: center; font-size: 25pt; background-color: #000080; line-height: 75px; height: 75px; } .HREFNoBorder { border-width: 0px; } .FL { width: 310px; height:381px; text-align: center; padding-bottom: 30px; background-color:fuchsia; float: right; } .gap { line-height: 35px; height:35px; /*clear: both;*/ } .TitleSegment { line-height: 30px; font-family: Arial; font-size: 12pt; background-color: #CCFFFF; text-align: right; width: 301px; } </style> </head> <body> <div id="MainContainer01"> <div class="Header"></div> <div class="gap"></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://post.healthline.com/wp-content/uploads/2020/09/blue-lotus-flower-732x549-thumbnail.jpg" width="301" height="381" class="HREFNoBorder" /></a></div> <div class="FL"> <div class="TitleSegment">Title Segment</div><a target="_blank" href="#"> <img alt="#" longdesc="#" src="https://th.bing.com/th/id/OIP.caLpUQWyd1PZV5SRvDOZFQHaE8?w=270&h=180&c=7&o=5&pid=1.7" width="301" height="381" class="HREFNoBorder" /></a></div> </div> </body> </html>
×
×
  • Create New...