I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help.
Problem with Photo Image Layout
in HTML/XHTML
Posted
I am trying to design my own mockup website based on one of the W3 templates; however, I could not get the photo images to lay out on my website the same way as the W3 template. Here is the W3 template that I was talking about: https://www.w3schools.com/w3css/tryw3css_templates_photo2.htm. And here is the following codes that I came up with for my website. Any feedback will help.
HTML
<!doctype html>
<html>
<head>
<title>Amy Perrales | Photographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- !PAGE CONTENT! -->
<div class="photography" style="max-width:1500px">
<!-- Header -->
<header class="panel" style="padding:128px; 16px;">
<h1 class="ap-xlarge">PHOTOGRAPHER</h1>
<h1>Amy Perrales</h1>
</head>
<body>
<div>
<id class="introduction">
<a href="Home" style="text-decoration: none;">Home</a>
<a href="Portfolio" style="text-decoration: none;">Portfolio</a>
<a href="About Amy" style="text-decoration: none;">About Amy</a>
<a href="Contact" style="text-decoration: none;">Contact</a>
</div>
</header>
<!-- Photo Grid -->
<div class="half-width">
<img src="img/amusement_park.jpg" alt="amusement park" style="width: 599px; height: 424px;">
<img src="img/dock-1365387_640.jpg" alt="dock" style="width:550px; height:633px;">
<img src="img/kaboompics_Black baby chicks.jpg" alt="baby chicks" style="width: 342px; height:513px;">
<img src="img/sunset-114557_640.jpg" alt="sunset" style="width: 275px; height: 550px;">
<img src="img/wedding_couple.jpg" alt="wedding couple" style="width:550px; height:412px;">
</div>
<div class="full-width">
<img src="img/ballet-437990_640.jpg" alt="ballet dancer" style="width:424px; height="640px;">
<img src="img/baseball.jpg" alt="baseball player" style="width:424px; height="640px;">
<img src="img/dancer-2471026_640.jpg" alt="dancer" style="width:424px; height="640px;">
<img src="img/pool.jpg" alt="children and pool" style="width:424px; height="640px;">
</div>
<!-- Footer -->
<footer>
<i class="fa fa-facebook-square" style="font-size:36px;"></i>
<i class="fa fa-twitter-square" style="font-size:36px;"></i>
<i class="fa fa-instagram" style="font-size:36px;"></i>
<i class="fa fa-pinterest" style="font-size:36px;"></i>
<i class="fa fa-linkedin" style="font-size:36px;"></i>
</footer>
</style>
</body>
</html>
CSS
/* ==========================================================================
Base Styles
========================================================================== */
body,h1 {
font-family: 'Slabo 45px', serif;
text-align: center;
letter-spacing: 6px;
color: #9aa6b1;
}
a {
color: #a9b3bc;
border: 3px solid #fba69d;
padding: 8px;
margin-left: 3px;
margin-right: 5px;
}
img {
margin-bottom: 128px;
width: 100%;
height: auto;
}