I have to create a website where it compare results from 2 or more websites, these websites has to be integrated in my website's iframe, as done in " here " for hotels
reference image
Can anybody help me how to implement this feature in my website, I am using laravel 5.8
Alight here is an example of it
<div class="container-fluid">
<div class="row pt-10" id="iframeContainer">
<div class="col-md-6">
<h3 class="text-center">Website One</h3>
<iframe id="iframe1" src="{{ $link1 }} " ></iframe>
</div>
<div class="col-md-6">
<h3 class="text-center">Website Two</h3>
<iframe id="iframe2" src="{{ $link2 }} "></iframe>
</div>
</div>
</div>
in css
#iframeContainer iframe{
min-height: 550px;
height: 100%;
width: 100%;
border: 0px solid transparent;
}
.pt-10{
padding-top:20px;
}
I'm sure this will work please give this a try
Related
how can I make landing page for separate site (in my case "gallery") which is opened in different bookmark.
Here how it looks:
(https://i.stack.imgur.com/tgIKj.jpg)
I already made my main landing page and it works but when I try to rewrite it to this separate offer.html it does not work. This is my html "Gallery" code:
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<section class="landing-page-gallery">
</section>
</body>
</html>
And this is what I have in my main page CSS code:
`.landing-page-gallery {
width: 98,5vw;
height: calc(100vh - 50px);
background-image: url(TRICK-landing.jpg);
background-position: center;
background-size: cover;
text-align: center;
}`
What should I do to make my gallery site looks exactly like my main page with background image and background color?
I have already tried to copy CSS selector ".landing-page" into ".landing-page-gallery" but it changed nothing. As far as I imagine it should give the same result but no.
My site appears correctly on computer screens, but not on smartphones.
Like you can see, the main title (Phytothérapie) is cut and and the three buttons are not centered.
My code :
<div class="col-12">
<div class="row">
<div class="col-12">
<h1 class="mg-md h1-welcome-to-style tc-black">Bienvenue à la</h1>
<h1 class="mg-md h1-bloc-0-style tc-black"><span style="font-size: 2rem !important;">FACULTÉ DE PHARMACIE DE L'ULB</span></h1>
<h1 class="mg-sm tc-black h1-3-style"><span style="font-size: 70px !important;">PHYTOTHÉRAPIE</span></h1>
<h2 class="mg-md tc-black h2-1-style"></h2>
</div>
</div>
and for the 3 blocks :
<div class="phyto-container" onclick="location.href='{{$route}}';">
<div class="phyto-front" style="background-image: url({{$bgImage}})">
<div class="phyto-inner">
<p>{{ $titleFront }}</p>
</div>
</div>
<div class="phyto-back">
<div class="phyto-inner">
<div>
#foreach($paragraphs as $p)
<p style="font-size: 1.1rem;margin-top:-10px !important; margin-left:-1px !important;">{{ $p }}</p>
#endforeach
</div>
</div>
</div>
The URL of the site is https://overlap.ulb.be/public/
Thank you in advance for help.
Have you tried margin-right: 10px; on the title?
In your style.css add this:
#unsets {
width: unset !important;
position: unset !important;
padding: unset !important;
margin: 10px;
}
and add to all of this divs above id:
<div class="col-sm-4 col-md-2 col-lg-2 col-xl-2 align-self-center" id="unsets">
Refresh page or clean cache to see changes.
You need to make your site responsive, you can either use frameworks, columns, rows, containers, or media screens.
I have two images that I need to be layered side-by-side.
This is what image 1 looks like now, utilizing the following code:
<section id="4" class="pt-sm-3 pt-md-5 pb-2">
<div class="row text-center">
<div class="col-md-1">
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; margin: 0 auto;"
data-src="#Url.Content("./redImage.png")"
src="#Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; margin: 0 auto;"
data-src="#Url.Content("./blueImage.png")"
src="#Url.Content("~/Themes/21Rocs/Content/Images/loading(2).gif")" />
</div>
</div>
</section>
I would like to have the images overlay on top of each other like the following:
How would I go about setting that up in CSS? I tried to use this approach but can't get the layer to fit properly. Please help. Thank You!
You should use negative margins to make these thing
I set a class to col-md-3 called overlay and i styled this on style.css
Hope this works
.overlay {
margin-right: -100px;
}
<link rel = "stylesheet" href="style.css">
<section id="4" class="pt-sm-3 pt-md-5 pb-2">
<div class="row text-center">
<div class="col-md-1">
</div>
<div class="col-md-3 overlay">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; ;"
data-src="#Url.Content("./redImage.png")"
src="https://wallpapercave.com/wp/wp3260204.jpg" />
</div>
<div class="col-md-3">
<img class="lazyload img-responsive product-images"
style="max-width: 100%; height: auto; ;"
data-src="#Url.Content("./blueImage.png")"
src="https://cdn.wallpapersafari.com/44/96/ow6U0D.jpeg" />
</div>
</div>
</section>
</section>
Something like adding position: relative; transform: translateX(-50px) translateY(-50px); z-index: -1; as styling to the second image could be a quick fix. (You would probably need to amend the translateX/translateY values to get them where you need them - no other elements on the page will be affected by this transform)
So I´m having trouble fitting 3 images in the same row ,
The thing is, that this images are not always the same so when I upload an image that its has a diferrent size everything moves., Any advise to achieve this ? thanks
HTML:
<div class="first-slot">
<div class="masonry-box post-media">
<img src="upload/'.$row['fotos'].'" alt="" class="img-fluid">
<div class="shadoweffect">
<div class="shadow-desc">
<div class="blog-meta">
<span class="bg-orange">'.$row['categoria'].'</span>
<h4>'.$row['titulo'].'</h4>
<small>'.$row['fecha'].'</small>
<small>'.$row['autor'].'</small>
</div>
</div>
</div>
</div>
</div>
CSS:
.first-slot {
float: left;
width: 65%;
height: 35%;
}
.last-slot,
.second-slot {
float: left;
width: 35%;
height: 28%;
}
Bootstrap
.img-fluid {
max-width: 100%;
height: auto;
}
I think this will solve your problem. You can use these class names and css in you code. Change image src locations according to your requirements. And change margin attribute in css according to your need.
PS: dnt forget to include bootstrap link in your project file
.imgItem{
display: inline-block;
margin: 10px;
}
.imgContainer{
display: flex;
}
<div class="row">
<div class="col imgContainer" >
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
<div class="col imgItem">
<img src="http://placehold.it/150x100" class="img-responsive
" alt="Responsive image" />
</div>
</div>
</div>
This is probably much easier than I'm making it sound.
Basically I have 6 Images, each with a button underneath...
This is what it looks like:
I just place them like this:
<img src="Image.png" width="350" height="208" style="margin: 0px 16px">
<img src="Image.png.png" width="350" height="208" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
<img src="Button.png" width="282" height="84" style="margin: 0px 16px">
It looks great on a typical browser window. But when I make the window narrower, it goes like this:
Which makes sense give how I list my images/buttons.
But I want them to look like this when the window is narrowed:
What can I add to my very basic HTML to keep this in a nice and format no matter how wide the window is?
Ideally I'd like to go from a 2 by x grid as max, down to a 1 by x grid as seen in the first and final images.
A push in the right direction would be amazing.
I did look HERE on Stackoverflow, but it's far more complex as only works with squares.
I look forward to your help :D
UPDATE
https://jsfiddle.net/du6Lu4ge/
looks like this:
when resized, looks like this:
:(
I would do something like this:
https://jsfiddle.net/du6Lu4ge/3/
Hope it helps you out!
What I did was to wrap the image and the button in a div .img-wrapper styled with display: inline-block
this example is working full responsive, you can simply edit the css and add viewports.
html:
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
<div class="imageContainer">
<div class="imageBlock">
<!--<img class="image" src="image.png">-->
<div class="image">
your image
</div>
</div>
<div class="buttonBlock">
<!--<img class="button" srck="button.png">-->
<div class="button">
your button
</div>
</div>
</div>
css:
.imageContainer {
width: 400px;
display: inline-block;
}
.imageContainer .imageBlock {
display: inline-block;
}
.imageContainer .imageBlock .image {
display: inline-block;
width: 400px;
height: 300px;
background-color: darkred;
}
.imageContainer .buttonBlock {
display: inline-block;
text-align: center;
}
.imageContainer .buttonBlock .button {
display: inline-block;
width: 300px;
margin: 10px 50px; /* simple way to center it */
height: 100px;
background-color: cyan;
}
you can test it on https://jsfiddle.net/q10fbesm/
edit: if you need a 2 line grid, simply put a container arround this html, style it with max-widht: 801px;