I am trying to change the opacity of my images, so that I can use a hover affect later on, to change the opacity back, creating a cool affect. The problem is the opacity attribute doesn't work! I can't seem to figure out the solution. Is it possible that Bootstrap is preventing this somehow?
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
And my CSS: (the opacity attribute is in .affect)
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 50px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 1;
background-color: #070606;
}
You need to have a base state, and a hover state for your image. Change your CSS to:
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s;
}
.affect:hover img {
opacity: 1;
}
This creates the hover effect.
Opacity default value is 1 try making it 0.5.
Related
My content images are stacking over one another, and I have set max width yet they take up more space than the desired. My other image under the heading is also taking up more space than the website designed. I tried deleting the .image selector in css but nothing changed.
* {
font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a {
font-size: 16px;
text-decoration: none;
color: #e5e7eb;
}
li {
list-style-type: none;
margin: 8px;
}
ul {
display: flex;
flex-direction: row;
}
.header {
background-color: #1f2937;
margin: 0;
padding: 0;
}
.header2 {
display: flex;
justify-content: space-around;
}
.heromain {
font-weight: bolder;
font-size: 48px;
color: #f9faf8;
}
.herotwo {
font-size: 18px;
color: #e5e7eb;
}
.section-left {
display: flex;
flex-direction: column;
}
.logo {
font-size: 24px;
color: #f9faf8;
font-weight: bold;
padding-top: 10px;
}
.content {
font-size: 36px;
font-weight: bolder;
color: #1F2937;
text-align: center;
}
.quote {
background-color: #e5e7eb;
font-size: 36px;
font-style: italic;
color: #1f2937;
padding: 100px 300px;
}
.action, button {
background-color: #3882f6;
color: white;
}
.action {
width: 650px;
height: 80px;
margin: 0 auto;
border-radius: 15px;
padding: 30px 100px;
}
button {
border-radius: 5px;
border: 2px solid white;
padding: 4px 17px;
width: 50px;
margin: 10px;
display: inline;
}
footer {
background-color: #1F2937;
color: #e5e7eb;
text-align: center;
padding: 30px;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 30px;
}
.container {
display: flex;
justify-content: space-around;
padding: 100px;
}
.info {
border-radius: 15px;
border-color: #3882f6;
border-width: 4px;
max-width: 200px;
}
.information {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
flex: 1 1 auto;
}
.text {
text-align: center;
}
.image {
max-width: 200px;
}
<!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>My website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="header2">
<div class="logo">Header Logo</div>
<ul>
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</ul>
</div>
<div class="container">
<div class="section-left">
<div class="heromain">This website is<br>awesome</div>
<div class="herotwo">This website has some subtext that goes here under the <br>main title. It is a smaller font and colors contrast.</div>
<button>Sign up</button>
</div>
<div class="image">
<img src="image.png">
</div>
</div>
</div>
<div class="content">Some random information.</div>
<div class="information">
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
<div class="info">
<img src="image.png" alt="img">
<div class="text">this is some subtext under an illustration or image</div>
</div>
</div>
<div class="quote">This is an inspiring quote, or a testimonial from a customer.
Maybe its just filling up space, or maybe people will actually read it. Who knows? All I know is that it looks nice.
<div class="attribution">-Thor, God of Thunder</div>
</div>
<div class="action">
<p><strong>Call to action! It's time!</strong><br>
Sign up for our product by clicking that button right over there!
</p>
<button>Sign up</button>
</div>
<footer>Copyright © The Odin Project 2021</footer>
</body>
</html>
The desired outcome for my images
The outcome I am getting:
[2]: https://imgur.com/O4EFYVo
Solution one:
you can fix that by adding bootstrap to your project, for example you want 3 picture be next each other, try this one and edit that by your image src
<!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">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>StackOverFlow</title>
</head>
<body>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
</body>
</html>
or if you want 4 picture be next of each other change the md and g ... in line 17
Solution two:
or you can fix that with HTML and CSS with class and ... look at this one :
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
Remember that your pictures size are important too , and your web site it would be better to be responsive because of that i suggest you to use number one, but in the end both of them are useful and you can use them
Add this to your css:
.info img {
max-width: inherit;
}
enter image description here
I would like to list items A and B side by side in CSS. What should I do?
HTML code
<!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="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
I hope a tags are arranged in a horizontal line.
I want the A and B in the picture in a row, and I've adjusted the width of the parent element, but it didn't work.
Just change the HTML structure to use the propper bootstrap classes.
<div class="container">
<div class="row align-items-center">
<div class="col logo">
<a class="title" href="">
</a>
</div>
<div class="col-auto category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
jsFiddle
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!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="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
<div class="category">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
MODIFY THE CSS
.logo {
height: 78px;
float:left
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
margin-top:5px;
float:left
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
}
.title {
float:left;
display: inline-block;
width: 118px;
height: 30px;
margin:0px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
Use bootstrap grid system.
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
.logo {
height: 78px;
}
body {
font-family: Noto Sans KR,system-ui,AppleSDGothicNeo,sans-serif;
}
a {
text-decoration: none;
color: #000;
}
/* head title */
.category {
font-size-adjust: 18px;
font-weight: 700;
height: 78px;
}
.title {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
width: 118px;
height: 30px;
background: url(https://t1.daumcdn.net/kakaopay/homepage/production/v1.0.0_1599023671711/img/pc/sp-icon.png) no-repeat 0 0;
background-position: 0% 43%;
}
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="ex1.css">
<link rel="stylesheet" href="grid.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 logo-title">
<div class="logo">
<a class="title" href="">
</a>
</div>
</div>
<div class="col-6">
<div class="category d-flex align-items-center justify-content-center">
이야기하다
금융하다
함께하다
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to create a gallery using bootstrap, and I cant seem to keep all my images the same size both height and width wise.
How do I go about making all the images in the gallery the same size.
here is the jsfiddle- https://jsfiddle.net/j0z3sq5s/
Apologies for I am working on a localhost/localserver and the images cant be seen. however I have taken some screen shots.
enter image description here
enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="niceMJ.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jute.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="download.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="asper.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
here is the css
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
.thumbnail img{
height: 300px;
width: 100%;
object-fit : cover;
}
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
Here you have explain of object-fit :https://css-tricks.com/almanac/properties/o/object-fit/
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
h1{
padding: 20px;
}
h2{
text-align: center;
font-size: 60px;
}
p {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 24px;
text-align: center;
font-style: italic;
}
.col-md-4{
padding-bottom: 20px;
}
.thumbnail img{
min-height: 300px;
min-width: 300px;
}
.jordan{
padding: 10px;
}
.summary{
padding: 10px;
}
.pergame{
position: relative;
width: 100%;
padding: 10px;
}
.Totals{
position: relative;
width: 100%;
padding: 10px;
}
#para{
padding-left: 20px;
padding-right: 20px;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
text-align: justify;
}
li{
list-style-type: none;
}
.mb-0 {
margin-bottom: 0 !important;
}
.stats{
padding-right: 30px;
padding-left: 20px;
padding-bottom: 20px;
height: 400px;
width: 350px;
float: left;
}
.jumbotron{
height: 350px;
width: 100%;
background-size: 100% 100%;
background-image:url(mj.jpg);
margin: 0;
}
.navbar {
margin: 0;
font-size: 20px;
font-family: "Gill Sans", sans-serif;
}
.footerhome{
background-color: grey;
padding: 30px;
width: 100%;
padding-bottom: 0 !important;
opacity: 0.5;
filter: alpha(opacity=50);
}
.footer{
background-color: grey;
padding-bottom: 0 !important;
padding: 30px;
width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
}
.text-center p{
text-align: center;
font-size: 20px;
font-style: italic;
font-family: "Gill Sans", sans-serif;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michael Jordan Tribute Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>
<body>
<div class="jumbotron">
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About MJ</li>
<li>Accomplishments</li>
<li>Statistics</li>
<li>Gallery</li>
<li>Quotes</li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
<p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>
I'm trying to design google play like webpage design (Mobile version). I'm using CUSTOM GRID SYSTEM (12 col 0.5% margin). The problem is that body color is appearing over header section (I think so, maybe its a different problem). I want to make it look/scroll like this:
Example image of google play mobile
Here is the code:
**
You may need to zoom to 250% or landscape max width:640px to view the
design.
**
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {
background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70%;
width: 100%;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
You want something like this. In your code you are fixing bg-image of header, therefore the body will scroll over that image, so need to fix the header instead of fixing bg-image
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
padding-top:70vh;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
.top {
height: auto;
margin: auto;
font-family: Roboto Light;
}
.nav {
height: 40px;
width: 100%;
position: fixed;
background: #4caf50;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
top:0;
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: white;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #388e38;
}
.header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed;
height: 70vh;
width: 100%;
position:fixed;
top:40px;
z-index:-1;
}
a {
text-decoration: none;
}
.container {
margin: 5%;
background: white;
}
.personal_icon {
margin: 5%;
}
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: landscape) and (max-width: 640px)" href="landscape.css">
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="top">
<div class="nav">
<nav>
<img src="http://img.informer.com/icons/png/32/1531/1531696.png" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
</div>
<br>
<div class="header">
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
<div class="container">
<div class="section group">
<div class="col span_2_of_12">
<div class="userinfo">
<img class="personal_icon" src="large.png" srcset="large.png 800w, medium.png 500w">
</div>
</div>
</div>
</div>
</body>
</html>
After playing with it a bit, I think there is a problem with the header. It works if you give it position: fixed and z-index: -1. The only remaining problem is that you have to make sure that the space remains. I recommend a <div style="height: 70%"></div>
Setting z-index to 1 for your nav should help.
Hi Everyone,
I am trying to achieve the affect shown in [original image] where the "browse collection" div and the "request brochure" div line up with the four items above them.
I am trying to achieve the effect by using bootstrap and thought putting the elements in bootstraps "container" class would make everything line up. I haven't managed to get it to work yet though and the right sides don't line up. Can someone suggest a solution please? below is my code. thank you!
body {
font-family: 'Merriweather', serif;
}
/* content Area 2 */
.contentarea2{
background-color: #e3e2da;
width: 100%;
height: 585px;
position: relative;
}
.squares{
padding-top: 120px;
position: relative;
height: 100%;
}
.optionswrapper{
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
color: orange;
}
.option1{
width: 50%;
height: 75px;
background-color: #2a2a2a;
float: left;
}
.option2 {
width: 50%;
height: 75px;
background-color: #9b998f;
float: right;
}
/* buttons */
.collection {
border-radius: 20px;
background-color: Transparent;
padding: 10px;
}
.collection:hover{
border-radius: 20px;
background-color: #3d3d3d;
padding: 10px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffffff;
}
/* animations */
.fade2 {
opacity: 1;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.fade2:hover {
opacity: 0.5;
}
.overlay-portfolio{
padding: 25px;
position: absolute;
z-index:100;
bottom: 15px;
left: 5px;
color: #FFFFFF;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>container</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="custom.css" rel="stylesheet">
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="contentarea2">
<div class="container squares">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square1.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Modern</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square2.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Contemporary</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square3.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Minimalist</h3>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 triangles">
<img class="img-responsive fade2" src="img/square4.jpg" alt="client 1">
<div class="overlay-portfolio">
<h3>Classic</h3>
</div>
</div>
</div>
<div class="optionswrapper">
<div class="option1">
</div>
<div class="option2">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Remove the inline class' from your squares and add the class col-xs-height col-top
and replace row container with row-same-height
that should put them all into proportion.