I'm following This Guide on placing images side by side. On larger displays like PC's it looks fine:
But on mobile I get this:
Which is obviously not right, but the site does mention adding this for mobile support:
#media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
But when I add this it improves it:
But does not fix the problem, I need the images to be top to bottom and not side to side on mobile as shown in the Demo On The Site. How do I fix this?
Here is my HTML Script (It's a test so I understand it's bare bones):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="Ultra Gamer Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultra Gamer test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<div class="row">
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Testimage.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
</a>
<footer>
</footer>
</body>
</html>
Here is my CSS code for the images:
a
{
/* Removes underlines from links */
text-decoration: none;
color: black;
}
/* When mouse is hovering over text */
a:hover
{
color: rgb(85, 85, 85);
text-decoration:none;
cursor:pointer;
}
/* When mouse is hovering over an image */
img:hover
{
filter: brightness(0.8);
}
body
{
font: 15px/1.5 Arial, Helvetica,sans-serif;
background-color: #f0f0f0;
padding: 0;
margin: 0;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding: 5px;
text-align: center;
width:90px
}
/* Clear floats after image containers */
.row::after
{
content: "";
clear: both;
display: table;
text-align: center;
}
.row
{
display: flex;
}
.column
{
flex: 33.33%;
padding: 5px;
}
.textLink
{
color: black;
}
#media screen and (max-width: 500px) {
.column {
float:inherit;
width: 100%;
}
}
footer
{
text-align: center;
padding: 12px;
}
so many changes need to make in you code please compare your code with mine. html and css both
*{
box-sizing: border-box;
}
a
{
text-decoration: none;
color: black;
}
a:hover
{
color: rgb(85, 85, 85);
text-decoration:none;
cursor:pointer;
}
img:hover
{
filter: brightness(0.8);
}
body
{
font: 15px/1.5 Arial, Helvetica,sans-serif;
background-color: #f0f0f0;
padding: 0;
margin: 0;
}
.row{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.column {
width: 33.33%;
padding: 5px;
text-align: center;
flex: 0 0 33.33%;
}
.textLink
{
color: black;
}
footer
{
text-align: center;
padding: 12px;
}
#media screen and (max-width: 500px) {
.column {
flex: 0 0 100%;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="Ultra Gamer Text">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ultra Gamer test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="row">
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Testimage.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
<div class="column">
<a href="https://example.com" target="_blank">
<img src="./img/Placeholder.png" alt="https://example.com" target="_blank">
</a>
<div class="textLink">
<h3>Test</h3>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
your have not complete head tag and mention your all body content in your head tag.
Related
I noticed my nav bar links were a bit off-centered with my logo on the left. Would someone explain to me how I can fix this? I attached a screenshot and code snippets. I tried doing inline-block and float but still jacked things up. Should I position them using the x and y offsets or not? I just want to do this in the best and most organized way.
/*Font for logo*/
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
/* Add a black background color to the top navigation */
.topnav {
margin: 0;
position: relative;
background-color: #141414;
overflow: hidden;
text-align: center;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
/* Style the links inside the navigation bar */
.topnav a {
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
/*Style for website logo*/
.logo {
color: white;
font-family: 'leander', sans-serif;
text-align: left;
float: left;
}
/*CSS style for the body*/
body {
margin: 0;
background-color: #262626; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
<div class = "logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="R">C</span>
<span id="R">L</span>
<span id="R">I</span>
<span id="R">G</span>
<span id="R">H</span>
<span id="R">T</span>
</div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
<script src="app.js"></script>
</body>
</html>
Consider to use
display: grid;
in topnav selector, its common way to make navbar.
Sparate the nav size by giving `
grid-template-columns: 1fr 1fr 1fr;
also you need to wrap your nav bar links to single <div></div>.
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
body {
margin: 0;
background-color: #262626;
}
.topnav {
/* position: relative; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #141414;
/* overflow: hidden; */
text-align: right;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
.topnav a {
/* position: relative; */
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
.logo {
/* position: absolute; */
/* top: 50%; Important for vertical centered element */
/* transform: translateY(-50%); vertically centered */
color: white;
font-family: 'leander', sans-serif;
text-align: left;
/* float: left; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="R">C</span>
<span id="R">L</span>
<span id="R">I</span>
<span id="R">G</span>
<span id="R">H</span>
<span id="R">T</span>
</div>
<div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
</div>
<script src="app.js"></script>
</body>
</html>
the easy way to archive this result is to use either flex or grid.
you can for example add nav element to wrap Links something like
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<nav>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</nav>
and than in you CSS you can use flex to align element inside topnav like so
.topnav {
display: flex;
align-items:center;
justify-content: space-around;
}
align-items:center in this case will take of center elements in cross axis
Give position: absolute; to .logo.
Center the logo by adding top: 50%; transform: translateY(-50%); properties to .logo.
Rest of code was organized from start.
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
body {
margin: 0;
background-color: #262626;
}
.topnav {
position: relative;
background-color: #141414;
overflow: hidden;
text-align: right;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
.topnav a {
position: relative;
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
.logo {
position: absolute;
top: 50%; /*Important for vertical centered element*/
transform: translateY(-50%); /*vertically centered*/
color: white;
font-family: 'leander', sans-serif;
text-align: left;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
<script src="app.js"></script>
</body>
</html>
I am facing problem with mediaquery. I tried design on different devices with chrome development tools. But can't find any help to solve the problem.
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#secondary-slider', {
type : 'loop',
perPage : 1,
autoplay : true,
pauseOnHover: true,
interval : 4000
} ).mount();
} );
.header{
position: relative;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-text{
text-align: center;
font-family: monospace;
font-size: 22px;
}
.header .img{
float: left;
margin-left: 10px;
}
.header .contact-us{
float: right;
}
.fa-2x{
font-size: 24px;
color: black;
}
.container{
width: 100%;
padding: 0px;
}
.splide__slide img {
width : 100%;
height: auto;
object-fit: cover;
}
#secondary-slider{
display: flex;
width:100%;
height:100%;
}
.header .submit{
float: right;
}
.contact-us .email{
margin-right: 20px;
}
#media only screen and (max-width: 600px){
body {background: red;}
.splide__slide img {
width : 100%;
height: 100%;
}
.header-text{
text-align: center;
font-family: monospace;
font-size: 22px;
margin-top: 10px;
}
i{
vertical-align: middle;
}
.contact-us .email{
margin-right: 2px;
}
}
<html>
<head>
<title>
Akhil Dali
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="header">
<a class="img" href="https://instagram.com/show_house_full" target="_blank"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a>
<h2 class="header-text">Show House Full</h2>
<div class="contact-us">
<a class="email" href="mailto:ashishpise111#gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i></a>
<a class="whatsapp" href="tel:7666149649"><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</nav>
<div id="secondary-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</li>
<li class="splide__slide">
<img src="https://static.toiimg.com/thumb/msid-24183773,width-1070,height-580,resizemode-75,imgsize-24183773,pt-32,y_pad-40/24183773.jpg">
</li>
<li class="splide__slide">
<img src="https://i.pinimg.com/originals/ca/76/0b/ca760b70976b52578da88e06973af542.jpg">
</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>
I just want proper mediaquery and explanation about mediaquery which will help me to understand how to counter if i face similar problems.
You use media queries like this:
CSS
#media screen and (max-width: 860px) {
#header {font-size: 20px;} /* random rules */
}
HTML
Place this in the of your document.
<meta name="viewport" content="width=device-width" />
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
I am making some portfolio and this question occurs in my favourite music portfolio. You can see the music name that is long will go to another line and will automatically align the text to center. However, the music name that isn't long will not align text to center. How can I do?
img{
width: 160px;
height: 90px;
}
.container{
display: grid;
grid-gap: 10px;
}
.music{
background: #123;
width: 400px;
height: 90px;
}
a{
display: flex ;
}
p{
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You don't need display: flex; in your p tag, and you may want to add width: 100%;
img {
width: 160px;
height: 90px;
}
.container {
display: grid;
grid-gap: 10px;
}
.music {
background: #123;
width: 400px;
height: 90px;
}
a {
display: flex;
}
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
align-items: center;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<article class="music">
<a href="#">
<img class="thumbnail" src="https://img.youtube.com/vi/RgKAFK5djSk/maxresdefault.jpg" alt="">
<p>See you again</p>
</a>
</article>
<article class="music">
<a href="#" class="music-child">
<img class="thumbnail" src="http://i3.ytimg.com/vi/o3KXwe-7A-I/maxresdefault.jpg" alt="">
<p>Deep Chills - Run Free</p>
</a>
</article>
</div>
<script src="script.js"></script>
</body>
</html>
You can just add margin-left and margin-right in p tag as following:
margin-left: auto;
margin-right: auto;
So complete style of p tag is as following:
p {
text-decoration: none;
list-style: none;
color: white;
font-family: sans-serif;
font-size: 26px;
text-align: center;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
Hope to helpful!
I have a page (a catalogue of books), where the books should be displayed in rows in a flexbox container. Each book is an individual block, which contains a heading (name of the book) and the image of the book cover directly below it. I would like for all images to be equal height and fill up the whole block, but this does not seem to be working for me. Here is what the blocks look like right now:
Some research on Stack pointed to similar questions, but the proposed solutions did not seem to work, also. Why are the images different heights in the first place, even though I pass 100% height to the image element inside the container? And how can I resolve this?
Full HTML/CSS can be seen in the fiddle.
HTML:
<div class="flexbox">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue"
src="images/pyramid_texts.png" alt="Тексты пирамид">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue"
src="images/coffin_texts.jpg" alt="Тексты саркофагов">
</div>
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue"
src="images/book_of_the_dead.png" alt="Книга мертвых">
</div>
</div>
CSS:
a
{
color: black;
text-decoration: none;
}
a:hover
{
color: red;
}
div.flexbox
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
div.item
{
height: 20%;
width: 20%;
}
h2
{
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400px;
style: block;
text-align: center;
}
img
{
height: 20%;
outline: 2px solid red;
width: 20%;
}
img.catalogue
{
height: 100%;
object-fit: contain;
width: 100%;
}
UPDATE: Tried experimenting with background-size: cover and other CSS elements, but to no avail. Could it be that my HTML structure is ill suited for this task? Right now I have a parent flexbox block and each "item" block (for each book) contains a header element with the title of the book and an <img> element. Should I change the structure and take the header out of the item block, for example?
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Demo</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
}
h2 {
background-color: #FFF3D9;
color: black;
font-size: 18px;
font-weight: 400;
style: block;
text-align: center;
}
img {
height: 20%;
outline: 2px solid red;
width: 100%;
}
img.catalogue {
height: 100%;
object-fit: contain;
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.flexbox .col {
flex: 1;
padding: 7px;
}
.flexbox .col:nth-child(1) {
background: #ccc;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
}
.flexbox .col:nth-child(2) {
background: #eee;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
}
.flexbox .col:nth-child(3) {
background: #eee;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/pyramid_texts.html" target="_blank">
Тексты пирамид
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты пирамид">
</div>
</div>
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/coffin_texts.html" target="_blank">
Тексты саркофагов
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Тексты саркофагов">
</div>
</div>
<div class="col">
<div class="item">
<h2 class="catalogue">
<a href="items/book_of_the_dead.html" target="_blank">
Египетская книга мертвых
</a>
</h2>
<img class="catalogue" src="https://www.w3schools.com/images/picture.jpg" alt="Книга мертвых">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>