So I have some html that I've been placing into the script editor web part on SharePoint. It looks good on Chrome SharePoint & it looks correct on my local server on Explorer 11...
But the number text shifts to the right of each button when viewing the SharePoint snippet in Explorer 11.
Here is what it looks like in the script editor webpart on Explorer:
Does anyone know if this is a SharePoint/Explorer issue or something because the snippet looks fine everywhere else? Thanks
This snippet is how it looks on my Explorer local server and Chrome/ Chrome Sharepoint
.grid {
margin: 0 auto;
width:150vw;
max-width: 150vh;
/*height: 25vw;*/
/*max-height: 25vh;*/
font-size: 2rem;
}
.row1 {
display: flex;
float: center;
margin: 0 auto;
width:50vw;
max-width: 50vh;
/*height: 25vw;*/
/*max-height: 25vh;*/
font-size: 2rem;
}
.row2 {
display: flex;
}
.box {
background: #003b5c;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size: cover;
background-position: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
/* Apply images here */
.topblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.leftblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.midblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.rightblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
/* Hover effect*/
.section {
align-items: center;
text-align: center;
box-shadow: 0px 0px 5px 2px #7a9bac79;
transition: box-shadow 0.2s linear;
margin: 0.5em; /* Increased margin since the box-shado expands outside the element, like outline */
}
.section:hover {
box-shadow: 0px 0px 0px 8px #ffc72c;
}
<body>
<div class="row1">
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="topblock" href=""><h4 style="color:white;">1</h4></div>
</div>
</div>
<div class="grid">
<div class="row2">
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="leftblock"><h4 style="color:white;">2</h4></div>
</div>
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="midblock"><h4 style="color:white;">3</h4></div>
</div>
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="rightblock"><h4 style="color:white;">4</h4></div>
</div>
</div>
</div>
</body>
Add the Style below in your code.
.section h4{
margin:0px !important;
}
Full code:
<style type="text/css">
.grid {
margin: 0 auto;
width:150vw;
max-width: 150vh;
/*height: 25vw;*/
/*max-height: 25vh;*/
font-size: 2rem;
}
.row1 {
display: flex;
float: center;
margin: 0 auto;
width:50vw;
max-width: 50vh;
/*height: 25vw;*/
/*max-height: 25vh;*/
font-size: 2rem;
}
.row2 {
display: flex;
}
.box {
background: #003b5c;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size: cover;
background-position: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
/* Apply images here */
.topblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.leftblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.midblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
.rightblock {
background-image: url("https://media1.tenor.com/images/16ffa7fc3ca750fd6f64eaf577e529c5/tenor.gif?itemid=7422720");
}
/* Hover effect*/
.section {
align-items: center;
text-align: center;
box-shadow: 0px 0px 5px 2px #7a9bac79;
transition: box-shadow 0.2s linear;
margin: 0.5em; /* Increased margin since the box-shado expands outside the element, like outline */
}
.section:hover {
box-shadow: 0px 0px 0px 8px #ffc72c;
}
.section h4{
margin:0px !important;
}
</style>
<div class="row1">
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="topblock" href=""><h4 style="color:white;">1</h4></div>
</div>
</div>
<div class="grid">
<div class="row2">
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="leftblock"><h4 style="color:white;">2</h4></div>
</div>
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="midblock"><h4 style="color:white;">3</h4></div>
</div>
<!-- Link and Title -->
<div class="box section" onclick="location.href='https://google.com';" style="cursor:pointer;">
<div class="rightblock"><h4 style="color:white;">4</h4></div>
</div>
</div>
</div>
Related
Im trying to create simple login form using html and css but my input field is displayed below the form what is error..
<body>
<div class="container">
<div class="loginForm">
<div class="heading">
<h1>Hello heading</h1>
</div>
<div class="formContent">
<input type="text" />
</div>
</div>
</div>
</body>
````````````````
my csss
```````````````
* {
padding: 0;
margin: 0;
font-family: serif;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
}
.loginForm {
width: 350px;
height: 400px;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 3px rgb(182, 169, 169);
}
and this is the link online editor:
https://stackblitz.com/edit/web-platform-pmvylw?file=styles.css
Try the below changes:
* {
padding: 0;
margin: 0;
font-family: serif;
}
.container {
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
height: 100vh;
}
.container .loginForm {
width: 40%;
height: 60%;
text-align: center;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 3px rgb(182, 169, 169);
}
<body>
<div class="container">
<div class="loginForm">
<div class="heading">
<h1>Hello heading</h1>
</div>
<div class="formContent">
<input type="text" />
</div>
</div>
</div>
</body>
Mainly assigning height as 100vh on all elements was causing this issue.
Hope that's how you wanted it to look.
First of all you can declare you width in body and use
margin: 0 auto; to get div in center horizontally
than you can apply
display: flex;
align-items: center;
to center it vertically.
Now your parent element which is body have 100vh and your .container have 40rem height in this situation if you declare your
.container .loginForm {
height:100%;
}
it will take 40rem as a height which is .container(parent) height.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
font-family: serif;
}
body {
min-height: 100vh;
width: 35rem;
margin: 0 auto;
display: flex;
align-items: center;
}
.container {
height: 40rem;
background: #f2f2f2;
width: 100%;
}
.loginForm {
background-color: #fff;
border-radius: 1rem;
box-shadow: 0.1rem 0.3rem rgb(182, 169, 169);
height: 100%;
}
<div class="container">
<div class="loginForm">
<div class="heading">
<h1>Hello heading</h1>
</div>
<div class="formContent">
<form action="">
<input type="text" name="" id="" />
</form>
</div>
</div>
</div>
I want to create a semi-transparent color layer where I want to type title and description of image but due to some reason I am not able to make the changes or fulfill my goal. Can anyone help me to solve the issue? I am not able to overlay the transparent layer over image as it is on same card.
I want to create like below image:
My HTML code is here:
.container{
max-width: none;
}
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
padding-right: 0;
padding-left: 0;
}
.card {
padding: 10px 0 0 0 !important;
}
section {
overflow: hidden;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
[data-aos^=fade][data-aos^=fade].aos-animate {
opacity: 1;
transform: translateZ(0);
}
.card .entry {
padding: 20px;
margin-bottom: 60px;
overflow: hidden;
box-shadow: 10px 10px 5px grey;
background: #ea8537;
}
.entry:hover{
background: #ffcc00;
transition: 1.2s;
transform: scale(1.01);
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
*, ::after, ::before {
box-sizing: border-box;
}
.card .entry .entry-img {
max-height: 400px;
margin: -20px -20px 20px -20px;
overflow: hidden;
z-index: -1;
}
.img-fluid {
width: 100%;
height: auto;
}
img {
vertical-align: middle;
border-style: none;
}
.img:hover{
opacity: 0.6;
}
.card .entry .entry-title {
font-size: 20px;
line-height: 26px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
.card .entry .entry-title a {
color: #FFFFFF;
transition: 0.3s;
}
.card .entry .entry-content a {
color: #FFFFFF;
transition: 0.3s;
}
.card .entry .entry-meta {
margin-bottom: 15px;
color: #000;
}
.align-items-stretch {
align-items: stretch !important;
max-width: 100%;
}
<section id="card" class="card">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up">
<article class="entry">
<div id="img1" type="image" class="entry-img">
<img src="" alt="" class="img-fluid">
</div>
<h2 class="entry-title">
<a href="">
<div id="txt1" type="text"></div>
</a>
</h2>
<div class="entry-content">
<p>
<div id="txt2" type="text"></div>
</p>
</div>
</div>
</div>
</div>
</section>
You can use very simple structure like this:
HTML:
.wrapper {
position: relative;
width: 100%;
background: url('https://images.unsplash.com/photo-1455582916367-25f75bfc6710?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1055&q=80') center center no-repeat;
background-size: cover;
height: 500px;
}
.overlay {
position: absolute;
bottom: 0;
height: 100px;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
}
h3, p {
color: white;
margin: 0;
margin-bottom: 10px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrapper">
<div class="overlay">
<h3>This is the title</h3>
<p>This is the main content</p>
</div>
</div>
</body>
</html>
I am trying to fix a few issues in my code, but somehow it seems to get worse.
It should look like the example. The four boxes need to sit next to each other. All six images have to be in in row of three. for that I used div class column. On these images the names of the animal should be written (transparent).
For this I used Pad. Now the names appear on the background image instead of the individual images under.
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("images/mandarinfish.jpg");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Playfair Display', serif;
}
/* bovenste rand*/
header {
background-color: #D3D3D3;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
border-radius: 0px;
}
#grade {
height: 200px;
background-color: grey;
background-image: linear-gradient(grey, white, grey);
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color:gainsboro;
}
/* positie navbar */
position: relative;
}
.navbar a {
float: left;
display: flex;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*menu*/
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
.navbar
{
background-color: transparent
}
/*blok categorie*/
.box2 {
display: inline-block;
border: 2px solid black ;
padding: 30px;
border-radius: 25px;
text-align: center;
margin: 1em;
width: 500;
height: 100;
}
/*size foto's*/
{
box-sizing: border-box;
}
img {
height: 300px;
width: 200px;
align-self: flex-start;
}
.row {
display: flex;
}
/* three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
/*onderste zes afbeeldingen tekst op foto */
.image {
position: relative;
width: 100%;
text-align: center;
color: transparent;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
border:2px solid #000000;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/* Tablet Landscape */
#media screen and (min-width: 320px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width:768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Dieren</title>
<link href="normalise.css" rel="stylesheet" type="text/css">
<link href="dieren.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="bg"></div>
<div class="bg-img">
<div class="scrollmenu">
<div class="container">
<div class="topnav">
<ul>
<li><a>Amfibieën</a></li>
<li><a>Vogels</a></li>
<li><a>Vissen</a></li>
<li><a>Zoogdieren</a></li>
</ul>
</div>
</div>
</div>
<div class="box2">
<h1>Kikker</h1>
<p>Categorie Amfibieën</p>
</div>
<div class="box2">
<h1>Bosui</h1>
<p>Categorie vogels</p>
</div>
<div class="box2">
<h1>Siamese Kempvis</h1>
<p>Categorie vissen</p>
</div>
<div class="box2">
<h1>Eekhoorn</h1>
<p>Categorie zoogdieren</p>
</div>
<div class="row">
<div class="row">
<div class="column">
<img src="images/clownfish.jpg" alt="clown vis" style="width: 100%"/>
<div class="centered">Clown vis</div>
</div>
<div class="column">
<img src="images/eagle.jpg" alt="adelaar" style="width: 100%">
<div class="centered">Adelaar</div>
</div>
<div class="column">
<img src="images/elephants.jpg" alt="olifant" style="width: 100%">
<div class="centered">Olifant</div>
</div>
<div class="column">
<img src="images/Yellowbanded.jpg" alt="kikker" style="width: 100%">
<div class="centered">Kiker</div>
</div>
<div class="column">
<img src="images/peacock.jpg" alt="pauw" style="width: 100%">
<div class="centered">Pauw</div>
</div>
<div class="column">
<img src="images/toad.jpg" alt="pad" style="width: 100%">
<div class="centered">Pad</div>
</div>
</div>
<footer>Deze pagina is gemaakt voor opdracht 4 van HTML5 & CSS.</footer>
</div>
</div>
</body>
</html>
1: https://i.stack.imgur.com/tFRuK.jpg The correct example
Current Code Output My code sorry I cant add my images so you won't see the result with the right images.
check this , remove some css code for better view , for text you can add text-shadow too
changes:
add display: flex; to bg class , and .topnav{align-self: flex-end;width:100%;background: rgb(255,255,255);background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6839869736957283) 35%, rgba(255,255,255,0.5943511193539917) 100%);}
you should put topnav div inside bg div
body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://natgeo.imgix.net/subjects/headers/Animal-Tigers.jpg?auto=compress,format&w=1920&h=960&fit=crop");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Playfair Display', serif;
z-index:100;
display: flex;
}
/* bovenste rand*/
header {
background-color: #D3D3D3;
padding: 10px;
text-align: center;
font-size: 35px;
color: white;
border-radius: 0px;
}
#grade {
height: 200px;
background-color: grey;
background-image: linear-gradient(grey, white, grey);
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: transparent;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: black;
display: block;
}
ul li a:hover{
background-color:gainsboro;
}
/* positie navbar */
position: relative;
}
.navbar a {
float: left;
display: flex;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/*menu*/
.container {
width: 100%;
height: 90px;
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
}
.navbar
{
background-color: transparent;
}
.topnav{
align-self: flex-end;
width:100%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6839869736957283) 35%, rgba(255,255,255,0.5943511193539917) 100%);
}
/*blok categorie*/
.box2 {
display: inline-block;
border: 2px solid black ;
padding: 30px;
border-radius: 25px;
text-align: center;
margin: 1em;
width: 500;
height: 100;
}
/*size foto's*/
{
box-sizing: border-box;
}
img {
height: 300px;
width: 200px;
align-self: flex-start;
}
.row {
display: flex;
}
/* three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
/*onderste zes afbeeldingen tekst op foto */
.image {
position: relative;
width: 100%;
text-align: center;
color: transparent;
}
/* .centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} */
img {
border:2px solid #000000;
}
footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/* Tablet Landscape */
#media screen and (min-width: 320px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width:768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Dieren</title>
<link href="normalise.css" rel="stylesheet" type="text/css">
<link href="dieren.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
</header>
<div class="bg">
<div class="topnav">
<ul>
<li><a>Amfibieën</a></li>
<li><a>Vogels</a></li>
<li><a>Vissen</a></li>
<li><a>Zoogdieren</a></li>
</ul>
</div>
</div>
<div class="bg-holder">
</div>
<div class="bg-img">
<div class="scrollmenu">
<div class="container">
</div>
</div>
<div class="box2">
<h1>Kikker</h1>
<p>Categorie Amfibieën</p>
</div>
<div class="box2">
<h1>Bosui</h1>
<p>Categorie vogels</p>
</div>
<div class="box2">
<h1>Siamese Kempvis</h1>
<p>Categorie vissen</p>
</div>
<div class="box2">
<h1>Eekhoorn</h1>
<p>Categorie zoogdieren</p>
</div>
<div class="row">
<div class="row">
<div class="column">
<img src="images/clownfish.jpg" alt="clown vis" style="width: 100%"/>
<div class="centered">Clown vis</div>
</div>
<div class="column">
<img src="images/eagle.jpg" alt="adelaar" style="width: 100%">
<div class="centered">Adelaar</div>
</div>
<div class="column">
<img src="images/elephants.jpg" alt="olifant" style="width: 100%">
<div class="centered">Olifant</div>
</div>
<div class="column">
<img src="images/Yellowbanded.jpg" alt="kikker" style="width: 100%">
<div class="centered">Kiker</div>
</div>
<div class="column">
<img src="images/peacock.jpg" alt="pauw" style="width: 100%">
<div class="centered">Pauw</div>
</div>
<div class="column">
<img src="images/toad.jpg" alt="pad" style="width: 100%">
<div class="centered">Pad</div>
</div>
</div>
<footer>Deze pagina is gemaakt voor opdracht 4 van HTML5 & CSS.</footer>
</div>
</div>
</body>[enter image description here][1]
</html>
Hello I'm pretty new to this & I'm trying to figure out how to scale and clip these images to fit into each grid square without having a border...
I also don't know if this is an effective way to set up my images. I'd like to have a different image for each square, but how it's set up now I'd have to make a new .box .inner# for each one. If there is a better way to structure this that'd be really helpful.
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box .inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.box .inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner1">2</div>
</div>
<div class="box">
<div class="inner1">3</div>
</div>
<div class="box">
<div class="inner1">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner2">5</div>
</div>
<div class="box">
<div class="inner2">6</div>
</div>
<div class="box">
<div class="inner2">7</div>
</div>
<div class="box">
<div class="inner2">8</div>
</div>
</div>
</div>
You might do it like this:
.grid {
margin: 0 auto;
width: 240vw;
max-width: 200vh;
height: 240vw;
max-height: 200vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-image: url("https://c1.staticflickr.com/2/1763/29556413048_164120ccb5_b.jpg");
}
.inner2 {
background-image: url("https://c1.staticflickr.com/1/922/43509246041_043aff0334_h.jpg");
}
.inner3 {
background-image: url("https://picsum.photos/200/200?3");
}
.inner4 {
background-image: url("https://picsum.photos/200/200?4");
}
.inner5 {
background-image: url("https://picsum.photos/200/300?5");
}
.inner6 {
background-image: url("https://picsum.photos/200/300?6");
}
.inner7 {
background-image: url("https://picsum.photos/200/200?7");
}
.inner8 {
background-image: url("https://picsum.photos/200/300?8");
}
<div class="grid">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner3">3</div>
</div>
<div class="box">
<div class="inner4">4</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="inner5">5</div>
</div>
<div class="box">
<div class="inner6">6</div>
</div>
<div class="box">
<div class="inner7">7</div>
</div>
<div class="box">
<div class="inner8">8</div>
</div>
</div>
</div>
I am not fully sure if this will fix your problem but maybe take off the margin in your .box class in your css file.
not enough reputation yet so click this link
Instead of having your margin at 5px change it to 0px and see if that helps.
As for the different images you just need to create a new class for each image an link a new image to that class, go back and link it up like you have with the two previous.
Googled this, but most topics are about parallax effects which involve, like, full widths and / or heights - e.g. for headers. What I want is this.
If you take a look at the "We are good at" section, on the left column, there's a parallax effect. I looked at their code, but there's no chance I'm understanding what they've done there, so I thought that it should work by simply using flexbox.
Now, I managed to do the parallax effect using flexbox and background-attachment: fixed;, but the image looks weird; it gets zoomed in and doesn't center properly. Here's how it looks like:
Here's how it should look like:
Here's the part of the code for that:
HTML:
<section class="section-skills">
<div class="item pri"></div>
CSS:
.section-skills{
display:flex;
padding-top: 40px
}
.item{
flex-basis: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.pri{
background-image: url(img/skills-007.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 567px;
width: 100%;
}
Here's a CodePen: http://codepen.io/anon/pen/VPVmLb
Is there something I'm missing? Or I shouldn't be using flexbox for parallax?
revised codepen
.section-skills {
display: flex;
padding-top: 40px;
}
.item {
display: flex;
flex-direction: column;
flex: 1;
}
.pri {
background-image: url(http://placehold.it/800x600);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 567px;
width: 100%;
}
.sec {
background: #f7f7f7;
align-items: flex-start;
}
.skills-box {
width: 85%;
margin-top: 90px;
padding-left: 10%;
}
.skills-box .sub-text:after {
margin-left: 0;
margin-top: 30px;
}
.skills-box h2,
.skills-box .sub-text {
text-align: left;
}
.skills-box .sub-text {
margin-left: 0;
width: 80%;
}
.sec h3 {
font-weight: 400;
font-size: 130%;
}
/* Skill Bars */
.skillbar {
position: relative;
display: block;
margin-bottom: 25px;
width: 100%;
background: #eee;
height: 45px;
border-radius: 3px;
transition: 0.4s linear;
transition-property: width, background-color;
}
.skillbar-title {
position: absolute;
top: 0;
left: 0;
width: 110px;
font-weight: bold;
font-size: 14px;
color: #ffffff;
background: #6adcfa;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-title span {
display: block;
background: rgba(0, 0, 0, 0.1);
padding: 0 20px;
height: 45px;
line-height: 45px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-bar {
height: 45px;
width: 0px;
background: #6adcfa;
border-radius: 3px;
}
.skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 11px;
height: 45px;
line-height: 45px;
color: #ffffff;
color: rgba(0, 0, 0, 0.4);
}
<section class="section-skills">
<div class="item pri"></div>
<div class="item sec">
<div class="skills-box">
<h2>WE ARE GOOD AT</h2>
<p class="sub-text">Morbi tempor elit leo, eget mattis massa porta ac</p>
<div class="skillbar clearfix " data-percent="90%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span>
</div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">90%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="85%">
<div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span>
</div>
<div class="skillbar-bar" style="background: #3498db;"></div>
<div class="skill-bar-percent">85%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="60%">
<div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span>
</div>
<div class="skillbar-bar" style="background: #2c3e50;"></div>
<div class="skill-bar-percent">60%</div>
</div>
<!-- End Skill Bar -->
<div class="skillbar clearfix " data-percent="75%">
<div class="skillbar-title" style="background: #46465e;"><span>PHP</span>
</div>
<div class="skillbar-bar" style="background: #5a68a5;"></div>
<div class="skill-bar-percent">75%</div>
</div>
<!-- End Skill Bar -->
</div>
</div>
</section>