Quencyjones
New Coder
Hi everyone, I'm making a personal website to promote my multimedia products,
I really appreciate your help in clarifying the image doubt.
So I also send my source code and I really appreciate your help with source code to help you with this question, please.
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
style.css
script.js
Ps: send you my code at codepen: https://codepen.io/Quencyjones79/pen/gOXZaEG
I expect your answer as soon as possible
I really appreciate your help in clarifying the image doubt.
So I also send my source code and I really appreciate your help with source code to help you with this question, please.
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
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 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>[email protected]</p>
</div>
<div class="box">
<i class="fas fa-map-marker-alt"></i>
<h3>my address</h3>
<p>mumbai, india - 400104</p>
</div>
</div>
<div class="row">
<form action="">
<div class="inputBox">
<input type="text" placeholder="name">
<input type="email" placeholder="email">
</div>
<input type="text" placeholder="subject">
<textarea name="" id="" cols="30" rows="10" placeholder="message"></textarea>
<button class="btn"> send message </button>
</form>
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1617786516134!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>
<!-- contact section ends -->
<div id="td_container">
<div class="flex">
<div class="button-wrapper">
<i class="fa fa-play play button" id="play" onclick=" toggleplayback(this); "aria-hidden="true"></i>
<i class="fa fa-pause pause button" onclick="toggleplayback(this)" id="pause" aria-hidden="true"></i>
</div>
<div id = "content">
<div class="now-playing-label">Now Playing</div>
<div id="show"> </div>
<div id="artist"> </div>
</div>
<div class="stream-wrapper">
<!-- <span>Stations</span> -->
<div class="dropdown">
<button class="dropbtn" id="btn">22 West Music Stream</button> <i class="fa fa-caret-down" aria-hidden="true"></i>
<div class="dropdown-content">
<a href="#" onclick="changeStream(this)">22 West Radio Online</a>
<a href="#" onclick="changeStream(this)">22 West FM</a>
<a href="#" onclick="changeStream(this)">22 West Music Stream</a>
</div>
</div>
</div>
<div id="player">
<i class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/22WestRadio" target="_blank"><i class="fa fa-facebook icons" aria-hidden="true"></i></a>
<a href="https://twitter.com/22WestRadio" target="_blank"><i class="fa fa-twitter icons" aria-hidden="true"></i></a>
<a href="https://www.instagram.com/22WestRadio/" target="_blank"><i class="fa fa-instagram icons" aria-hidden="true"></i></a>
</div>
</div>
</div>
<!-- footer section -->
<div class="footer">
<div class="container>
<div class="container copyright d-flex-r justify-content-space-around">
<ul class="d-flex-r my-1">
<li><a href="https://www.behance.net/Josemmorei292f"><i class="fab fa-behance"></i></a></li>
<li><a href="https://www.linkedin.com/in/jammoreira/"><i class="fab fa-linkedin"></i></a></li>
<p class="text-center my1">©Copyright 2022.Designed by José Moreira</p>
</ul>
</div>
<div class="d-flex-r justify-content-center">
<a href="#header"><i class="fas fa-angle-up"></i></a>
</div>
</div>
</div>
<!--footer-->
<!-- jquery cdn link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>style.css
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
JavaScript:
$(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);
};Ps: send you my code at codepen: https://codepen.io/Quencyjones79/pen/gOXZaEG
I expect your answer as soon as possible
