I want to show three pics in my slider but currently it shows only one. My slider image -> https://i.imgur.com/el4KXxl.jpg .But I am trying to make like that. Original slider image -> https://i.imgur.com/gdMj6TC.jpg. Here is my html CSS code.
<style>
.wrapper{
width: 100%;
}
.carousel{
max-width: 1200px;
margin: auto;
padding: 0 30px;
}
.carousel .card{
color: #fff;
text-align: center;
margin: 20px 0;
line-height: 250px;
font-size: 90px;
font-weight: 600;
border-radius: 10px;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
}
.carousel .card-1{
background: #ed1c24;
}
.carousel .card-2{
background: #0072bc;
}
.carousel .card-3{
background: #39b54a;
}
.carousel .card-4{
background: #f26522;
}
.carousel .card-5{
background: #630460;
}
</style>
<div class="wrapper" style="margin-top:50px; width:100%;">
<div class="carousel owl-carousel">
<div class="card card-1">
A
</div>
<div class="card card-2">
B
</div>
<div class="card card-3">
C
</div>
<div class="card card-4">
D
</div>
<div class="card card-5">
E
</div>
</div>
</div>
Related
I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, that it works ?
Image in mobile version is here: https://i.stack.imgur.com/SJ3vi.jpg
Code below:
.banner {
background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
height: 800px;
background-position: center center;
background-size: 100%;
}
.content {
top: 25%;
left: 5%;
position: absolute;
}
.content h1 {
color: black;
font-size: 3em;
font-weight: bold;
}
.content a {
text-decoration: none;
background-color: var(--primary-color);
color: #fff;
padding: 15px 40px;
border-radius: 5px;
}
.content a:hover {
background-color: #64cff7;
color: #fff;
}
.stepBox {
background-color: #64cff7;
padding: 20px 20px;
border-radius: 5px;
text-align: center;
}
.stepBox h1 {
font-size: 30px;
font-weight: bold;
color: black;
}
.stepBox p {
font-size: 20px;
font-style: italic;
color: #fff;
}
.highlight {
color: var(--primary-color);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.cakebox {
padding: 10px 5px;
}
.cakebox img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
}
.cakebox h1 {
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
.viewmorebtn {
text-decoration: none;
background-color: #64cff7;
color: #fff;
padding: 10px 10px;
border-radius: 5px;
font-size: 18px;
}
.viewmorebtn i {
padding-left: 5px;
}
#media screen and (max-width:600px) {
.banner {
height: 600px;
}
}
<div class="banner">
<div class="content">
<h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
<a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
<h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
<div class="row mt-3">
<!-- one -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>1</h1>
<p>vyberte koláč</p>
</div>
</div>
<!-- two -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>2</h1>
<p>vyplnte podrobnosti</p>
</div>
</div>
<!-- three -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>3</h1>
<p>doručenie vašej objednávky</p>
</div>
</div>
</div>
</div>
<!-- cakebox -->
<div class="container mt-4 mb-4">
<h1 class="text-center">Obľúbené produkty</h1>
<div class="row">
<div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
<div class="cakebox" *ngIf="i<=3">
<img src="{{ck.cakeImg}}" />
<h1>{{ck.cakeName}}</h1>
<p>{{ck.cakePrice | currency:'EUR'}}</p>
</div>
</div>
</div>
<a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>
Thank you for your answers!
.content {
top: 25%;
left: 5%;
position: absolute;
}
The container of the h1 is positioned absolutely. The default z-index is causing it to overlap other elements which have a smaller z-index value.
Setting the z-index of the .content div and navbar may help to solve the problem.
.content {
top: 25%;
left: 5%;
position: absolute;
z-index: 10; /** something smaller than the z-index of the navbar **/
}
.navbar {
...
z-index: 20; /** something bigger than the z-index of .content **/
}
I wanted the feature-list div on the next lint of image-computer but only at width 768px it doesn't go on the next line. For better understanding I have attached screenshot of desired result an actual result photo for reference. Please give me a better solution for this.
body {
background-image: url("images/bg-header-desktop.png");
background-size: contain;
background-repeat: no-repeat;
font-size: 18px;
font-family: 'Bai Jamjuree', sans-serif;
padding: 9% 0 0 0;
line-height: 1.5;
margin: 0;
}
p {
color: hsl(201, 11%, 66%);
}
h1,
h3,
h5,
h2 {
color: hsl(210, 10%, 33%);
font-weight: 600;
}
button {
margin-top: 1.25rem;
}
.btn-ios {
border: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
color: #FFFFFF;
font-size: 18px;
font-weight: 100;
padding: 10px 35px;
background-color: #26BAA4;
-webkit-box-shadow: -1px 7px 15px -3px #35D9BD;
-moz-box-shadow: -1px 7px 15px -3px #35D9BD;
box-shadow: -1px 7px 15px -3px #35D9BD;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.btn-ios:hover {
background: #35D9BD;
border: solid #35D9BD 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
text-decoration: none;
}
.btn-mac {
border: 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
color: #FFFFFF;
font-size: 18px;
font-weight: 100;
padding: 10px 35px;
background-color: #6173FF;
-webkit-box-shadow: -1px 7px 15px -3px #7585FC;
-moz-box-shadow: -1px 7px 15px -3px #7585FC;
box-shadow: -1px 7px 15px -3px #7585FC;
text-decoration: none;
display: inline-block;
cursor: pointer;
text-align: center;
}
.btn-mac:hover {
background: #7585FC;
border: solid #7585FC 0;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 25px;
text-decoration: none;
}
.ios {
text-align: right;
}
.mac {
text-align: left;
}
.snippets {
margin-top: 5rem;
}
footer {
background-color: #f2f2f2;
margin-top: 5rem;
padding: 0 10%;
}
/* title */
#title {
text-align: center;
}
.para {
padding: 1% 24%;
}
.logo {
margin-bottom: 2.75rem;
}
/* features */
#features {
margin-top: 4rem;
}
.feature-list {
padding-left: 1rem;
padding-right: 17%;
}
.feature-list-div {
}
.center-feature {
text-align: center;
}
.clipboard {
margin-top: 8rem;
}
.image-computer {
position: relative;
right: 30px;
width: 93%;
}
.image-devices {
margin: 6rem auto 0 auto;
display: block;
width: 80%;
}
.feature-second {
text-align: center;
padding: 3% 10% 10% 10%;
}
.sponsers {
text-align: center;
padding: 0 10% 10% 10%;
}
/* cta */
#cta {
text-align: center;
}
/* footer */
.footer-logo {
width: 45%;
}
.footer-row {
padding-top: 3rem;
padding-bottom: 3rem;
}
.link {
text-decoration: none;
color: hsl(210, 10%, 33%);
}
.link:hover {
color: hsl(171, 66%, 44%);
}
.first-footer {
margin-bottom: 1.2rem;
display: block;
}
.social-icon {
text-align: right;
padding-top: 2rem;
}
.fb-icon:hover,
.twitter-icon:hover,
.insta-icon:hover {
color: hsl(171, 66%, 44%);
}
.fb-icon {
margin-right: 1rem;
}
.twitter-icon {
margin-right: 1rem;
}
.attribution {
font-size: 11px;
text-align: center;
margin-bottom: 0;
position: relative;
bottom: 5px;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
#media (max-width: 970px) {
.feature-list{
padding-right: 10%;
}
}
#media (max-width: 768px) {
.feature-list{
text-align: center;
}
.image-computer{
text-align: center;
display: block;
position: static;
margin: auto;
width: 100%;
}
}
#media (max-width: 376px) {
body {
padding: 25% 12% 0 12%;
}
.para {
padding: 1rem 0 0 0;
}
.ios {
text-align: center;
}
.mac {
text-align: center;
}
}
<body>
<section id="title">
<img class="logo" src="images/logo.svg" alt="logo">
<h1 class="heading">A history of everything you copy</h1>
<p class="para">Clipboard allows you to track and organize everything you copy. Instantly access your clipboard on all your devices.</p>
<div class="container-fluid">
<div class="row">
<div class="col ios">
<button class="btn-ios" type="button" name="button">Download for iOS</button>
</div>
<div class="col mac">
<button class="btn-mac" type="button" name="button">Download for Mac</button>
</div>
</div>
</div>
<h1 class="snippets">Keep track of your snippets</h1>
<p class="para">Clipboard instantly stores any item you copy in the cloud,
meaning you can access your snippets immediately on all your devices. Our Mac and iOS apps will help you organize everything.</p>
</section>
<section id="features">
<div class="container-fluid">
<div class="row imac g-0">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
<img class="image-computer" src="images/image-computer.png" alt="image-computer">
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 feature-list">
<div class="feature-list-div">
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web address, application, and more.</p>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your devices.</p>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment you started using the app.</p>
</div>
</div>
</div>
</div>
<h1 class="center-feature clipboard">Access Clipboard anywhere</h1>
<p class="center-feature para">Whether you’re on the go, or at your computer, you can access all your Clipboard snippets in a few simple clicks.</p>
<img class="image-devices" src="images/image-devices.png" alt="image-devices">
<h3 class="center-feature">Supercharge your workflow</h3>
<p class="center-feature para">We’ve got the tools to boost your productivity.</p>
<div class="container-fluid feature-second">
<div class="row">
<div class="col">
<img class="icon-feature" src="images/icon-blacklist.svg" alt="icon-blacklist">
<h5>Create blacklists</h5>
<p>Ensure sensitive information never makes its way to your clipboard by excluding certain sources.</p>
</div>
<div class="col">
<img class="icon-feature" src="images/icon-text.svg" alt="icon-text">
<h5>Plain text snippets</h5>
<p>Remove unwanted formatting from copied text for a consistent look.</p>
</div>
<div class="col">
<img class="icon-feature" src="images/icon-preview.svg" alt="icon-preview">
<h5>Sneak preview</h5>
<p>Quick preview of all snippets on your Clipboard for easy access.</p>
</div>
</div>
</div>
</section>
<div class="container-fluid sponsers">
<div class="row">
<div class="col-sm">
<img class="google" src="images/logo-google.png" alt="logo-google">
</div>
<div class="col-sm">
<img class="ibm" src="images/logo-ibm.png" alt="logo-ibm">
</div>
<div class="col-sm">
<img class="microsoft" src="images/logo-microsoft.png" alt="logo-microsoft">
</div>
<div class="col-sm">
<img class="hp" src="images/logo-hp.png" alt="logo-hp">
</div>
<div class="col-sm">
<img class="vector-graphics" src="images/logo-vector-graphics.png" alt="logo-vector-graphics">
</div>
</div>
</div>
<section id="cta">
<h2>Clipboard for iOS and Mac OS</h2>
<p class="para">Available for free on the App Store. Download for Mac or iOS, sync with iCloud and you’re ready to start adding to your clipboard.</p>
<div class="container-fluid">
<div class="row">
<div class="col ios">
<button class="btn-ios" type="button" name="button">Download for iOS</button>
</div>
<div class="col mac">
<button class="btn-mac" type="button" name="button">Download for Mac</button>
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row footer-row">
<div class="col">
<img class="footer-logo" src="images/logo.svg" alt="logo">
</div>
<div class="col">
<a class="first-footer link" href="#">FAQs</a>
<a class="link" href="#">Contact Us</a>
</div>
<div class="col">
<a class="first-footer link" href="#">Privacy Policy</a>
<a class="link" href="#">Press Kit</a>
</div>
<div class="col">
<a class="link" href="#">Install Guide</a>
</div>
<div class="col social-icon">
<i class="fab fa-facebook-square fb-icon fa-2x"></i>
<i class="fab fa-twitter twitter-icon fa-2x"></i>
<i class="fab fa-instagram insta-icon fa-2x"></i>
</div>
</div>
</div>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Mohak Goel.
</p>
</footer>
</body>
this is actual result screenshot
this is desired result screenshot
If you want your columns on smaller displays to be the full width of the display, use col-12 without a size. Then pick your width to switch to two columns half the width of the display and add the appropriate class as in col-md-6. That will give you one full width column from a smartphone up to a tablet (767px wide). On anything larger (more than 767px wide), you would have two columns, each half the display width.
<div class="container-fluid">
<div class="row imac g-0">
<div class="col-12 col-md-6">
<img class="image-computer" src="images/image-computer.png" alt="image-computer">
</div>
<div class="col-12 col-md-6 feature-list">
<div class="feature-list-div">
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web address, application, and more.</p>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your devices.</p>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment you started using the app.</p>
</div>
</div>
</div>
</div>
If you want your columns on smaller displays to be side-by-side and one column on wider (768px or more) displays, then you could use col-6 col-md-12
<div class="container-fluid">
<div class="row imac g-0">
<div class="col-6 col-md-12">
<img class="image-computer" src="images/image-computer.png" alt="image-computer">
</div>
<div class="col-6 col-md-12 feature-list">
<div class="feature-list-div">
<h3>Quick Search</h3>
<p>Easily search your snippets by content, category, web address, application, and more.</p>
<h3>iCloud Sync</h3>
<p>Instantly saves and syncs snippets across all your devices.</p>
<h3>Complete History</h3>
<p>Retrieve any snippets from the first moment you started using the app.</p>
</div>
</div>
</div>
</div>
I'm building the website and I want to reach the section like on my psd (img attached):
You can see that there's 100% width section and .col-md-9 and .col-md-3 inside this section.
But when .col-md-3 ends its background should continue and pave the background of the main section.
How can I make the column's background continue? I've spent hours solving this problem but I didn't find the correct way. Thanks!
.single__content {
width: 100%;
max-width: 743px;
padding-top: 57px;
}
.single__content p {
color: #707070;
font-size: 15px;
font-weight: 400;
line-height: 23px;
}
.single__meta {
background: #3c73ba;
height: 70px;
}
.single__meta h2 {
font-size: 38px;
font-weight: 300;
line-height: 42px;
color: #fff;
margin: 0;
padding-top: 14px;
}
.col-sidebar {
background: #4285db;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<div class="single__meta">
<div class="container">
<div class="row ">
<div class="col-md-9">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
</div>
</div>
</div>
You can split the background of your top with background: linear-gradient.
Demo with bootstrap 4
.top-bar {
background: linear-gradient(
to right,
#3c73ba 0%,
#3c73ba 50%,
#4285db 50%,
#4285db 100%
);
width: 100%;
padding: 0;
margin: 0;
color: #fff;
}
.col-left{
background: #3c73ba;
}
.col-right {
background: #4285db;
}
<div class="top-bar" style="padding: 0">
<div class="container">
<div class="row">
<div class="col-left col-md-9">
<h2>left</h2>
</div>
<div class="col-right col-md-3">
<h2>right</h2>
</div>
</div>
</div>
</div>
"make this changes in your code" hope this u want
<div class="row col_bg">
<div class="col-md-9 ">
<h2 class="page-title">Lorem ipsum dolor</h2>
</div>
<div class="col-sidebar col-md-3">
Second column content
</div>
<div class="clear">
</div>
</div>
"for css"
.row.col_bg {
background-color: #4285db;
clear: both;
}
.col-md-9 {
float: left;
width: 70%;
}
.single__meta h2 {
color: #000;
font-size: 38px;
font-weight: 300;
line-height: 42px;
margin: 0;
}
.col-sidebar.col-md-3 {
float: right;
width: 30%;
}
.clear {
clear: both;
}
My main goal is to have a simple frame (as you can see) with few text lines and images. The thing I want to do, is make this frame flexible. By that I mean - if I change picture inside of it (bigger -> smaller) the frame should change. It should stay fixed.
Online editor: https://www.bootply.com/Y09Zn1wir3#
HTML:
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
CSS:
/* CSS used here will be applied after bootstrap.css */
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
I tried to add height property to such as:
.single-image{
...
height: 405px;
}
Result: https://www.codeply.com/go/2s2hH3nbju
But it doesn't look correct, as bottom text floats somewhere up.
I need a solution for different type of image sizes. Any ideas?
You need to set the height of .img-wrap, too.
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
margin: 0px 0px 15px 0px;
float: right;
height: 405px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
height:250px;
overflow:hidden;
}
Try to add this new line in your css code.
.img-wrap{
min-height: 275px;
}
it will looks like this
Output
Try using flex
.single-image{
border: 1px solid orange;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.name{
padding: 20px 0px 0px 0px;
color: black;
height: 75px;
font-size: 18px;
}
.img-wrap{
padding-bottom: 50px;
padding-top: 25px;
}
.first-image{
width: 200px;
}
.second-image{
width: 150px;
}
.extra-info{
border-top: 1px solid orange;
align-self: bottom;
}
.bottom-text{
padding-top: 15px;
height: 50px;
letter-spacing: 0.1em;
}
.images-wrap{
display: flex;
}
.single-image-wrap {
height: 100%;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row images-wrap">
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="single-image-wrap">
<div class="single-image">
<div class="name">NAME</div>
<div class="img-wrap">
<img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image">
</div>
<div class="extra-info">
<div class="bottom-text">ABC</div>
</div>
</div>
</div>
</div>
</div>
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"