Hello guys I wanted to insert an image inside my box and additionally I wanted to insert texts also below the image as a sort of a description for the supposed image inside the box. How would I implement that?
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Sen:wght#700&display=swap');
*{
box-sizing: border-box;
}
body{
margin:0;
min-height: 100vh;
display: flex;
}
.content{
background-color: #EFEFEF;
flex-grow: 1;
min-height: 100vh;
}
.banner{
background-image: url("banner.png");
position: relative;
min-width: 100%;
background-position: center;
background-size: cover;
height: 7rem;
box-shadow: inset 0 -20px 50px black;
display: flex;
}
.container-content{
margin-left: auto;
margin-right: auto;
padding: 1rem;
flex-grow: 1;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 15px;
text-align: center;
color: white;
margin-top: 0;
}
h3:hover{
background-color: #9e9b9b;
color: #1c1c1c;
height: 60px;
margin-top: -17px;
padding-top: 17px;
}
.sidebar{
height: 100vh;
position: sticky;
overflow: auto;
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
min-width: 245px;
background-color: #262626;
padding-top: 20px;
}
.sidebarlogo{
max-width: 245px;
}
.header{
height: 60px;
background-color: #5c5b5b;
padding-top: 17px;
}
.menu a{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
padding: 15px 6px 15px 16px;
text-decoration: none;
font-size: 17px;
color: white;
z-index: 1;
top: 0;
left: 0;
display: flex;
margin: 0;
}
.menu a:hover {
min-width: 100%;
Background-color: #1b1b1b;
text-decoration: underline;
}
.fa-building-columns{
padding-right: 12px;
font-size: 39px;
}
.fa-books{
padding-right: 12px;
font-size: 39px;
}
.fa-users{
padding-right: 12px;
font-size: 32px;
}
.fa-megaphone{
padding-right: 12px;
font-size: 36px;
}
.fa-arrow-right-from-bracket{
padding-right: 12px;
font-size: 39px;
}
.mcm{
background-color: white;
border-radius: 3px;
width: 100%;
height: 10rem;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
<!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">
<link rel="icon" type="image/x=icon" href="form.png">
<link rel="stylesheet" href="IP.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<title>Institution Page</title>
</head>
<body>
<aside class="sidebar">
<span>
<img class="sidebarlogo" src="sidebarlogo1.jpg">
<div class="header">
<h3>Welcome to the Institution Page!</h3>
</div>
<br>
<div class="menu">
<i class="fa-regular fa-building-columns"></i>Institution Page
<i class="fa-light fa-books"></i>Courses
<i class="fa-light fa-users"></i>Student Roster
<i class="fa-regular fa-megaphone"></i>Announcements
<br><br><br><br><br><br>
<i class="fa-light fa-arrow-right-from-bracket"></i>Log out
</div>
</span>
</aside>
<main class="content">
<div class="banner"></div>
<div class="container-content">
<div class="mcm" >
asdfsdfd
</div>
</div>
</main>
</body>
</html>
Ignore the "asdfsdfd". I wanted to insert an image there and have some sort of a title header below the image and finally, add some description text for the image. Any solutions for this is highly appreciated thanks!
itry to answer and help. It might help you. and i share the fiddle link too https://jsfiddle.net/pw7e5Lca/5/
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#300&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Sen:wght#700&display=swap');
*{
box-sizing: border-box;
}
body{
margin:0;
min-height: 100vh;
display: flex;
}
.content{
background-color: #EFEFEF;
flex-grow: 1;
min-height: 100vh;
}
.banner{
background-image: url("banner.png");
position: relative;
min-width: 100%;
background-position: center;
background-size: cover;
height: 7rem;
box-shadow: inset 0 -20px 50px black;
display: flex;
}
.container-content{
margin-left: auto;
margin-right: auto;
padding: 1rem;
flex-grow: 1;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 15px;
text-align: center;
color: white;
margin-top: 0;
}
h3:hover{
background-color: #9e9b9b;
color: #1c1c1c;
height: 60px;
margin-top: -17px;
padding-top: 17px;
}
.sidebar{
height: 100vh;
position: sticky;
overflow: auto;
bottom: 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
min-width: 245px;
background-color: #262626;
padding-top: 20px;
}
.sidebarlogo{
max-width: 245px;
}
.header{
height: 60px;
background-color: #5c5b5b;
padding-top: 17px;
}
.menu a{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
padding: 15px 6px 15px 16px;
text-decoration: none;
font-size: 17px;
color: white;
z-index: 1;
top: 0;
left: 0;
display: flex;
margin: 0;
}
.menu a:hover {
min-width: 100%;
Background-color: #1b1b1b;
text-decoration: underline;
}
.fa-building-columns{
padding-right: 12px;
font-size: 39px;
}
.fa-books{
padding-right: 12px;
font-size: 39px;
}
.fa-users{
padding-right: 12px;
font-size: 32px;
}
.fa-megaphone{
padding-right: 12px;
font-size: 36px;
}
.fa-arrow-right-from-bracket{
padding-right: 12px;
font-size: 39px;
}
.mcm{
background-color: white;
border-radius: 3px;
width: 100%;
height: 10rem;
max-width: 100%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.item__img {
object-fit: cover;
object-position: right;
height: 10rem;
width: 100%;
}
div.desc {
padding: 15px;
text-align: center;
}
<!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">
<link rel="icon" type="image/x=icon" href="form.png">
<link rel="stylesheet" href="IP.css">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<title>Institution Page</title>
</head>
<body>
<aside class="sidebar">
<span>
<img class="sidebarlogo" src="sidebarlogo1.jpg">
<div class="header">
<h3>Welcome to the Institution Page!</h3>
</div>
<br>
<div class="menu">
<i class="fa-regular fa-building-columns"></i>Institution Page
<i class="fa-light fa-books"></i>Courses
<i class="fa-light fa-users"></i>Student Roster
<i class="fa-regular fa-megaphone"></i>Announcements
<br><br><br><br><br><br>
<i class="fa-light fa-arrow-right-from-bracket"></i>Log out
</div>
</span>
</aside>
<main class="content">
<div class="banner"></div>
<div class="container-content">
<div class="mcm">
<div class="img_bos">
<img src="https://image.shutterstock.com/z/stock-photo-a-picture-of-the-beautiful-view-of-birds-1836263689.jpg" class="item__img" />
</div>
<div class="desc">Add a description of the image here</div>
<div class="img_bos">
<img src="https://image.shutterstock.com/z/stock-photo-a-picture-of-the-beautiful-view-of-birds-1836263689.jpg" class="item__img" />
</div>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</main>
</body>
</html>
Related
I would like to have these images on top of the title and that their size affects the size of the div they are in to work something like in this website: https://nomadgoods.com/collections/cases
I have managed to put a picture one above the other and make the hover function work but making that with "position: absolute;" will make it so that the images dont afect any othe elemets, Is there any way of having one on top of the other with no "position: absolute;" or that even if they use these the still will afect the rest of the elements.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.product-img.is-visible {
opacity: 1;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
z-index: 2;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
To solve this you can just set one element's position to absolute and the other's relative.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
margin: 0;
}
.product-img:not(.is-visible) {
position: absolute;
}
.product-img.is-visible {
display: block;
opacity: 1;
position: relative;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img is-visible">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
You are making position of both images to absolute this is causing the problem . Make one image absolute and position it above the other image. When you hover over image at the top disappears and image in the background become visible.
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: auto;
}
body {
margin: 0px;
-webkit-font-smoothing: antialiased;
background: #f2f2f2;
color: #000;
font-family: Gotham-Bold,sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
line-height: 0.5;
}
.nav {
width: 100%;
min-height: 60px;
max-height: 60px;
border: 0px;
position: absolute;
justify-content: top;
}
.banner-box {
margin-top: 0px;
width: 100%;
height: 100%;
max-height: 550px;
min-height: 200px;
max-width: auto;
min-width: 768px;
background-image: url(assets/img/Desktop_1.jpg);
background-position: var(--backgroundPosition);
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
/* Title alignment*/
align-items: center;
color: #fff;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin: auto;
padding-bottom: 10px;
}
.banner-title {
font-family: Gotham-Bold,sans-serif;
font-size: 78px;
font-weight: 800;
letter-spacing: -.02em;
line-height: 0.3px;
text-align: center;
}
.banner-subtitle {
font-family: Gotham-Bold,sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: -.02em;
line-height: 1;
text-align: center;
}
.body-w {
margin-left: 5%;
margin-right: 5%;
}
/* Product section */
.product-container {
margin-left: 2.5%;
margin-right: 2.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product-container *{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.product-box {
max-width: auto;
min-width: 150px;
padding: 5px;
background-color: #fff;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.product-img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #f3f3f3;
transition: opacity .3s ease;
max-width: 100%;
max-height: 100%;
object-fit: contain;
position: relative;
top: 0;
left: 0;
}
.main-image
{
position:absolute;
margin-top:6.5%;
margin-left:4%;
}
.product-img.is-visible {
opacity: 1;
z-index: 1;
}
.product-img.is-visible:hover{
opacity: 0;
z-index: 2;
}
.color-container *{
margin-left: 1px;
margin-right: 1px;
}
.product-color {
min-height: 20px;
min-width: 20px;
border: 2.5px;
border-style: solid;
border-color: #c1c1c1;
border-radius: 15px;
}
<html lang="en">
<head>
<!-- meta data -->
<meta name="author" content="Rafa Ponce Vivancos">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta data end -->
<title>Testing</title>
<link href="css/testing.css" rel="stylesheet">
</head>
<body>
<!-- Body-->
<div class="body-w">
<!-- product section 1 -->
<div>
<!-- product containers -->
<div>
<div class="product-container">
<!-- product box -->
<div class="product-box">
<div>
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/9b3222b9-1125-42ca-a623-5b64903835e1/" class="product-img ">
<img src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/885a5c28-be17-44a2-8c0a-b013e03d4e29/" class="product-img main-image is-visible">
</div>
<h3>Product name</h3>
<p>Product specifications</p>
<div class="color-container" style="display: flex;">
<button class="product-color" style="background-color: black;"></button>
<button class="product-color" style="background-color: rgb(60,33,21);"></button>
<button class="product-color" style="background-color: rgb(105,77,59);"></button>
</div>
</div>
<!-- product box end -->
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying to build an ecommerce website by watching a YouTube video. I am stuck at apply CSS style to some classes. I have given my html CSS code below. In that from the class "#product1 .pro.des{ "onwards CSS styling is not applying to its content.on #product1 .pro.des{ element in CSS I tried to align text to start but it is not reflecting. Not only that but also the styling of other elements which comes after "#product1 .pro.des{" also are not working. Hope someone will resolve this?
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1{
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2{
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4{
font-size: 20PX;
color: #222;
}
h6{
font-weight: 700;
font-size: 12px
}
p{
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1{
padding: 40px 80px;
}
.section-p1{
margin: 40px 0;
}
body{
width: 100%;
}
/*header start*/
#header{
display: flex;
justify-content: space-between ;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar{
display: flex;
justify-content: center;
align-items: center;
}
#navbar li{
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a{
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active{
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after{
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero{
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4{
padding-bottom: 15px;
}
#hero h1{
color: #088178;
}
#hero button{
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border:0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box{
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover{
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6{
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img{
width: 100%;
margin-bottom: 10px;
}
#product1{
text-align: center;
}
#product1 .pro{
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img{
width: 100%;
border-radius: 20px;
}
#product1 .pro.des{
text-align: start;
padding: 10px 0;
}
#product1.pro.des span{
color: #606063;
font-size: 50px;
}
#product1 .pro.des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro.des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
<!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>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></l1>
<li>Shop</l1>
<li>Blog</l1>
<li>About</l1>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart"></i>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Add Spaces Between your selectors like:
#product1 .pro .des h5{
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro .des i{
font-size: 25px;
color: rgb(241, 183, 25);
}
Should be .pro > .des or .pro .des (with a space) because .des is a child to .pro.
.pro.des would only be valid if those classes shared the same element.
#import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Spartan:wght#100;200;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Spartan' sans-serif;
}
h1 {
font-size: 50PX;
line-height: 64px;
color: #222;
}
h2 {
font-size: 46PX;
line-height: 54px;
color: #222;
}
h4 {
font-size: 20PX;
color: #222;
}
h6 {
font-weight: 700;
font-size: 12px
}
p {
font-size: 16PX;
color: #465b52;
margin: 15px 0 20px 0;
}
.section-p1 {
padding: 40px 80px;
}
.section-p1 {
margin: 40px 0;
}
body {
width: 100%;
}
/*header start*/
#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 80px;
background-color: #e3e6f3;
box-shadow: 0px 5px 15p rgba(0, 0, 0, 0.06);
z-index: 999;
position: sticky;
top: 0;
left: 0;
}
#navbar {
display: flex;
justify-content: center;
align-items: center;
}
#navbar li {
list-style: none;
padding: 0 20px;
position: relative;
}
#navbar li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active {
color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after {
content: "";
width: 30%;
height: 2px;
background: #088178;
position: absolute;
bottom: -4px;
left: 20px;
}
#hero {
background-image: url("img/hero4.png");
height: 90vh;
width: 100%;
background-position: top 25 right 0;
background-size: cover;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
#hero h4 {
padding-bottom: 15px;
}
#hero h1 {
color: #088178;
}
#hero button {
background-image: url(img/button.png);
background-color: transparent;
color: #088178;
border: 0;
padding: 14px 80px 14px 65px;
background-repeat: no-repeat;
cursor: pointer;
font-weight: 700;
font-size: 15px;
}
#feature {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
#feature .fe-box {
width: 180px;
text-align: center;
padding: 25px 15px;
box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
border: 1px solid #cce7d0;
border-radius: 4px;
margin: 15px 0;
}
#feature .fe-box:hover {
box-shadow: 10px 10px 34px rgba(0, 0, 0, 0.03);
}
#feature .fe-box h6 {
display: inline-block;
padding: 9px 8px 6px 8px;
line-height: 1;
border-radius: 4px;
color: #088178;
background-color: #fddde4;
}
#feature .fe-box img {
width: 100%;
margin-bottom: 10px;
}
#product1 {
text-align: center;
}
#product1 .pro {
width: 23%;
min-width: 250px;
padding: 10px 12px;
border: 1px solid #cce7d0;
border-radius: 25px;
cursor: pointer;
box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
margin: 15px 0;
}
#product1 .pro img {
width: 100%;
border-radius: 20px;
}
#product1 .pro>.des {
text-align: start;
padding: 10px 0;
}
#product1.pro>.des span {
color: #606063;
font-size: 50px;
}
#product1 .pro >.des h5 {
padding-top: 7px;
color: #1a1a1a;
font-size: 14px;
}
#product1 .pro >.des i {
font-size: 25px;
color: rgb(241, 183, 25);
}
<!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>Ecommerce</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<img src="img/logo.png" class="logo">
<div>
<ul id="navbar">
<li><a class="active" href="index.html">Home</a></li>
<li>Shop</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
<li><i class="fa-solid fa-cart-arrow-down"></i></li>
</ul>
</div>
</section>
<section id="hero">
<h4>Trade-in-offer</h4>
<h2>Super Value Deals</h2>
<h1>On all products</h1>
<p>Save more with coupons & upto 70%off</p>
<button>Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png">
<h6>Free Shipping</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png">
<h6>Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png">
<h6>Save Money</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png">
<h6>Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png">
<h6>Happy Sell</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png">
<h6>Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Products</h2>
<p>Summer Collections</p>
<div class="pro-container">
<div class="pro">
<img src="img/products/f1.jpg">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut Tshirt</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<i class="fal fa-shopping-cart"></i>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Side note: markup was invalid due to missing closing <li> - you had </ll> instead.
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
How can I make this textarea (the one with class="proxi-output" responsive?
When I try to resize the page it overlaps div (class="resi-gen") and it breaks the whole web.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-image: url(../img/agreya-bg.png);
background-repeat: no-repeat;
background-size: cover;
background-color: #0E0E0E;
}
.side-panel{
background-color: #050707;
height: 100vh;
width: 250px;
margin: 0px;
z-index: 10;
position: absolute;
}
.logo{
margin: 0px;
color: #FFFFFF;
padding: 35px 20%;
letter-spacing: 2px;
}
.sub-pages{
text-align: center;
justify-content: center;
margin: 150px auto;
}
.sub-pages a{
display: block;
font-size: 20px;
text-decoration: none;
color: #FFFFFF;
margin: 45px 0px;
}
.sub-pages a:hover{
color: #E1E777;
}
#current{
color: #E1E777;
}
.heading{
color: #FFFFFF;
text-align: center;
font-weight: 500;
letter-spacing: 2px;
}
.wrapper{
float: right;
width: 100vw;
height: 100vh;
margin: 0px;
}
.resi-gen{
position: relative;
background-color: #050707;
margin-top: 20%;
width: 70%;
height: 45%;
border: 2px solid transparent;
border-radius: 50px;
/* width: 1100px;
height: 400px; */
margin-left: 290px;
}
.resi-gen h2{
display: inline-block;
color: #FFFFFF;
margin-top: 20px;
margin-left: 30px;
font-weight: 500;
letter-spacing: 1.5px;
}
#proxi-output{
position: absolute;
margin-top: 2%;
margin-left: 5%;
height: 85%;
width: 70%;
resize: none;
background-color: #818181;
cursor: pointer;
outline: none;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/residental.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/29441bec37.js" crossorigin="anonymous"></script>
<title>Agreya - Register</title>
</head>
<body>
<div class="wrapper">
<div class="side-panel">
<h1 class="logo">AGREYA</h1>
<div class="sub-pages">
<a id="current" href="residental.html">Residental</a>
Datacenter
Purchase
Settings
</div>
</div>
<h1 class="heading">Residental proxies</h1>
<div class="resi-gen">
<h2>Generate Proxies</h2>
<textarea id="proxi-output" name="output"></textarea>
</div>
</div>
</body>
</html>
I have been trying to solve this issue but for some reason my code is wrong and I am a beginner, I am trying to get those in place, but it isn't responsive, and they get distorted. I am seeking some help to solve this.
please do look at the link(https://i.stack.imgur.com/ZO5F2.jpg) above.
Thank you!!
#import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Alice&family=NTR&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #F4F4F4;
}
navup{
justify-content: space-around;
align-items: center;
display: flex;
min-height: 62px;
background-color: #000000;
color: white;
}
navup h1{
/*padding-left: 40rem;*/
font-family: 'alice', serif;
font-size: 36px;
font-weight: normal;
font-style: italic;
}
navup li{
list-style: none;
}
navup ul li{
display: flex;
}
navup li a{
/*padding-right: -10rem;*/
display: flex;
color: white;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
}
navup img{
/*margin-right: 200px;*/
}
navlo{
width: 100%;
justify-content: space-evenly;
align-items: center;
display: flex;
max-height: 60px;
margin: auto;
background-image: linear-gradient(#FFFFFF,#898989);
border-radius: 0px 0px 0px 9px;
}
navlo img{
width: 61px;
height: 61px;
margin-top: 2.95px;
}
navlo ul{
display: flex;
}
navlo ul li{
list-style: none;
display: flex;
padding: 0rem 1.5rem;
}
navlo li a{
color: #000000;
text-decoration: none;
font-family: 'NTR', sans-serif;
font-size: 20px;
font-weight: bold;
}
.barone img{
position: absolute;
width: 89px;
height: 10px;
left: 906px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bartwo img{
position: absolute;
width: 102px;
height: 10px;
left: 1025px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barthree img{
position: absolute;
width: 109px;
height: 10px;
left: 1157px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfour img{
/* Services bar */
position: absolute;
width: 89px;
height: 10px;
left: 1296px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barfive img{
/* Partners Bar */
position: absolute;
width: 101px;
height: 10px;
left: 1415px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.barsix img{
position: absolute;
width: 111px;
height: 11px;
left: 1546px;
top: 46px;
background: #001E5A;
border-radius: 4px;
}
.bars img{
display: inline;
/*width: 50%;*/
margin-top: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<link rel="stylesheet" href="style.css">
<title>Art</title>
<style>
/* width */
::-webkit-scrollbar {
background-color: grey;
width: 13px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: black;
}
</style>
</head>
<body>
<SECTION>
<navup>
<div class="logo">
<h1>Art</h1>
</div>
<!-- <ul>
<li>
Login/Signup
</li>
<li>
<img src="../images/account.png">
</li>
</ul> -->
</navup>
</SECTION>
<section>
<navlo>
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li>
BUY ART
</li>
<li>
BLOG
</li>
<li>
PARTNERED
</li>
<li>
CONTACT ME
</li>
</ul>
</navlo>
<section class="bars">
<div class="barone"><img src="../images/homebar.svg" alt="a lower bar for home"></div>
<div class="bartwo"><img src="../images/aboutmebar.svg" alt="a lower bar for home"></div>
<div class="barthree"><img src="../images/buyartbar.svg" alt="a lower bar for home"></div>
<div class="barfour"><img src="../images/blogbar.svg" alt="a lower bar for home"></div>
<div class="barfive"><img src="../images/partnersbar.svg" alt="a lower bar for home"></div>
<div class="barsix"><img src="../images/contactmebar.svg" alt="a lower bar for home"></div>
</section>
</section>
</body>
</html>
Rajayogi Nandina