Make basic Responsive Web Site in Dreamweaver

Forum|Forum|5 years ago
July 13, 2020
2 replies
196 views

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.

This topic has been closed for replies.

O

osgood_

Legend

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;">&copy;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>