Jump to content

Abigail2119

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Abigail2119

  • Rank
    Newbie
  1. Abigail2119

    Help

    I am trying to create an image gallery but the images are very far apart <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Portfolio</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> article { width: 600px; float: right; padding-right: 100px; font-size: 20px; line-height: 2; padding-top: 100px; } main{ padding-left: 70px; padding-bottom: 50px; padding-top: 50px; } header{ font-size: 35px; padding-bottom: 30px; padding-top: 30px; } header1{ font-size: 60px; padding-left: 70px; padding-top: 30px; } .row { display: flex; } .column { flex: 33.33%; padding: 5px; } .column img { margin-top: 12px; } </style> </head> <header1><center>Lauren Miller</center></header1> <ul> <li><a href="graphic design.html">Graphic Design</a></li> <li><a class="active" href="index.html">About Me</a></li> <li><a href="art.html">Art</a></li> </ul> <div class="row"> <div class="column"> <main2><img src="links/gd.jpg" width="450px" style="width:450px" height="250px" alt=""/></main2></div> <div class="column"><main><img src="links/bennyposter.jpg" width="450px" height="250px" alt=""/></main></div> <div class="column"><main3><img src="links/cheer_dance.jpg" width="450px" height="250px" alt=""/></main3></div></div> <div class="row"> <div class="column"><img src="links/gd3.jpeg" width="400px" height="auto" alt=""/></div> <div class="column"><img src="links/gd4.jpeg" width="400px" height="auto" alt=""/></div> <div class="column"><img src="links/gd5.jpg" width="400px" height="auto" alt=""/></div> </div> <body> </body> </html> STYLE CSS: @charset "UTF-8"; div { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; width: 1420px; background-color: #F3F3F3; height: 1420px; padding-top: 0px; } ul { list-style-type: none; margin-bottom: 0; padding: 0; overflow: hidden; background-color: #333; display: flex; justify-content: center; width: 100%; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } .active { background-color: #4CAF50; }
×
×
  • Create New...