In a webpage I have this two columns with a picture and some text below. One of the texts is longer than the other which makes the text box longer than the other.
How do I do some padding to make the columns even in a elegant way?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6 col-lg-4 col-xl-3 mb-4 mb-xl-0">
<div class="card card-subject">
<div class="card-subject__img">
<img class="card-img rounded-0" src="img/home/subject-1.png" alt="">
<div class="card-subject__imgOverlay">
<img src="img/home/hover-icon.png" alt="">
</div>
</div>
<div class="card-subject__body">
<h3>Employment Law</h3>
<p>This Text i longer than the one This Text i longer than the onenext to it Dominion there fifth fowl eving heaven in life you're over us moved creepeth morn make</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 col-xl-3 mb-4 mb-xl-0">
<div class="card card-subject">
<div class="card-subject__img">
<img class="card-img rounded-0" src="img/home/subject-2.png" alt="">
<div class="card-subject__imgOverlay">
<img src="img/home/hover-icon.png" alt="">
</div>
</div>
<div class="card-subject__body">
<h3>Personal Injury</h3>
<p>Dominion there fifth fowl eving heaven in life you're over us moved creepeth morn make</p>
</div>
</div>
</div>
.card{
height:60vw;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6 col-lg-4 col-xl-3 mb-4 mb-xl-0">
<div class="card card-subject">
<div class="card-subject__img">
<img class="card-img rounded-0" src="img/home/subject-1.png" alt="">
<div class="card-subject__imgOverlay">
<img src="img/home/hover-icon.png" alt="">
</div>
</div>
<div class="card-subject__body">
<h3>Employment Law</h3>
<p>This Text i longer than the one This Text i longer than the onenext to it Dominion there fifth fowl eving heaven in life you're over us moved creepeth morn make</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 col-xl-3 mb-4 mb-xl-0">
<div class="card card-subject">
<div class="card-subject__img">
<img class="card-img rounded-0" src="img/home/subject-2.png" alt="">
<div class="card-subject__imgOverlay">
<img src="img/home/hover-icon.png" alt="">
</div>
</div>
<div class="card-subject__body">
<h3>Personal Injury</h3>
<p>Dominion there fifth fowl eving heaven in life you're over us moved creepeth morn make</p>
</div>
</div>
</div>
Related
Can you help me fix this Bootstrap 5 code to fit in all 16:9 full screen device (mobile and desktop/1080p/2160p chrome browser) to 100% width and 100% height? (and no scroll to right and no scroll to down) I read 100+ examples and tutorial about this and not found any working solution. All images are 16:9 ratio.
At 1920p width landscape mobile screen still need to scroll about 5% for right and down. But it's just spacing and no information in right and down. Also same as desktop too.
Ideal: first row about 40% height and second row is about 60% to fit 5 column in 1 row at same size. In the first column image should be fit this 40% total height.
Ideal sketch layout:
------------------------------------------------------
- -
- big-img-big-img -
- big-img-big-img have a nice day -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
- big-img-big-img -
------------------------------------------------------
- -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- img-img img-img img-img img-img img-img -
- text text text text text -
- -
------------------------------------------------------
The source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column vw-100 vh-100">
<div class="row justify-content-center row-cols-1">
<div class="card mb-4 justify-content-center" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-4">
<div class="card-body">
<h5 class="card-title">Have a nice day!</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center row-cols-5">
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 1</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 2</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 3</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 4</h5>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<div class="card mb-3" style="max-width: 1920px;">
<div class="row g-0">
<div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
<div class="col-md-12">
<div class="card-body">
<h5 class="card-title">Hello 5</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ideal if 5 column fit the 100% width and no scroll to right.
Please help me how possible to fit in 1 screen without any scrolling right and down!
Seems like it's already responsive but need to fix to be better.
Thank you!
A couple of things about bootstrap:
If images in columns in a row have the same aspect ratio, they will have the same height.
The number of grid items in a row are 12.
So, if you want the 40% and 60%, then is either col-5 and col-7 or col-4 and col-8. This caters for the first row.
The second row is even more direct. You can just have one row and several columns with either col-2 or just col.
Here is what I mean:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
</div>
<div class="col-7">
Place content here.
</div>
</div>
<div class="row">
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
<div class="col-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
<p>Some text here.</p>
</div>
</div>
I'm trying to build a portfolio with bootstrap cards where images are also required to be displayed.
Problem is that images are not contained properly within bootstrap card around corners(with class="card-img-top") like some cards are not rounded or some images are not rounded but cards are rounded(tried class="img-rounded").
Kindly zoom in on the images to see the difference. Below are some snippets (and code is given below the snippets):-
Perfect card with image:-
Yellow-> difference
Bug-1:-
Bug-2:-
Bug-3:-
Bug-4:-
Code:-
<%- include('partials/headHTML') %>
<link rel="stylesheet" href="/css/tourpackageStyles.css">
</head>
<!-- <%- include('partials/header') %> -->
<div class="Container">
<div class="container-fluid">
<div class="row">
<div class="col col-md-4">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">Title-1</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#" role="button"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
<div class="col col-md-4">
<div class="card h-100">
<img src="/images/wildlife/wildlife_tour.jpg"
alt=""
class="card-img-top">
<div class="card-body">
<div class="card-title">Title- 2</div>
</div>
<a target="_blank" rel="noopener noreffer" href="#"
class="btn btn-sm btn-secondary">Enquire</a>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-cols-1 row-cols-md-3 row-cols-sm-2 gy-3">
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 3
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 4
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://cdn.pixabay.com/photo/2022/06/05/20/24/rome-7244828_960_720.jpg" alt="" class="card-img-top">
<div class="card-body">
<div class="card-title">
Title- 5
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 6
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 7
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="" alt="">
<div class="card-body">
<div class="card-title">
Title- 8
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you wish to display only image while using card then place image inside card-body to achieve what you want and give card class "overflow-hidden". Because if you use "card-img-top" and then it has only border-top-left-radius and border-top-right-radius so image wouldn't be rounded on bottom.so you have to provide border-radius manually to both bottom side.
<div class="card overflow-hidden">
<div class="card-body">
<img class="img-fluid" src="" alt="">
</div>
</div>
For more information refer official docs https://getbootstrap.com/docs/5.2/components/card/
I want the three images to be side-by-side (on desktop), with the headings and paragraph text to be beneath each respective image.
Does anyone know why it wouldn't be working for me? I presume my code is incorrect somehow
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="portfolio-container">
<section class="portfolio">
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
You are creating a new row for every item
Instead, put the col's in one row:
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
You don't need a new <div class="row"></div> around every <div class="col-lg-4"></div>. You can just wrap it around the entire lot to clear the floats.
<div class="row">
<div class="col-12 my-5">
<h2 class="text-uppercase">Portfolio</h2>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/whiskey-drop.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Whiskey Drop</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>An e-commerce website for a premium whiskey service.</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/rosie-odenkirk.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Resume</h3>
<h4>HTML, CSS, Bootstrap</h4>
<p>A responsive and user friendly resume showcasing a sample candidate in the best light possible.</p>
</div>
</div>
</div>
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="media">
<div class="d-none d-sm-block">
<img src="images/flappy-bird.png" class="rounded-circle mr-3" height=50 width=50>
</div>
<div class="media-body">
<h3>Flappy Bird</h3>
<h4>Python and Django</h4>
<p>A fun and interactive game where you are in control of a bird as you navigate through tight spaces.</p>
</div>
</div>
</div>
</div>
Also make sure that you wrap your height and width values with "" too.
When I drop in the third image, it is showing up shorter than the rest. When I replace the image name with say the Serendipity image it doesn't appear shorter. All images are 1200X800.
<!--Start design section-->
<a id="design">
<div class="container-fluid designContainer text-center">
<img class="img-fluid sectionIMG" src="images/design.png" alt="design">
<div class="container-fluid text-center">
<div class="row justify-content-md-center">
<div class="col-lg-4 col-md-6 col-sm-12 project">
<div class="hovereffect">
<img class="img-fluid projectIcon" src="images/logo_serendipity.png" alt="serendipity">
<div class="overlay">
<h2>Serendipity Coffee & Tea</h2>
<p>A small, family owned, cafe in the heart of Osage County.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 project">
<div class="hovereffect">
<img class="img-fluid projectIcon" src="images/logo_audrey.jpg" alt="Audrey Collins">
<div class="overlay">
<h2>Audrey Collins</h2>
<p>A rising pop artist located in Seattle, WA</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 project">
<div class="hovereffect">
<img class="img-fluid projectIcon" src="images/p2p.jpg" alt="P2P">
<div class="overlay">
<h2>Point to Point Transportation</h2>
<p>A rising pop artist located in Seattle, WA</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End design Section-->
JsFiddle Example
Notice the far right image appears shorter even though everything is the extact same except the image link.
I have this layout and while its what i want, I want the text in the row under the image to be aligned directly under it in a block.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-justify g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>
I managed to get the desired layout below. I inserted another div with the styling like below but this is not very responsive. How can i achieve my layout and make it responsive using Bootstrap 4?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify ml-50 g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-5 text-center" style="margin-left:180px">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>
If I managed to understand you correctly, then the following is the layout you want. That layout is fully responsive and is achieved by using these classes for your text columns:
col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto
The col-* classes manage the column width at different screen sizes and the px-* classes manage the horizontal padding while mx-auto centers the columns horizontally.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mb-5">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
To create an interior, the designer must develop an overall concept and stick to it.
</p>
</div>
</div>
<div class="row">
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
Design is not just what it looks like and feels like. Design is how it works.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
For a house to be successful, the objects in it must communicate with one another, respond and balance one another.
</p>
</div>
</div>
<div class="row">
<div class="col-10 col-sm-5 col-md-4 col-lg-3 px-0 px-xl-4 mx-auto">
<p class="text-justify g-mt-50">
All rooms ought to look as if they were lived in, and to have so to say, a friendly welcome ready for the incomer.
</p>
</div>
<div class="col-md-6">
<img class="mx-auto d-block" alt="Bootstrap Image Preview" src="https://placeimg.com/252/191/arch" />
</div>
</div>
</div>