Copy link to clipboard
Copied
Is there a basic tutorial for making a responsive web site like this www.samgilbeyillustrates.com, using both Photoshop CC 2020 and Dreamweaver CC 2020.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Probably css grid would be helpful, example below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GRID GALLERY</title>
<style>
body {
font-family: helvetica, sans-serif;
}
.gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
width: 90%;
margin: 0 auto;
}
.gallery img {
max-width: 100%;
display: block;
}
.gallery h4 {
font-weight: normal;
}
.img_1 {
position: relative;
grid-row: 1/3;
grid-column: 1/5;
background-image: url('https://images.pexels.com/photos/92380/pexels-photo-92380.jpeg');
background-size: cover;
background-position: center, center;
}
@media (max-width: 900px) {
.img_1 {
height: 500px;
grid-row: 1/2;
grid-column: 1/7;
}
}
.img_2 {
position: relative;
grid-column: 5/7;
}
@media (max-width: 900px) {
.img_2 {
grid-row: 2/3;
grid-column: 1/4;
}
}
.img_3 {
position: relative;
grid-row: 2/3;
grid-column: 5/7;
}
@media (max-width: 900px) {
.img_3 {
grid-row: 2/3;
grid-column: 4/7;
}
}
.img_4 {
position: relative;
grid-row: 3/4;
grid-column: 1/3;
}
@media (max-width: 900px) {
.img_4 {
position: relative;
grid-row: 5/6;
grid-column: 1/4;
}
}
.img_5 {
position: relative;
grid-row: 4/5;
grid-column: 1/3;
}
@media (max-width: 900px) {
.img_5 {
position: relative;
grid-row: 5/6;
grid-column: 4/7;
}
}
.img_6 {
position: relative;
grid-row: 3/5;
grid-column: 3/7;
background-image: url('https://images.pexels.com/photos/3129618/pexels-photo-3129618.jpeg');
background-size: cover;
background-position: center, center;
}
@media (max-width: 900px) {
.img_6 {
height: 500px;
grid-row: 4/5;
grid-column: 1/7;
}
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
opacity: 0;
}
.show {
opacity: 1;
transition: all 0.5s ease;
}
</style>
</head>
<body>
<section class="gallery">
<div class="img_1">
<div class="overlay"><h4>Image 1</h4></div>
</div>
<div class="img_2">
<div class="overlay"><h4>Image 2</h4></div>
<img src="https://images.pexels.com/photos/551628/pexels-photo-551628.jpeg" alt="">
</div>
<div class="img_3">
<div class="overlay"><h4>Image 3</h4></div>
<img src="https://images.pexels.com/photos/3631659/pexels-photo-3631659.jpeg" alt="">
</div>
<div class="img_4">
<div class="overlay"><h4>Image 4</h4></div>
<img src="https://images.pexels.com/photos/1124002/pexels-photo-1124002.jpeg" alt="">
</div>
<div class="img_5">
<div class="overlay"><h4>Image 5</h4></div>
<img src="https://images.pexels.com/photos/879788/pexels-photo-879788.jpeg" alt="">
</div>
<div class="img_6">
<div class="overlay"><h4>Image 6</h4></div>
</div>
</section>
<p style="text-align: center;">Images courtesy of pexels.com</p>
<p style="text-align: center;">©Kate Jayne, Sebastian Coman Travel, Stefan Stefancik, Aloïs Moubax, Artem Beliaikin, Helena Lopes</p>
<script>
const overlay = document.querySelectorAll('.overlay');
const galleryImg = document.querySelectorAll('.gallery img');
overlay.forEach(function(item, index) {
item.onmouseover = function() {
overlay[index].classList.add('show');
}
})
overlay.forEach(function(item, index) {
item.onmouseout = function() {
overlay[index].classList.remove('show');
}
})
</script>
</body>
</html>