Jump to content

Alinhamento da barra da metereologia com a data e hora!

José Moreira

By José Moreira
in HTML

 Share

Recommended Posts

José Moreira void

José Moreira

Posted
Posted

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.


<!--Como colocar isso como a imagem do tempo? (ver weather image)?-->


      <!--Como corrigir o espaço entre as duas bordas da barra de clima e data e hora (veja o layout image)-->

index.html 

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>complete responsive personal portfolio website design tutorial</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">


    <link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />

</head>
<body>

    <!--This is the weather and datetime bar-->

    <!--How to put that as the weather image? (see the image weather image)?-->

    <!--How to fix the space between the twoo edges of the weather and datetime bar (see the image layout)-->
    <section class="header" id="header">
        <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 section starts  -->

<header>

    <div id="menu" class="fas fa-bars"></div>

    <nav class="navbar">
        <a href="#home">home</a>
        <a href="#about">about</a>
        <a href="#services">services</a>
        <a href="#portfolio">portfolio</a>
        <a href="#blog">blog</a>
        <a href="#contact">contact</a>
    </nav>

    <div id="theme-toggler" class="fas fa-moon"></div>

</header>

<!-- header section ends -->

<!-- home section starts  -->

<section class="home" id="home">

    <div class="image">
        <img src="images/foto ze.jpg" alt="">
    </div>

    <div class="content">
        <h1>Chamo-me José Moreira sou
            <span
               class="txt-rotate"
               data-period="2000"
               data-rotate='[ "Design Gráfico.", "Fotográfo.", "Web developer.",]'></span>
          </h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio doloribus ullam at commodi sit, excepturi dicta minus cumque rerum quod nisi sapiente accusantium, accusamus a atque totam adipisci. Quas, error?</p>
        <a href="#about" class="btn">about me</a>
    </div>

</section>

<!-- home section ends -->

<section class="about" id="about">

    <h1 class="heading"> about <span>me</span> </h1>

    <div class="row">

        <div class="box">
            <h3 class="title">coding skills</h3>
            <div class="progress">
                <h3> html <span>95%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
            <div class="progress">
                <h3> css <span>80%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
            <div class="progress">
                <h3> js <span>65%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
            <div class="progress">
                <h3> sass <span>75%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
        </div>

        <div class="box">
            <h3 class="title">professional skills</h3>
            <div class="progress">
                <h3> web design <span>98%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
            <div class="progress">
                <h3> web development <span>67%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
            <div class="progress">
                <h3> graphic design <span>75%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
            <div class="progress">
                <h3> seo marketing <span>60%</span> </h3>
                <div class="bar"><span></span></div>
            </div>
        </div>

        <div class="box">
            <h3 class="title">experience</h3>
            <div class="exp-box">
                <h3>front end development</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p>
            </div>
            <div class="exp-box">
                <h3>front end development</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p>
            </div>
            <div class="exp-box">
                <h3>front end development</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p>
            </div>
        </div>

        <div class="box">
            <h3 class="title">education</h3>
            <div class="exp-box">
                <h3>mumbai university</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p>
            </div>
            <div class="exp-box">
                <h3>mumbai university</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p>
            </div>
            <div class="exp-box">
                <h3>mumbai university</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia consequatur impedit dolor vel aperiam assumenda consequuntur quibusdam. Illo, dolorum nihil!</p>
            </div>
        </div>

    </div>

    <div class="download">
        <a href="#" class="btn"> download CV </a>
    </div>

</section>

<!-- service section starts  -->

<section class="services" id="services">

    <h1 class="heading"> <span>my</span> services </h1>

    <div class="box-container">

        <div class="box">
            <span class="number">1</span>
            <img src="images/s1.png" alt="">
            <h3>seo marketing</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p>
        </div>

        <div class="box">
            <span class="number">2</span>
            <img src="images/s2.png" alt="">
            <h3>graphic design</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p>
        </div>

        <div class="box">
            <span class="number">3</span>
            <img src="images/s3.png" alt="">
            <h3>digital marketing</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p>
        </div>

        <div class="box">
            <span class="number">4</span>
            <img src="images/s4.png" alt="">
            <h3>data analysis</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p>
        </div>

        <div class="box">
            <span class="number">5</span>
            <img src="images/s5.png" alt="">
            <h3>web development</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p>
        </div>

        <div class="box">
            <span class="number">6</span>
            <img src="images/s6.png" alt="">
            <h3>web design</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita harum consectetur quae eligendi saepe vitae ut animi in fuga dolorem.</p>
        </div>

    </div>

</section>

<!-- service section ends -->

<!-- portfolio section starts  -->

<section class="portfolio" id="portfolio">

    <h1 class="heading"> <span>my</span> portfolio </h1>

    <div class="button-container">
        <div class="btn" data-filter="all">all</div>
        <div class="btn" data-filter="design">design</div>
        <div class="btn" data-filter="code">code</div>
        <div class="btn" data-filter="website">website</div>
        <div class="btn" data-filter="brand">brand</div>
    </div>

    <div class="image-container">

        <div class="box design">
            <img src="images/img1.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box design">
            <img src="images/img2.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box design">
            <img src="images/img3.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box code">
            <img src="images/img4.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box code">
            <img src="images/img5.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box website">
            <img src="images/img6.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box brand">
            <img src="images/img7.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box brand">
            <img src="images/img8.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

        <div class="box brand">
            <img src="images/img9.jpg" alt="">
            <div class="info">
                <h3>PROJECT TITLE</h3>
            </div>
        </div>

    </div>

</section>

<!-- portfolio section ends -->

<!-- blog section start  -->

<section class="blog" id="blog">

    <h1 class="heading"> <span>my</span> blogs </h1>

    <div class="box-container">

        <div class="box">
            <img src="images/blog1.jpg" alt="">
            <div class="content">
                <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3>
                <a href="#" class="title"> blog title goes here </a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque 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>

<!-- blog section ends -->

<!-- contact section starts  -->

<section class="contact" id="contact">

    <h1 class="heading"> contact <span>me</span> </h1>

    <div class="box-container">
        
        <div class="box">
            <i class="fas fa-phone"></i>
            <h3>my number</h3>
            <p>+123-456-7890</p>
        </div>

        <div class="box">
            <i class="fas fa-envelope"></i>
            <h3>my email</h3>
            <p>example@gmail.com</p>
        </div>

        <div class="box">
            <i class="fas fa-map-marker-alt"></i>
            <h3>my address</h3>
            <p>mumbai, india - 400104</p>
        </div>

    </div>

    <div class="row">

        <form action="">
            <div class="inputBox">
                <input type="text" placeholder="name">
                <input type="email" placeholder="email">
            </div>
            <input type="text" placeholder="subject">
            <textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea>
            <button class="btn"> send message </button>
        </form>

        <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1617786516134!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe>

    </div>

</section>

<!-- contact section ends -->




<div id="td_container">
    <div class="flex">
      <div class="button-wrapper">
        <i class="fa fa-play play button" id="play" onclick=" toggleplayback(this); "aria-hidden="true"></i>
        <i class="fa fa-pause pause button" onclick="toggleplayback(this)" id="pause" aria-hidden="true"></i>
      </div>
      <div id = "content">
      <div class="now-playing-label">Now Playing</div>
      <div id="show"> </div>
      <div id="artist"> </div>
      </div>
      <div class="stream-wrapper">
    <!--     <span>Stations</span> -->
        <div class="dropdown">
          <button class="dropbtn" id="btn">22 West Music Stream</button> <i class="fa fa-caret-down" aria-hidden="true"></i>
         <div class="dropdown-content">
             <a href="#" onclick="changeStream(this)">22 West Radio Online</a>
            <a href="#" onclick="changeStream(this)">22 West FM</a>
            <a href="#" onclick="changeStream(this)">22 West Music Stream</a>
        </div>
      </div>
      </div>
      
      <div id="player">
        <i class="fa fa-volume-up"></i>
        <div id="volume"></div>
      </div>
      
      <div class="social-icons">
        <a href="https://www.facebook.com/22WestRadio" target="_blank"><i class="fa fa-facebook icons" aria-hidden="true"></i></a>
        <a href="https://twitter.com/22WestRadio" target="_blank"><i class="fa fa-twitter icons" aria-hidden="true"></i></a>
        <a href="https://www.instagram.com/22WestRadio/" target="_blank"><i class="fa fa-instagram icons" aria-hidden="true"></i></a>
      </div>
    </div>
    </div>



<!-- footer section  -->

<div class="footer">
    <div class="container>
      
     
        
  
  <div class="container copyright d-flex-r justify-content-space-around">
  
    
    <ul class="d-flex-r my-1">
      <li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li>
      <li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li>
      <p class="text-center my1">&copy;Copyright 2022.Designed by José Moreira</p>
      </ul>
  </div>
  
  
  
  <div class="d-flex-r justify-content-center">
     <a href="#home"><i class="fas fa-angle-up"></i></a>
  
  </div>
     
  </div>
  </div>
  
  <!--footer-->
  
  






















<!-- jquery cdn link  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- custom js file link  -->
<script src="js/script.js"></script>

</body>
</html>

style.css 

:root{
    --main-color:#4C84FF;
    --primary-bg-color:#fff;
    --secondary-bg-color:#eee;
    --primary-text-color:#222;
    --secondary-text-color:#666;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');

*{
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    text-transform: capitalize;
    outline: none; border:none;
    text-decoration: none;
    transition:all .3s cubic-bezier(.38,1.15,.7,1.12);
}

*::selection{
    background-color: var(--main-color);
    color:#fff;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
}

html::-webkit-scrollbar{
    width:1.3rem;
}

html::-webkit-scrollbar-track{
    background-color: var(--secondary-bg-color);
}

html::-webkit-scrollbar-thumb{
    background-color: var(--main-color);
}

body{
    background:var(--secondary-bg-color);
}

body.dark-theme{
    --primary-bg-color:#252C48;
    --secondary-bg-color:#171C32;
    --primary-text-color:#fff;
    --secondary-text-color:#eee;
}

section{
    min-height: 100vh;
    padding:1rem;
    padding:0 8%;
}

.btn{
    display: inline-block;
    padding:.9rem 3.5rem;
    font-size: 2rem;
    background:none;
    color:#fff;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin-top: 1rem;
    z-index: 0;
    position: relative;
    overflow: hidden;
    border:.2rem solid var(--main-color);
}

.btn::before{
    content: '';
    position: absolute;
    top:50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: .5rem;
    background:var(--main-color);
    height:85%;
    width: 95%;
    z-index: -1;
    transition: .2s linear;
}

.btn:hover:before{
    top:100%;
    transform: translate(-50%, 100%);
}

.btn:hover{
    color:var(--primary-text-color);
}

.heading{
    font-size: 5rem;
    color:var(--primary-text-color);
    text-align: center;
    padding:1rem;
    text-transform: uppercase;
}

.heading span{
    color:var(--main-color);
    text-transform: uppercase;
}

/*weather and datetime*/
.header .datetime {
  
    width: auto !important; /* to kill your inline style (width:150px) */
    display: flex;
    margin: 0 !important;
    padding: 8px 0 !important; /* better to use space in between date/time (see above) */
  }
  .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

Link to comment
Share on other sites
M6 unsigned user

M6

Posted
Posted

É difícil perceber as questões dessa forma.
Se colocares questões mais concretas e com exemplos / explicações mais focadas será mais fácil ajudar. 

10 REM Generation 48K!
20 INPUT "URL:", A$
30 IF A$(1 TO 4) = "HTTP" THEN PRINT "400 Bad Request": GOTO 50
40 PRINT "404 Not Found"
50 PRINT "./M6 @ Portugal a Programar."

 

Link to comment
Share on other sites
José Moreira void

José Moreira

Posted
  • Author
Posted

Olá M6, obrigado pela ajuda. Mas já encontrei uma solução para Alinhamento da barra da metereologia com a data e hora!

 

Agora tenho outra dúvida que é:

 

<!--Como resolver o problema da rádio, e a imagem que mando com a dúvida com as seguintes dúvidas:

Como ligar o limite inferior da rádio com o limite superior do rodapé?
Como esticar o rádio para preencher toda a tela do computador?-->

 

Essas perguntas também estão nos comentários do meu código-fonte.

Agradeço imenso a tua ajuda com o código-fonte.

 

Continuação de um Bom domingo e boa semana

jose moreira

https://codepen.io/Quencyjones79/pen/gOoOwYK

 

https://jsfiddle.net/Quencyjones79/mc63at5L/15/

 

Imagem em anexo- https://mab.to/SdHoTqY61 (está no myairbridge e tem que se fazer logo download, pois passados 2 a três dias não dá para fazer download

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.