Is it possible to add a red border around a flex box when the cursor hovers over the flex box?
If so, please could you modify the code. Thank you.
If there is a border animation or something that will look good please post your ideas.
.container {
width: 80%;
margin: 0 auto;
font-size: 14;
text-align: center;
}
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: cornflowerblue;
}
.navy {
background-color: navy;
}
.gray {
background-color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Flexbox</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="grid-item navy">
<h2 style="color:white">
Box 1
</h2>
</div>
<div class="grid-item gray">
<h2 style="color:white">
Box 2
</h2>
</div>
<div class="grid-item green">
<h2 style="color:white">
Box 3
</h2>
</div>
<div class="grid-item blue">
<h2 style="color:white">
Box 4
</h2>
</div>
</div>
</body>
yes it is, you can add hover selector to the corresponding div into your css so it looks like:
.container {
width: 80%;
margin: 0 auto;
font-size: 14;
text-align: center;
}
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: cornflowerblue;
}
.navy {
background-color: navy;
}
.gray {
background-color: gray;
}
.grid-item:hover {
border: 5px solid red;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Flexbox</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="grid-item navy">
<h2 style="color:white">
Box 1
</h2>
</div>
<div class="grid-item gray">
<h2 style="color:white">
Box 2
</h2>
</div>
<div class="grid-item green">
<h2 style="color:white">
Box 3
</h2>
</div>
<div class="grid-item blue">
<h2 style="color:white">
Box 4
</h2>
</div>
</div>
</body>
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
border: 5px solid transparent;
transition:1s;
}
.grid-item:hover{border: 5px solid red;
transition:1s;}
Try this
Related
I'm trying recreate this photo but I have run into an issue that I'm not so sure how to fix! So I need to shrink the width of the container class but I'm no entirely sure how. I've tried all kinds of different flex box strategies. My question is how can I shrink the width of the container class and how can I move all of the content to the center of the screen like in the photo? (If you expand the snippet to full screen all the content shows in the top left)
Here is what I have so far:
body {
font-family: Helvetica;
background-color: #000000;
color: white;
}
.container {
display: flex;
align-content: center;
justify-content: space-evenly;
align-items: center;
background-color: #5A5A5A;
color: white;
padding: 0px;
margin: 5px 0;
border-radius: 5px;
}
#clickMe {
border: 1px solid white;
display: inline-block;
padding: 10px;
font-family: Helvetica;
border-radius: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>List of items</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1>Products</h1>
<p>______
<p>
</div>
<div id="appendToMe">
<div class="boxes">
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
</div>
</div>
<div id="clickMe">Toggle Dark Mode</div>
</body>
</html>
You just have to wrap all your content which you want smaller and centered into another <div> element and shrink + center it
CSS Styling would be:
.shrink-container {
width: 400px; // or any other value you want
margin: 0 auto; // this is actually centering the container
}
body {
font-family: Helvetica;
background-color: #000000;
color: white;
}
.shrink-container {
width: 400px;
margin: 0 auto;
}
.container {
display: flex;
align-content: center;
justify-content: space-evenly;
align-items: center;
background-color: #5A5A5A;
color: white;
padding: 0px;
margin: 5px 0;
border-radius: 5px;
}
#clickMe {
border: 1px solid white;
display: inline-block;
padding: 10px;
font-family: Helvetica;
border-radius: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>List of items</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="shrink-container">
<div id="header">
<h1>Products</h1>
<p>______
<p>
</div>
<div id="appendToMe">
<div class="boxes">
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
</div>
</div>
<div id="clickMe">Toggle Dark Mode</div>
</div>
</body>
</html>
you can wrap then inside another div and just give max-width & margin: auto to it. Which would limit its width and keep it in center.
body {
font-family: Helvetica;
background-color: #000000;
color: white;
}
.container-outer {
margin: auto;
max-width: 500px;
}
.container {
display: flex;
align-content: center;
justify-content: space-evenly;
align-items: center;
background-color: #5A5A5A;
color: white;
padding: 0px;
margin: 5px 0;
border-radius: 5px;
}
#clickMe {
border: 1px solid white;
display: inline-block;
padding: 10px;
font-family: Helvetica;
border-radius: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>List of items</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-outer">
<div id="header">
<h1>Products</h1>
<p>______
<p>
</div>
<div id="appendToMe">
<div class="boxes">
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
<div class="container">
<p>Hello</p>
<p>World</p>
<p>Hello</p>
</div>
</div>
</div>
<div id="clickMe">Toggle Dark Mode</div>
</div>
</body>
</html>
I am creating a small quiz app. And After answering question in quiz I am showing the progress bar.
But I have styled the progress bar using two div elements, One div parent element and another is child. But when I am applying css on parent div(id = "progressBar") it is working well but child div's (id= "progressBarFull")css is not working.
Please tell me why?
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 90%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235,0.25);
background-color: white;
}
.choice-prefix{
background-color: #56a5eb;
padding: 1.5rem 2.5rem;
color: white;
}
.choice-text{
padding: 1.5rem;
width: 100%;
}
.choice-container:hover{
cursor:pointer;
box-shadow: 0.4rem 0.6rem rgba(86, 185, 235, 0.5);
transform: translate(-0.1rem);
transition: transform 150ms;
}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* HUD DISPLAY */
#hud{
display: flex;
justify-content: space-between;
}
.hud-prefix{
text-align: center;
font-size: 2rem;
}
.hud-main-text{
text-align: center;
}
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
};
#progressBarFull{
height: 2.5rem;
background-color: #56a5eb;
};
<!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">
<title>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div class="hud-item">
<p id= "progressText"class="hud-prefix">
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div class="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
</h1>
</div>
</div>
<h2 id="question">What is the answer to this question?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
Click here for the output
you need to take the semicolons out after the closing braces:
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
} /* no semicolon here */
#progressBarFull{
height: 2.5rem;
background-color: #56a5eb;
} /* no semicolon here */
For reference check out MDN article on css syntax. Basically, an unnecessary semicolon after the the terminating curly brace will hamper user agent's parsing of css and the css code following that won't be parsed.
You have a badly placed semicolon after progress Bar. And I would recommend setting height as a percentage.
.choice-container{
display: flex;
margin-bottom: 0.5rem;
width: 90%;
font-size: 1.8rem;
border: 0.1rem solid rgb(86, 165, 235,0.25);
background-color: white;
}
.choice-prefix{
background-color: #56a5eb;
padding: 1.5rem 2.5rem;
color: white;
}
.choice-text{
padding: 1.5rem;
width: 100%;
}
.choice-container:hover{
cursor:pointer;
box-shadow: 0.4rem 0.6rem rgba(86, 185, 235, 0.5);
transform: translate(-0.1rem);
transition: transform 150ms;
}
.correct{
background-color: #28a745;
}
.incorrect{
background-color: #dc3545;
}
/* HUD DISPLAY */
#hud{
display: flex;
justify-content: space-between;
}
.hud-prefix{
text-align: center;
font-size: 2rem;
}
.hud-main-text{
text-align: center;
}
#progressBar{
width : 20rem;
height: 3.1rem;
border: 0.3rem solid #56a5eb;
}
#progressBarFull{
height: 100%;
background-color: #56a5eb;
};
<!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">
<title>Quick Quiz - Play</title>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="game.css" />
</head>
<body>
<div class="container">
<div id="game" class="justify-center flex-column">
<div id="hud">
<div class="hud-item">
<p id= "progressText"class="hud-prefix">
</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>
<div class="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
</h1>
</div>
</div>
<h2 id="question">What is the answer to this question?</h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1">Choice 1</p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2">Choice 2</p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3">Choice 3</p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4">Choice 4</p>
</div>
</div>
</div>
<script src="game.js"></script>
</body>
</html>
I've divided screen to 2 parts and want to have same height for both the divs.
What I want is left side div should have same height and should occupy the height same as right part.
When I see this screen in mobile format it is not showing proper.
I tried using height 100% but not working. What am I missing over here?
This is what I've tried.
Link to codepen
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
color:white;
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}
<html lang="en">
<head>
<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.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid" style="height:100%; background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>
I found this (I cheat a little by given a fix size to the div: myDiv, who has the background-image because I think that background-image doesn't have size):
.myDiv{
height: 680px; /*manual check to get image height*/
}
#main_header_div{
color: white;
position: absolute;
width: 100%;
height: inherit;
top: 0;
background-color: rgba(152, 38, 38, 0.7);
}
#div_1_text {
margin-top: 15%;
margin-left: 15%;
color: white;
}
#div_2_text {
margin-top: 5%;
margin-left: 15%;
color: white;
}
#div_3_text {
margin-left: 15%;
color: white;
}
#div_4_button {
margin-left: 15%;
color: white;
}
<html lang="en">
<head>
<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.2/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div class="jumbotron jumbotron-fluid myDiv" style="background : url('https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg');">
<div id="main_header_div">
<h3 id="div_1_text">Image Taken From Flickr !</h3>
<p id="div_2_text">For DEMO</p>
<p id="div_3_text">TEXT 3</p>
<button id="div_4_button" type="button" class="btn btn-outline-secondary">BUTTON</button>
</div>
</div>
</div>
<div class="col-md-6" style="padding-right: 0; padding-left: 0;">
<div style="width:100%;">
<img class="image-responsive" src="https://live.staticflickr.com/65535/50566935741_ba2c76c194_b.jpg" />
</div>
</div>
</div>
</body>
</html>
I want to go to the about section without needing to link to another .html file. Originally, I tried a href = "About.html" but when clicking on the About Button it just links to that page ignoring the index.html page where all the main content is. Next, I tried a href = #About which did nothing when the about button was pressed.
section{
padding: 39px 0;
}
.container{
width: 100%;
max-width: 1225px;
margin: 0 auto;
padding: 0 24px;
}
.headline-description h5{
color: #ffffff;
font-size: 30px;
font-weight: 100;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 4px;
}
.Content{
width: 100%;
background-color: bisque;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
}
.about-button{
text-decoration: none;
color: #225522;
border: 1px solid #225522;
padding: 10px 50px;
font-size: 20px;
transition: all 1s;
}
.the-life-of-a-chef{
background-color: #2255cc;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CHEF</title>
<link rel="stylesheet" href="asdf.css">
</head>
<body>
<section class="Content" id="Content">
<div class="container">
<!--Website Name-->
<h1 class="headline">C H E F</h1>
<div class="headline-description">
<div class="seperator">
<!--Underline Chef / Cutlery Icon in middle-->
<div class="line line-left"></div>
<div class="cutlery"><i class="fa fa-cutlery"></i></div>
<div class="line line-right"></div>
</div>
<h5>Life of a chef</h5>
About
</div>
</div>
</section>
</body>
</html>
<section class="the-life-of-a-chef">
<div class="container">
<div class="rest-button">
<div class="Lorem-text">
<div class="LifeOfChefHeadline">
<h2 class="AboutHeadline">
<span class="About">About</span>
</h2>
<h1 class="headline headline-gold">The Life Of A Chef</h1>
</div>
Just add id="About" to the section you want to scroll to.
See example here: https://jsfiddle.net/ud3k2ztv/
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!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="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!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="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/