Responsive dotted lines among the images - javascript

I'm trying to create a responsive dots connecting among the images like below.
I'm able to achieve this with CSS, but the layout is collapsing when I tried to change the image widths or parent div width. How can I make this layout work for all screens and image dimensions?
Here is my code link:
https://jsfiddle.net/SampathPerOxide/q2yab607/29/
.dotted-line,
.dotted-line1 {
display: flex;
}
.over {
display: flex;
align-items: center;
justify-content: center;
}
.dotted-line::after {
content: ".......";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-left: 1px;
}
.dotted-line1::before {
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-right: 1px;
}
.top:before {
transform: rotate(90deg);
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
position: absolute;
top: 5em;
margin-left: 0.5em;
}
<div style="width:90px;margin:0px auto;">
<div style=" height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
" class="top">
<img src="https://i.pinimg.com/736x/39/4b/f6/394bf6e1c3f2a7351105290ef9fe9dd1.jpg" style="width:100px;">
</div>
<br/><br/><br/>
<div class="over">
<div style="" class="dotted-line">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
<div style="">
<h4 style="text-align:center;padding:10px;">
Choose
</h4>
</div>
<div style="" class="dotted-line1">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
</div>
</div>

I would go for
display flex to easily arrange the items inside a flexbox
Use a repeated background-image with radial-gradient to achieve repeated responsive dots
* {
margin: 0;
box-sizing: border-box;
}
h4 {
padding: 1em;
}
.flex {
display: flex;
}
.flex.col {
flex-direction: column;
}
.flex.center {
justify-content: center;
}
.grow {
flex-grow: 1;
}
.dots-h,
.dots-v {
flex-grow: 1;
background-image: radial-gradient(1px 1px at center, #888 1px, transparent 1px);
}
.dots-h {
height: 1em;
background-repeat: repeat-x;
background-size: 10px 1em;
margin: auto 0;
}
.dots-v {
width: 1em;
background-repeat: repeat-y;
background-size: 1em 10px;
margin: 0 auto;
}
<div>
<div class="flex center">
<img src="https://picsum.photos/id/1/100/100">
</div>
<div class="flex center">
<img src="https://picsum.photos/id/2/100/100">
<div class="dots-h"></div>
<div class="flex col center">
<div class="dots-v"></div>
<h4>Choose</h4>
<div class="grow"><!-- Just a spacer --></div>
</div>
<div class="dots-h"></div>
<img src="https://picsum.photos/id/9/100/100">
</div>
</div>

Related

how to change the javascript code below so my div style toggle starts from display none to display grid?

hi I have a list of project website in my website and by clicking view projects button,
my websites which already are on display will hide and then show by clicking again. I need to start from not viewing the websites and then clicking the button to show and clicking to remove so I need to reverse what I have currently
const btn = document.getElementById('mybtn');
const images = document.getElementById('images');
btn.addEventListener('click', function () {
if (images.classList.contains('hidden')) {
images.classList.remove('hidden');
setTimeout(function () {
images.classList.remove('transform');
}, 20);
} else {
images.classList.add('transform');
images.addEventListener('transitionend', function(e) {
images.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
#mybtn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
background-color: rgba(143, 134, 134, 0.589);
text-decoration: none;
color: aliceblue;
font-family: "Montserrat", sans-serif;
text-align: center;
border-radius: 5px;
border:none;
cursor: pointer;
}
#mybtn:hover {
background-color: rgb(245, 38, 38);
}
.view-projects {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.project-images {
justify-items: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
margin-top: 30px;
z-index: 2;
position: relative;
transition: 0.5s ease-in ;
}
.hidden {
display: none;
}
.transform {
transform: translateY(100%);
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: aliceblue;
margin-top: 5px;
background-color: rgba(150, 144, 144, 0.233);
padding: 3px;
border-radius: 5px;
}
.image a:hover {
background-color: rgba(123, 126, 129, 0.116);
}
<div class="view-projects">
<button id="mybtn">View Projects</button>
</div>
<div id="images" class="project-images">
<div class="image">
<img src="./images/projects/color-flipper.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/counter.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/movies.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/quotes.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/secrets.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/todo.PNG" alt="">
View Website
View Source
</div>
</div>
You should add the hidden class to your <div id="images" class="project-images"> code. This would resolve your problem.
Add class hidden to your images element.
const btn = document.getElementById('mybtn');
const images = document.getElementById('images');
btn.addEventListener('click', function () {
if (images.classList.contains('hidden')) {
images.classList.remove('hidden');
setTimeout(function () {
images.classList.remove('transform');
}, 20);
} else {
images.classList.add('transform');
images.addEventListener('transitionend', function(e) {
images.classList.add('hidden');
}, {
capture: false,
once: true,
passive: false
});
}
}, false);
#mybtn {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 40px;
background-color: rgba(143, 134, 134, 0.589);
text-decoration: none;
color: aliceblue;
font-family: "Montserrat", sans-serif;
text-align: center;
border-radius: 5px;
border:none;
cursor: pointer;
}
#mybtn:hover {
background-color: rgb(245, 38, 38);
}
.view-projects {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.project-images {
justify-items: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
margin-top: 30px;
z-index: 2;
position: relative;
transition: 0.5s ease-in ;
}
.hidden {
display: none;
}
.transform {
transform: translateY(100%);
opacity: 0;
}
.overlay:hover {
opacity: 1;
}
.image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: aliceblue;
margin-top: 5px;
background-color: rgba(150, 144, 144, 0.233);
padding: 3px;
border-radius: 5px;
}
.image a:hover {
background-color: rgba(123, 126, 129, 0.116);
}
<div class="view-projects">
<button id="mybtn">View Projects</button>
</div>
<div id="images" class="project-images hidden">
<div class="image">
<img src="./images/projects/color-flipper.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/counter.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/movies.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/quotes.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/secrets.PNG" alt="">
View Website
View Source
</div>
<div class="image">
<img src="./images/projects/todo.PNG" alt="">
View Website
View Source
</div>
</div>

Scrollable part of page

I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>
Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>

Click function within click function not working

I'm building a website and have a few bugs I'm trying to clean up. As of right now, when the "bio" button is toggle-able, and when its visible, it hides all of the content within the middle container, and when its hidden, the logo container is 100% width and height.
Though, when, I click on the top or bottom navigation links after, ideally I want the logo image container & the navigation copy container to be visible, but at the moment only the logo container is.
$(document).ready(function() {
$("#bio-text-button").click(function(){
$("#bio-container").toggle();
if($(this).is(':visible')) {
$("#logo-img-container").toggle();
$("#nav-copy-container").hide();
}
else if($(this).is(':hidden')) {
$("#nav-copy-container").show();
$("#nav-copy-container").animate({
width: "100%",
}, 1500 )
$("#logo-img-container").animate({
width: "100%",
}, 1500 )
$("#logo-img-container").show();
}
});
});
#main-container {
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 110vw;
height: 100vh;
-webkit-transition: 1s;
transition: 1s;
}
#content-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#top-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#top-nav-link-container {
margin-left: 10px;
margin-right: 10px;
}
#top-nav-link-container:hover {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg);
}
#top-nav-link {
font-size: 20px;
color: black;
cursor: pointer;
}
#middle-container {
display: flex;
border: 2px solid black;
height: 80%;
width: 90%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transition: 1s;
transition: 1s;
align-items: center;
overflow: auto;
}
#logo-img-container {
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#logo-img {
height: 100%;
width: 100%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
#nav-copy-container {
display: none;
height: 100%;
width: 40%;
border-left: 2px solid black;
overflow: auto;
cursor: pointer;
justify-content: center;
text-align: center !important;
align-self: center;
align-content: center;
align-items: center;
}
#bio-container {
display: none;
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#bio-container-copy {
font-size: 20px;
color: black;
margin: 20px;
}
#bio-name {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg) !important;
}
#bottom-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#bottom-nav-link-container {
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
<div id="content-container">
<div id="top-nav-container">
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-one"> therapy </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-extra"> support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-two"> meditation </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-three"> covid-19 support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-five"> food </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div>
</div>
</div>
<div id="middle-container">
<div id="logo-img-container" class="ripple">
<div id="logo-img"></div>
</div>
<div id="bio-container">
<div id="bio-container-copy">
An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities.
Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized folks.
<br><br>
<i>Solace is not affiliated with any of the resources listed.</i>
<br><br>
Designed by: <span id="bio-name">Lizette Ayala</span> <br>
Logo by: <span id="bio-name">Rin Kim Ni</span>
<br><br>
Contact: <a href="mailto:studio#nataliamantini.com">studio#nataliamantini.com
</a></div>
</div>
</div>
<div id="bottom-nav-container">
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eight"> media </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-nine"> yoga </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-ten"> advice </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine </div>
</div>
</div>
</div>
<div id="buttons-container">
<div id="bio-text-container">
<div id="bio-text-button"> bio </div>
</div>
<div id="button">
<span class="dot" id="clickme-1"></span>
</div>
<div id="button">
<span class="dot-two" id="clickme-2"></span>
</div>
<div id="button">
<span class="dot-three" id="clickme-3"></span>
</div>
<div id="button">
<span class="dot-four" id="clickme-4"></span>
</div>
</div>
</div>
Any help would be greatly appreciated!
You can add a click event for the entire body that hides the bio when the user click else where, whilst the bio is visible. Furthermore, update your current click event like so;
$(document).ready(function() {
$("#bio-text-button").click(function(event) {
event.stopPropagation();
if ($("#bio-container").is(':visible')) {
$('#logo-img-container').show();
$("#bio-container").hide();
} else {
$('#logo-img-container').hide();
$("#bio-container").show();
}
});
$('body').on('click', function(event) {
if (!$(event.target).is('#bio-container-copy')) {
$('#logo-img-container').show();
$("#bio-container").hide();
}
});
});
#main-container {
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: 110vw;
height: 100vh;
-webkit-transition: 1s;
transition: 1s;
}
#content-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#top-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#top-nav-link-container {
margin-left: 10px;
margin-right: 10px;
}
#top-nav-link-container:hover {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg);
}
#top-nav-link {
font-size: 20px;
color: black;
cursor: pointer;
}
#middle-container {
display: flex;
border: 2px solid black;
height: 80%;
width: 90%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-transition: 1s;
transition: 1s;
align-items: center;
overflow: auto;
}
#logo-img-container {
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#logo-img {
height: 100%;
width: 100%;
background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png");
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
#nav-copy-container {
display: none;
height: 100%;
width: 40%;
border-left: 2px solid black;
overflow: auto;
cursor: pointer;
justify-content: center;
text-align: center !important;
align-self: center;
align-content: center;
align-items: center;
}
#bio-container {
display: none;
height: 100%;
width: 100%;
-webkit-transition: 1s;
transition: 1s;
}
#bio-container-copy {
font-size: 20px;
color: black;
margin: 20px;
}
#bio-name {
-webkit-transition: 1s;
transition: 1s;
transform: skewX(-20deg) !important;
}
#bottom-nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-flow: wrap;
slign-content: center;
align-items: center;
height: 10%;
width: 90%;
}
#bottom-nav-link-container {
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-container">
<div id="content-container">
<div id="top-nav-container">
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-one"> therapy </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-extra"> support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-two"> meditation </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-three"> covid-19 support </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-five"> food </div>
</div>
<div id="top-nav-link-container">
<div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div>
</div>
</div>
<div id="middle-container">
<div id="logo-img-container" class="ripple">
<div id="logo-img"></div>
</div>
<div id="bio-container">
<div id="bio-container-copy">
An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities. Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized
folks.
<br><br>
<i>Solace is not affiliated with any of the resources listed.</i>
<br><br>
Designed by: <span id="bio-name">Lizette Ayala</span> <br> Logo by: <span id="bio-name">Rin Kim Ni</span>
<br><br> Contact: <a href="mailto:studio#nataliamantini.com">studio#nataliamantini.com
</a></div>
</div>
</div>
<div id="bottom-nav-container">
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eight"> media </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-nine"> yoga </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-ten"> advice </div>
</div>
<div id="bottom-nav-link-container">
<div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine </div>
</div>
</div>
</div>
<div id="buttons-container">
<div id="bio-text-container">
<div id="bio-text-button"> bio </div>
</div>
<div id="button">
<span class="dot" id="clickme-1"></span>
</div>
<div id="button">
<span class="dot-two" id="clickme-2"></span>
</div>
<div id="button">
<span class="dot-three" id="clickme-3"></span>
</div>
<div id="button">
<span class="dot-four" id="clickme-4"></span>
</div>
</div>
</div>

HTML/CSS - Display the link while hovering over a photo

I want to have my link displayed when I hover over the image. The way I wrote the code displays the link only if I hover over the link itself(which is contained in the image div). Any ideas how I should go on?
.image-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
font-size: 1.5em;
}
.image-text-wrapper .xx {
transition: 1s;
font-weight: 600;
margin: 20px;
}
.image-text-wrapper .xx a {
color: transparent !important;
}
.image-text-wrapper a:hover {
color: lightseagreen !important;
text-decoration: none;
}
<div class="portfolio-img-background" style="background-image:url()">
<div class="xx">
<a href="#">
Text
</a>
</div>
</div>
This is a solution using just CSS
#image{
width:200px;
height:200px;
background:black;
display:flex;
align-items:center;
justify-content: center;
}
#link{
display:none;
}
#image:hover > #link {
display:block;
}
<div id="image" class="portfolio-img-background" style="background-image:url()">
<div class="xx" id="link">
<a href="#">
Hi!, im a link
</a>
</div>
</div>
This CSS class at the bottom of your code can be slightly modified to make this work.
.image-text-wrapper:hover a {
color: lightseagreen !important;
text-decoration: none;
}

I want to replicate the responsive behaviour of the elements from this site, how to proceed?

I am referencing following website: http://heathershaw.com/index.html
When resizing the window, the elements (where her work is being displayed in thumbnail form) the elements are shrinking and growing dynamically and are keeping their height/width ratio.
Also, when going below certain window size, the number of elements changes from 9 to 10 or vice versa, to keep the symmetry.
I tried to replicate this behaviour using flexbox and simple media queries, but it has not quite yet the outcome i was wishing it would have.
Codepen to my current try: https://codepen.io/misah/pen/MWWROeP
<body>
<div class="container section_header">
<h1 class="header_name">Lorem</h1>
<h4 class="header_subname">Ipsum</h4>
</div>
<div class="container section_main">
<div class="item_wrapper">
<div class="item item_1">
</div>
<div class="item item_2">
</div>
<div class="item item_3">
</div>
<div class="item item_4">
</div>
<div class="item item_5">
</div>
<div class="item item_6">
</div>
<div class="item item_7">
</div>
<div class="item item_8">
</div>
<div class="item item_9">
</div>
<div class="item item_10">
</div>
</div>
</div>
<div class="section_outro">
<div class=" container">
</div>
</div>
<div class="section_footer">
</div>
</body>
<script src="./script/script.js"></script>
</html>
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
html,
body:before {
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(29, 45, 56, 0.89),
rgba(29, 45, 56, 0.89)),
url(../assets/foto.jpg);
background-position: center center;
height: 100%;
width: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
position: absolute;
}
.item {
width: 100%;
min-width: 350px;
min-height: 350px;
background-color: white;
background-position: center;
margin: 50px;
background-size: cover;
box-sizing: border-box;
flex-basis: 25.3%;
}
.item_wrapper {
margin-top: 130px;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: center;
justify-content: space-evenly;
align-items: stretch;
width: 100%;
height: auto;
}
.item_1 {
background-image: url(../assets/bg.jpg);
}
.item_10 {
background-image: url(../assets/foto.jpg);
}
#media only screen and (min-width: 1688px) {
.item_10 {
display:none;
}
}
.container {
width: 80%;
}
.section_header{
text-align: center;
padding-top: 40vh;
position: relative;
}
.header_name {
font-family: Bebasneue;
font-size: 60px;
color: antiquewhite;
}
.header_subname{
font-family: Bebasneuelight;
font-size: 37px;
color: #5E94B8;
}
Is there a javascript library for this kind of stuff or is this even possible with just css?
Use bootstrap grid feature, you can find more example on bootsnipp.com like this https://bootsnipp.com/snippets/7N6bW

Categories

Resources