how can i go about this task,regards - html

create a DIV with a CSS class of menu
The .menu DIV should contain 4 DIV elements having a class of item
Each .item DIV should have an IMAGE displaying a placeholder from https://placeholder.com/ and a PARAGRAPH with class of mdc-typography--headline6
I've tried this code and I've commented out the placeholders as im not being allowed to post pictures. gonna be so grateful
<div class="item">
<!--<img src="https://via.placeholder.com/150" />-->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
<div class="item">
<!-- <img src="http://via.placeholder.com/150"/> --->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
<div class="item">
<!--<img src="http://via.placeholder.com/150"/>--->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
<div class="item">
<!--<img src="http://via.placeholder.com/150"/>--->
<p1 class="mdc-typograpy--headline6"></p1>
</div>
</div>


Here you go. It's <p> not <p1>
<div class="menu">
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
<div class="item">
<img src="https://via.placeholder.com/150"/>
<p class="mdc-typograpy--headline6"></p>
</div>
</div>


i think you have problem in write paragraph. you must write paragraph like <p> and closed by </p>.When you write a header , you need write like that <h1> and close by </h1>.
<html>
<head>
</head>
<body>
<div class="item">
<img src="http://via.placeholder.com/150"/>
<p >mdc-typograpy--headline6</p>
</div>
<div class="item">
<img src="http://via.placeholder.com/150" >
<p>mdc-typograpy--headline6</p>
</div>
<div class="item">
<img src="http://via.placeholder.com/150"/>
<p >mdc-typograpy--headline6</p>
</div>
</body>
</html>

Related

Is there a better way of creating a popup gallery with hidden objects?

I’m working on a website for a photographer and I already created a grid gallery with one photo of each session, I wish that after clicking an image a popup gallery would show that would let you slide through other photos of the specific session (not other pictures displayed in the grid gallery) if that makes sense.
There's a part of the html code I used for my gallery.
<section class="portfolio-section">
<header>
<h1>Portfolio</h1>
</header>
<div id="anchor2" class="portfolio-selection">
<div id="container">
<ul class="categories">
<li>ślub</li>
<li>chrzest</li>
<li>świąteczne</li>
<li>plener</li>
<li class="portfolio-more">zobacz więcej</li>
</ul>
</div>
</div>
</section>
<section class="portfolio-gallery">
<div class="portfolio">
<div class="gallery-container">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?couple" alt="couple">
</div>
<div class="text">Piotrek i Paulina</div>
</div>
</div>
<div class="gallery-container w-2 h-2">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?people" alt="couple">
</div>
<div class="text">Gosia i Tomasz</div>
</div>
</div>
<div class="gallery-container w-3">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?kids" alt="couple">
</div>
<div class="text">Gosia i Tomasz</div>
</div>
</div>
<div class="gallery-container">
<div class="gallery-item">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?baby" alt="couple">
</div>
<div class="text">Gosia i Tomasz</div>
</div>
</div>

In the last blog section, nth-child is not happening

<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img">
<img class="" src="./assests/img/2.jpg" alt="">
</div>
<div class="blog-card__content"></div>
blog-card__img I need to do div's nth-child(2), which has this class, but it doesn't happen

I understood your idea. Do you want to modify the .blog-card__img of the 2nd .blog-card?
It won't work because there is still an H4 tag on the same level as the classes .blog-card
To do this, put all the .blog-card classes in a div and style the .blog-card__img classes.
Last Blog
<div class="blog-card-container">
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/1.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/2.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/3.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img ">
<img class="" src="./assests/img/4.jpg"
alt="">
</div>
<div class="blog-card__content">
...
</div>
</div>
</div>
</div>
and the CSS will look like this:
<style>
.blog-card-container .blog-card:nth-child(2) .blog-card__img {
// Your Style
}
</style>

your 2nd div tag is not blog-card__img, replace blog-card__content with blog-card__img or add the following:
<div class="blog-card">
<div class="blog-card__item blog">
<div class="blog-card__img">
<img class="" src="./assests/img/2.jpg" alt="">
</div>
<div class="blog-card__img blog-card__content"></div>

Bootstrap 4 image position

i have a problem with Bootstrap 4. Left box does not align with a right box. There is a HTML and CSS. How can I solve this problem?
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Section Title</h1>
</div>
<div class="col-md-6">
<div class="left-box">
<img src="images/category-1.jpg" alt="" class="img-fluid">
</div>
<div class="left-box">
<img src="images/category-2.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6">
<div class="right-box">
<img src="images/category-3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
CSS:
.left-box{ position:relative; padding-top:30px;}
.right-box{position:relative; padding-top:30px;}
1
Thank you.

There is two kind of Container in Bootstrap, in your case container-fluid is more adapted.
Change container to container-fluid

Bootstrap grid images positioning

I can not solve the problem, please help. I do adaptive site with the bootstrap grid and can not locate four images in one line. images should be near without any interval and spacing.
I have my code:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img src="img/four.png" />
</div>
</div>
</div>
</div>
</div>
Images are 295x150 and with intervals in browser

Add the class img-responsive to each <img> tag like so:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="one">
<img class="img-responsive" src="img/one.png" />
</div>
</div>
<div class="col-md-3">
<div class="two">
<img class="img-responsive" src="img/two.png" />
</div>
</div>
<div class="col-md-3">
<div class="three">
<img class="img-responsive" src="img/three.png" />
</div>
</div>
<div class="col-md-3">
<div class="four">
<img class="img-responsive" src="img/four.png" />
</div>
</div>
</div>
</div>
</div>

I have made a fiddle with no margin/ padding like this:
http://jsfiddle.net/Le6oosvo/2/
I used this HTML:
<div class="main_boxes">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="one">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="two">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="three">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
<div class="col-sm-3">
<div class="four">
<img class="img-responsive" src="http://lorempixel.com/295/150" />
</div>
</div>
</div>
</div>
</div>
And this little bit of CSS:
.main_boxes .col-sm-3 {
padding-left: 0px;
padding-right: 0px;
}
I used .col-sm-3 in stead of .com-md-3 to make the images align on the side of each other longer (when you squeeze it down). I also added bootstrap class to make the images responsive.

Suppose your images are 200px wide and 200px high. You could try something like
<div class="container">
<div class="row">
</div>
<div class="col-md-3">
<image src="image1.jpg"></img>
</div>
<div class="col-md-3">
<image src="image2.jpg"></img>
</div>
<div class="col-md-3">
<image src="image3.jpg"></img>
</div>
<div class="col-md-3">
<image src="image4.jpg"></img>
</div>
</div>
The bootstrap grid is 12 columns wide. Which means the columns have to add up to 12. You can do this by making four divs of three columns each. It would look something like this when done
Image 1 Image 2 Image 3 Image 4
Hope this helps.

bootstrap thumbnails not stacking properly

My thumbnails from bootstrap have different heights to them, and I think that issue might be causing them to not stack properly (see screenshots and fiddle). I think I need to include a min-height for them, but I'm just not able to get it working .. can anyone lend a hand?
Here is the code that I have:
<body>
<div class="container-fluid">
<div class="hidden-phone">
<a href="newBook.php">
<button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button>
</a>
</div>
<div class="row-fluid">
<div class="span12 well">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
View More information
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Fiddle: http://jsfiddle.net/Z3VwZ/
screens:

No, height of divs is not the issue. Issue is that you must put only three divs with .span4 class in one div with .row-fluid class. And if you want more divs with .span4 you must create new div with .row-fluid class and put those new .span4 divs inside. See Twitter bootstrap official documentation.
For example, this is valid Twitter Bootstrap markup
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span12"></div>
</div>
<div class="row-fluid">
<div class="span8"></div>
<div class="span1"></div>
<div class="span3"></div>
</div>
Here is working demo with your code >>> http://jsfiddle.net/Z3VwZ/1/