Highlighted

Make basic Responsive Web Site in Dreamweaver

Contributor ,
Jul 13, 2020

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.

Views

44

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Make basic Responsive Web Site in Dreamweaver

Contributor ,
Jul 13, 2020

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.

Views

45

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 13, 2020 0
Adobe Community Professional ,
Jul 13, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 1
osgood_ LATEST
LEGEND ,
Jul 13, 2020

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2020 2