Creating my website and cant make my container with list of elements centerd if I want my grid responsive and have the display: block or display: inline-block and have a % width
heres a the situation im in. I want the grid with blocks to be responsive and have display: block/ display: inline-block (I have this bcs when u click on the button web scraping a button it will hide one of the blocks and I want it to float: left so one of the blocks doent center when one disperse)
$(document).ready(function(){
$("#web-scraping").click(function(){
if($("#web-s").hasClass("hide")){
$('#web-s').removeClass('hide');
}
else{
$("#web-s").addClass('hide')
}
});
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: sofia_pro;
}
a{
text-decoration: none;
}
.container{
min-height: 65vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero{
background-color: #32312F;
position: relative;
z-index: 1;
}
#hero .hero{
max-width: 1500px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 5rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero p{
display: block;
width: 40%;
font-size: 2rem;
margin-top: 60px;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .button-box{
margin-top: 40px;
height: 35px;
width: 140px;
}
#hero .cta{
display: inline-block;
padding: 8px 20px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
font-size: 1.5rem;
visibility: hidden;
text-transform: uppercase;
position: relative;
transition: .3s ease background-color;
opacity: 1;
animation: box_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .cta span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: box_reveal_box 1s ease;
animation-delay: .5s;
}
#hero .cta:hover{
box-shadow:0px 0px 0px 1px #fff inset;
}
/*animation*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes box_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: #fff;
}
}
#keyframes box_reveal{
100%{
visibility: visible;
}
}
.down-pointer{
align-items: center;
justify-content: center;
display: flex;
position: relative;
z-index: 3;
top: -160px;
}
.down-pointer .left{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -2px 2px;
color: #f6f6f6;
}
.down-pointer .left{
transform: rotate(-45deg);
}
.work-container{
background-color: #f6f6f6;
height: 1000px;
max-width: 1300px;
border-radius: 20px 20px 0px 00px;
margin: 0px 60px;
top: -100px;
padding: 100px;
position: relative;
z-index: 2;
}
.work-category{
align-items: center;
justify-content: center;
display: flex;
}
.work-category button{
text-transform: capitalize;
border: 1px solid #32312F;
padding: 15px 30px;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3px;
color: #32312F;
outline: none;
cursor: pointer;
}
.work-category button:hover{
}
#web-scraping{
margin: auto 100px auto auto;
}
#web-design{
margin: auto 0px auto 0px;
}
#web-animation{
margin: auto auto auto 100px;
}
.work-block-container .hide{
display: none;
}
.work-block-container-flex{
}
.work-block-container{
margin: 0 auto;
display: inline-block;
overflow: hidden;
width: 100%;
}
.work-block{
background-color: black;
float: left;
width: 30%;
height: 180px;
border-radius: 3px;
padding: 20px;
margin: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/media-screen.css">
<title>The HTML5 Herald</title>
</head>
<body>
<!-- Starting-menu-->
<section id=hero>
<div class="hero">
<div class="hero container">
<div>
<h1>What I can do,<span></span></h1>
<h1>for your Business<span></span></h1>
<p><span>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
</span></p>
<div class="button-box">Contact Me<span></span></div>
</div>
</div>
</div>
</section>
<!-- End-->
<!-- my work -->
<section class="work-container">
<a class="down-pointer" href="#"><span class="left"></span></a>
<div class="work-category">
<button id="web-scraping">Web Scraping</button>
<button id="web-design">Web Design</button>
<button id="web-animation">web animation</button>
</div>
<div class="work-block-container">
<div class="work-block" id="web-s"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-s"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-a"></div>
</div>
</section>
<!-- my work end -->
<!-- about me -->
<div class="container about" id="">
<h1>About</h1>
<div class="about-me-info">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!-- about me end-->
<!-- contact me -->
<!-- contact me end -->
</body>
</html>
I think you use another <div> in your container so your flex or grid display just effect on that div!
try display flex or grid on that div or make your container as your element's parents.
First, the ID for each element must be unique. I think you achieved this))
$(document).ready(function(){
$("#web-scraping").click(function(){
$(".web-d").addClass("hide")
$(".web-a").addClass("hide")
$(".web-s").removeClass("hide")
});
$("#web-design").click(function(){
$(".web-d").removeClass("hide")
$(".web-a").addClass("hide")
$(".web-s").addClass("hide")
});
$("#web-animation").click(function(){
$(".web-d").addClass("hide")
$(".web-a").removeClass("hide")
$(".web-s").addClass("hide")
});
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
}
a{
text-decoration: none;
}
.container{
min-height: 65vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero{
background-color: #32312F;
position: relative;
z-index: 1;
}
#hero .hero{
max-width: 1500px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 5rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero p{
display: block;
width: 40%;
font-size: 2rem;
margin-top: 60px;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .button-box{
margin-top: 40px;
height: 35px;
width: 140px;
}
#hero .cta{
display: inline-block;
padding: 8px 20px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
font-size: 1.5rem;
visibility: hidden;
text-transform: uppercase;
position: relative;
transition: .3s ease background-color;
opacity: 1;
animation: box_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .cta span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: box_reveal_box 1s ease;
animation-delay: .5s;
}
#hero .cta:hover{
box-shadow:0 0 0 1px #fff inset;
}
/*animation*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes box_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: #fff;
}
}
#keyframes box_reveal{
100%{
visibility: visible;
}
}
.down-pointer{
align-items: center;
justify-content: center;
display: flex;
position: relative;
z-index: 3;
top: -160px;
}
.down-pointer .left{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -2px 2px;
color: #f6f6f6;
}
.down-pointer .left{
transform: rotate(-45deg);
}
.work-container{
background-color: #f6f6f6;
height: 1000px;
max-width: 1300px;
border-radius: 20px 20px 0px 00px;
margin: 0 60px;
top: -100px;
padding: 100px;
position: relative;
z-index: 2;
}
.work-category{
align-items: center;
justify-content: center;
display: flex;
}
.work-category button{
text-transform: capitalize;
border: 1px solid #32312F;
padding: 15px 30px;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3px;
color: #32312F;
outline: none;
cursor: pointer;
}
.work-category button:hover{
}
#web-scraping{
margin: auto 100px auto auto;
}
#web-design{
margin: auto 0 auto 0;
}
#web-animation{
margin: auto auto auto 100px;
}
.work-block-container-flex{
}
.work-block-container{
margin: 0 auto;
display: inline-block;
overflow: hidden;
width: 100%;
}
.work-block{
float: left;
width: 30%;
height: 180px;
border-radius: 3px;
padding: 20px;
margin: 5px;
transition: 0.7s all;
}
.work-block.web-s{
background-color: green;
}
.work-block.web-d{
background-color: blue;
}
.work-block.web-a{
background-color: red;
}
.work-block.web-s.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.work-block.web-d.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.work-block.web-a.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>The HTML5 Herald</title>
</head>
<body>
<!-- Starting-menu-->
<section id=hero>
<div class="hero">
<div class="hero container">
<div>
<h1>What I can do,<span></span></h1>
<h1>for your Business<span></span></h1>
<p><span>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
</span></p>
<div class="button-box">Contact Me<span></span></div>
</div>
</div>
</div>
</section>
<!-- End-->
<!-- my work -->
<section class="work-container">
<a class="down-pointer" href="#"><span class="left"></span></a>
<div class="work-category">
<button id="web-scraping">Web Scraping</button>
<button id="web-design">Web Design</button>
<button id="web-animation">web animation</button>
</div>
<div class="work-block-container">
<div class="work-block web-s"></div>
<div class="work-block web-d"></div>
<div class="work-block web-s"></div>
<div class="work-block web-d"></div>
<div class="work-block web-d"></div>
<div class="work-block web-a"></div>
</div>
</section>
<!-- my work end -->
<!-- about me -->
<div class="container about" id="">
<h1>About</h1>
<div class="about-me-info">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!-- about me end-->
<!-- contact me -->
<!-- contact me end -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js.js"></script>
</body>
</html>
Related
I cannot figure out how to fixate the first part of the text and to make it show from the bottom
on the left is the hover that slides from the bottom and on the right is how it should look like in the beginning
Ive put the code I tried to use inside - please take a look
Thank you!
.container {
padding: 1em 0;
float: left;
width: 50%;
}
.image1 {
display: block;
width: 100%;
height: auto;
transition: all 0.5s ease;
opacity: 1;
backface-visibility: hidden;
}
.middle {
background: rgb(30, 30, 36);
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: rgb(246, 244, 234);
margin: 0px;
}
.middle:hover {
transition: all 0.3s ease-in-out 0s;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.product-box {
overflow: hidden;
}
.product-box:hover img {
transform: scale(1.04);
transition: all 0.8s linear;
}
.product-box:hover {
background: rgba(30, 30, 36, 0.6) !important;
}
.product-box:hover .image1 {
opacity: 0.5;
background: transparent;
}
.product-box:hover .middle {
opacity: 1;
}
.fadeIn-bottom {
top: 80%;
}
<div class="container">
<div class="product-box fadeIn-bottom" style="margin-top: 20px;">
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" style="width: 100%; height: auto; margin-bottom: -40px;" class="image1">
<div class="middle ">
<p style="color: #F6F4EA;">Suites</p>
</div>
<div>
</div>
What you have to do is put the relative, i.e. the product-box in a relative position, then set the absolute position to the "title" to which you want to apply the transition. Once this is done, you need to know how to use transitions and how absolute position works. These two things are important enough to make several cool and simple animations so I recommend you to check them out.
.product-box {
position: relative;
}
.image1 {
width: 100%;
height: 100%;
}
.title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 90%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .5);
color: white;
transition: all .5s;
}
.product-box:hover .title {
top: 0;
}
<div class="container">
<div class="product-box">
<div class="title">
<h4>Suites</h4>
</div>
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" data-filename="1.png" class="image1">
<div>
</div>
I assume this is what you want;
.container {
width: 50%;
}
.image1 {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
transition: all 0.5s ease;
opacity: 1;
}
.product-box {
display: flex;
position: relative;
}
.middle {
position: absolute;
width: 100%;
color: #F6F4EA;
background: rgb(30, 30, 36);
font-weight: 400;
font-size: 16px;
line-height: 22px;
margin: 0px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
font-family: sans-serif;
display: flex;
bottom: 0;
justify-content: center;
align-items: center;
}
.product-box:hover {
transform: scale(1.04);
transition: all 0.8s linear;
}
.product-box:hover .middle {
opacity: 0.8;
height: 100%;
padding: 0;
}
<div class="container">
<div class="product-box">
<img src="https://phpmysqlappdiag454.blob.core.windows.net/blob/assets/images/hotelkos/Rectangle 14.png" alt="" class="image1">
<div class="middle">Suites</div>
</div>
</div>
I have a problem .. The blue-colored elements appear vertically, but I want them to appear horizontally .. I tried all the methods and did not solve the problem .. The code is too long, so I will only put the code of items
#cv .cv-item{
width: 499px;
height: 400px;
flex-basis: 80%;
display: inline-block;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 10px;
background-color: aqua;
background-size: cover;
margin: 10px 5%;
position: relative;
z-index: 1;
}
#cv .cv-item::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
}
Whoever wants the code details I will put it
Edit: It worked .. Unlimited thanks to everyone who tried with me .. Thank you
Change the rule for #cv .cv-buttom to this:
#cv .cv-buttom{
display: flex;
margin-top: 50px;
}
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#700&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: 'Lato',sans-serif ;
}
a {
text-decoration: none;
}
p{
color: white;
text-align: left;
font-size: 1.4rem;
line-height: 1.9rem;
}
.container{ /* وضع العناصر في الوسط توسيط */
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* hero section*/
#hero{
background-image: url(./image/michael-d-beckwith-cLOgf_7PjJs-unsplash.jpg); /* وضع صورة عبارة عن خلفية*/
background-size: cover;
background-position:top center;
position: relative;
z-index: 1;
}
#hero::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .4;
z-index: -1;
}
#hero .hero {
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 4rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards; /* استدعاء الدالة */
animation-delay: 1s;
}
#hero h1:nth-child(1) {
animation-delay: 1s;
}
#hero h1:nth-child(2) {
animation-delay: 2s;
}
#hero h1:nth-child(3) {
animation: text_reveal_name .5s ease forwards;
animation-delay: 3s;
}
#hero h1 span{ /* فهاد الحالة راح يديرهم في وسط بوكس لون تاعو واضح */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fddb3a;
animation: text_reveal_box 1s ease;
}
#hero .cta{
display: inline-block; /* يفرق بين العناصر يخلي فراغ*/
padding: 10px 30px;/*يخلي فراغ في الحواف لولة في الاطراف و الفوق */
color: white;
background-color: transparent;
border: 2px solid #fddb3a;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px; /* يبغد البوتون على النص لي لفوق */
transition: .5s ease; /* يخلي مدة زمنية بين التغيير الهوفر */
transition-property:background-color,color ;
}
#hero .cta:hover{ /* تاثيرات عند وضع زر الفأرة*/
color: black;
background-color:#fddb3a;
}
/*end of hero section */
/* key frame */
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width:0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: white;
}
}
#keyframes text_reveal_name { /* كي يحدث تغيير يخلي اللون تع الكلمة المحددة اصفر */
100% {
color: #fddb3a;
font-weight: 500;
}
}
/* end key frame */
/* cv section */
#cv .cv{
flex-direction: column; /* كانو عموديا درك يولي افقيا */
text-align: center;
max-width: 150px;
margin: 0 auto;
padding: 100px 0;
}
#cv .cv-top{
font-size: 1.4rem;
margin-top: 5px;
line-height: 2.5rem;
font-weight: 300px;
letter-spacing: .05rem;
}
#cv .section-title{
font-size: 4rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
}
#cv .cv-buttom{
display: flex;
margin-top: 50px;
}
#cv .cv-item{
width: 499px;
height: 400px;
flex-basis: 80%;
display: inline-block;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 10px;
background-color: aqua;
background-size: cover;
margin: 10px 5%;
position: relative;
z-index: 1;
}
#cv .cv-item::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
}
.cv .cv-buttom .icon{
height: 80px;
width: 80px;
margin-bottom: 20px;
display: inline-block;
}
#cv .cv-item h2{
font-size: 2rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#cv .cv-buttom .icon img{
height: 100%;
width: 100%;
object-fit: cover;
}
#cv .cv-item p {
color: white;
text-align: left;
}
#cv .cv-top p{
padding-top: 12px;
text-align: center;
color: black;
}
/* endof cv section */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>My website</title>
</head>
<body>
<!-- Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1>Hello <span></span></h1>
<h1>My name is <span></span></h1>
<h1>Smahi <span></span></h1>
Enter
</div>
</div>
</section>
<!-- End of hero section-->
<!-- Cv section-->
<section id="cv">
<div class="cv container">
<div class="cv-top">
<h1 class="section-title">CV</h1>
<p>Hello and welcome , My name is Rizki Samahi, and I am 19 years old, and I was born in Al-Qarara in the state of Ghardaia. I study automated media at the University of Ghardaia</p>
</div>
<div class="cv-buttom">
<div class="cv-item">
<div class="icon"><img src="https://img.icons8.com/nolan/64/information.png"/></div>
<h2>Pesonel information</h2>
<p>Name : Rezgui</p>
<p>Surname : Smahi</p>
<p>Adresse : Hai El MoudjahidineHai El MoudjahidineHai El MoudjahidineHai El MoudjahidineHai El Moudjahidine</p>
<p>Age : 19</p>
</div>
<div class="cv-item">
<div class="icon"><img src="https://img.icons8.com/nolan/64/information.png"/></div>
<h2>Pesonel information</h2>
<p>Name : Rezgui</p>
<p>Surname : Smahi</p>
<p>Adresse : Hai El Moudjahidine</p>
<p>Age : 19</p>
</div>
<div class="cv-item">
<div class="icon"><img src="https://img.icons8.com/nolan/64/information.png"/></div>
<h2>Pesonel information</h2>
<p>Name : Rezgui</p>
<p>Surname : Smahi</p>
<p>Adresse : Hai El Moudjahidine</p>
<p>Age : 19</p>
</div>
</div>
</div>
</section>
<!-- End of cv section-->
</body>
</html>
"flex-direction: column;" creates a vertical stack of items. Change this to "Row" and ensure you're using "Display: flex" as well instead of "inline-block."
try float:
#cv {
overflow: hidden;
}
#cv .cv-item{
width: 200px;
height: 200px;
flex-basis: 80%;
float: left;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 30px;
border-radius: 10px;
background-color: aqua;
background-size: cover;
margin: 10px;
position: relative;
z-index: 1;
}
#cv .cv-item::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
}
<div id="cv">
<div class="cv-item"></div>
<div class="cv-item"></div>
<div class="cv-item"></div>
</div>
Change your css rule:
#cv .cv-buttom {
display: flex;
margin-top: 50px;
}
I should mention that my screen resolution is 1920x1080, but we are also using computers that have a shorter width, if I increase my browser to 150%, the pictures, and the header increase in size and move out of place in relation to the UL which stays in place. I will post my code below if anyone knows what I did wrong in my css code:
<body>
<z13>
<img src="marioswine.png" style = "display: block; margin: 0 auto;"
alt="cactxt" height = "125px" class = "center"/>
</z13>
<e2><img src="y.png" style = "display: block; margin: 0 auto;" alt="albany"
class = "strip"/></e2>
<h2 class = "announcement"> Announcements</h2>
<ul class = "wall">
<li class = "bars"></li>
</ul>
<div style = "position: absolute; left: 0px; top: 180px;">
<button id = "home" class = "strip"> HOME </button>
<button id = "about"> About Us </button>
<button id = "locations"> Locations </button>
<button id = "wine"> wine </button>
<button id = "beer"> beer </button>
<button id = "spirits"> spirits </button>
<button id = "lottery"> lottery </button>
<button id = "contact"> Contact Us </button>
</div>
<div>
<d>
<p>We are the greatest wine in all of wine....its gonne be yuuuuuuuge!!!!!
</p>
</d>
</div>
<div class="slideshow-container" style = "position: absolute; left: 260px;
top: 180px;">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="wine.jpg" style="width:100%">
<div class="text">Awesome wine</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="beer.jpg" style="width:100%">
<div class="text">Great Beer!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="spirits.png" style="width:100%">
<div class="text">The spirit of spirits!!</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
//This is my CSS code, I think the real problem should be here
<style type = "text/css">
//This is what i tried to use to be able to fit my content into a device of
any size, but it's not working
body{
width:100%;
height:100%;
}
z11{
top: -50px;
position: absolute;
}
z12{
top: 5px;
position: absolute;
}
z13{
top: 0px;
left: 40%;
//right: 5%;
position: absolute;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.strip {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
a3{ position: absolute;
top: 175px;
left: 245px;
}
b{ position: absolute;
top: 350px;
left: 255px;
width: 100%;
}
c{
position: absolute;
top: 225px;
right: 300px;
}
d{
position: absolute;
top: 525px;
left: 260px;
width: 100%;
max-width: 50%;
min-width: 20%;
//height: 100%;
border: 1px solid black;
background-color: #DCDCDC;
}
e{
position: absolute;
top: 350px;
right: 5px;
//max-width: 50%;
width: 500px;
}
e2{
position: absolute;
top: 175px;
left: 775px;
//max-width: 100%;
}
ul.wall{position: fixed;
position: absolute;
list-style-type:none;
top: 125px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2b2622;
}
li.bars{
display: block;
color: white;
text-align: center;
padding: 25px 16px;
text-decoration: none;
}
.side {
background-color: #555555; /* black */
color: white;
width: 250px;
border: none;
padding: 39px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 18px;
}
button {
background-color: #555555; /* black */
color: white;
width: 250px;
border: none;
padding: 39px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 18px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
button:hover {
background-color: #688396; /* Green */
color: black;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h2.announcement{
position: absolute;
top: 175px;
left: 1400px;
}
</style>
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 90%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
left: 90.7%;
border-radius: 3px 0 0 3px;
//width: 45px;
}
.prev {
left: 0%;
border-radius: 3px 0 0 3px;
width: 45px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover{
background-color: rgba(0,0,0,0.8);
}
.next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
//background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
You should use responsive web design. Please check HTML Responsive Web Design
I am wondering on what steps I should take so that I can optimise this webpage for different browsers.
If you take a look at my JSFiddle: https://jsfiddle.net/xpvt214o/137951/
when my webpage is condensed down, the elements are all over the place, and everything is only really in the correct position in full screen. How do I fix this?
HTML:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="main.js"></script>
<title>A'S COFFEE</title>
</head>
<body>
<div id="wrapper">
<div id="MenuIcon">
<div id="MenuLine"></div>
</div>
<div id="MainMenu">
<div id="logo">
<h1 class="logo">A's Coffee</h1>
</div>
<ul>
<li>HOME<div class="line"></div></li>
<li>MAKE AN ORDER<div class="line"></div></li>
<li>VIEW ORDERS<div class="line"></div></li>
</ul>
<div id="close">
<P>Click to leave</P>
</div>
</div>
<div id="centeralign">
<a class="button" id="btn1" href="place.html">Want to Place <br>an Order?</a><br>
<a class="button" id="btn2" href="#">View Orders?</a>
</div>
CSS:
body{
background-color: purple;
}
h1{
color: #e5b78e;
font-family: Arial;
font-size: 100pt;
padding: 0px;
margin: 0px;
display: block;
}
.button{
display: inline-block;
background: transparent;
text-transform: uppercase;
font-weight: bold;
font-style: normal;
font-family: Arial;
font-size: 2em;
letter-spacing: 0.2em;
color: rgba(223,190,106,0.7);
border-radius: 0;
padding: 18px 80px 20px;
transition: all 0.7s ease-out;
background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
background-position: 1% 50%;
background-size: 300% 300%;
text-decoration: none;
margin: 0.625rem;
border: none;
border: 1px solid rgba(223,190,106,0.3);
}
.button:hover{
color: #fff;
border: 1px solid rgba(223,190,106,0);
color: $white;
background-position: 99% 50%;
}
#btn1{
margin-top:30px;
display: inline-block;
padding-left: 30px;
padding-right:30px;
}
#btn2{
margin-top:30px;
display: inline-block;
padding-left: 47px;
padding-right: 47px;
}
.button:hover{
opacity: 1;
transition: opacity .2s ease-in;
}
#centeralign{
text-align: center;
top: 20em;
position: relative;
transition: all .5s ease-in-out;
}
br{
padding: 40px;
}
/* NAV */
#MenuIcon{
height: 25px;
width: 50px;
position: fixed;
top:50;
right: 50;
}
#MenuIcon:hover{
cursor: pointer;
}
#MenuLine{
height: 4px;
width: 50px;
background-color: #e5b78e;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
transition: all .3s;
}
#MenuIcon:hover #MenuLine{
width: 40px;
}
#MenuLine::before{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: 10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::before{
width: 50px;
}
#MenuLine::after{
content: '';
height: 4px;
width: 40px;
background-color: #e5b78e;
position: absolute;
margin-top: -10px;
transition: all .3s;
}
#MenuIcon:hover #MenuLine::after{
width: 50px;
}
#MainMenu{
height: 100vh;
width: 300px;
background-color: #181818;
-webkit-clip-path:polygon(0 0,100% 0,0% 100%,0% 100%);
position: fixed;
top:0;
left: -300px;
transition: all .5s ease-in-out;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
font-family: arial;
font-weight: bold;
color:white;
text-align: center;
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li{
margin: 20px;
}
ul li:hover{
cursor: pointer;
}
.line{
height: 2px;
width: 150px;
background-color: white;
margin-top: 10px;
position: absolute;
left: 50%;
transform: translate(-50%);
transition: all .3s;
}
ul li:hover .line{
width: 180px;
}
#logo{
position: absolute;
top:10%;
left: 50%;
transform: translate(-50%);
}
#close{
position: absolute;
bottom: 20%;
left: 50%;
transform: translate(-50%);
}
#close:hover{
cursor: pointer;
}
.LOGO{
font-size: 4.5em;
}
JS:
$(document).ready(function(){
$("#MenuIcon").click(function(){
$("#MainMenu").css("left","0px");
$("#MOVE").css("left","300px");
function showMenu(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,100% 100%,0% 100%)");
$("#MenuIcon").animate({right:'-100'},300);
}
setTimeout(showMenu,100);
});
$("#close").click(function(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,0% 0,100% 100%,0% 100%)");
function hideMenu(){
$("#MainMenu").css("left","-300px");
$("#MOVE").css("left","0px")
$("#MenuIcon").animate({right:'50'},300);
}
setTimeout(hideMenu,300);
function originalLayout(){
$("#MainMenu").css("-webkit-clip-path","polygon(0 0,100% 0,0% 100%,0% 100%)");
}
setTimeout(originalLayout,600);
});
});
Use media queries in your CSS to set styles for different sizes. Like so
#media only screen and (max-width: 767px) {
html {
color: #000;
}
/* styles to make page responsive */
}
This will make the text black when your page is <= 767px wide. Instead of changing the color change the layout of your elements.
You can use as many as you’d like so you can set a breakpoint at 350, 500, etc. and make your page look flawless at all different sizes. Hope that gets you started :)
For more info you can check out this link: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I am a web developer. for my client's website I need to put an effect on hover a specific div as shown in this website . when i hover on a div the background should change by rotating. how can i do this. I can do only ease effect for background change using css3 transition. is there any way to do the same without using jquery ?
see the scrrenshot
jsbin
I simulate your provide the animation without jquery. The key to achieve it that use the parent & chidl relation and understand the key point when animation play.
.hover{
position: relative;
width: 200px;
height: 200px;
background-color: #1cf;
}
.background{
position: absolute;
width: 100%;
height: 100%;
color: #fff;
text-align: center;
line-height:10;
background-color: #c33;
transition: all 0.3s;
z-index: 2;
font-size: 20px;
}
.content{
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
font-size: 20px;
opacity: 0;
line-height: 10;
transform: scale(-1,1);
transition: all 0.3s;
}
.hover:hover .background{
transform: scale(-1,1);
opacity: 0;
}
.hover:hover .content{
transform: scale(1,1);
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="hover">
<div class="background">
This is background!!!
</div>
<div class="content">
This is content!
</div>
</div>
</body>
</html>
.spin{
position: relative;
top: 45%;
left: 45%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.spin:hover{
transform: rotate(360deg);
}
.flip{
position: relative;
top: 45%;
left: 0%;
height: 100px;
width: 100px;
background: red;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 10px;
border: 1px solid black;
box-sizing: border-box;
padding: 10px 30px;
font-size: 25px;
font-family: thin;
text-align: center;
transition: 1.5s;
}
.flip:hover{
transform: rotateY(180deg);
background: black;
}
#font-face {
font-family: 'thin';
src: url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2');
}
<div class='spin'>Spin me!</div>
<div class='flip'>Flip me!</div>