dqnid/advanced-css
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Natours project finished

Browse Source
This commit is contained in:
dqnid committed 2024-04-02 17:10:45 +02:00
1 parent 89845b8e1c
commit a23934d6d0
19 files changed
+15487 -1087
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Natours/starter/index.html
+27 -4
View File
@@ -9,7 +9,8 @@
rel="stylesheet"
/>
<link rel="stylesheet" href="css/icon-font.css" />
<!-- Not needed because its on the code already because of the concat -->
<!-- <link rel="stylesheet" href="css/icon-font.css" /> -->
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/style.css" />
@@ -104,21 +105,43 @@
</div>
<div class="col-1-of-2">
<div class="composition">
<!-- In the srcset we inform the browser the width of the images without him neeeding to download them -->
<!-- In sizes we inform the browser the aproximate width of the image in the different situations -->
<!-- This way the browser will determine itself what image to request -->
<!-- is also good to include src attribute in case the browser does not support srcset (old) -->
<img
srcset="img/nat-1.jpg 300w, img/nat-1-large.jpg 1000w"
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
src="img/nat-1-large.jpg"
alt="Photo 1"
class="composition__photo composition__photo--p1"
/>
<img
srcset="img/nat-2.jpg 300w, img/nat-2-large.jpg 1000w"
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
src="img/nat-2-large.jpg"
alt="Photo 2"
class="composition__photo composition__photo--p2"
/>
<img
srcset="img/nat-3.jpg 300w, img/nat-3-large.jpg 1000w"
sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
src="img/nat-3-large.jpg"
alt="Photo 3"
class="composition__photo composition__photo--p3"
/>
<!-- <img -->
<!-- src="img/nat-1-large.jpg" -->
<!-- alt="Photo 1" -->
<!-- class="composition__photo composition__photo--p1" -->
<!-- /> -->
<!-- <img -->
<!-- src="img/nat-2-large.jpg" -->
<!-- alt="Photo 2" -->
<!-- class="composition__photo composition__photo--p2" -->
<!-- /> -->
<!-- <img -->
<!-- src="img/nat-3-large.jpg" -->
<!-- alt="Photo 3" -->
<!-- class="composition__photo composition__photo--p3" -->
<!-- /> -->
</div>
</div>
</div>