I am new to HTML and CSS so sorry if this was a simple question. This is a image of what I am trying to achieve
Picture of number of clients and years of experience
And this is what I managed to make
My Question is how do I align the text) to the same level as the number
.experience {
color: orange;
display: flex;
width: 50%;
}
.number {
font-size: 5rem;
}
.number-text {
float: right;
padding-left: 10px;
}
.clients {
color: orange;
display: flex;
width: 50%;
}
<div class="row">
<div class="experience">
<div class="col-lg-auto">
<p class="number">
12
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Years Of <br> Experience.</p>
</div>
</div>
<div class="clients">
<div class="col-lg-auto">
<p class="number">
14
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Satisfied <br> Clients.</p>
</div>
</div>
</div>
Your html is far too complex for this and all the other answers are incorrect as they are centering the text rather than aligning it with the bottom of the text. You can do this properly using align-items: last baseline;.
.client {
display: flex;
align-items: last baseline;
}
.number {
font-size: 5rem;
}
.text {
margin-left: 1em;
}
<div class="client">
<div class="number">14</div>
<div class="text">
Years Of <br> Experience.
</div>
</div>
But if you need to use your html then you can do it like this:
.experience, .clients {
color: orange;
display: flex;
width: 50%;
align-items: last baseline;
}
.number {
font-size: 5rem;
}
.number-text {
float: right;
padding-left: 10px;
margin: 0;
}
.clients {
color: orange;
display: flex;
width: 50%;
}
<div class="row">
<div class="experience">
<div class="col-lg-auto">
<p class="number">
12
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Years Of <br> Experience.</p>
</div>
</div>
<div class="clients">
<div class="col-lg-auto">
<p class="number">
14
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Satisfied <br> Clients.</p>
</div>
</div>
</div>
you can use position: relative; and use top CSS property for moving down the text
I used a rem value for the top property, because if you px it not will be working for all devices.
.number-text {
/* here the trick */
position: relative;
top: 0.8rem;
}
I see also that you don't use the DRY method
DON'T REPEAT YOURSELF
do this instead
.experience,
.clients {
/* your CSS */
}
I also added the same colors you put in the image in reusable CSS variables
* {
--bg-color-blue: #252734;
--gold-orange: #e9b258;
}
that's it here the code
* {
--bg-color-blue: #252734;
--gold-orange: #e9b258;
}
body {
background-color: var(--bg-color-blue);
}
.experience,
.clients {
color: var(--gold-orange);
display: flex;
width: 50%;
align-items: center;
justify-content: center;
}
.number {
font-size: 5rem;
font-weight: bold;
}
.number-text {
float: right;
padding-left: 10px;
color: white;
/* here the trick */
position: relative;
top: 0.8rem;
}
.row {
display: flex;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!-- first parent -->
<div class="experience">
<div class="col-lg-auto">
<p class="number">
12
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Years Of <br> Experience.</p>
</div>
</div>
<!-- second parent -->
<div class="clients">
<div class="col-lg-auto">
<p class="number">
14
</p>
</div>
<div class="col-lg-auto">
<p class="number-text">Satisfied <br> Clients.</p>
</div>
</div>
</div>
</body>
</html>
The following code should work. Just add the align-items:center; property to the .experience div.
.experience{
align-items:center;
}
You can use align-self: center on the container to be centred.
body {
font-family: sans-serif;
background: #000000;
}
#app {
display: flex;
}
.experience {
color: #fff;
display: flex;
width: 50%;
}
.number {
font-size: 5rem;
}
.number-text {
float: right;
padding-left: 10px;
}
.clients {
color: #fff;
display: flex;
width: 50%;
}
p {
margin: 0; // set margin to zero
// the p tag has a margin by default that you have to remove
}
.align-self-center {
align-self: center; make the container align itself to center
}
<div id="app">
<div class="experience">
<div class="col-lg-auto">
<p class="number">10</p>
</div>
<div class="col-lg-auto align-self-center">
<p class="number-text">
Years Of <br />
Experience.
</p>
</div>
</div>
<div class="clients">
<div class="col-lg-auto">
<p class="number">12</p>
</div>
<div class="col-lg-auto align-self-center">
<p class="number-text">
Satisfied <br />
Clients.
</p>
</div>
</div>
</div>
Related
index.html - below is the index.html file code where I have written all the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="./img-1.jpg" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-2.jpg" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-3.jpg" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
</body>
</html>
style.css - below is the style.css file code here I have written all my CSS code
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 1rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
I want to place the play icon in the center of all the three images with CSS but I am getting the play icon only for the center image. How to get the play icon in the center of all three images.
I want to place the play font-awesome icon in the center of the image
Try this.
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 4rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
position:absolute;
text-align:center;
color:red;
bottom:30px;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
justify-content:center;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
display:flex;
justify-content:center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play" style="position:relative"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-1"></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-2"></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-3"></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
</body>
</html>
You can use the flexbox property for your .centered and .img-container classes. Something as shown below:
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
Full Working Snippet: - (I've used random gifs as images just for this answer, you can replace them your images path)
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color: #000;
color: #fff;
padding: 1rem 4rem;
}
nav {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #fff;
margin: 0;
padding: 0;
}
.stream {
max-width: 1000px;
width: 100%;
}
.fa-play {
font-size: 3rem;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 0;
}
li h1 {
font-size: 3rem;
}
a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
background-color: white;
}
.row {
display: flex;
}
.col {
position: relative;
padding: 1rem;
flex: 1;
}
.col img {
max-width: 100%;
}
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
Hope that's how you wanted it to look
So iam a first time HTML and CSS user, and was making a website using a YouTube video, however i reached a stage where i want to show the backround image onto the screen however ive followed the video exactly and it only shows my logo image and not the background image.
This was the youtube video : https://youtu.be/5bMdjkfvONE
I got up to 1:00:0 into the video after that it no longer worked like in the video.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio3.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/network.jpg">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's because there are no images at the URL's you are using. What's more, you need to apply a height to the elements that have the background images. I only did it for one of them below.
/* Master Styles */
body {
margin: 0px;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
/* Nav Styles*/
.nav-wrapper{
display:flex;
justify-content: space-between;
padding: 40px;
}
.left-side{
display:flex;
}
.nav-wrapper > .left-side > div {
margin-right: 20px;
font-size: 0.9em;
text-transform:uppercase;
}
.nav-link-wrapper {
height: 22px;
border-bottom: 1px solid transparent;
transition: border-bottom 0.5s;
}
.nav-link-wrapper a {
color:blue;
text-decoration: none;
transition: color 0.5s;
}
.nav-link-wrapper:hover{
border-bottom: 1px solid black;
}
.nav-link-wrapper a:hover{
color: black;
}
/* Portfolio Styles */
.portfolio-items-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper {
position: relative;
}
.portfolio-img-background {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
}
.img-text-wrapper {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
.logo-wrapper img {
width: 50%;
margin-bottom: 20px;
}
.subtitle {
font-weight: 600;
color: darkblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Mathews Joy</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Personal LinkedIn Page
</div>
<div class="nav-link-wrapper">
Personal Instagram Page
</div>
</div>
<div class="right-side">
<div class="brand">
MATHEWS JOY
</div>
</div>
</div>
<div class="content-wrapper">
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio1.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Technology Intership at the Bright Network (December 2020)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(https://via.placeholder.com/150); height: 200px"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Certications completed during time at university (2020 - 2023)
</div>
</div>
</div>
<div class="portfolio-item-wrapper">
<div class="portfolio-img-backround" style="background-image:url(images/portfolio2.jpg)"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/">
</div>
<div class="subtitle">
Volunteering and Work Experiences
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I don't know how to center icon with the text. I have SVG + text. I can do it with plain CSS(flex-box) but I have to use bootstrap. Also, I want to center text, so it will be centered as other parts of the webpage, I want it to be aligned vertically
I have this:
I want to get this:
I have tried different solutions but did not come up with a good idea.
So the questions are:
How to make text to be centered to the left so it looks centered?
How to aligned svg icon with the text?
thanks
<section class="perks">
<img src="./media/blueCircle.svg" alt="" />
<div class="container">
<div class="row">
<div class="col perksFirst">Perks of Meetlete</div>
<div class="w-100"></div>
<div class="row perksList">
<div class="col">Access to our secure video platform!</div>
<div class="col">
<img src="./media/2.svg" alt="" />Calls are executed through our
App!
</div>
<div class="w-100"></div>
<div class="col">Metelete calls take place on your time!</div>
<div class="col">None of your information is shared!</div>
<div class="w-100"></div>
<div class="col">Build loyalty with your fans!</div>
<div class="col">Make lifetime memories!</div>
<div class="w-100"></div>
<div class="col">Earn up to 10x more than other platforms!</div>
<div class="col">Meetlete calls are timed!</div>
</div>
<div class="w-100"></div>
<div class="col">
<button class="earlyAccess btn">Early access</button>
<div class="launchDate">Launching 2/14/21!</div>
</div>
</div>
</section>
.perks {
display: flex;
text-align: center;
margin-top: 310px;
position: relative;
}
.perks .earlyAccess {
margin-top: 117px;
}
.perks img {
position: absolute;
left: 0;
top: -50%;
}
.perks .row {
justify-content: center;
}
.perksList {
max-width: 860px;
display: flex;
justify-content: center;
align-items: center;
}
.perksList .col {
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
display: flex !important;
text-align: start;
margin-top: 26px;
}
.perksFirst {
margin-bottom: 77px;
font-size: 24px;
font-weight: 700;
}
.launchDate {
font-weight: 700;
font-size: 18px;
margin-top: 26px;
}
In order to align icons with the text you can put them together in a
Or you use bootstrap grid https://getbootstrap.com/docs/4.6/layout/grid/. You could use this easily to render it all dynamically, by putting your text in a list.
You can use text-align: center on the outer div (container) to center all. then text-align left in the inner one (perklist) in case this turns your text all left aligned.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
justify-content: center;
margin: auto;
text-align: left;
margin-top: 10px;
}
.heading {
text-align: center;
padding: .5rem;
}
.heading h3 {
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
}
.card {
background: whitesmoke;
padding: 2rem;
border: darkgrey
}
span {
display: flex;
vertical-align: middle;
padding-top: 1rem;
}
span img {
display: inline-flex;
height: 2rem;
}
span a {
font-size: 18px;
font-weight: 600;
line-height: 2rem;
padding-left: .5rem;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solution By Tarak</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="new.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-1"></div>
<div class="card col-xl-10 col-sm-12">
<div class="row">
<div class="heading col-12">
<h3>Perks of Meetlete</h3>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-md-12">
<span><img src="./test-tubes.svg" /><a>Access to our secure video platform!</a></span>
<span><img src="./test-tubes.svg" /><a>Metelete calls take place on your time!</a></span>
<span><img src="./test-tubes.svg" /><a>Build loyalty with your fans!</a></span>
<span><img src="./test-tubes.svg" /><a>Earn up to 10x more than other platforms!</a></span>
</div>
<div class="col-xl-6 col-md-12">
<span><img src="./test-tubes.svg" /><a>Calls are executed through our App!</a></span>
<span><img src="./test-tubes.svg" /><a>None of your information is shared!</a></span>
<span><img src="./test-tubes.svg" /><a>Make lifetime memories!</a></span>
<span><img src="./test-tubes.svg" /><a>Meetlete calls are timed!</a></span>
</div>
</div>
</div>
</div>
</div>
</body>
height of span img == line-height of span a (for it to be inline center)
change svg of your choice.
play with styles.
I am trying to create a simple layout that uses css flex to display 4 boxes across the screen on 2 rows.
What I want to happen is I want to be able to add more divs to my HTML, and whenever the divs reach the end of the right hand side of the screen, no more divs are added, and a new row should being. However, whenever I add more than a certain number of divs, the divs start to move off screen. I want the divs to only stay within 100% of the screen size and move onto a NEW ROW once it hits the end of the page view.
The following photo shows what I am current getting and what I should be getting.
Here is some of my code....
HTML
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #212121;
overflow-x: hidden;
}
header {
display: flex;
width: 100%;
margin: auto;
height: 100px;
align-items: center;
box-shadow: 0px 3px 10px gold;
background: #212121;
position: sticky;
top: 0px;
}
.logoContainer,
.navLinks {
display: flex;
}
.logoContainer {
flex: 1;
}
nav {
flex: 1;
}
.navLinks {
justify-content: space-around;
cursor: pointer;
margin-right: 20px;
color: white;
}
.navLink {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
}
ul {
list-style: none;
}
.containers {
display: flex;
background: green;
}
.gold1,
.gold2,
.gold3,
.gold4,
.gold5 {
background-color: white;
border-radius: 10px;
margin-top: 40px;
flex: 1;
}
.title {
text-align: center;
padding-top: 10px;
}
.price {
text-align: center;
margin-top: 40px;
font-size: 24px;
font-weight: bold;
color: black;
}
button {
width: 100px;
height: 35px;
border-radius: 10px;
background: rgb(14, 170, 14);
border: none;
cursor: pointer;
font-size: 16px;
}
.button {
text-align: center;
background-color: white;
}
<div class="containers">
<div class="gold1">
<h1 class="title">shop 1</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold2">
<h1 class="title">shop 2</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold3">
<h1 class="title">shop 3</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy Gold</button>
</div>
</div>
<div class="gold4">
<h1 class="title">shop 4</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
<div class="gold5">
<h1 class="title">shop 5</h1>
<p class="price">$5</p>
<div class="button">
<button>Buy</button>
</div>
</div>
</div>
PLEASE NOTE : For some reason, the code snipet is not showing what my screen is showing. I will try to fix this.
As you can see a few things.
The boxes go off screen.
The boxes do not stack on each other as the screen get smaller ( I want this to be responsive, having all the boxes stack on top of each other 1 by 1 on smaller screens , and only showing 4 boxes / row on larger screens )
Thanks in advance for the help.
You need to add some extra flex properties to css to work fine
You do not need to create a class for each element if it is going to share its properties, if you want to add something you can create classes and add them to the element and to these add or remove properties. What I mean is that .gold1, .gold2, .gold3 ... etc. they are not really necessary you can only use .gold since all those boxes will share their css properties.
CSS selectors
flex-direction: column; // for mobile devices
flex-wrap: wrap;
Flexbox guide
Also you need to use media queries to add or remove properties to your css id's,class,tags...
Here you can see an example of you want (Click on run code snippet and go to full page)
body {
background: #111;
box-sizing: border-box;
}
body>h1 {
text-align: center;
color: white;
}
.container {
margin: auto;
display: flex;
justify-content: center;
flex-direction: column;
background: green;
width: 90%;
}
.gold {
background: white;
border-radius: 10px;
margin-top: 10px;
padding: 10px;
}
.title {
text-align: center;
padding-top: 10px;
}
.price {
text-align: center;
margin-top: 40px;
font-size: 24px;
font-weight: bold;
color: black;
}
.button {
text-align: center;
background-color: white;
}
button {
width: 100px;
height: 35px;
border-radius: 10px;
background: rgb(14, 170, 14);
border: none;
cursor: pointer;
font-size: 16px;
}
#media (min-width: 992px) {
.container {
justify-content: space-between; /* add this */
flex-direction: row; /* change direction */
flex-wrap: wrap; /* wrap content */
}
.gold {
width: 22%; /* assign a lower width */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Flex</h1>
<div class="container">
<div class="gold">
<h1 class="title">Shop 1</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 2</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 3</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 4</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 5</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 6</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 7</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 8</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 9</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 10</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 11</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
<div class="gold">
<h1 class="title">Shop 12</h1>
<p class="price">$5</p>
<div class="button">
<button>Button</button>
</div>
</div>
</div>
</body>
</html>
I found the answer. All I needed to do was add flex-wrap: wrap and it gave me the desired output.
use flex-direction row and then write flex-wrap:wrap in container class
I've been working on this for days and feel like I've tried everything. Not sure if it's just something small that I'm missing or if I'm completely off track. I need to position my divs on the page like in this image the code I've got so far is this.
HTML:
body {
margin: 0px;
padding: 0px;
width: 1024px;
height: 768px;
float: left;
}
.pagebanner {
height: 200px;
width: 1024px;
}
.header {
background-color: aqua;
height: 50px;
margin-top: 0px;
padding-left: 200px
}
.navbar {
background-color: brown;
float: left;
height: 768px;
}
.subheading {
background-color: chartreuse;
padding-left: 420px;
margin-top: 0px
}
.content {
background-color: crimson;
height:
}
.footer {
background-color: darkgreen;
padding: 20px;
margin-bottom: 0px
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>The Club Site</title>
</head>
<body>
<div wrapper="mainwrapper">
<div class="pagebanner"><img src="HTML Pract A/images/banner.jpg" alt="PageBanner" width="1024px" height="200px">
<div class="navbar">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="header">
<h1 class="header">The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="content">
</div>
<div class="footer">
<p>blah blah blah</p>
</div>
</div>
</body>
</html>
Any help with this would be greatly appreciated. First time trying to use HTML and I'm not having much luck with it.
In this sample i try to introduction bootstrap framework to you, bootstrap can help you to make a lot of html templates with less time, try t read documentation of this framework and you will figure out how it's easy.
Good luck with it and always before you ask something search about it,
i'm sure you will get solved questions.
This sample based on bootstrap 4 framework
.nav {
background-color: #ccc;
min-height: 500px;
}
.header {
background-color: #eee;
}
.sub-header {
background-color: yellow;
margin-bottom: 15px;
}
.item {
border: solid 1px #ccc;
text-align: center;
height: 150px;
margin-bottom: 15px;
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>The Club Site</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<h1>header</h1>
</div>
</div>
<div class="row">
<div class="col-4 nav">
<h3>nav</h3>
</div>
<div class="col-8">
<div class="row">
<div class="col header">
<h3>The Club Site</h3>
</div>
</div>
<div class="row">
<div class="col sub-header">
<h6>sub header</h6>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="item">
<h4>item 1</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 2</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 3</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 4</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 5</h4>
</div>
</div>
<div class="col-4">
<div class="item">
<h4>item 6</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<header>Header</header>
<div id="main">
<article>
<div class="my-container">
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
<div class="image">
<img src="https://www.placebacon.net/400/300">
</div>
</div>
</article>
<nav>Nav</nav>
</div>
<footer>Footer</footer>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
order: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
#main > nav {
background: #D7E8D4;
order: 3;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
.my-container {
display: flex;
flex-flow: row wrap;
align-content: flex-start; /* pack wrapping lines to the top */
width: 100%;
height: 300px;
}
.image {
flex: 0 0 30%;
margin: 5px;
}
img {enter code here
max-width: 100%;
}
</style>
Note: try to learn instead copy & paste it, to start try to write codes again.
I change and also add some css class in your codes, so pay-attention to different between old version and new css and html files.
Description: for start modeling your style you need to separate all partsyou need; for example here we need:
Header
Header > image
main > nav
main > content
main > content > header
main > content > subheading
main > content > area
main > content > area > items
main > content > area > items > item
etc...
and then start to html them, insert your div or what you want, and last step is manage them with css.
body {
margin: 0px;
padding: 0px;
}
.mainwrapper {
width: 1024px;
margin: 0 auto;
}
.pagebanner {
height: 250px;
margin: 0;
}
.pagebanner img {
width: 100%;
height: 100%;
}
.main {
margin: 0;
}
.navbar {
background-color: brown;
min-height: 500px;
width: 20%;
float: left;
}
.navbar li {
list-style: none;
margin-bottom: 15px;
}
.navbar a {
color: #fff;
font-size: 20px;
}
.content {
width: 80%;
float: left;
padding: 0;
min-height: 500px;
}
.header {
background-color: #000;
text-align: center;
}
.header h1 {
color: #fff;
margin: 0;
}
.subheading {
background-color: #f8d631;
text-align: center;
}
.subheading h2 {
background-color: #f8d631;
margin: 0;
}
.area h3 {
margin: 0;
text-align: center;
}
.item {
width: 33.33333333333333%;
float: left;
text-align: center;
}
.item div {
padding: 0 15px;
}
.item img {
height: 150px;
width: 100%;
}
.footer {
background-color: darkgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="mainwrapper">
<div class="pagebanner">
<img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
</div>
<div class="main">
<div class="navbar">
<ul>
<li>
Information
</li>
<li>
Home
</li>
</ul>
</div>
<div class="content">
<div class="header">
<h1>The Club Site</h1>
</div>
<div class="subheading">
<h2>Members Prices</h2>
</div>
<div class="area">
<h3>discounted Items</h3>
<div class="items">
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
<div class="item">
<div>
<img src="https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bx4BSt6jniD7VG9DQVluOFJ4Tnc/materialdesign-principles-metaphor.png" />
<h4>name - %200</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>