I'm a beginner in html and I want to learn. Three days ago I started my html journey and I'm running into a problem...
So, I created a 'dark-mode' theme on my page and it's working.
My problem is: when I click the Theme button, I want to change the search bar color and text and I don't know how to do it.
Basically when I click the Theme button to change theme to dark mode I want the search bar to change background color to #121212 and text color to white.
And when I re-click the Theme button and come back to light mode, to undo the things, but I can't figure out how.
Thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
background-color: white;
color: #369497;
transition: 0.5s;
}
.dark-mode {
background-color: #121212;
color: white;
transition: 0.5s;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #369497;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 12px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button-pos {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-20%, -15%);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 480px;
box-sizing: border-box;
border: 2px solid #369497;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 10px;
}
.searchbar-pos {
margin: 0;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topmiddle">
<img src="logo" alt="logo">
</div>
</div>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<div class="w3-animate-opacity">
<div class="button-pos">
<button onclick="myFunction()" class="button" style="vertical-align:middle"><span>Theme </span></button>
</div>
</div>
<div class="searchbar-pos">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</body>
</html>
You have to write a css rule for that, basically something that overrides the input styling when there's a parent element with dark-mode class applied (body in this case).
All you need is ti add this to your css:
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
Here's your code with that change:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
body {
background-color: white;
color: #369497;
transition: 0.5s;
}
.dark-mode {
background-color: #121212;
color: white;
transition: 0.5s;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #369497;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 12px;
width: 120px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button-pos {
margin: 0;
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-20%, -15%);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 480px;
box-sizing: border-box;
border: 2px solid #369497;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px 12px 10px;
}
.dark-mode input[type=text] {
background-color: #121212;
color: white;
}
.searchbar-pos {
margin: 0;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topmiddle">
<img src="logo" alt="logo">
</div>
</div>
<div class="bgimg w3-display-container w3-animate-opacity">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
Logo
</div>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
<div class="w3-animate-opacity">
<div class="button-pos">
<button onclick="myFunction()" class="button" style="vertical-align:middle"><span>Theme </span></button>
</div>
</div>
<div class="searchbar-pos">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</body>
</html>
Related
I am making a website where people can watch videos and I want my videos to fit the screens on telephones but it wont fit. The widht does not want to change.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hamza</title>
<link rel="icon" href="profile.jpg">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/e838428f0c.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<ul>
<a class="hamxa" href="index.html">
<center>
<img class="profile-pic-1" src="profile.jpg">
</center>
<h1 class="hamza">Hamza</h1>
</a>
<div class="items">
<a href="videos.html">
<button><i class="fa-solid fa-circle-play"></i>VIDEOS</button>
</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSc4uB40mPR_idarZm--J8_0iM3je3ipRw4wY_L9Ka_pqYMQPg/viewform">
<button><i class="fa-solid fa-briefcase"> WORK</i></button>
</a>
</div>
</ul>
</nav>
<p></p>
<div class="container">
<div class="video-container">
<div>
<div class="video"><video poster="welcome.jpg" src="Video1.mp4"></video></div>
<p>Welcome To The Cult.</p>
</div>
</div>
<h2>New Videos</h2>
<div class="video-container">
<div>
<div class="video"><video poster="Video1.jpg" src="Video1.mp4"></video></div>
<p>BECOME THE STRONG MAN THEY NEED / TESTOSTERONE IS AT ALL TIME LOW</p>
</div>
<div>
<div class="video"><video poster="Video2.jpg" src="Video1.mp4"></video></div>
<p>7 Reasons People Dislike You Immediately</p>
</div>
<div>
<div class="video"><video poster="Video3.jpg" src="Video1.mp4"></video></div>
<p>PSYCHOLOGICAL SECRETS OF ATTRACTION</p>
</div>
</div>
<div class="popup-video">
<span>×</span>
<video src="Video1.mp4" autoplay controls></video>
</div>
</div>
<script>
document.querySelectorAll('.video-container video').forEach(vid =>{
vid.onclick = () =>{
document.querySelector('.popup-video').style.display = 'block';
document.querySelector('.popup-video video').src = vid.getAttribute('src')
}
});
document.querySelector('.popup-video span').onclick = () =>{
document.querySelector('.popup-video').style.display = 'none';
document.querySelector('.popup-video video').src = 'none';
}
</script>
</body>
</html>
Here is my CSS:
#import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Josefin Sans', sans-serif;
text-align: center;
}
h1 {
color: white;
}
h2 {
margin: 30px;
text-decoration: underline;
}
a {
color: black;
margin: 0;
font-size: 18px;
font-weight: 700;
line-height: 20px;
margin-bottom: 12px;
margin-left: 12px;
text-align: left;
text-decoration: none;
max-width: 100%;
}
p {
width: 437px;
font-size: 18px;
margin-top: 20px;
}
nav {
background: #222222;
border: 1px solid #222222;
border-right: none;
border-left: none;
}
ul {
padding: 0;
margin: 0;
}
button {
padding: 0;
border: none;
background: #222222;
color: white;
width: 100px;
height: 50px;
}
button:hover {
padding: 0;
background: white;
border: none;
color: black;
width: 100px;
height: 50px;
border-radius: 5px;
transition: 0.25s;
}
center {
margin-bottom: 30px;
}
textarea {
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s;
}
i {
padding-right: 5px;
}
.items {
margin-bottom: 30px;
}
.profile-pic-1 {
width: 100px;
border-radius: 100px;
}
.profile-pic-1:hover {
opacity: 0.75;
transition: 0.25s;
}
.hamza {
margin-bottom: 30px;
margin-top: 0;
text-align: center;
}
.hamza:hover {
opacity: 0.75;
transition: 0.25s;
}
.container {
position: relative;
min-height: 100vh;
}
.container .video-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
padding: 10px;
}
.container .video-container .video {
height: 250px;
width: 437px;
border: 5px solid white;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .7);
cursor: pointer;
overflow: hidden;
}
.container .video-container .video video {
height: 100%;
width: 100%;
object-fit: cover;
transition: .2s linear;
}
.container .video-container .video:hover video {
transform: scale(1.1);
}
.container .popup-video {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.8);
height: 100%;
width: 100%;
display: none;
}
.container .popup-video video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 750px;
border-radius: 5px;
border: 3px solid white;
object-fit: cover;
}
.container .popup-video span {
position: absolute;
top: 5px;
right: 20px;
font-size: 50px;
color: white;
font-weight: bold;
z-index: 100;
cursor: pointer;
}
#media (max-width: 768px){
.container .popup-video video {
width: 95%;
}
}
I have tried to change the width of the videos but it does not work. And i have no idea what to do. I am new to programing.
By using nth-child(1) & nav .start-home,a:nth-child(1):hover~.animation I should define the properties of home link and it's animation like it's width and position. But to adjust the width and position of the animation of the home link I have to make adjustments in nnth-child(2). And same goes for about link I need to do adjustments in nth-child(3).
In the end I can make the animation work for the last sign-in link. Also the animation is not running properly, it's breaking in the middle. Run the code and you will get better understanding of my problem.
body{
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav{
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a{
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
}
nav .animation{
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1){
width: 150px;
left: 0;
}
nav .start-home,a:nth-child(1):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(2){
left: 50px;
width: 150px;
}
nav .start-about,a:nth-child(2):hover~.animation {
width: 80px;
left: 70px;
}
a:nth-child(3){
left: 70px;
width: 120px;
}
nav .start-contact,a:nth-child(3):hover~.animation {
width: 80px;
left: 140px;
}
a:nth-child(4){
left: 90px;
width: 170px;
}
nav .start-privacy-policy,a:nth-child(4):hover~.animation {
width: 90px;
left: 225px;
}
a:nth-child(5){
left: 110px;
width: 200px;
}
nav .start-docs,a:nth-child(5):hover~.animation {
width: 145px;
left: 315px;
}
a:nth-child(6){
left: 130px;
width: 100px;
}
.search-container{
float: right;
}
input[type=text]{
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button{
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover{
background-color: rgb(35, 168, 157);
}
.icon{
color: white;
z-index: 5;
}
.search-container{
float: right;
}
.links{
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
If I understood you correctly, then perhaps this example can help you:
const animationElement = document.querySelector('.links .animation');
const defaultElement = document.querySelector('.links a'); // set default element !
const slideToElement = (el) => {
if (el) {
animationElement.style.left = el.offsetLeft + 'px';
animationElement.style.width = el.offsetWidth + 'px';
} else {
animationElement.style.removeProperty('left');
animationElement.style.removeProperty('width');
}
}
// tracking all hovers on "a" links
document.querySelector('.links').addEventListener('mouseover', (ev) => ev.target.matches('a') && slideToElement(ev.target))
// tracking leaving the links area
document.querySelector('.links').addEventListener('mouseleave', () => slideToElement(defaultElement))
slideToElement(defaultElement); // setting the slide to the default position
body {
box-sizing: border-box;
font-family: sans-serif;
background-color: rgb(255, 238, 238);
}
nav {
position: relative;
margin: 0;
padding: 0;
box-shadow: 0 2px 3px 0;
width: 100%;
height: 50px;
background-color: #04111ffa;
line-height: 50px;
font-size: 15px;
padding: 0px 20px;
}
nav a {
width: 100%;
font-size: 15px;
color: seashell;
position: relative;
text-decoration: none;
text-transform: uppercase;
line-height: 50px;
z-index: 5;
text-align: center;
margin-left: 30px;
padding: 0 10px;
}
nav .animation {
position: absolute;
height: 50px;
top: 0;
z-index: 0;
width: 100px;
background-color: rgb(58, 233, 218);
border-radius: 10%;
transition: all 0.5s ease 0s;
}
a:nth-child(1) {
width: 150px;
left: 0;
}
input[type=text] {
padding: 6px;
margin-top: 13px;
font-size: 17px;
border: none;
border-radius: 15px;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 13px;
margin-right: 30px;
font-size: 17px;
border-radius: 15px;
background-color: rgb(58, 233, 218);
}
.search-container button:hover {
background-color: rgb(35, 168, 157);
}
.icon {
color: white;
z-index: 5;
}
.search-container {
float: right;
}
.links {
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link rel="stylesheet" href="navbar.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<div class="links">
<span class="icon fas fa-bars"></span>
Home
About
Contact
Privacy Policy
Sign-in
<div class="animation start-home"></div>
</div>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" class="searchbar">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
</header>
</body>
</html>
This solution is made in JS, which made it possible to remove excess from CSS and not depend on pre-set CSS values.
I hope this can help somehow.
Questions(A is wrote by myself, and B is from online course):
A can achieve the same effect which is more simplle than B, which should I choose when in real project?
I tried to delete the a11y and found that there's no influence on results, so what's a11y in B for?
how can .button li a:after,.button li a:after in B form a border? why don't do that like me just add a box-shadow to li or a?
A(css&html)
body {
padding: 50px;
}
.button li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
width: 107px;
height: 35px;
z-index: 1;
overflow: hidden;
border-radius: 50px;
text-align: center;
line-height: 35px;
color: #1e1e1e;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
}
.button li .button-inner {
position: relative;
z-index: 3;
}
.mask {
display: block;
position: absolute;
bottom: 0;
width: 107px;
height: 0;
z-index: 1;
/* border-radius: 50px; */
background-color: #d6d6d6;
opacity: 0;
transition: all 0.2s ease-in;
}
.button li a:hover .mask {
opacity: 1;
height: 35px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
B(css&html)
body {
padding: 50px;
}
.button ul li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
line-height: 30px;
text-align: center;
color: #1e1e1e;
/* 文字间距 */
letter-spacing: 0.5px;
border-radius: 50px;
overflow: hidden;
z-index: 1;
cursor: pointer;
vertical-align: middle;
box-sizing: border-box;
}
.button-inner {
position: relative;
z-index: 3;
display: block;
border-radius: 22px;
padding: 5px 37px 0 37px;
margin-right: 0px;
box-sizing: border-box;
}
.a11y {
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px;
display: block;
margin: 0;
padding: 0;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background-color: #d6d6d6;
padding-top: 0px;
line-height: 46px;
color: #fff;
display: block;
transition: transform 0.2s ease-in;
transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
}
.button li a:after,
.button li a:after {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 1px;
left: 1px;
bottom: 1.1px;
right: 1px;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
border-radius: 50px;
}
.button li a:hover .mask {
transform: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
<span class="a11y"></span>
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
When you give z-index to an element, it gets that index relative to the scope. So in the second block of code from online source, they gave scope of position: absolute; to the :before and :after pseudo elements.
You can modify your code to have position absolute too and it will give it expected z-index rendering, however then it will move the element to a different place on the screen, as it's not bounded by the parent container anymore.
Thus, a good way is to add a pseudo element and give it the styling.
However if you want to make your code work, simply change the z-index of mask from 0 to -1.
body {
padding: 50px;
}
.button li {
float: left;
}
.button li a {
display: inline-block;
position: relative;
width: 107px;
height: 35px;
z-index: 1;
border-radius: 50px;
text-align: center;
line-height: 35px;
color: #1e1e1e;
box-shadow: inset 0px 0px 0px 2px #d3d2d2;
}
.button li .button-inner {
z-index: 3;
}
.mask {
display: block;
position: absolute;
bottom: -35px;
width: 107px;
height: 35px;
z-index: 1;
border-radius: 50px;
background-color: #d6d6d6;
opacity: 0;
transition: all 0.1s linear;
}
.button li a:hover .mask {
bottom: 0;
opacity: 1;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="button">
<ul>
<li>
<a href="#">
<span class="button-inner">
探索
</span>
<span class="mask"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
I've tried a couple of tricks I found online here, but I can't get it to line up without losing my formatting, size, position color. etc. I want it all text and images to be centered. I can't figure it out.
This is my current code and CSS:
PIPE THREADING
When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.
here is my css
.demo {
padding: 100px 0;
}
.heading-title {
margin-bottom: 100px;
}
.serviceBox {
padding: 30px 30px 30px 90px;
background: #f8f8f8;
color: #333;
overflow: hidden;
position: relative;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover {
background: #645e9d;
color: #fff;
}
.serviceBox:after {
content: "";
display: block;
border-top: 500px solid #fff;
border-left: 500px solid transparent;
margin-top: -55%;
margin-left: 100%;
opacity: 0;
position: absolute;
transform: scale(2);
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover:after {
margin-left: 0;
opacity: 0.1;
}
.serviceBox .service-icon {
font-size: 50px;
color: #645e9d;
position: absolute;
top: 40px;
left: 20px;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover .service-icon {
color: #fff;
}
.serviceBox .title {
font-size: 22px;
font-weight: 700;
margin: 0 0 12px 0;
text-transform: capitalize;
}
.serviceBox .description {
font-size: 15px;
color: #a3a3a3;
line-height: 25px;
margin: 0;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover .description {
color: #fff;
}
#media only screen and (max-width: 990px) {
.serviceBox {
margin-bottom: 15px;
}
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon"><i class="icon fa fa-check-square-o" aria-hidden="true"></i></div>
<h3 class="title">PIPE THREADING</h3>
<p class="description">When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.</p>
<img class="rounded mx-auto d-block" src="wp-content/uploads/2019/03/pipethreading.jpg" alt="..." />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Added a col-center class that can be applied to your column to center the box properly.
.col-center {
float: none !important;
margin: auto;
}
.demo
{
padding: 100px 0;
}
.heading-title
{
margin-bottom: 100px;
}
.serviceBox{
padding: 30px 30px 30px 90px;
background: #f8f8f8;
color: #333;
overflow: hidden;
position: relative;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover{
background: #645e9d;
color: #fff;
}
.serviceBox:after{
content: "";
display: block;
border-top: 500px solid #fff;
border-left: 500px solid transparent;
margin-top: -55%;
margin-left: 100%;
opacity: 0;
position: absolute;
transform: scale(2);
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover:after{
margin-left: 0;
opacity: 0.1;
}
.serviceBox .service-icon{
font-size: 50px;
color: #645e9d;
position: absolute;
top: 40px;
left: 20px;
transition:all 0.3s ease-in-out 0s;
}
.serviceBox:hover .service-icon{
color: #fff;
}
.serviceBox .title{
font-size: 22px;
font-weight: 700;
margin: 0 0 12px 0;
text-transform: capitalize;
}
.serviceBox .description{
font-size: 15px;
color: #a3a3a3;
line-height: 25px;
margin: 0;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover .description{
color: #fff;
}
#media only screen and (max-width: 990px){
.serviceBox{ margin-bottom: 15px; }
}
.col-center {
float: none !important;
margin: auto;
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-center">
<div class="serviceBox">
<div class="service-icon"><i class="icon fa fa-check-square-o" aria-hidden="true"></i></div>
<h3 class="title">PIPE THREADING</h3>
<p class="description">When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.</p>
<img class="rounded mx-auto d-block" src="wp-content/uploads/2019/03/pipethreading.jpg" alt="..." />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You could include the h3 title into the fa div. As an example: https://jsfiddle.net/quyovr9a/
.demo
{
padding: 100px 0;
}
.title {
display: inline-block;
}
.description {
padding-top: 90px;
}
.heading-title
{
margin-bottom: 100px;
}
.serviceBox{
padding: 30px 30px 30px 90px;
background: #f8f8f8;
color: #333;
overflow: hidden;
position: relative;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover{
background: #645e9d;
color: #fff;
}
.serviceBox:after{
content: "";
display: block;
border-top: 500px solid #fff;
border-left: 500px solid transparent;
margin-top: -55%;
margin-left: 100%;
opacity: 0;
position: absolute;
transform: scale(2);
transition: all 0.3s ease-in-out 0s;
}
.serviceBox:hover:after{
margin-left: 0;
opacity: 0.1;
}
.serviceBox .service-icon{
font-size: 50px;
color: #645e9d;
position: absolute;
top: 40px;
left: 20px;
transition:all 0.3s ease-in-out 0s;
}
.serviceBox:hover .service-icon{
color: #fff;
}
.serviceBox .title{
font-size: 22px;
font-weight: 700;
margin: 0 0 12px 0;
text-transform: capitalize;
}
.serviceBox .description {
font-size: 15px;
color: #a3a3a3;
line-height: 25px;
margin: 0;
margin-left: -8px;
transition: all 0.3s ease-in-out 0s;
}
.serviceBox .rounded_mx-auto_d-block {
margin-left: -6px;
}
.serviceBox:hover .description{
color: #fff;
}
#media only screen and (max-width: 990px){
.serviceBox{ margin-bottom: 15px; }
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="serviceBox">
<div class="service-icon"><i class="icon fa fa-check-square-o" aria-hidden="true"></i> <h3 class="title">PIPE THREADING</h3></div>
<p class="description">When it comes to pipe threading we have your back. We use the best technology to ensure accurate and precise threading.</p>
<img class="rounded_mx-auto_d-block" src="wp-content/uploads/2019/03/pipethreading.jpg" alt="..." />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can use flexbox to achieve this.
You need to do some wrapping, remove your positioning on the icon, change flex-direction on the right column, etc...
.serviceBox {
display:flex;
}
.box-left {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.box-right {
display: flex;
flex-direction:column;
justify-content: center;
align-items: flex-start;
flex: 3;
}
Fiddle: https://jsfiddle.net/srtk05mx/12/
I'm beginer. I'm designing a website about furniture. But I face some problem with css and bootstrap. I think they are conflicted.
I want to design a table which contain some contents and pictures. They can lead another page's this website. I tried to do my best but they don't work.maybe my program is not good. sorry for this inconvenience!. Can you tell me how to make table? thanks a million.
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial;
background-color: darkgrey;
}
.topnav{
position: relative;
margin: 0 auto;
z-index: 1;
}
.topnav .content{
position: absolute;
top: 0;
background: rgba(0,0,0,0.5);
width: 100%;
color: #f1f1f1;
padding: 20px;
animation-duration: 0s;
}
.topnav a{
float:left;
display: inline-block;
color: white;
text-align: center;
padding: 15px 15px;
text-decoration: none;
font-size: 14px;
margin-left: 150px;
}
.topnav a:hover{
background-color: white;
color: white;
background: rgba(0,0,0,0.5);
}
.topnav .search-container{
float: right;
margin-right: 120px;
}
.topnav input[type=text]{
padding: 6px;
margin-top: 8px;
font-size: 15px;
border: 2px solid ghostwhite;
}
.topnav .search-container button{
float: right;
padding: 6px 10px;
margin-top: 8px;
background-color: white;
border: none;
cursor: pointer;
}
.top .search-container button:hover{
background-color: white;
color: black;
}
#media screen and (max-width: 600px){
.topnav .search-container {
float: none;
}
}
.topnav a, .top input[type=text], .topnav .search-container button {
float: none;
display: inline-block;
text-align: left;
margin: 0px;
padding: 14px;
}
.topnav input[type=text]{
border: 2px solid ghostwhite;
}
.topnav .logo{
float: left;
width: 70px;
height: 45px;
margin-right: 10px;
}
.mySlides {
display: none;
max-width: 100%;
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: 0px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
.text{
color: white;
font-size: 50px;
position: absolute;
text-align: center;
}
.hero-text{
text-align: center;
position:absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
background: rgb(0,0,0,0.3);
background-color: black;
opacity: 0.4;
z-index: 1;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2.69s;
animation-name: fade;
animation-duration: 2.69s;
}
#-webkit-keyframes fade{
from{opacity: 0.5}
to{opacity: 1}
}
#keyframes fade{
from {opacity: 0.5}
to{opacity: 1}
}
#media only screen and (max-width: 320px){
.text {font-size: 30px;}
}
.container {
position: relative;
font-family: Arial;
}
.button{
color: white;
background-color: black;
cursor: pointer;
display: block;
fontsize: 20px;
font-weight: 400;
line-height: 45px;
margin: 2px auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
letter-spacing: 0;
box-shadow: 3px 3px 1px;
}
.button:hover,
.button:active {
letter-spacing: 5px;
}
.button:after,
.button:before{
backface-visibility: hidden;
border: 1px solid white;
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.button:hover:after,
.button:hover:before{
backface-visibility: hidden;
border-color: white;
transition: width 350ms ease-in-out;
width: 70%;
}
.button :hover:before{
bottom: auto;
top: 0;
width: 70%;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbtn{
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background: rgba(0,0,0,0.5);
}
.topnav a:hover, .dropdown: hover .dropbtn{
background-color: white;
color: black;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
}
.dropdown: hover .dropdown-content{
display: block;
}
.contain {
position:relative;
width: 50%;
}
.image{
opacity: 1;
display: block;
width: 90%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
margin-top: -30px;
border: 2px solid black;
box-shadow: 3px 3px 1px;
}
.middle{
transition: .5s ease;
opacity: 0.5;
position: absolute;
top: 50%;
left: 33%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.contain:hover .image{
opacity: 0.3;
}
.contain:hover .image{
opacity: 1;
}
.text-con{
background-color: black;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Quality Furnitures</title>
</head>
<body>
<div class="topnav">
<div class="content">
<img class="logo" src="image.css/logo.jpg">
HOME
PRODUCTION
PROJECTS
CONTACTS
<div class="search-container">
<input type="text" placeholder="Search..." name="search">
<buttton type="submit"><i class="fa fa-search"></i></buttton>
</div>
</div>
</div>
<div class="slideshow-container">
<div class="hero-text">
<h3 style="font-size: 60px"><u>Style.Luxury.Design</u></h3>
<br>
<button class="button"><strong>SHOP NOW</strong></button>
<button class="button"><strong>EXPLORE NOW</strong></button>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/161122_14_59_10_5DS_7049.0.jpg" style="width:100%; height:70%">
</div>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/top-interior-design-furniture-stores-home-decoration-ideas-designing-luxury-at-interior-design-furniture-stores-interior-design-ideas.jpg" style="width:100%; height:70%">
</div>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/luxury-furnature-stores-with-top-online-furniture-stores.jpg" style="width:100%; height: 70%">
</div>
</div>
</div>
<script>
var slideIndex;
function showSlides(){
var i;
var slides=document.getElementsByClassName("mySlides");
for (i=0; i<slides.length; i++){
slides[i].style.display ="none";
}
slides[slideIndex].style.display ="block";
slideIndex++;
if (slideIndex > slides.length -1){
slideIndex = 0;
}
setTimeout(showSlides, 5000);
}
showSlides(slideIndex =0);
function currentSlide(n){
showSlides(slideIndex = n);
}
</script>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="contain">
<img src="image.css/22staged1-master768.jpg" style="width:90%" class="image">
<br>
<div class="middle">
<div class="text-con">
<h2>Living Room</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="contain">
<img src="image.css/eva_br.jpg" style="width:90%" class="image">
<div class="middle">
<div class="text-con">
<h2>BedRoom</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumnail">
<div class="contain">
<img src="image.css/bathroom.jpg" style="width: 90%" class="image">
<div class="middle">
<div class="text-con">
<h2>BathRoom</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You just need to change the order in which you are loading your stylesheets. Currently you are loading them in this order
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
You need to have your own styles come after the bootstrap style sheet
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style1.css">
This is the cascade aspect of CSS (the 'C'). Your rules are currently being overwritten by bootstrap default rules and that is why you are having some conflicts. To better understand you can take a look here https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance