Jump to content

Aligment icones of a website!

Quencyjones79

By Quencyjones79
in HTML/XHTML

 Share

Recommended Posts

Quencyjones79 Newbie

Quencyjones79

Posted
Posted (edited)

Hi everyone, I'm making a personal website to promote my multimedia works.

I had a question that is in the image, so I really appreciate your help.

So I also send my source code and I really appreciate your help with source code to help you with this question, please.

 

index.html 

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

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

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

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


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

</head>
<body>

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

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

    <!--How to fix the space between the twoo edges of the weather and datetime bar (see the image layout)-->
    


        <section class="header" id="header" style="padding:0; display:flex; min-height: 0;">
            <div class="datetime" >
              <p id="date" style="margin-top:40px;">Sábado, 11 de setembro de 2021</p>
              <p id="time" style="margin-top:40px;">10:08:58</p>
            </div>

        <div class="weather"><p><a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" data-label_1="VIANA DO CASTELO" data-label_2="" data-icons="Climacons Animated" data-days="5" data-theme="sky" >VIANA DO CASTELO</a>
   
            <script>
              
            !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
            </script></p>
            </div>
       
     
      </section>
   
<!-- header section starts  -->

<header>

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

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

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

</header>

<!-- header section ends -->

<!-- home section starts  -->

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

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

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

</section>

<!-- home section ends -->

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

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

    <div class="row">

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

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

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

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

    </div>

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

</section>

<!-- service section starts  -->

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

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

    <div class="box-container">

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

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

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

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

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

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

    </div>

</section>

<!-- service section ends -->

<!-- portfolio section starts  -->

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

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

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

    <div class="image-container">

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

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

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

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

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

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

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

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

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

    </div>

</section>

<!-- portfolio section ends -->

<!-- blog section start  -->

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

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

    <div class="box-container">

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

        <div class="box">
            <img src="images/blog2.jpg" alt="">
            <div class="content">
                <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3>
                <a href="#" class="title"> blog title goes here </a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque  animi harum distinctio et.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img src="images/blog3.jpg" alt="">
            <div class="content">
                <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3>
                <a href="#" class="title"> blog title goes here </a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque  animi harum distinctio et.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img src="images/blog4.jpg" alt="">
            <div class="content">
                <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3>
                <a href="#" class="title"> blog title goes here </a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque  animi harum distinctio et.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img src="images/blog5.jpg" alt="">
            <div class="content">
                <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3>
                <a href="#" class="title"> blog title goes here </a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque  animi harum distinctio et.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img src="images/blog6.jpg" alt="">
            <div class="content">
                <h3 class="info"> <i class="fas fa-user"></i> by, admin <i class="fas fa-calendar"></i> 1st may, 2021 </h3>
                <a href="#" class="title"> blog title goes here </a>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laborum in molestias deleniti fugit excepturi atque  animi harum distinctio et.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

    </div>

</section>

<!-- blog section ends -->

<!-- contact section starts  -->

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

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

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

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

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

    </div>

    <div class="row">

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

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

    </div>

</section>

<!-- contact section ends -->




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



<!-- footer section  -->

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






















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

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

</body>
</html>

style.css 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*weather and datetime*/
.header .datetime {
  
    width: auto !important; /* to kill your inline style (width:150px) */
    display: flex;
    margin: 0 !important;
    padding: 8px 0 !important; /* better to use space in between date/time (see above) */
    border-bottom: 5px solid blue;
    background-color: white;
    font-size: 20px;

  }
  .header .weather {
    flex-grow: 1;
  }
  .header .weather > p {
    margin: 0;
    border-color: black;
  }
  #weatherwidget-io-0 {
    position: relative !important;
  }
  .weatherwidget-io {
    padding: 0 !important;
    height: auto !important;
    position: static !important;
    margin: 0 !important;
    font-size: 0;
  }
  #date,
  #time {
    margin: 1em .5em;
    
  }
/*weather and datetime*/

#menu{
    font-size: 2rem;
    background:var(--main-color);
    color:#fff;
    border-radius: 5rem;
    height:5rem;
    width:5rem;
    text-align: center;
    line-height: 5rem;
    position: fixed;
    top: 2rem; right:2rem;
    z-index: 1000;
    cursor: pointer;
}

#menu.fa-times{
    transform:rotate(-180deg);
}

.navbar{
    position: fixed;
    top:2.4rem; right:2.5rem;
    padding:1.1rem 2rem;
    padding-right: 4rem;
    z-index: 999;
    border:.2rem solid var(--main-color);
    border-radius: 1rem;
    background:var(--primary-bg-color);
    opacity: 0;
    transform-origin: top right;
    transform: scale(0);
}

.navbar.nav-toggle{
    opacity: 1;
    transform: scale(1);
}

.navbar a{
    display: block;
    font-size: 2rem;
    padding:1rem;
    padding-right: 7rem;
    color:var(--primary-text-color);
}

.navbar a:hover{
    color:var(--main-color);
    transform: translateX(1rem);
}

.home{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.home .image{
    flex:1 1 40rem;
    padding:1rem;
    text-align: center;
}

.home .image img{
    height:50rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.3);
    border-top: 3rem solid var(--primary-bg-color);
    border-right: 3rem solid var(--primary-bg-color);
    border-bottom: 3rem solid var(--main-color);
    border-left: 3rem solid var(--main-color);
    border-radius: .5rem;
}

.home .content{
    flex:1 1 40rem;
    padding:1rem;
}

.home .content .hello{
    display: inline-block;
    padding:1rem 0;
    font-size: 2.6rem;
    color:var(--secondary-text-color);
}

.home .content h3{
    color:var(--primary-text-color);
    font-size: 5rem;
}

.home .content h3 span{
    color:var(--main-color);
}

.home .content p{
    padding:1rem 0;
    color:var(--secondary-text-color);
    font-size: 2rem;
}

.about .row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.about .row .box{
    flex:1 1 40rem;
    background-color: var(--primary-bg-color);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding:.5rem 1.5rem;
    margin:1.5rem;
}

.about .row .box .title{
    color:var(--primary-text-color);
    font-size: 2.5rem;
    padding:1rem 0;
}

.about .row .box .progress{
    padding:1rem 0;
}

.about .row .box .progress h3{
    font-size: 1.7rem;
    color:var(--secondary-text-color);
    display: flex;
    justify-content: space-between;
}

.about .row .box .progress .bar{
    height: 2.5rem;
    border-radius: .5rem;
    border:.2rem solid var(--main-color);
    padding:.5rem;
    margin:1rem 0;
}

.about .row .box .progress .bar span{
    height: 100%;
    border-radius: .3rem;
    background-color: var(--main-color);
    display: block;
}

.about .row .box:nth-child(1) .progress:nth-child(2) .bar span{
    width: 95%;
}

.about .row .box:nth-child(1) .progress:nth-child(3) .bar span{
    width: 80%;
}

.about .row .box:nth-child(1) .progress:nth-child(4) .bar span{
    width: 65%;
}

.about .row .box:nth-child(1) .progress:nth-child(5) .bar span{
    width: 75%;
}

.about .row .box:nth-child(2) .progress:nth-child(2) .bar span{
    width: 98%;
}

.about .row .box:nth-child(2) .progress:nth-child(3) .bar span{
    width: 67%;
}

.about .row .box:nth-child(2) .progress:nth-child(4) .bar span{
    width: 75%;
}

.about .row .box:nth-child(2) .progress:nth-child(5) .bar span{
    width: 60%;
}

.about .row .box .exp-box{
    padding:0 1.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    border-left: .2rem solid var(--main-color);
    position: relative;
}

.about .row .box .exp-box h3{
    color:var(--main-color);
    font-size: 2rem;
}

.about .row .box .exp-box p{
    color:var(--secondary-text-color);
    font-size: 1.5rem;
    padding:1rem 0;
}

.about .row .box .exp-box::before{
    content:'';
    position: absolute;
    top:0; left: -1rem;
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    background: var(--main-color);
}

.about .download{
    background:var(--primary-bg-color);
    border-radius: .5rem;
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding:2rem;
    padding-bottom: 3rem;
    margin:1rem;
}

.services .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.services .box-container .box{
    background:var(--primary-bg-color);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin:1rem;
    padding:1rem;
    width:35rem;
    text-align: center;
    position: relative;
    z-index: 0;
}

.services .box-container .box .number{
    position: absolute;
    top:1.5rem; left: 2rem;
    font-size: 2.5rem;
    color:var(--primary-text-color);
}

.services .box-container .box img{
    height:7rem;
    width:7rem;
    margin:1rem;
}

.services .box-container .box h3{
    font-size: 2rem;
    color:var(--main-color);
}

.services .box-container .box p{
    font-size: 1.5rem;
    color:var(--secondary-text-color);
    padding:1rem;
}

.services .box-container .box::before{
    content: '';
    position: absolute;
    top:0; left: 0;
    height: 100%;
    width: 100%;
    background:var(--main-color);
    z-index: -1;
    clip-path: circle(25% at 0 0);
    opacity: .1;
    transition: .3s;
}

.services .box-container .box:hover::before{
    clip-path: circle(100%);
}

.portfolio .button-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding:1rem 0;
}

.portfolio .button-container .btn{
    margin:1rem;
    cursor: pointer;
}

.portfolio .image-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem 0;
}

.portfolio .image-container .box{
    width:35rem;
    margin: 1rem;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    overflow: hidden;
    height: 25rem;
    position: relative;
    border:1.5rem solid var(--primary-bg-color);
    cursor: pointer;
}

.portfolio .image-container .box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.portfolio .image-container .box .info{
    position: absolute;
    top:0; left: 0;
    height: 100%;
    width: 100%;
    background:var(--primary-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: .9;
    transform: scale(0);
}

.portfolio .image-container .box:hover .info{
    transform: scale(1);
}

.portfolio .image-container .box .info h3{
    font-size: 2.5rem;
    color:var(--primary-text-color);
}

.blog .box-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.blog .box-container .box{
    width:33rem;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    margin:1.5rem;
    background: var(--primary-bg-color);
    overflow: hidden;
}

.blog .box-container .box img{
    width: 100%;
    height: 20rem;
    object-fit: cover;
}

.blog .box-container .box .content{
    padding:1.5rem;
}

.blog .box-container .box .content .info{
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    text-align: center;
    position: relative;
    font-size: 1.5rem;
    color:var(--primary-text-color);
    background:var(--secondary-bg-color);
    padding:1rem;
    margin-top: -4rem;
    margin-bottom: 1rem;
}

.blog .box-container .box .content .info i{
    color:var(--main-color);
    padding:0 1rem;
}

.blog .box-container .box .content .title{
    color:var(--primary-text-color);
    display: block;
    font-size: 2.5rem;
    padding:.5rem 0;
}

.blog .box-container .box .content .title:hover{
    text-decoration: underline;
    color:var(--main-color);
}

.blog .box-container .box .content p{
    color:var(--secondary-text-color);
    padding:.5rem 0;
    font-size: 1.5rem;
}

.contact .row{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.contact .row form{
    flex:1 1 40rem;
    background: var(--primary-bg-color);
    padding: 2rem;
    margin:1rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border-radius: .5rem;
}

.contact .row .map{
    flex:1 1 40rem;
    margin:1rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border-radius: .5rem;
    border:2rem solid var(--primary-bg-color);
    width:100%;
}

.contact .row form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact .row form input, .contact .row form textarea{
    padding:1rem 0;
    margin:1rem 0;
    font-size: 1.7rem;
    border-bottom: .1rem solid var(--secondary-text-color);
    text-transform: none;
    background:none;
    color:var(--main-color);
    width: 100%;
}

.contact .row form input::placeholder, .contact .row form textarea::placeholder{
    text-transform: capitalize;
    color:var(--secondary-text-color);
}

.contact .row form input:focus, .contact .row form textarea:focus{
    border-color: var(--main-color);
}

.contact .row form .inputBox input{
    width:49%;
}

.contact .row form textarea{
    height: 15rem;
    resize: none;
}

.contact .row form .btn{
    cursor: pointer;
}

.contact .box-container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.contact .box-container .box{
    flex:1 1 30rem;
    margin:1rem;
    padding:3rem 1rem;
    background:var(--primary-bg-color);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border-radius: .5rem;
    text-align: center;
}

.contact .box-container .box i{
    height: 6rem;
    width:6rem;
    line-height: 6rem;
    border-radius: 50%;
    font-size: 3rem;
    background:var(--secondary-bg-color);
    color:var(--main-color);
}

.contact .box-container .box h3{
    color:var(--primary-text-color);
    padding:1rem 0;
    font-size: 2rem;
}

.contact .box-container .box p{
    font-size: 1.5rem;
    color:var(--secondary-text-color);
}


/*Radio station*/
.flex {
    display:flex;
    background:#000;
    width:900px;
    height:108px;
    align-items:center;
    justify-content:flex-start;
  }
  .button-wrapper {
    background: #000;
    height:100%;
    width:20%;
    position:relative;  
  }
  .button {
    position:absolute;
    top:35%;
    left:0;
    right:0;
    text-align:center;
    font-size:2rem !important;
    color:#4cc8f4 !important;
  }
  #pause {
    display:none;
  }
  .stream-wrapper {
    color:#fff !important;
    margin-left:5%;
    font-size:1rem !important;
    min-width:200px;
  }
  .social-icons {
    margin-left:15%;
    display:inline-table;
    height:40px;
    width:200px !important;
  }
  .icons {
    border:1px #4cc8f4 solid;
    border-radius:50%;
    color:#4cc8f4 !important;
    margin-top:1%;
    padding:8px 12px;
    font-size:1.2rem !important;
  }
  .icons:hover {
    color:#fff !important;
    border-color:#fff !important;
  }
  .social-icons a {
    margin-left:5%;
  }
  .dropbtn {
      background-color: #4cc8f4;
      color: white;
      padding: 10px;
      font-size: 16px;
      border: none;
      min-width: 180px;
  }
  .dropdown {
      position: relative;
      display: inline-block;
    background-color: #4cc8f4;
      color: white;
    padding-right:5px;
    min-width: 199px;
    text-align:center;
  }
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #000;
      min-width: 199px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  .dropdown-content a {
      color: #4cc8f4;
      padding: 10px 12px;
      text-decoration: none;
      display: block;
      width:180px; 
  }
  .dropdown-content a:hover {
    background-color: #4cc8f4;
    color:#fff;
  }
  .dropdown:hover .dropdown-content {
      display: block;
  }
  .dropdown:hover .dropbtn {
      background-color: ##4cc8f4;
  }
  #player {
      width: 50px;
      height: 50px;
      position: relative;
      margin-left:5%;
      top: 25px;	
  }
  #player i {
          position: absolute;
          margin-top: -6px;
          color: #666;
  }
  #player i.fa-volume-up {
          color:#4cc8f4;
  }
  #volume {
      position: absolute;
      left: 24px;
      margin-left:12px;
      margin: 0 auto;
      height: 3px;
      width: 100px;
      background: #555;
      border-radius: 10px;
  }
  #volume .ui-slider-range-min {
          height: 3px;
          width: 300px;
          position: absolute;
          background: #4cc8f4;
          border: none;
          border-radius: 10px;
        outline: none;
  }
  #volume .ui-slider-handle {
          width: 10px;
        height: 10px;
          border-radius: 10px;
        background: #f1f1f1;
        position: absolute;
        margin-left: -6px;
        margin-top: -3px;
        cursor: pointer;
        outline: none;
  }
  #content {
    display:none;
    width:150px !important;
    color:#4cc8f4 !important;
    font-size:0.9rem;
  }
  #artist {
    width:100% !important;
    margin-top:10%;
  }
  #show {
    width:100% !important;
    margin-top:5%;
  }
  .now-playing-label {
    color:#fff;
  }
  /*Radio Staion ends*/
  

  .footer{
    background-color:orange;
    color: #bbb;
    height: auto;
  }
  .container{
    padding: 2rem 1rem;
  }
  
  
  .footer ul{
    font-size: normal;
    list-style: none;
  }
  .footer a{
    color:red;
    text-decoration: none;
  }
  
  /*Margins and padding Classes*/
  .my-1{margin-top: 1rem; margin-bottom: 1rem;}
  
  
  /*Flex Proprieties*/
  
  .d-flex-r{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .justify-content-center{
    justify-content:center;
  }
  .justify-content-space-around{
    justify-content:space-around;
  }
  
  .footer i{color: white;}
  .footer .copyright i {margin-left: 1rem;}
  .footer i.fab, .footer i.fas{font-size: 1.25rem;transition: 0.3s ease;}
  .footer i.fab:hover{color:white important;}
  .footer i.fas {
    border-radius: 50%;
    border:1px solid white;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 12px 15px;

#theme-toggler{
    position: fixed;
    top:8.5rem; right:2rem;
    z-index: 998;
    height: 5rem;
    width:5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 2rem;
    background:var(--main-color);
    color:#fff;
    cursor: pointer;
    border-radius: 5rem;
}

#theme-toggler.fa-sun{
    transform:rotate(-180deg);
}


.home .content {
    font-family: 'Raleway', sans-serif;
    padding: 3em 2em;
    font-size: 18px;
    background: #222;
    color: #aaa
  }
  
.home .content h1{
    font-weight: 200;
    margin: 0.4em 0;
  }
.home .content h1 { font-size: 3.5em; }
























/* media queries  */

@media (max-width:991px){

    html{
        font-size: 55%;
    }

    section{
        padding:1rem;
        padding: 0 3%;
    }

}

@media (max-width:768px){

    .home .image img{
        height: auto;
        width: 100%;
    }

}

@media (max-width:400px){

    html{
        font-size: 50%;
    }

    .services .box-container .box{
        width: 100%;
    }

    .portfolio .image-container .box{
        width:100%;
    }

    .blog .box-container .box{
        width:100%;
    }

    .contact .row form .inputBox input{
        width:100%;
    }

}

script.js 

$(document).ready(function(){

  $('#menu').click(function(){
      $(this).toggleClass('fa-times');
      $('.navbar').toggleClass('nav-toggle');
  });

  $(window).on('scroll load',function(){
    $('#menu').removeClass('fa-times');
    $('.navbar').removeClass('nav-toggle');
  });

  $('.portfolio .button-container .btn').click(function(){

    let filter = $(this).attr('data-filter');

    if(filter == 'all'){
      $('.portfolio .image-container .box').show('400')
    }else{
      $('.portfolio .image-container .box').not('.'+filter).hide('200');
      $('.portfolio .image-container .box').filter('.'+filter).show('400');
    }

  });

  $('#theme-toggler').click(function(){
    $(this).toggleClass('fa-sun');
    $('body').toggleClass('dark-theme');
  });

  // smooth scrolling 

  $('a[href*="#"]').on('click',function(e){

    e.preventDefault();

    $('html, body').animate({

      scrollTop : $($(this).attr('href')).offset().top,

    },
      500,
      'linear'
    );

  });

});

function setDate() {
	const now = new Date();
	const mm = now.getMonth();
	const dd = now.getDate();
	const yyyy = now.getFullYear();
	const secs = now.getSeconds();
	const mins = now.getMinutes();
	const hrs = now.getHours();
	const monthName = [
		'January','February','March','April',
		'May','June','July','August','September',
		'October','November','December'
	];
	
	if (hrs > 12) {
		hours.innerHTML = hrs - 12;
	} else {
		hours.innerHTML = hrs;
	}
	
	if (secs < 10) {
		seconds.innerHTML = '0' + secs;
	} else {
		seconds.innerHTML = secs;
	}
	
	if (mins < 10) {
		minutes.innerHTML = '0' + mins;
	} else {
		minutes.innerHTML = mins;
	}
	
	month.innerHTML = monthName[mm];
	day.innerHTML = dd;
	year.innerHTML = yyyy;
}

setInterval(setDate,1000);



window.onload = setInterval(clock,1000);
			function clock()
			{
			  var d = new Date();
			  var date = d.getDate();
			  
			  var month = d.getMonth();
			  var montharr =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
			  month=montharr[month];
			  
			  var year = d.getFullYear();
			  
			  var day = d.getDay();
			  var dayarr =["Sun","Mon","Tues","Wed","Thu","Fri","Sat"];
			  day=dayarr[day];
			  
			  var hour =d.getHours();
			  var min = d.getMinutes();
			  var sec = d.getSeconds();
			  
			  hour = updateTime(hour);
			  min = updateTime(min);
			  sec = updateTime(sec);
			
			  document.getElementById("date").innerHTML=day+" "+date+" "+month+" "+year;
			  document.getElementById("time").innerHTML=hour+":"+min+":"+sec;
			}
			function updateTime(k) 
			{
				if (k < 10) 
				{
					return "0" + k;
				}
				else 
				{
					return k;
				}
			}


      var TxtRotate = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
      };
      
      TxtRotate.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];
      
        if (this.isDeleting) {
          this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
          this.txt = fullTxt.substring(0, this.txt.length + 1);
        }
      
        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
      
        var that = this;
        var delta = 300 - Math.random() * 100;
      
        if (this.isDeleting) { delta /= 2; }
      
        if (!this.isDeleting && this.txt === fullTxt) {
          delta = this.period;
          this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
          this.isDeleting = false;
          this.loopNum++;
          delta = 500;
        }
      
        setTimeout(function() {
          that.tick();
        }, delta);
      };
      
      window.onload = function() {
        var elements = document.getElementsByClassName('txt-rotate');
        for (var i=0; i<elements.length; i++) {
          var toRotate = elements[i].getAttribute('data-rotate');
          var period = elements[i].getAttribute('data-period');
          if (toRotate) {
            new TxtRotate(elements[i], JSON.parse(toRotate), period);
          }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
        document.body.appendChild(css);
      };

I also upload my source code via codepen: https://codepen.io/Quencyjones79/pen/gOXZaEG

support nav.jpg

Edited by Quencyjones79
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

???? what like 

#menu, #theme-toggler {
  font-size: 2rem;
  background: var(--main-color);
  color: rgb(255, 255, 255);
  border-radius: 5rem;
  height: 5rem;
  width: 5rem;
  text-align: center;
  line-height: 5rem;
  position: fixed;
  right: 2rem;
  z-index: 1000;
  cursor: pointer;
  top: 2rem;
}

#theme-toggler {
  top: calc(5rem + 2rem * 2);
}

 

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...