Showing results for tags 'css'. - Portugal-a-Programar

Project Wallace: Analizador de código CSS

Encontrei recentemente o site Project Wallace, que disponibiliza um analizador estático de CSS, para simplesmente para reportar métricas sobre o código, ou para reportar "qualidade" do código. O projecto é open source, o pode ser usado de várias formas, incluíndo directamente a partir do site, ou através de uma biblioteca NPM.

Meter imagem de fundo e tirar a cor de fundo do footer

Rafa1306 posted a topic in HTML

Boas, tudo bem? Já percorri bastantes sites e nada do que encontrei ajuda deixo aqui o codigo 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"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="index.css"> <title>SaniProArt</title> </head> <body> <div class="wrapper"> <nav class="nav"> <div class="nav-logo"> <img src="imagens/Logo.png" alt="Logo" width="100"> </div> <div class="nav-menu" id="navMenu"> <ul> <li><a href="index.html" class="link active">Início</a></li> <li><a href="servicos.html" class="link">Serviços</a></li> <li><a href="sobrenos.html" class="link">Sobre nós</a></li> </ul> </div> <div class="nav-button"> <a href='login.php'><button class="btn white-btn" id="loginBtn" onclick="login()">Login</button></a> <a href='Cadastrar.php'><button class="btn" id="registerBtn" onclick="register()">Registo</button></a> </div> <div class="nav-menu-btn"> <i class="bx bx-menu" onclick="myMenuFunction()"></i> </div> </nav> <div class="container mt-5"> <h1 class="text-center">Perguntas Frequentes</h1> <div class="text-center p-2"><h6>Tem alguma questão ? Estamos aqui para ajudar</h6></div> <br> <div class="row mb-2 align-middle text-center" > <div class="accordion" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> Em que zona do país atuam? </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Atuamos apenas na região sul do país. mais concretamente da zona de Lagos até Almancil.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Como posso solicitar os vossos serviços?</button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body"> Pode solicitar os nossos serviços preenchendo o formulário de contato no nosso website ou entrando em contato diretamente pelo telefone. Estamos aqui para ajudá-lo!</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> Qual é o nosso horário de funcionamento? </button> </h2><div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Estamos em funcionamento de segunda a sábado, das 8h às 18h.</div> </div> </div> </div> </div> <br class=""> <footer id="footer" class="text-center align-center text-lg-start bg-body-tertiary text-muted fixed-bottom" style="min-width: 700px; width: 100vw;" > <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"> <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4"> <h6 class="text-uppercase fw-bold mb-4 text-start">Contacto</h6> <p><i class="fas fa-home me-3 text-start"></i>Alcantarilha 8365-203</p> <p> <i class="fas fa-envelope me-3 text-start"></i> saniproart@gmail.com </p> <p><i class="fas fa-phone me-3 text-start"></i> +351 965 637 393</p> </div> </div> </div> </section> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </body> </html> e o css < @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background-image: url('imagens/Fundo.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; } .wrapper{ display: flex; justify-content: center; align-items: center; min-height: 110vh; background: rgba(39, 39, 39, 0.4); } .nav{ position: fixed; top: 0; display: flex; justify-content: space-around; width: 100%; height: 100px; line-height: 100px; background: linear-gradient(rgba(39,39,39, 0.6), transparent); z-index: 100; } .nav-logo p{ color: white; font-size: 25px; font-weight: 600; } .nav-menu ul{ display: flex; } .nav-menu ul li{ list-style-type: none; } .nav-menu ul li .link{ text-decoration: none; font-weight: 500; color: #fff; padding-bottom: 15px; margin: 0 25px; } .link:hover, .active{ border-bottom: 2px solid #fff; } .nav-button .btn{ width: 130px; height: 40px; font-weight: 500; background: rgba(255, 255, 255, 0.4); border: none; border-radius: 30px; cursor: pointer; transition: .3s ease; } .btn:hover{ background: rgba(255, 255, 255, 0.3); } #registerBtn{ margin-left: 15px; } .btn.white-btn{ background: rgba(255, 255, 255, 0.7); } .btn.btn.white-btn:hover{ background: rgba(255, 255, 255, 0.5); } .nav-menu-btn{ display: none; } .form-box{ position: relative; display: flex; align-items: center; justify-content: center; width: 512px; height: 420px; overflow: hidden; z-index: 2; } .login-container{ position: absolute; left: 4px; width: 500px; display: flex; flex-direction: column; transition: .5s ease-in-out; } .register-container{ position: absolute; right: -520px; width: 500px; display: flex; flex-direction: column; transition: .5s ease-in-out; } .top span{ color: #fff; font-size: small; padding: 10px 0; display: flex; justify-content: center; } .top span a{ font-weight: 500; color: #fff; margin-left: 5px; } header{ color: #fff; font-size: 30px; text-align: center; padding: 10px 0 30px 0; } .two-forms{ display: flex; gap: 10px; } .input-field{ font-size: 15px; background: rgba(255, 255, 255, 0.2); color: #fff; height: 50px; width: 100%; padding: 0 10px 0 45px; border: none; border-radius: 30px; outline: none; transition: .2s ease; } .input-field:hover, .input-field:focus{ background: rgba(255, 255, 255, 0.25); } ::-webkit-input-placeholder{ color: #fff; } .input-box i{ position: relative; top: -35px; left: 17px; color: #fff; } .submit{ font-size: 15px; font-weight: 500; color: black; height: 45px; width: 100%; border: none; border-radius: 30px; outline: none; background: rgba(255, 255, 255, 0.7); cursor: pointer; transition: .3s ease-in-out; } .submit:hover{ background: rgba(255, 255, 255, 0.5); box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2); } .two-col{ display: flex; justify-content: space-between; color: #fff; font-size: small; margin-top: 10px; } .two-col .one{ display: flex; gap: 5px; } .two label a{ text-decoration: none; color: #fff; } .two label a:hover{ text-decoration: underline; } @media only screen and (max-width: 786px){ .nav-button{ display: none; } .nav-menu.responsive{ top: 100px; } .nav-menu{ position: absolute; top: -800px; display: flex; justify-content: center; background: rgba(255, 255, 255, 0.2); width: 100%; height: 90vh; backdrop-filter: blur(20px); transition: .3s; } .nav-menu ul{ flex-direction: column; text-align: center; } .nav-menu-btn{ display: block; } .nav-menu-btn i{ font-size: 25px; color: #fff; padding: 10px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; transition: .3s; } .nav-menu-btn i:hover{ background: rgba(255, 255, 255, 0.15); } } @media only screen and (max-width: 540px) { .wrapper{ min-height: 100vh; } .form-box{ width: 100%; height: 500px; } .register-container, .login-container{ width: 100%; padding: 0 20px; } .register-container .two-forms{ flex-direction: column; gap: 0; } } footer { position: absolute; bottom: 100%; width: 100%; background-color: transparent !important; } :root footer { background-color: transparent !important; } >

June 24, 2024 at 06:32 PM
1 reply
- html
- css
- (and 1 more)
  Tagged with:
  - html
  - css
  - php

Conflito cês com fontawesome

John Hebert Trindade posted a topic in CSS

Boa noite, tenho um projeto que utilizo o fontawesome e configurei o projeto todo para utilizar um Font-family. Quando estou no computador o projeto fica bem, no celular também fica correcto. Mas no tablet seja IOS ou Android todos os ícones do fontawesome não aparece. Como faço para utilizar no projeto todo a Font Ubuntu e não ter conflito com o fontawesome? *{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Ubuntu", sans-serif; text-decoration: none; } Já comentei a linha Font-family e não resultou

Formulário com foto

John Hebert Trindade posted a topic in CSS

Boa noite pessoal, cá estou eu a recorrer a vossa ajuda novamente. Tenho o formulário com uma foto do lado esquerdo e campos do tipo nome, endereço, cep, contatos do lado direito. Fiz o seguinte, criei uma div com o nome de linha e dentro dela criei duas div com o nome de colunas. Até aqui tudo bem, gostaria que fosse responsivo da seguinte forma, consoante o tamanho da tela ficasse um ao lado do outro e ao diminiuir a foto ficaria acima e os campos abaixo. já mudei o display para todas as opções e inclusive utilizei o @media e não funciona, vejam se conseguem me ajudar. <div class="row-input" id="dados_gerais"> <div class="column" id="foto_cliente"> <img id="img" src="app/adms/assets/images/users/1/foto.jpg"> </div> <div class="column" id="dados_cliente"> <div class="row-input"> <div class="column"> <label for="name" class="title-input">Nome:<span class="text-danger">*</span></label> <input type="text" name="name" id="name" class="input-adm" placeholder="Digite o nome completo" autocomplete="off" autofocus> </div> </div> <div class="row-input"> <div class="column"> <label for="morada" class="title-input">Morada:<span class="text-danger">*</span></label> <input type="text" name="morada" id="morada" class="input-adm" placeholder="Digite a morada"> </div> </div> <div class="row-input"> <div class="column"> <label for="localidade" class="title-input">Localidade:<span class="text-danger">*</span></label> <input type="text" name="localidade" id="localidade" class="input-adm" placeholder="Digite a localidade"> </div> <div class="column"> <label for="codigo_postal" class="title-input">Código Postal:<span class="text-danger">*</span></label> <input type="text" name="codigo_postal" id="codigo_postal" data-js="postal" maxlength="8" class="input-adm" placeholder="0000-000"> </div> </div> </div> </div> css #dados_gerais{ width: 100%; border: 1px solid #ccc; display: flex; } #foto_cliente{ width: 30%; border: 1px solid #ccc; text-align: center; display: grid; align-items: center; justify-content: center; } #foto_cliente img{ width: 90%; margin: 10px; } #dados_cliente{ width: 70%; border: 1px solid #ccc; } .row-input{ width: 100%; display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px 30px; margin-bottom: 20px; }

Erro no meu código

Joaorodrigues57 posted a topic in PHP

Boas malta, estou a desenvolver um site em react, que tem como backend PHP e a base de dados tou a utilizar MySQL, e está me aparecer este erro quando tento adicionar os dados de uns inputs na base de dados: ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:96826:14) Alguem me consegue ajudar?

November 22, 2023 at 01:27 PM
1 reply
- php
- react
- (and 3 more)
  Tagged with:
  - php
  - react
  - css
  - python
  - javascript

Clone do Website da Apple

Tome Almeida posted a topic in CSS

Boas, eu para praticar decidi começar a clonar o site da Apple. De início correu tudo bem, mas na minha última parte agora uma imagem fica bem no meu monitor mas desformata em qualquer outro monitor, eu gostava que me ajudassem a entender o porquê, visto que estou á horas a tentar resolver isto e não consigo. Peço que quando encontrarem outros pontos que deva melhorar me digam e peço que sejam compreensivos, eu sou novo nisto e quero mesmo aprender. Queria tentar mostrar o que acontece mas não consigo inserir imagens. Vou anexar um link para quem quiser fazer download de como eu vejo e quando fica desformatado. https://we.tl/t-8iyZ8lw4Ok e aqui está todo o código: html <html lang="pt"> <head> <meta charset="UTF-8"> <title>Apple (Portugal)</title> <link rel="stylesheet" href="estilos.css" type="text/css"> <link rel="icon" type="image/x-icon" href="./Project/applebrowsertab.png"> </head> <body> <div id="total"> <div id="nav-list"> <ul> <li><img src="./Project/applelogo.png"></li> <li><a href="">Loja</a></li> <li><a href="">Mac</a></li> <li><a href="">iPad</a></li> <li><a href="">iPhone</a></li> <li><a href="">Watch</a></li> <li><a href="">Airpods</a></li> <li><a href="">TV e Casa</a></li> <li><a href="">Entretenimento</a></li> <li><a href="">Acessórios</a></li> <li><a href="">Suporte</a></li> <li class="nav-list-right-logos"><img src="./Project/searchlogo.png"></li> <li><img src="./Project/baglogo.png"></li> </ul> </div> <div id="macpro-container"> <div id="container-list"> <div class="title">MacBook Pro</div> <div class="subtitle">Brutal. E brilhante.</div> <div class="links"> <a href="#"><span>Saiba mais ></span></a> <a href="#"><span>Compre ></span></a> </div> <div class="img"> <img src="./Project/macpro.png"> </div> </div> </div> <div id="imac-container"> <div id="container-list"> <div class="title">iMac</div> <div class="subtitle">Mais poder para tudo.</div> <div class="links"> <a href="#"><span>Saiba mais ></span></a> <a href="#"><span>Compre ></span></a> </div> <div class="img"> <img src="./Project/imac.png"> </div> </div> </div> <div id="iphone-container"> <div id="container-list"> <div class="title iphone15">iPhone 15 Pro</div> <div class="subtitle iphone15">Titânio. Tão forte. Tão leve. Tão Pro.</div> <div class="links"> <a href="#"><span>Saiba mais ></span></a> <a href="#"><span>Compre ></span></a> </div> <div class="img"> <img src="./Project/iphone15.png"> </div> </div> </div> </div> </body> </html> css @import url('https://fonts.googleapis.com/css?family=Noto+Sans+Batak:700|Noto+Sans+Batak:400'); @font-face { font-family: 'Sf Pro'; src: url(./Project/Fonts/SFNSDisplay-Regular.woff2); } :root { --text: #000000; --background: #fafafa; --primary: #c3c3c3; --secondary: rgb(22, 22, 23, 0.8); --links: #06c; --static: rgba(0, 0, 0, 0.1); } body { font-family: 'Sf Pro', sans-serif; scroll-behavior: smooth; } #total { position: absolute; top: 0; left: 0; width: 100%; } #nav-list { width: 100%; height: 44px; background: var(--secondary); display: flex; align-items: center; justify-content: center; position: fixed; } #nav-list ul { list-style-type: none; display: flex; align-items: center; justify-content: center; gap: 15px; } .nav-list-right-logos { margin-right: 20px; } #nav-list li { font-size: 12px; } #nav-list img { height: 17px; margin-bottom: -3px; } #nav-list a { text-decoration: none; color: var(--primary); transition: 0.2s; } #nav-list a:hover{ color: #fafafa; } #macpro-container { width: 100%; height: 692px; background: var(--background); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; margin-top: 50px; } #container-list { width: 100%; height: 692px; display: flex; flex-direction: column; align-items: center; } .title { margin-top: 50px; text-align: center; font-size: 55; font-weight: bold; margin-bottom: 3px; letter-spacing: 0.5px; } .subtitle { margin-bottom: 18px; text-align: center; font-size: 28; } .links { margin-bottom: 80px; text-align: center; position: relative; font-size: 20; } a { text-decoration: none; padding: 18px; color: var(--links); } a:hover { text-decoration: underline; } .img { margin-bottom: 20px; text-align: center; } #imac-container { width: 100%; height: 692px; background: var(--background); display: flex; align-items: center; justify-content: center; } #iphone-container { width: 100%; height: 692px; margin-top: 10px; background-color: #000000; display: flex; align-items: center; justify-content: center; } #iphone-list { width: 100%; height: 692px; display: flex; flex-direction: column; align-items: center; } .iphone15 { color: #fafafa; } Mais uma vez, peço que sejam compreensivos e aceito qualquer tipo de crítica construtiva!!

Trabalho de escola

awf posted a topic in HTML

Boa noite Portugal-a-Programar. Necessito de ajuda para um trabalho de escola, um site respondido com um layout básico feito em html+css mas apesar de já ter tentado de tudo não consigo fazê-lo. Estive em isolamento do Covid durante alguns dias e tive de aprender a matéria sozinho e por isso peço ajuda.

Alinhamento da barra da metereologia com a data e hora!

José Moreira posted a topic in HTML

Olá a todos, bom dia, estou fazendo um site pessoal para divulgar meus trabalhos multimídia. Como minha principal preocupação é o alinhamento de divs e seções, agradeço muito sua ajuda. Minhas dúvidas estão nos comentários. E eu também os envio aqui.   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>  <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>  <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>    <section class="header" id="header"> <div class="datetime" style="width:150px"> <p id="date">Sat 11 Sep 2021</p> <p id="time">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> </div>  <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>   <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>  <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>  <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>   <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>   <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 cum 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 cum 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 cum 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 cum 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 cum 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 cum animi harum distinctio et.</p> <a href="#" class="btn">read more</a> </div> </div> </div> </section>   <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>  <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">  <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>  <div class="footer"> <div class="container> <div class="container copyright d-flex-r justify-content-space-around"> <ul class="d-flex-r my-1"> <li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li> <li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li> <p class="text-center my1">©Copyright 2022.Designed by José Moreira</p> </ul> </div> <div class="d-flex-r justify-content-center"> <a href="#home"><i class="fas fa-angle-up"></i></a> </div> </div> </div>   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  <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) */ } .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%; } } sccript.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); }; 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); }; Agradeço imenso a vossa ajuda, por favor. Aguardando uma resposta breve de vossa parte. Cumprimentos José Moreira Ps: https://codepen.io/Quencyjones79/pen/gOXQrbV (imagens para ajuda referidas em cima)- https://mab.to/64upEF7st todo o código-fonte.: https://mab.to/S7mtJ2kmh

March 2, 2022 at 12:49 PM
2 replies
- html
- css
- (and 1 more)
  Tagged with:
  - html
  - css
  - javascript

Simular tecla pressionada ao clicar numa div

onurb22 posted a topic in Javascript

Boa tarde, estava a fazer testes num projecto com full scroll apenas com css. Na versão horizontal, e como está full screen, é necessário usar a tecla esquerda ou direita do teclado para mover entre secções. Então queria criar uma seta numa div que ao ser clicada simulava que tinha sido pressionada a tecla esquerda ou direita. Mas não estou a conseguir. Abaixo o meu código. Um grande obrigado <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/style2.css"> <title>PROJECTO</title> </head> <body> <div class="slider"> <section> <div id="seta" style="">Seta</div> <h1>Section One</h1> </section> <section> <h1>Section Two</h1> </section> <section> <h1>Section Three</h1> </section> <section> <h1>Section Four</h1> </section> <section> <h1>Section Five</h1> </section> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $( "#seta" ).click(function() { console.log("entrou"); var e = jQuery.Event("keydown"); e.which = 39; // tecla direita $("body").trigger(e); }); </script> * { box-sizing: border-box; margin: 0; padding: 0; } body { overflow-y: hidden; } .slider { font-family: sans-serif; scroll-snap-type: x mandatory; display: flex; -webkit-overflow-scrolling: touch; overflow-x: scroll; } section { border-right: 1px solid white; padding: 1rem; min-width: 100vw; height: 100vh; scroll-snap-align: start; text-align: center; position: relative; } #seta{ background: #000; width: 50px; height: 20px; color: #fff; } .one{ background: rgb(5, 54, 125); } .two{ background: rgb(43, 211, 148); } .three{ background: rgb(5, 54, 125); } .four{ background: rgb(43, 211, 148) }

Centralizar menu

John Hebert Trindade posted a topic in CSS

Bom dia pessoal, não sei porque não consigo centrar minha barra de menu, já devo ter passado por cima do erro e não o vejo, será que alguém poderia ajudar me. Desde já obrigado. <div id="area-menu"> <nav id="menu"> <ul id="navegacao"> <li class="selecionado"><a href="index.html"></a></li> <li ><a href="artista.html"></a></li> <li ><a href="eventos.html"></a></li> <li ><a href="contacto.html"></a></li> </ul> </nav> </div> Ficheiro css #area-menu{ padding-top: 5px; } nav#menu{ margin: 0 auto; padding: 0; display: flex; align-items:center; max-width: 1020px; width: 100%; height:55px; } nav#menu ul{ display: block; text-align: center; justify-content:center; align-items:center; padding: 0; margin: 0 auto; width: 100%; } nav#menu ul li{ float: left; padding: 0px; list-style: none; position: relative; margin: 5px; } nav#menu ul li a{ display: block; width: 130px; font-family: 'Niconne', cursive; color:#8a1100; font-size:20px; padding:9px 17px; text-decoration: none; height:40px; box-shadow:2px 2px 3px #555; border-radius:3px; background: url('../imgs/menu.jpg') center bottom no-repeat; cursor:default; z-index: 1; }

ERR_FILE_NOT_FOUND"

Barroso6 posted a topic in HTML

Estou a refazer um site de um cliente e as imagens não aparecem O html: <section class="u-align-center u-clearfix u-image u-shading u-section-1" href="img/pedrafundo2.jpg" data-image-width="1280" data-image-height="853"> <div class="u-clearfix u-sheet u-sheet-1"> <h1 class="u-text u-text-default u-text-1"> Mesas por Medida<br>Casa & Hotelaria</h1> <p class="u-large-text u-text u-text-variant u-text-2"> Fabricamos mesas altas, baixas, compridas, largas, 100% Personalizadas ao seu gosto! Preparadas para um uso diário e intensivo!</p> <a target="_blank" href="https://www.youtube.com/channel/UCZbv8-ylGYp4PITuZ-d-kqQ/playlists" class="u-border-none u-btn u-button-style u-hover-palette-5-base u-palette-5-light-1 u-btn-1"> Veja os nossos testes de resistência</a> </div> </section> O css .u-section-1 { background-position: 50% 50%; background-image: url('img/pedrafundo2.jpg'); } as outras mods são só visuais para o texto e essas coisas na ferramenta de inspecionar do google na consola encontrei um aviso a dizer "ERR_FILE_NOT_FOUND"

Como coloco o site responsivo de forma mais otimizada

Tiago_Mendes posted a topic in HTML

Estou com uma questão e já não me recordo do método, sei que existia uma forma atomizada de colocar o site responsivo alguém sabe qual é? HTML <!DOCTYPE html> <html lang="pt"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="(min-width: 800px)" href="style\style.css"> <link rel="stylesheet" type="text/css" media="(max-width: 800px)" href="style\mobile.css"> </head> <body> <div class="img1"> <img src="logo.png"width="10%" height="15%"> </div> <header> <ul class="menul"> <li class="menuil"><a href="./contact.html">Contactos</a></li> <li class="menuil"><a href="./portfoliomain.html">Portfólio</a></li> <li class="menuil"><a href="./service.html">Serviços</a></li> <li class="menuil"><a href="./about.html">Sobre Nós</a></li> <li class="menuil"><a href="../index.html">Home</a></li> </ul> </header> <div class="descimg1"> <h6>Badger Tech</h6> </div> <div class="fc"> <div class="fci"> <div class="fcf"> <img src="img/about.jpg" class="imgbout1" alt="about"> </div> <div class="fcb"> <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></b> aqui.</p> </div> </div> </div> <div class="spcH"></div> <div class="fc2"> <div class="fci2"> <div class="fcf2"> <img src="img/quefazes.jpg" class="imgbout1" alt="quefazemos" > </div> <div class="fcb2"> <h1>bbbbbbbbbbbbbbbbbbbbbb</h1> <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p> </div> </div> </div> <div class="fc3"> <div class="fci3"> <div class="fcf3"> <img src="img/horas.jpg" class="imgbout1" alt="horas"> </div> <div class="fcb3"> <h1>cccccccccccccccccccccccccccc</h1> <p>ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</p> </div> </div> </div> <br> <br> <br> <br> <br> <br> <footer> <h6 class="copyr"> © </h6> </footer> </body> </html> css /* about us*/ /*fc1*/ .fc { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:5%; margin-left:10%; } .fci { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc:hover .fci { transform: rotateY(-180deg); } .fcf, .fcb { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf { color: white; } .fcb { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*fc2*/ .fc2 { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:-44.222222%; margin-left:40%; } .fci2 { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc2:hover .fci2 { transform: rotateY(-180deg); } .fcf2, .fcb2 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf2 { color: white; } .fcb2 { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*fc3*/ .fc3 { background-color: transparent; width: 300px; height: 600px; perspective: 1000px; margin-top:-44.233333333%; margin-left:70%; } .fci3 { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .fc3:hover .fci3 { transform: rotateY(-180deg); } .fcf3, .fcb3 { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .fcf3 { color: white; } .fcb3 { background-image: linear-gradient(#f24236 , rgba(0,0,0,0)); color: white; transform: rotateY(180deg); } /*a about*/ .aabout{ color: black; } .imgbout1{ width:300px; height:600px; } tem mais codigo mas decidi colocar só esta pagina Alguém me pode ajudar?

Formatação

John Hebert Trindade posted a topic in CSS

Boa tarde pessoal. Estou formatando com css um menu de um site, o problema é que com a função hover funciona, mas quando coloco numa classe active não, o que pode estar errado. Arquivo css nav#menu li:hover{ background-position:top; color:firebrick; } nav#menu ul li a.active{ background-position:top; color:firebrick; } arquivo html <nav id="menu"> <section> <ul> <li> <a href='index.php' class='active'> Inicio</a></li> <li> <a href='artista.php' > Artista</a></li> <li> <a href='comments.php' > Comentários</a></li> <li> <a href='contactos.php' > Contactos</a></li> </ul> </nav> </section>

a+a

John Hebert Trindade posted a topic in CSS

Boa tarde pessoal. Sei que, quando colocamos o "a" no css estamos a formatar um link (a href), mais não sei o que quer dizer quando é a+a, alguem pode me explicar. exemplo nav#menu a+a:before{ }

Pop Up apenas com html e css

Jmc2020 posted a topic in CSS

Boa noite pessoal espero que estejam todos bem!!! Estou a tentar criar um popup apenas com html e css e, embora já tenho conseguido em parte, sempre que dou refresh à página o popup aparece por breves segundos... Estes são os códigos que tenho, tanto css e html: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"><meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="QuemSomos.css"> <title>Quem Somos</title> </head> <body> <header class="header"> <nav> <a href="#"><img class="logo" src="#" alt="Foto da Loja"></a> <ul class="headerLinks"> <li class="headerLI"><a href="#">Página Inicial</a></li> <li class="headerLI"><a class="selecionado" href="#">Quem Somos</a></li> <li class="headerLI"><a href="#">Login</a></li> </ul> </nav> </header> <br><br> <footer class="footer"> <ul class="footerLinks"> <li class="footerCTG"><a href="#">FPS</a></li> <li class="footerCTG"><a href="#">RPG</a></li> <li class="footerCTG"><a href="#">Desporto</a></li> <li class="footerCTG"><a href="#">Sobrevivência</a></li> </ul> <ul class="footerLinks2"> <li class="footerCTG"><a href="#">Estratégia</a></li> <li class="footerCTG"><a href="#">Corrida</a></li> <li class="footerCTG"><a href="#">Simulação</a></li> </ul> <ul class="footerLinksCtc"> <li class="footerCTG"><a class="butaoPopup" href="#">Contactos:</a></li> <div id="popup1" class="overlay"> <div class="popup"> <h2>Contactos:</h2> <a class="fechar" href="#">×</a> <div class="conteudo"> Nº de Telémovel: [...] <br> Email: [...] </div> </div> </div> </ul> <ul class="footer_imagem"> <li class="footerIMG"><img class="IPSIMG" src="ESTS.png" alt="Localização da loja"></li> </ul> </footer> </body> </html> CSS: body{ font-family: verdana; margin: 0; } /* Header */ .header{ margin: 5px; background-color: gray; padding: 20px; border-radius: 15px; text-align: center; height: 80px; } .logo{ float: left; margin: 0; padding: 0; max-width: 95px; height: auto; } ul.headerLinks{ float: right; list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li.headerLI{ float: left; margin: 0; padding: 20px 20px 3px 3px; } li a{ display: inline-flex; color: white; text-align: center; padding: 12px 14px; border-radius: 5px; text-decoration: none; } li a.selecionado{ background-color: darkred; } li a:hover:not(.selecionado){ background-color: darkred; } /* Fim do header */ /* Footer */ .footer{ margin: 5px; background-color: gray; padding: 20px; border-radius: 15px; text-align: center; height: 250px; } ul.footerLinks{ float: left; text-align: left; list-style-type: none; margin: 5px; margin-left: 100px; padding-top: 40px; padding-right: 1px; padding-left: 25px; padding-bottom: 10px; overflow: hidden; } ul.footerLinks2{ float: left; text-align: left; list-style-type: none; margin: 5px; margin-left: 15px; padding-top: 85px; padding-left: 1px; padding-right: 25px; padding-bottom: 10px; overflow: hidden; } ul.footerLinksCtc{ float: left; text-align: left; list-style-type: none; margin: 5px; margin-left: 15px; padding-top: 170px; padding-left: 1px; padding-right: 25px; overflow: hidden; } .butaoPopup{ cursor: pointer; } .overlay{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target{ visibility: visible; opacity: 1; } .popup{ margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 0.5s ease-in-out; } .popup h2{ margin-top: 0; color: #333; font-family: verdana; } .popup .fechar{ position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .fechar:hover{ color: darkred; } .popup .conteudo{ max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .footerCTG{ width: 70%; } .popup{ width: 70%; } } ul.footer_imagem{ float: right; list-style-type: none; margin: 5px; margin-left: 15px; padding-top: 50px; padding-left: 1px; padding-right: 200px; padding-bottom: 50px; overflow: hidden; } img.IPSIMG{ border-radius: 15px; margin: 0; padding: 0; max-width: 150px; height: auto; } /* Fim do Footer */ Para já ainda só tenho o footer e header, entrentanto vou adiantar o main content. Desde já peço desculpa pela mensagem tão grande. Em relação ao problema, se me puderem ajudar agradecia imenso!!! Cumprimentos e mantenham-se seguros 🙂

Responsividade

miguel_macedo posted a topic in CSS

Boa Tarde Como é que eu coloco o código responsivo ? <section class="mt-5" id="menu"> <div class="container"> <div class="row"> <div class="col"> <h2 class="text-center">Menu</h2> </div> </div> <div class="row"> <div class="col"> <nav class="section_menu__nav"> <ul> <li class="active"> <a href="javascript:void(0)" data-filter="1">Almoço & Jantar</a> </li> <li> <a href="javascript:void(0)" data-filter="2">Bebidas</a> </li> </ul> </nav> </div> </div> <div class="row filter-container"> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/5.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Picanha Grelhada</h4> <p>Acompanhamento: Arroz, Batatas Fritas</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">15,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/11.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Verde Gazela</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">5,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/6.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Filetes de Pescada </h4> <p>Acompanhamento: Arroz, Salada, Limão, Salsa</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">9,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/12.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Tinto Qtª da Espiga</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">95,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/7.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Entrecosto Grelhado</h4> <p>Acompanhamento: Batatas Assadas, Arroz, Limão, Cebola</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">12,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/13.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Tinto Barca Velha</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">650,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/8.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Sardinhas Grelhadas</h4> <p>Acompanhamento: Batatas Cozidas, Limão, Molho à Escabeche</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">13,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/14.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Vinho Tinto Mouchão</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">175,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/9.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Salmão Assado</h4> <p>Acompanhamento: Molho de Cogumelos</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">7,50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/16.png" alt="..."> </div> </div> <div class="col-7"> <h4>Quinta dos Carvalhais Tinto</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">8.50€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="1" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/10.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Bifinhos de Frango</h4> <p>Acompanhamento: Puré de Batata Doce</p> </div> <div class="col-2"> <div class="section_menu__item__price text-center">10,00€</div> </div> </div> </div> </div> <div class="col-md-6 filtr-item" data-category="2" data-sort="value"> <div class="section_menu__item"> <div class="row"> <div class="col-3"> <div class="section_menu__item__img"> <img src="assets/img/15.jpg" alt="..."> </div> </div> <div class="col-7"> <h4>Rótulo Touriga Nacional</h4> </div> <div class="col-2"> <div class="section_menu__item__price text-center">6.50€</div> </div> </div> </div> </div> </div> </div> </section> .section_menu__item__price{ margin-top: 0; margin-bottom: .5rem; } .section_menu__item__price{ font-family: Playfair Display,serif; font-weight: 400; line-height: 1.42857; margin-bottom: .5rem; color: #151515; } .section_menu__item__price{ margin-bottom: .8em; } .section_menu__item__price{ font-size: 1.375rem; } .section_menu__item { padding: 1rem 0; border-bottom: 1px solid #f0f0f0; } .section_menu__item__img { position: relative; overflow: hidden; height: 0; padding-bottom: 100%; } .section_menu__item__img>img { position: absolute; top: 0; left: 0; width: auto; max-width: 1000px!important; height: 100%!important; max-height: 100%; } .section_menu__nav>ul { padding-left: 0; list-style-type: none; text-align: center; } .section_menu__nav>ul>li { display: inline-block; } .section_menu__nav>ul>li>a { font-family: Lato,sans-serif; font-size: .75rem; font-weight: 900; position: relative; display: block; padding: 1rem; transition: color .1s; letter-spacing: .05em; text-transform: uppercase; color: #777; } .section_menu__nav>ul>li>a:active,.section_menu__nav>ul>li>a:active:focus,.section_menu__nav>ul>li>a:active:hover,.section_menu__nav>ul>li>a:focus,.section_menu__nav>ul>li>a:hover { text-decoration: none; color: #151515; } .section_menu__nav>ul>li.active>a:after { transform: translateY(0); opacity: 1; } Na transição desta imagem: https://prnt.sc/t71lva e esta https://prnt.sc/t71lyv . o site fica sem responsabilidade!

Responsivo

John Hebert Trindade posted a topic in CSS

Boa tarde pessoa, para me facilitar meu trabalho estou tentando criar um sistema para preencher automaticamente uns documentos, mais para isso quero criar uma tela de login responsivo, para todos os formatos, até ai tudo bem. Três coisa não estou conseguindo fazer bem. Quando estou com o telemóvel em pé fica bem, quando viro-o fica desconfigurado. Onde estou a errar? E também a imagem do user e Background não fica correctamente, terei que usar média Queries para cada formato? Índex.php <!DOCTYPE html> <html lang="pt-pt"> <head> <meta charset="UTF-8"> <title>Preenchimento de Documentos</title> <link rel="stylesheet" href="css/estilo.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <header> <div class="formulario"> <h1>Login</br><small> versão 1.0</small></h1> <div class="img-user"> <img src='imgs/img-user.png'> </div> <h2>Autenticação do Sistema</h2> <form> <div class="campo"> <input type=text required=""> <label>email</label> </div> <div class="campo"> <input type=password required=""> <label>Password</label> </div> <input type="checkbox" checked="checked" class="checkbox"> <label class= "checkbox2">guardar dados</label></br></br> <button>Entrar</button> <p id="registo">Registar</p> </form> </div> </header> </body> </html> estilo.css @charset "UTF-8"; *{ padding: 0; margin: 0; box-sizing: border-box; font-family: arial; } body{ width: 100%; height: auto; } header{ height: 100vh; width: 100%; background: url('../imgs/bg.gif'); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items:center; user-select:none; } .img-user{ width:100px; height:100px; left:0; right:0; margin:auto; top: 18%; position: absolute; background:#fff; border-radius:50%; display:flex; justify-content: center; } .img-user img{ width:80%; } h1{ margin-top: 50px; text-align:center; font-size:2rem; } h1 small{ font-size: 1rem; color:gray; } h2{ text-align:center; margin: 20px; } header .campo input{ width:90%; padding:10px; font-size:17px; background: transparent; border:none; border-bottom: solid 1px black; letter-spacing:2px; outline:none; margin:20px; } .formulario{ height: 550px; padding: 20px; background: rgba(255,255,255,0.5); border-radius:40px 10px 40px 10px; box-shadow: 0 20px 20px; } header .campo{ position: relative; } header .campo label{ position:absolute; top:0; left:0; padding: 10px; margin-left: 10px; font-size:16px; pointer-events: none; } header .campo input:focus~label, header .campo input:valid~label{ top:-20px; transition:0.5s; font-size:10px; } .checkbox2{ font-size: 13px; } header button{ width:100%; height:40px; border:none; outline:none; background: linear-gradient(to right, #505050, #909090); color: #fff; padding:10px 20px; font-size:15px; cursor:pointer; border-radius: 4px; } #registo{ margin-top: 20px; font-weight:bold; text-align:center; cursor:pointer; }

Enviar dados local storage para uma div

Gonçalo Costa posted a topic in Javascript

Boa tarde, Sou iniciante em javascript, e estava a fazer um site em que pretendia colocar um carrinho de compras. Não posso usar Jquery. O que fiz foi primeiramente colocar os dados em local storage, e quando se clicar no carrinho de compras, mostrar uma div com os dados que foram guardados em local storage. A minha dificuldade é passar os dados de local storage para o programa, e apresentá los numa div. segue parte do código que fiz. <div class="carrinho_de_compras_total"> <button onclick="mostrar()">carrinho_de_compras</button> <div class="mostrar_carrinho_de_compras" style="height: 200px; width: 100%;"> <div class="itens"></div> <div class="total_dinheiro"></div> </div> </div> function compra_bilhete(n) { if(n==1) { var tipo_bilhete= "espetáculo"; ndias=1; var nome=document.getElementById('tipo_b1').innerHTML; var nadultos=document.getElementById('a_b1').value; var ncriancas=document.getElementById('c_b1').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==2) { var tipo_bilhete= "espetáculo"; ndias=1; var nome=document.getElementById('tipo_b2').innerHTML; var nadultos=document.getElementById('a_b2').value; var ncriancas=document.getElementById('c_b2').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==3) { var tipo_bilhete= "espetáculo"; ndias=1; var nome=document.getElementById('tipo_b3').innerHTML; var nadultos=document.getElementById('a_b3').value; var ncriancas=document.getElementById('c_b3').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } // else if(n==4) // { // var tipo_bilhete= "espetáculo"; // // var ndias=document.getElementById('dias_b2').innerHTML; // var tipo_espetaculo=document.getElementById('tipo_b3').innerHTML; // var nadultos=document.getElementById('a_b4').value; // var ncriancas=document.getElementById('c_b4').value; // var preco; // preco= 50*nadultos + 30*ncriancas; // } else if(n==5) { var tipo_bilhete= "Parque"; var ndias=document.getElementById('dias_p1').value; var nome=document.getElementById('tipo_p1').innerHTML; var nadultos=document.getElementById('a_p1').value; var ncriancas=document.getElementById('c_p1').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==6) { var tipo_bilhete= "Parque"; var ndias=document.getElementById('dias_p2').value; var nome=document.getElementById('tipo_p2').innerHTML; var nadultos=document.getElementById('a_p2').value; var ncriancas=document.getElementById('c_p2').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } else if(n==7) { var tipo_bilhete= "Parque"; var ndias=document.getElementById('dias_p3').value; var nome=document.getElementById('tipo_p3').innerHTML; var nadultos=document.getElementById('a_p3').value; var ncriancas=document.getElementById('c_p3').value; if(nadultos==0 & ncriancas==0) { alert("numero de pessoas inválido"); return } preco_dia= 50*nadultos + 30*ncriancas; precoTotal=preco_dia *ndias; } // Pega a lista já cadastrada, se não houver vira um array vazio var carrinho_de_compras = JSON.parse(localStorage.getItem('carrinho-compras') || '[]'); // Adiciona reserva carrinho_de_compras.push({ tipo_de_bilhete: tipo_bilhete, dias: ndias, nome:nome, numero_adultos: nadultos, numero_criancas: ncriancas, preco_total: precoTotal }); // Salva a lista alterada localStorage.setItem("carrinho-compras", JSON.stringify(carrinho_de_compras)); alert("Bilhete adicionado ao carrino de compras"); } function mostrar(){ for (i=0;i<99;i++) { var x=JSON.parse(localStorage.getItem('carrinho-compras')); if(x==null) return; // quando não houver mais dados no local storage, sai do ciclo for } } Se alguém me pudesse ajudar agradecia imenso. Cumprimentos

January 4, 2020 at 04:51 PM
1 reply
- javascript
- html
- (and 1 more)
  Tagged with:
  - javascript
  - html
  - css

Comando após carregar em botão

Vitor Morim posted a topic in HTML

Boa noite caros Programadores, Estou a precisar de fazer um botão em que o comando deste é dado quando este é pressionado, isto é, (num smartphone) eu mal pressione com o dedo o botão, este envie logo o comando, e não espera que retire o dedo. Isto é possível? Não sei se me fiz entender. Obrigado

vertical Align middle não funciona nem com position: relative

Carlos Rocha posted a topic in CSS

Preciso fazer com que as spans e a ul fiquem alinhadas verticalmente ao centro da div#banner mas não está funcionando como tentei! Fiz uma tentativa e cheguei mais perto, embora o conteúdo tenha alinhado ao centro verticalmente como era o esperado, parece que não ocupou verticalmente todo a altura da div#banner.. html, body { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: content-box; } #banner { position: relative; width: 1536px; height: 610px; background-image: url("img/home1.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; z-index: -1; } #banner:before { content: ''; position: absolute; width: 100%; height: 100%; margin: 0 auto; background-image: linear-gradient(#004425, #072f1c 130%); opacity: .6; } #banner span { display: block; font-weight: bolder; font-size: 20pt; } #banner span, #banner ul { vertical-align: middle; display: inline-block; } <div id='banner'> <span id=volta><</span> <ul> <li><h1>Teste 1</h1></li> <li><h2>Teste 2</h2></li> </ul> <span id=avanca>></span> </div>

Bloco entrando na div

Carlos Rocha posted a topic in CSS

Então, tenho o css html, body { margin: 0; padding: 0; } #banner { position: relative; width: 1536px; height: 610px; background-image: url("img/home1.jpg"); background-attachment: fixed; background-repeat: no-repeat; background-position: center top; z-index: -1; } #banner:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(#004425, #072f1c 130%); opacity: .6; } e, o HTML <div id=banner></dv> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> teste <br /> Funciona corretamente. No entanto, o bloco de teste <br /> Não desce, fica no fundo da div.banner. Porque?

Link href

John Hebert Trindade posted a topic in CSS

Bom dia pessoal, em alguma parte do meu código css estou desabilitando meus href sem querer, isso acontece quando a tela fica inferior a 767px. Por favor ajudem, já estou cansado de olhar e não consigo encontrar. /* Base */ * { outline:none; } html, body { height: 100%; } body { font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 1.6em; color: #8c8c8c; background-color: #fff; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; } a { color: #404040; } a:hover { color: #404040; transition-property: all; transition-duration: 0.3s; transition-timing-function: linear; } a.none:hover { text-decoration: none; } /* Header */ .logo{ background-image: url(img/logotipo.png); background-size: contain; background-position:center center; background-repeat: no-repeat; font-size:0; width:350px; height: 150px; } .top { background: linear-gradient(to right, #efefef, #4169E1); padding: 5px 0; color: #fff; } .top p { margin: 0; } .top ul { margin: 0; padding: 0; } .top li i { color: #fff; } .top li a { color: #fff; } .top li a:hover { text-decoration: none; } .top li a:hover,.top li a:hover i { color: #005FA6; transition-property: all; transition-duration: 0.3s; transition-timing-function: linear; } /* Menu */ .navbar { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; margin-bottom: 0; } .navbar .container { position: relative; } .navbar-default { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 100%; border: none; border-bottom: 1px solid #e7e7e7; background-color: #fff; } .navbar-default .navbar-nav > li > a { color: #404040; font-weight: normal; font-size: 13px; } .navbar-default .navbar-nav > li > a:hover { background-color: transparent; color: #005FA6; } .navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:hover,.navbar-default .navbar-nav > .open > a:focus { background-color: transparent; color: #005FA6; } .navbar-default .navbar-nav .active > a,.navbar-default .navbar-nav .active > a:hover,.navbar-default .navbar-nav .active > a:focus { color: #005FA6; background-color: transparent; } .navbar-default .navbar-toggle { margin: 10px 0 0 15px; } .navbar-default .navbar-toggle,.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus { border: none; background: #f3f3f3; } .navbar-default .navbar-toggle i { font-size: 31px; } .navbar-default .navbar-collapse { float: right; border-top: none; padding-left: 0; padding-right: 0; } .navbar-brand>img { padding: 5px; } @media screen and (max-width: 768px) { .navbar-default .navbar-collapse { padding-left: inherit; padding-right: inherit; } } @media screen and (max-width: 992px) { .navbar-default .navbar-collapse { width: 100%; margin-left: 0; margin-right: 0; max-height: none; } } @media (min-width:768px) { .navbar>.container .navbar-brand,.navbar>.container-fluid .navbar-brand { margin-left: 0; } } .main-navbar-nav { -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .main-navbar-nav > li > a { padding-top: 30px; padding-bottom: 30px; line-height: 1; } .main-navbar-nav li > .dropdown-menu { -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; min-width: 225px; border: none; border-top: 2px solid #005FA6; } .main-navbar-nav li > .dropdown-menu > li > a { padding: 10px; position: relative; color: #404040; line-height: 1.12857143; font-size: 12px; } .main-navbar-nav li > .dropdown-menu > li > a:hover,.main-navbar-nav li > .dropdown-menu > li > a:focus { color: #005FA6; background-color: transparent; } .main-navbar-nav li > .dropdown-menu > li > a i { position: absolute; right: 20px; top: 50%; margin-top: -8px; font-size: 16px; } @media screen and (min-width: 993px) { .main-navbar-nav .dropdown:hover > .dropdown-menu { display: block; } .main-navbar-nav .dropdown:hover > .dropdown-menu .dropdown:hover .dropdown-menu { left: 225px;top: 0; margin-top: -2px; } } @media screen and (max-width: 992px) { .main-navbar-nav > li { border-bottom: 1px solid #f3f3f3; } .main-navbar-nav > li:last-child { border-bottom: none; } .main-navbar-nav > li > a { padding-top: 12px; padding-bottom: 12px; } } .navbar-brand { height: auto; padding: 0; } @media screen and (max-width: 992px) { .navbar-toggle { display: block; } .navbar-collapse.collapse { display: none !important; } .main-navbar-nav.navbar-nav,.main-navbar-nav.navbar-nav > li { float: none !important; } .navbar-collapse.collapse.in { display: block !important; overflow-y: auto !important; } } /* Hero */ .hero_area { background-image: url(img/hero.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 475px; padding: 0; } .hero_content { padding: 80px 0; } .hero_content h1 { text-shadow: 1px 1px 2px rgba(0,0,0,0.75); color: #005FA6; font-weight: 700; font-size: 42px; } .hero_content h2 { text-shadow: 1px 1px 2px rgba(0,0,0,0.25); color: #000; font-weight: 700; font-size: 32px; margin-top: 0; width: 55%; line-height: 38px; text-align:center; } /* Boxes */ .boxes_area { padding-top: 40px; padding-bottom: 10px; padding-left: 0; padding-right: 0; background-color: #f8f8f8; } .box { position: relative; } .box h3 { position: relative; margin-bottom: 20px; padding-bottom: 20px; } @media (min-width:769px) { .boxes_area div[class*="col-"]:after { content: " "; display: block; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #ebebeb; } .boxes_area div[class*="col-"]:last-child:after { display: none; } } /* Home */ .home_content h2:after,.box h3:after { content: ''; position: absolute; width: 30px; background-color: #005FA6; height: 2px; left: 0; bottom: 0; } .box i { position: absolute; right: 0; top: 0; margin: 0; color: #005FA6; font-size: 45px; } .boxes_area h3 { font-size: 16px; font-weight: 500; margin-top: 0; margin-bottom: 18px; } .boxes_area .box p{ text-align: justify; padding-top:5%; } .services { padding-top: 50px; padding-bottom: 50px; } h2.section-title { text-align: center; color: #404040; } .services p.desc { text-align: center; font-size: 13px; margin-bottom: 20px; } .services .media { margin-top: 30px; } .services .media i { font-size: 45px; color: #005FA6; } .services .media h4 { font-size: 15px; font-weight: 600; color: #404040; } .services .media p { text-align: justify; } /* Veja Também */ .home-area { padding-bottom: 50px; } .home_content h2 { position: relative; font-size: 17px; font-weight: 600; padding-bottom: 20px; color: #404040; margin-bottom: 30px; } .home_list ul { margin: 0; padding: 0; float: left; width: 100%; } .home_list ul li { list-style: none; } .home_list .thumbnail { border: none; padding: 0; } .thumbnail .caption { padding: 9px; color: #404040; padding-left: 0; padding-right: 0; } .home_list h3 { font-size: 16px; font-weight: 600; margin-top: 10px; margin-bottom: 10px; color: #404040; } .home_list p { color:#8c8c8c; } .home_list a.btn { font-size: 13px; padding: 0; color: #005FA6; } .home_bottom .row { margin-left: -5px; margin-right: -5px; } .home_bottom div[class*="col-"] { padding-right: 5px; padding-left: 5px; position: relative; } /* Referencias */ .carousel-control{ width: 4%; } .carousel-control.left,.carousel-control.right { margin-left:0; background-image:none; } @media (max-width: 767px) { .carousel-inner .active.left { left: -100%; } .carousel-inner .next { left: 100%; } .carousel-inner .prev { left: -100%; } .active > div { display:none; } .active > div:first-child { display:block; } } @media (min-width: 767px) and (max-width: 992px ) { .carousel-inner .active.left { left: -50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .active > div { display:none; } .active > div:first-child { display:block; } .active > div:first-child + div { display:block; } } @media (min-width: 992px ) { .carousel-inner .active.left { left: -25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } } /* Rodape */ footer.site-footer { background: #e6e6e6; padding: 20px 0 0; float: left; width: 100%; } footer.site-footer h4 { font-size: 17px; font-weight: 500; } footer.site-footer ul { padding-left: 0; margin-bottom: 20px; list-style: none; } footer.site-footer ul a { color: #666; font-size: 13px; } footer.site-footer p { font-size: 13px; } footer.site-footer p a { color: #666; } p.text { color: #666; } #copyright { background: #404040; color: #ccc; padding: 15px 0; font-size: 12px; margin-top: 20px; } #copyright p{ margin: 0; float: left; font-size: 12px; text-align: center; } .site-footer li a:hover { color:#005FA6; } ul.big li { float: left; width: 49%; } ul.big li:nth-child(2n) { margin-left: 2%; } @media (max-width:462px) { .fbox:last-child { margin-top: 20px; float: left; width: 100%;} } /* Maillist */ .login-form-1 { max-width: 300px; border-radius: 5px; display: inline-block; } .main-login-form { position: relative; } .login-form-1 .form-control { border: 0; box-shadow: 0 0 0; border-radius: 0; background: transparent; color: #555555; padding: 7px 0; font-weight: bold; height:auto; } .login-form-1 .form-control::-webkit-input-placeholder { color: #999999; } .login-form-1 .form-control:-moz-placeholder,.login-form-1 .form-control::-moz-placeholder,.login-form-1 .form-control:-ms-input-placeholder { color: #999999; } .login-form-1 .form-group { margin-bottom: 0; border-bottom: 2px solid #fff; padding-right: 20px; position: relative; } .login-form-1 .form-group:last-child { border-bottom: 0; } .login-group { background: #efefef; color: #999999; border-radius: 8px; padding: 10px 20px; } .login-group-checkbox { padding: 5px 0; } .login-form-1 .login-button { position: absolute; right: -25px; top: 50%; background: #ffffff; color: #999999; padding: 11px 0; width: 50px; height: 50px; margin-top: -25px; border: 5px solid #efefef; border-radius: 50%; transition: all ease-in-out 500ms; } .login-form-1 .login-button:hover { color: #555555; transform: rotate(450deg); } .login-form-1 .login-button.clicked { color: #555555; } .login-form-1 .login-button.clicked:hover { transform: none; } .login-form-1 .login-button.clicked.success { color: #2ecc71; } .login-form-1 .login-button.clicked.error { color: #e74c3c; } /* Breadcrumb */ .bread_area { border-bottom: 1px solid #e7e7e7; padding: 10px 0; margin-bottom: 40px; } .breadcrumb { margin: 0; background: #fff; padding: 0; } /* Page */ .page-main { float: left; width: 100%; background-color: #fff; margin-bottom: 30px; line-height: 3.0em; text-align: justify; } .contact{ line-height: 2.0em; } /* Entry (Contacto) */ .entry{ padding: 5%; } /* Category - Florista - frota */ .category-main { float: left; width: 100%; background-color: #fff; margin-bottom: 30px; } .category-content h3 { font-size: 19px; margin-bottom: 20px; } .category-main .media { margin-top: 30px; } .category-main .media:first-child{ margin-top: 0; } .category-main ul li { list-style: none; position: relative; } .category-main .media-left { padding-right: 20px; } .category-main .meta { position: absolute; bottom: 0; border-bottom: 2px solid #e7e7e7; width: 71%; min-height: 30px; line-height: 24px; padding-bottom: 3px; } .category-main .category-meta { width: 67%; } .category-main .meta .arc-comment { float: left; margin-right: 5px; border-right: 2px solid #e7e7e7; padding-right: 7px; } .category-main .meta .arc-comment a, .archive ul.arc-share li a { color: #333; font-size: 15px; } .category-main .meta .arc-comment a:hover, .archive ul.arc-share li a:hover { text-decoration: none; color: #ff1515; } .category-main .meta .arc-date { float: right; font-size: 15px; color: #333; } .category-main ul.arc-share { float: left; margin: 0; padding: 0; margin-right: 5px; } .category-main ul.arc-share li{ float: left; list-style: none; margin-left: 10px; } .category-main .archive-cat a { color: #ff1515; } .category-main .archive-cat a:hover { color: #333; text-decoration: none; } /* Form Contact */ .page-main .tipo_contacto{ text-align:center; } .page-main form p{ line-height:2.0em; } .page-main form input[type="text"], form input[type="email"], form input[type="url"]{ padding: 0; width:100%; height: 30px; } .page-main form textarea{ width:100%; height: 200px; } /* showroom */ .category-main ul ul{ display: none; } /* Sidebar */ .widget h4,h2.page-title, h2.category-title { position: relative; margin-top: 0; padding-bottom: 20px; margin-bottom: 20px; font-size: 17px; font-weight: 700; color: #404040; width: 100%; } .widget h4 { font-size: 15px; margin-left: 15px; } .widget h4:after,h2.page-title:after, h2.category-title:after { content: ''; position: absolute; width: 30px; background-color: #005FA6; height: 2px; left: 0; bottom: 0; } .widget { margin-bottom: 30px; } .sidebar ul { padding-left: 15px; padding-right: 15px; margin: 0; } .sidebar ul li { list-style: none; } .sidebar ul li a { padding: 3px 15px; display: block; margin-left: -15px; margin-right: -15px; color: #404040; } .sidebar li.current a { background-color: #005FA6; margin-left: -15px; margin-right: -15px; color: #FFFFFF; } .sidebar ul li a:hover { background-color: #005FA6; color: #FFFFFF; text-decoration: none; transition-property: all; transition-duration: 0.2s; transition-timing-function: linear; } /* Responsive */ @media screen and (max-width:462px) { .logo{ background-image: url(img/logotipo.png); background-size: contain; background-position:center center; background-repeat: no-repeat; font-size:0; width:250px; height: 100px; } .top { text-align: center; } .top ul.list-inline{ float: none !important; text-align: center; } .hero_content { padding: 80px 0; } .hero_content h1 { font-size: 32px; } .hero_content h2 { width: 90%; font-size: 21px; } /*.boxes_area .row {margin-left: -20px;margin-right: -20px;}*/ .boxes_area .box p { margin-bottom: 30px; } .services .media .media-left { padding-right: 15px; } .category-content .media-body { float: left; position: relative; width: 100%; } .category-content .media-body h3 { margin-top: 20px; } .category-main .meta { position: relative; width: 100%; } .category-main .meta .pull-left { margin-left: 40px; } .category-main .meta .pull-right { display: none; } .sidebar { margin-top: 40px; } } @media (min-width:463px) and (max-width:768px) { .hero_content { padding: 60px 0; } .hero_content h1 { font-size: 25px; } .hero_content h2 { padding-top: 2%; width: 55%; font-size: 20px; } .logo{ background-image: url(img/logotipo.png); background-size: contain; background-position:center center; background-repeat: no-repeat; font-size:0; width:250px; height: 100px; } .fbox { float: left; } .fbox:nth-child(3) { float: right !important; } }

Lis se reduzindo de altura

Carlos Rocha posted a topic in CSS

O código: <html> <head> <title>MVC PDO CRUD</title> <link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.png"/> <style> /* CSS Document */ @import url('http://fonts.googleapis.com/css?family=Open+Sans'); *, *:before, *:after, *:active, *:hover { font-family: 'Open Sans'; margin: 0; padding: 0; border:0; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: content-box; /*Comprimir(diminuir) as medidas do elemento para não aumentá-lo quando adicinar margin e padding*/ } ul { list-style: none; }ul.topo{ background-color: #000000; color: #FFFFFF; } ul.topo li { text-align: center; } ul.ulHorizontal { height: 50px; } ul.ulHorizontal li { display: inline-block; line-height: 50px; } ul.ulHorizontal li img { vertical-align: middle; } img { max-width: 100%; } a, a:hover { text-decoration: none; } button, input[type=button], input[type=submit], input[type=reset] { cursor: pointer; background-color: #CCCCCC; } button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { background-color: #DCDCDC; border: 1px rgba(0,0,0,.2) solid; } button:active, input[type=button]:active, input[type=submit]:active, input[type=reset]:active { background-color: #FFFFFF; } /************ CORES **************/ .bgcCinza100 { background-color: #CCC; } .bgcCinza25 { background-color: #DCDCDC; } .bgcPreto100 { background-color: #000; } .bgcBranco100 { background-color: #FFF; } .bgcVermelho100 { background-color: #F00; } .bgAzulCiano { background-color: #007EAE; } /************ CORES **************/ </style> <script type="text/javascript" src="scripts/js/bibliotecas/jquery-3.4.1.min.js"></script> <script> function verifica(msg) { return confirm(msg); }; </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <body> <ul class="ulHorizontal topo"> <li style="width:200px">CATEGORIA</li><li style="width:200px">NOME</li><li style="width:100px">PREÇO</li><li style="width:100px">FRETE</li><li style="width:100px">TRANSPORTE</li><li style="width:100px">EDITAR</li><li style="width:100px">BLOQUEIO</li><li style="width:100px">EXCLUIR</li> </ul> <ul class=ulHorizontal id=listaRegistros style="background-color:#CCC"> <li style="text-align:left; width:200px;">Leve</li><li style="text-align:left; width:200px;">Produto 1</li><li style="text-align:right; width:100px;">120.33</li><li style="text-align:center; width:100px;">1</li><li style="text-align:center; width:100px;">Correios</li><li style="text-align:center; width:100px;"><a href=""><img src="imgs/editar.png" height="30px" title="Editar Produto"/></a></li><li style="text-align:center; width:100px;"><a href="" onclick="return verifica('Deseja Bloquear este produto');" ><img src="imgs/bloquear.png" height="30px" title="Bloquear Produto" /></a></li><li style="text-align:center; width:100px;"><a href="" onclick="return verifica('Deseja Excluir este produto?');" ><img src="imgs/excluir.png" height="30px" title="Excluir Produto"/></a></li> </ul> </body> </html> Os problemas: Na verdade eu gostaria de saber o porque de quando vou medir as alturas das lís elas estão se alterando. As li's de acordo com o css devem ser de 50px lisas, sem bordas. Lis só de texto, estão reduzindo para 49,6px Lis com as imagens, estão reduzindo para 30px Onde está o erro? Obs.: Esse comportamento é visto no Chrome e somente no inspector. Pois no visual se vê normalmente.

Ocultar Imagem

John Hebert Trindade posted a topic in CSS

Boa tarde pessoal, sou novo aqui no site. Estou reformulando meu site para ser responsivo, só que necessito de algo que não sei como fazer e nem encontrei nada, talvez não encontrei por não ter digitado o nome correcto do assunto. Estou fazendo uma galeria de fotos, mas gostaria que só aparecesse a primeira imagem e somente ao clicar nela que as restantes fossem apresentadas. exemplo: <div class="fotos"> <a href="img/carros.jpg" title="Carro Funerário"> <img class="media-object" src="img/carro1.jpg" alt="Post"> <img class="media-object" src="img/carro2.jpg" alt="Post"> <img class="media-object" src="img/carro3.jpg" alt="Post"> <img class="media-object" src="img/carro4.jpg" alt="Post"> </a> </div> script $(document).ready(function() { $('.fotos').magnificPopup({ delegate: 'a', type: 'image', gallery:{enabled:true} }); }); já tentei colocar: .fotos{ display: none; } .fotos{ visility: hidden; } mas não deu certo, por favor ajudem me.

inserir Style no PDF

Carlos Rocha posted a topic in PHP

Tenho o seguinte conteudo HTML sendo gerado em um loop PHP $html .= " <ul class='border'> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Gcéu</label> : " . $celula[ "nomeCelula" ] . "</li> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;' class='backCinza'><label class='labelPequeno'>Supervisor de Setor</label> : " . $nomeLideres[ "nomeLiderSetor" ] . "</li> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Líder</label> : " . $celula[ "nomeLider" ] . "</li> <li style='text-align: left;'><label class='labelPequeno'>Auxiliar</label> : " . $celula[ "nomeAuxiliar" ] . "</li> </ul> <ul class='border'> <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Dias que acontece</label> : " . $celula[ "diaReunioes" ] . "</li> <li style='text-align: left;'><label class='labelPequeno'>Membros Ativos</label> : " . $membros . "</li> </ul>"; Isso acontece na pagina x.php por exemplo. Nessa mesma pagina x.php existe um form que envia, via POST, um campo hidden com o value sendo a variavel acima criada com seu conteudo para uma pagina que vai gerar um arquivo pdf. Estou gerando PDF's com o codigo abaixo usando a biblioteca FPDF require_once "_classes/_util/_PDF/PDF.php"; $html = $_POST["htmlPDF"]; $pdf = new PDF; $pdf->AddPage(); $pdf->SetFont('Arial','B',16); $pdf->WriteHTML( utf8_decode ( $html ) ); $pdf->Output("relatorio.pdf","D"); Acontece que nesse arquivo eu não posso inserir as chamadas aos arquivos de style. O problema: $_POST["htmlPDF"] Tráz um HTML . Nesse caso, o pdf está saindo sem style. Será que existe uma forma de quando estiver sendo gerada a variável que contem o html, aproveitar e inserir via código (dinamicamente) os estilos direto nas tags? Ou ainda inserir no objeto HTML a folha de style?

Search the Community

Search By Tags

Search By Author

Content Type

Forums

Blogs

Categories

Find results in...

Find results that contain...

Date Created

Start

End

Last Updated

Start

End

Filter by number of...

Minimum number of comments

Minimum number of replies

Minimum number of reviews

Joined

Start

End

Group

Website

GitHub

LinkedIn

Twitter

Facebook

Important Information