• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Make basic Responsive Web Site in Dreamweaver

Engaged ,
Jul 13, 2020 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

130

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
community guidelines
Community Expert ,
Jul 13, 2020 Jul 13, 2020

Copy link to clipboard

Copied

Votes

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
community guidelines
LEGEND ,
Jul 13, 2020 Jul 13, 2020

Copy link to clipboard

Copied

LATEST

 

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>

 

 

Votes

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
community guidelines