When i don't specify the position of my sections, the phone image perfectly follows the assigned width.
Which is - width: 60%;
But when i apply position and z-index to the first two sections the width: 60%; doesn't get applied, as the phone image becomes way too large.
HTML & CSS code:
body {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#title {
background-color: #ff4c68;
color: #FFFFFF;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 3.5rem;
Line-height: 1.5;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2rem;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.5rem;
}
.container-fluid {
padding: 3% 15% 7%;
}
p {
font-family: "Ubuntu";
color: #8f8f8f;
}
/* Navigation Bar */
.navbar-brand {
font-family: "Ubuntu";
font-size: 2.5rem;
}
.navbar {
padding-bottom: 4.5em;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 100;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
/* feature section */
#features {
padding: 7% 15%;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
margin-bottom: 1rem;
color: #ef8172;
}
.icon:hover {
color: #ff4c68;
}
/* testimonials */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
padding: 7% 15%;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Press */
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
padding: 20px 20px 50px;
}
/* Pricing */
#pricing {
padding: 100px;
text-align: center;
}
.pricing-col {
padding: 3% 2%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Bootstap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/styles.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700;800&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap scripts -->
<script src="jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href=""> tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-md-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-md-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-md-4">
<i class="icon fas fa-check-circle fa-5x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class=" feature-box col-md-4">
<i class="icon fas fa-bullseye fa-5x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class=" feature-box col-md-4">
<i class="icon fas fa-heart fa-5x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row ">
<div class="pricing-col col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<div class="d-grid col-6 mx-auto">
<button type="button" class="btn btn-lg btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
</div>
<div class="pricing-col col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<div class="d-grid col-6 mx-auto">
<button type="button" class="btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
<div class="pricing-col col-lg-4 col-md-12">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<div class="d-grid col-6 mx-auto">
<button type="button" class="btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
I want the end result to be like this:
image of the phone:
Hey buddy I really don't know if this is the correct way of doing it, but it seems to work just fine. What I did was change the width to max width the make it from 60% to 18%. It looks good and like the lesson. then when you switch it to tablet or mobile, I had the #media function change it back to 60% so it didn't shrink all the way down and look weird. idk if I'm explaining it correctly but here's the code:
.title-image {
max-width: 18%;
transform: rotate(25deg);
position: absolute;
right: 22%;
}
#media (max-width: 991px) {
.title-image {
position: static;
transform: rotate(0deg);
max-width: 60%;
}
}
I'm a complete beginner like you but I hope this helped in any way.
You only really need to set the position of your first section to achieve this, if you set the title's position: relative; and z-index: -1;, you won't need to set the position on your .title-image class. See the snippet(Full page) below for your reference.
Here is the snippet's result:
body {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#title {
background-color: #ff4c68;
color: #FFFFFF;
height: 90%;
max-height: 900px;
display: flex;
justify-content: space-evenly;
padding-inline: 10%;
position: relative;
z-index: -1;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 3.5rem;
Line-height: 1.5;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 2rem;
}
h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
font-size: 1.5rem;
}
.container-fluid {
padding: 3% 15% 7%;
}
p {
font-family: "Ubuntu";
color: #8f8f8f;
}
/* Navigation Bar */
.navbar-brand {
font-family: "Ubuntu";
font-size: 2.5rem;
}
.navbar {
padding-bottom: 4.5em;
margin-bottom: 3rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 100;
}
/* Download buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title image */
.title-image {
width: 70%;
transform: rotate(25deg);
}
/* feature section */
#features {
padding: 7% 15%;
background-color: #FFFFFF;
}
.feature-box {
text-align: center;
padding: 5%;
}
.icon {
margin-bottom: 1rem;
color: #ef8172;
}
.icon:hover {
color: #ff4c68;
}
/* testimonials */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
padding: 7% 15%;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Press */
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
padding: 20px 20px 50px;
}
/* Pricing */
#pricing {
padding: 100px;
text-align: center;
}
.pricing-col {
padding: 3% 2%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Bootstap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/styles.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600;700;800&family=Ubuntu:wght#500&display=swap" rel="stylesheet">
<!-- Bootstrap scripts -->
<script src="jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href=""> tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-md-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-md-6">
<img class="title-image" src="https://i.stack.imgur.com/uz7Pc.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-md-4">
<i class="icon fas fa-check-circle fa-5x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class=" feature-box col-md-4">
<i class="icon fas fa-bullseye fa-5x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class=" feature-box col-md-4">
<i class="icon fas fa-heart fa-5x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row ">
<div class="pricing-col col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<div class="d-grid col-6 mx-auto">
<button type="button" class="btn btn-lg btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
</div>
<div class="pricing-col col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<div class="d-grid col-6 mx-auto">
<button type="button" class="btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
<div class="pricing-col col-lg-4 col-md-12">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<div class="d-grid col-6 mx-auto">
<button type="button" class="btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
You can familiarize yourself with css position property here.
PS. I won't be including any #media queries as it isn't part of the question.
Related
I am trying to implement a bootstrap carousel for testimonials but nothing seems to work. I have done exactly as the bootstrap website says, and nothing. I have tried using different versions of bootstrap and jquery with no result. I have retyped my code and tried stripping it down and I still can't find the issue. I know it's probably a simple fix but If anyone can help, it would be greatly appreciated.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Source</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/4582c8b826.js" crossorigin="anonymous"></script>
<!-- Bootstrap Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Source</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbarTogglerDemo01" aria-expanded="false" >
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">
Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1 class="big-heading">Meet other talented musicians near you! </h1>
<button type="button" class="btn btn-dark btn-lg downlaod-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg downlaod-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6" id="first-img">
<img class="iphone" src="images/music3.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<h3><i class="icon fa-solid fa-square-check fa-3x"></i> Easy to use</h3>
<p>With similar functionality to other social apps, you are already familiar with the type of interface we have.</p>
</div>
<div class="feature-box col-lg-4">
<h3><i class="icon fa-solid fa-comment-dots fa-3x"></i> Network</h3>
<p>The #1 Network for musicians. You're guaranteed to find someone to make that perfect project come to life.</p>
</div>
<div class="feature-box col-lg-4">
<h3>
<i class="icon fa-solid fa-square-plus fa-3x"></i> Create</h3>
<p>Chat with your new friend, and start creating today!</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I honestly didn't even know such an app existed until I came across Source. It has been such a game-changer for my music production, and whether you are looking to find vocals for a track or another artist to collaborate with, the ability to find friends and make connections through music digitally and from my own home is awesome.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Artist's Needs</h2>
<p>Simple and affordable price plans for you.</p>
<div class="row">
<div class="pricing-column col-lg-4 col-md-6" >
<div class="card">
<div class="card-header">
<h3>Basic</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>100 Swipes Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-lg btn-block btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Professional</h3>
</div>
<div class="card-body">
<h2>$2 / mo</h2>
<p>500 Swipes Per Day</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-lg btn-block btn-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4">
<div class="card">
<div class="card-header">
<h3>Unlimited</h3>
</div>
<div class="card-body">
<h2>$5 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Swipes</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<p>Advertisement Free</p>
<button type="button" class="btn btn-lg btn-block btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3 class="cta-heading">Discover What Your Music Is In Need Of Today.</h3>
<button type="button" id="bottom" class="btn btn-dark btn-lg downlaod-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" id="bottom" class="btn btn-outline-light btn-lg downlaod-button"><i class="fa-brands fa-google-play"></i> Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<i class="social-icon fa-brands fa-twitter"></i>
<i class="social-icon fa-brands fa-facebook-f"></i>
<i class="social-icon fa-brands fa-instagram"></i>
<i class="social-icon fa-solid fa-envelope"></i>
<p class="footer">© Copyright Source</p>
</footer>
</body>
</html>
CSS
body{
font-family: 'Montserrat';
text-align: center;
}
.iphone{
width: 60%;
height: auto;
position: relative;
border-radius: 0 0 3% 3%;
transform: rotate(25deg);
margin-left: 20%;
margin-top: 10%;
z-index: 0;
}
#title{
background-color: #ff4c68;
text-align: left;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
line-height: 1.5;
font-weight: 900;
color: white;
}
h2{
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
font-weight: 900;
}
.container-fluid{
padding: 3% 15%;
}
/* Headings */
.big-heading{
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
font-weight: 900;
}
/* Navigation Bar */
.navbar{
padding-bottom: 4.5rem;
}
.navbar-brand{
font-family: "Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.navbar-nav{
float: right!important;
}
.nav-item{
padding: 0 18px;
}
.nav-link{
font-size: 1.2rem;
font-family: 'Montserrat-light';
}
/*
Download Buttons */
.downlaod-button{
margin: 5% 3% 5% 0%;
}
h3{
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 1.5rem;
font-weight: 900;
}
p{
color: #8f8f8f;
}
/* Features */
#features{
padding: 7% 15%;
background-color: white;
position: relative;
z-index: 1;
}
.feature-box{
padding: 5%;
}
.icon{
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover{
color: #ff4c68;
}
/* Testimonial */
#testimonials{
background-color: #ef8172;
color: #fff;
}
.testimonial-image{
transform: rotate(0deg);
width: 10%;
border-radius: 100%;
margin: 20px;
}
.carousel-item{
padding: 7% 15%;
}
#press{
background-color: #ef8172;
padding-bottom: 3%;
}
.press-logo{
width: 15%;
margin: 20px 20px 50px;
}
.card-deck{
}
.card{
margin: 20px;
}
#pricing{
padding: 100px;
}
.pricing-column{
padding: 3% 2%;
}
.btn-block{
width: 95%;
}
#cta{
background-color: #ff4c68;
color: #fff;
padding: 7% 15%;
}
.cta-heading{
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 3.5rem;
line-height: 1.5;
font-weight: 900;
color: white;
}
button#bottom{
}
.social-icon{
margin: 20px 10px;
}
/* Footer */
#footer{
padding: 7% 15%;
}
#media (max-width: 1028px){
.iphone{
position: static;
transform: rotate(0deg);
}
#title{
text-align: center;
}
}
You are using Bootstrap 4 version in your Carousel code and in head you are importing Bootstrap 5 version. change your cdn to Bootstrap 4
In v5 carousel controls is presented as buttons, in v4 as links .
I'm having an issue with parallax effect on mobile. In fact it seems like that total body size is > 100vh (it also appear the scroll bar o the side). Obv if I change overflow-y from auto to hidden, it fix the problem but it also cut out part of the page. On desktop it doesn't happen. Can anybody help me?
Screenshot:
https://imgur.com/a/n9wMmqN
.selector-for-some-widget {
box-sizing: content-box;
}
header .carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
background-size: cover;
}
body {
margin: 0;
background-color: white;
font-family: 'Open Sans', sans-serif;
min-height: 100%;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 75px);
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2.5);
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.title {
font-family: 'Montez', cursive;
color: white;
text-align: center;
}
section {
background-color: white;
}
.navbar {
height: 75px;
font-size: 1.25rem;
letter-spacing: 3px;
font-weight: bold;
}
.navbar-brand {
font-size: 1.75rem;
letter-spacing: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<!-- Style CSS -->
<link rel="stylesheet" href="css/styles.css">
<title>Ariano Francesco Photography</title>
</head>
<body>
<div class="wrapper">
<header>
<div id="carouselExampleControls" class="carousel slide background" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('img/carousel_1.jpg')">
</div>
<div class="carousel-item" style="background-image: url('img/carousel_2.jpg')">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="title">
<h1>Ariano Francesco</h1>
<h2>Photography</h2>
</div>
</header>
<section>
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
<div class="container px-5">
<a class="navbar-brand" href="#">AFR</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header justify-content-end">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex text-center align-items-center">
<ul class="navbar-nav justify-content-end flex-grow-1">
<li class="nav-item ms-2">
<a class="nav-link active" aria-current="page" href="index.html">Gallery</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container px-5">
<div class="text-center mt-5">
<h2 class="fw-bold fade-in">Gallery</h2>
</div>
<div class="row mt-5">
<div class="col-lg-4 col-md-12">
<a href="img/_IMG1556.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1556.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1594.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1594.jpg" class="img-fluid rounded mb-4">
</a>
</div>
<div class="col-lg-4">
<a href="img/_IMG1491.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1491.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1558.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1558.jpg" class="img-fluid rounded mb-4">
</a>
</div>
<div class="col-lg-4">
<a href="img/_IMG74c91.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG74c91.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1510.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1510.jpg" class="img-fluid rounded mb-4">
</a>
</div>
</div>
</div>
<footer class="text-center text-muted">
<div class="container px-5">
<div class="mb-4 border-bottom">
<a class="btn btn-floating m-3" href="https://instagram.com/_afr.photo" role="button"><i
class="bi bi-facebook"></i></a>
<a class="btn btn-floating m-3" href="https://www.facebook.com/ArianoFrancescoPH" role="button"><i
class="bi bi-instagram"></i></a>
</div>
<div class="mb-4">
<h6 class="text-uppercase fw-bold mb-4">
Contact
</h6>
<p>
Castagnole delle Lanze, AT
</p>
<p>
franci.ariano#gmail.com
</p>
<p>
339 2350792
</p>
</div>
</div>
<div class="p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="www.afr.altervista.org">Ariano Francesco Photography</a>
</div>
</footer>
</section>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Lightbox for Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.11/dist/index.bundle.min.js"></script>
<!-- Script.js -->
<script src="js/script.js"></script>
</body>
</html>
Look at this answer: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
body {
background-color: #333;
}
.module {
height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
margin: 0 auto;
max-width: 30%;
}
.module__item {
align-items: center;
display: flex;
height: 20%;
justify-content: center;
}
.module__item:nth-child(odd) {
background-color: #fff;
color: #F73859;
}
.module__item:nth-child(even) {
background-color: #F73859;
color: #F1D08A;
}
<div class="module">
<div class="module__item">20%</div>
<div class="module__item">40%</div>
<div class="module__item">60%</div>
<div class="module__item">80%</div>
<div class="module__item">100%</div>
</div>
Fix 100vh Issue on Mobile Devices Using CSS Only
Sometimes, the purpose of using vh unit is to simply create sections equal to the height of the viewport. This is common when you are building landing pages, for instance. In these situations, position sticky won’t help and I want to introduce the fill-available property. It’s easy to use, just remember to use the prefixes and the fall-back value:
.layout {
min-height: 100vh; /* fall-back */
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
Just as simple as that!
The class(.title-image), has a "position: absolute" and the section(#features), has "position: relative" in external CSS. the idea is to place the section(#features) in front of the class(.title-image) using "z-index:1". It works in bootstrap version version 4, but doesn't work in bootstrap version 5
HTMl
<!-- Bootstrap CSS link -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Google Fonts link -->
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap"
rel="stylesheet"
/>
<!-- Bootstrap Icon link -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css"
/>
<!-- FontAwesome Icon Link -->
<script
src="https://kit.fontawesome.com/5302134694.js"
crossorigin="anonymous"
></script>
<!-- External CSS link -->
<link rel="stylesheet" href="css/styles.css" />
<title>TinDog</title>
<section id="title">
<!-- Nav Bar -->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">tindog</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navMenu"
aria-controls="navMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button class="btn btn-dark btn-lg download-button" type="button">
<i class="bi bi-apple"></i> Download
</button>
<button
class="btn btn-outline-light btn-lg download-button"
type="button"
>
<i class="fa-brands fa-google-play"></i>
Download
</button>
</div>
<div class="col-lg-6">
<img
src="images/iphone6.png"
class="title-image"
alt="iphone-mockup"
/>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<!-- Column 1 -->
<div class="feature-box col-lg-4">
<i class="feature-icon fas fa-check-circle fa-4x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<!-- Column 2 -->
<div class="feature-box col-lg-4">
<i class="feature-icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<!-- Column 3 -->
<div class="feature-box col-lg-4">
<i class="feature-icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
<!-- End of Column -->
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div
id="test-carousel"
class="carousel slide"
data-bs-ride="carousel"
data-bs-interval="3000"
>
<div class="carousel-inner">
<div class="carousel-item active">
<h2>
I no longer have to sniff other dogs for love. I've found the
hottest Corgi on TinDog. Woof.
</h2>
<img
class="test-image"
src="images/dog-img.jpg"
alt="dog-profile"
/>
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>
My dog used to be so lonely, but with TinDog's help, they've found
the love of their life. I think.
</h2>
<img
class="test-image"
src="images/lady-img.jpg"
alt="lady-profile"
/>
<em>Beverly, Illinois</em>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#test-carousel"
data-bs-slide="next"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#test-carousel"
data-bs-slide="prev"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo" />
<img class="press-logo" src="images/tnw.png" alt="tnw-logo" />
<img
class="press-logo"
src="images/bizinsider.png"
alt="biz-insider-logo"
/>
<img class="press-logo" src="images/mashable.png" alt="mashable-logo" />
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row">
<!-- Card Style Number 1 -->
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<h3 class="card-header">Chihuahua</h3>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button
class="w-100 btn btn-lg btn-block btn-outline-primary"
type="button"
>
Sign Up
</button>
</div>
</div>
</div>
<!-- Card Style Number 2 -->
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<h3 class="card-header">Labrador</h3>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button
class="w-100 btn btn-lg btn-block btn-primary"
type="button"
>
Sign Up
</button>
</div>
</div>
</div>
<!-- Card Style Number 3 -->
<div class="pricing-column col-lg-4">
<div class="card">
<h3 class="card-header">Mastiff</h3>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button
class="w-100 btn btn-lg btn-block btn-primary"
type="button"
>
Sign Up
</button>
</div>
</div>
</div>
<!-- End of Card Style -->
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
<!-- Bootstrap JQuery and JavaScript link -->
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"
></script>
CSS
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: #fff;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: "Montserrat-Black";
font-size: 4.5rem;
line-height: 1.5;
font-weight: 900;
}
h2 {
font-family: "Montserrat-Bold";
font-size: 3rem;
line-height: 1.5;
}
h3 {
font-family: "Montserrat-Bold";
font-weight: bold;
}
p {
color: #8f8f8f;
}
/* Navigation Bar */
.navbar {
padding: 0 0 4.5rem;
}
.navbar-brand {
font-family: "Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat-Light ";
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title Image */
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
/* Features Section */
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.feature-icon {
color: #ef8172;
margin-bottom: 1rem;
}
.feature-icon:hover {
color: #ff4c68;
}
.feature-box {
text-align: center;
padding: 4.5%;
}
/* Testimonials Section */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
padding: 7% 15%;
}
.test-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
/* Pricing Section */
#pricing {
padding: 7% 15%;
text-align: center;
}
.pricing-column {
padding: 4% 2%;
}
so after long hours of research, I noticed some people had already done it on github, using the current bootstrap version 5, tutors should be able to explain concepts for future emergencies. all I needed to do was to add another class to the class "Image-title" and set the position to relative like this;
Html;
<div class="positioning col-lg-6">
<img
src="images/iphone6.png"
class="title-image"
alt="iphone-mockup"
/>
</div>
and then set the position of positioning to relative like so:
/* Title Image */
.positioning {
position: relative;
}
.title-image {
width: 55%;
transform: rotate(25deg);
position: absolute;
}
I have added position like relative and absolute to the elements in my css but it does not work properly.
This is my HTML Code for the title and features section of my website. I want to make the image of the dog appears behind the feature section. I have added the z-index for the feature section as 1 but it doesn't appear in front of the image.
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button">
<i class="fab fa-apple"></i> Download
</button>
<button
type="button"
class="btn btn-outline-light btn-lg download-button"
>
<i class="fab fa-google-play"></i> Download
</button>
</div>
<div class="iphone-container col-lg-6">
<img class="iphone" src="images/iphone6.png" alt="iphone-mockup" />
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<i class="far fa-check-circle fa-4x feature-img"></i>
<h3>Easy to use.</h3>
<p class="sub-text">So easy to use, even your dog could do it.</p>
</div>
<div class="col-lg-4">
<i class="fas fa-bullseye fa-4x feature-img"></i>
<h3>Elite Clientele</h3>
<p class="sub-text">We have all the dogs, the greatest dogs.</p>
</div>
<div class="col-lg-4">
<i class="fas fa-heart fa-4x feature-img"></i>
<h3>Guaranteed to work.</h3>
<p class="sub-text">
Find the love of your dog's life or your money back.
</p>
</div>
</div>
</div>
</section>
This is my CSS code
.iphone{
width: 60%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
.iphone-container {
position: relative;
}
/* Features */
#features {
padding: 10% 15%;
position: relative;
text-align: center;
z-index: 1;
}
Image to the problem with my website
Image of my desired outcome
Please see the CSS changes I made at the bottom under /* additions */. For the #features section, it has a white background by default, and you actually have to declare background-color: white; so that CSS knows to put the white background front of section#title
body {
font-family: "Montserrat";
}
#title {
background-color: #000b49;
color: white;
}
h1 {
font-family: "Montserrat";
font-size: 3.5rem;
line-height: 1.5;
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 2.5rem;
font-weight: 500;
}
h3 {
font-size: 1.5rem;
}
.container-fluid {
padding: 3% 15%;
}
/* Navigation_bar */
.navbar-brand {
font-family: "Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.navbar {
padding: 0 0 4.5rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-family: "Montserrat-Light";
font-size: 1.2rem;
}
.download-button {
margin: 5% 3% 5% 0;
}
/* Title */
.iphone {
width: 60%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
.iphone-container {
position: relative;
}
/* Features */
#features {
padding: 10% 15%;
position: relative;
text-align: center;
z-index: 1;
}
.feature-img {
color: #35589a;
padding-bottom: 15%;
}
.feature-img:hover {
color: #c84b31;
}
.sub-text {
color: #8f8f8f;
}
/* Testimonials */
#testimonials {
text-align: center;
background-color: #0f4d92;
color: white;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #0f4d92;
text-align: center;
padding: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 15px;
}
.carousel-item {
padding: 7% 15%;
}
/* Pricing section */
#pricing {
padding: 100px;
}
.pricing-col {
padding: 3% 2%;
text-align: center;
}
/* additions */
section#features {
position: relative;
background-color: white;
z-index: 1;
}
section#title {
position: relative;
z-index: 0;
}
img.iphone {
height: 400px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vietalk</title>
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"
></script>
<!-- CSS Style Sheets -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,700;0,900;1,400;1,500&family=Ubuntu:ital,wght#0,400;0,700;1,300&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button">
<i class="fab fa-apple"></i> Download
</button>
<button
type="button"
class="btn btn-outline-light btn-lg download-button"
>
<i class="fab fa-google-play"></i> Download
</button>
</div>
<div class="iphone-container col-lg-6">
<img class="iphone" src="https://raw.githubusercontent.com/BrianTruong23/tindog/main/TinDog%20Start%20Here/images/iphone6.png" alt="iphone-mockup" />
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-4">
<i class="far fa-check-circle fa-4x feature-img"></i>
<h3>Easy to use.</h3>
<p class="sub-text">So easy to use, even your dog could do it.</p>
</div>
<div class="col-lg-4">
<i class="fas fa-bullseye fa-4x feature-img"></i>
<h3>Elite Clientele</h3>
<p class="sub-text">We have all the dogs, the greatest dogs.</p>
</div>
<div class="col-lg-4">
<i class="fas fa-heart fa-4x feature-img"></i>
<h3>Guaranteed to work.</h3>
<p class="sub-text">
Find the love of your dog's life or your money back.
</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div
id="testimonials-carousel"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<h2>
I no longer have to sniff other dogs for love. I've found the
hottest Corgi on TinDog. Woof.
</h2>
<img
class="testimonial-image"
src="images/dog-img.jpg"
alt="dog-profile"
/>
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">
My dog used to be so lonely, but with TinDog's help, they've found
the love of their life. I think.
</h2>
<img
class="testimonial-image"
src="images/lady-img.jpg"
alt="lady-profile"
/>
<em>Beverly, Illinois</em>
</div>
</div>
<a
class="carousel-control-prev"
href="#testimonials-carousel"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#testimonials-carousel"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo" />
<img class="press-logo" src="images/tnw.png" alt="tnw-logo" />
<img class="press-logo" src="images/vn-logo.png" alt="biz-insider-logo" />
<img class="press-logo" src="images/mashable.png" alt="mashable-logo" />
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row">
<div class="pricing-col col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-dark btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-col col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-dark btn-lg">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-col col-lg-4 col-md-12">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="btn btn-outline-dark btn-lg">
Sign Up
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2021 TinDog</p>
</footer>
</body>
</html>
I Tried this code where some properties in css marked as "/Edited/" are important and hope they will work.
NOTE: I ADDED CODE SNIPPET TWO TIME BY MISTAKE AND DON'T KNOW HOW TO DELETE.
body{
font-family: "Montserrat";
}
#title{
background-color: #FF4C68; /* use # to target id */
color: #fff;
}
.container-fluid{
padding: 3% 15%;
}
h1{
font-family: "Montserrat-Black",sans-serif;
font-size: 3.5rem;
line-height: 1.5;
font-weight: 900;
}
h2{
font-family: "Montserrat-Bold",sans-serif;
font-weight: bold;
/* width: 80%; */
font-size: 3rem;
line-height: 1.5;
margin: 0 30px;
}
h3{
font-family: "Montserrat-bold",sans-serif;
font-weight: bold;
}
p{
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand{
font-family: "Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.navbar{
padding:0 0 4.5rem;
}
.nav-item{
padding: 0 18px;
}
.nav-link{
font-size: 1.2rem;
font-family: "Montserrat-Light",sans-serif;
}
/* Download buttons */
.download-button{
margin: 5% 3% 5% 0;
}
/* Tittle image */
.title-image{
width: 20%;
transform: rotate(25deg);
/* position: relative;
left: 60px; */
position: absolute; /*Edited*/
right: 355px; /*Edited*/
}
/* Feature section */
#features{
padding: 7% 15%;
background-color: #fff;
/* position: relative;
bottom: 235px; */
position: relative; /*Edited*/
}
.feature-box{
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
/* margin-bottom: 1rem; */
padding-bottom: 15px;
}
.icon:hover{
color: #FF4C68;
}
/* Testimonials section */
#testimonials{
text-align: center;
background-color: #ef8172;
color: #fff;
/* position: relative;
bottom: 235px; */
}
.testimonial-image{
width: 10%;
border-radius: 100%;
margin: 20px;
}
.carousel-item{
padding: 7% 15%;
}
#press{
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
/* position: relative;
bottom: 230px; */
}
.press-logo{
width: 15%;
margin: 20px 20px 50px;
}
/* Pricing section */
#pricing{
padding: 100px;
}
.pricing-column{
padding: 3% 2%;
}
#media only screen and (max-width:1028px) { /*Edited*/
#title{
text-align: center;
}
.title-image{
width: 60%;
position: static;
transform: rotate(0);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:wght#400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<!-- font awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">
</script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<!-- <div class="card-deck"> -->
<!-- card-deck is not woriking in bootstrap 5 -->
<!-- <div class="card-group"> so we can use "card-group" -->
<div class="row">
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" href="" class="btn w-100 btn-lg btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button> <!--here we have used w-100 that will take 100% width of the block>
button type="button" href="" class="btn btn-block btn-lg btn-outline-primary">Sign Up</button> -->
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
I was facing the same problem to use z-index, so i edited css file, added some properties as i marked as "/Edited/" in css section. the code snippet here will not execute properly but it will properly execute in Atom or may be in other editors,I hope. I don't think this solution may or may not work for other problems related to z-index problem, but for this "tindog" project from udemy will work.
body{
font-family: "Montserrat";
}
#title{
background-color: #FF4C68; /* use # to target id */
color: #fff;
}
.container-fluid{
padding: 3% 15%;
}
h1{
font-family: "Montserrat-Black",sans-serif;
font-size: 3.5rem;
line-height: 1.5;
font-weight: 900;
}
h2{
font-family: "Montserrat-Bold",sans-serif;
font-weight: bold;
/* width: 80%; */
font-size: 3rem;
line-height: 1.5;
margin: 0 30px;
}
h3{
font-family: "Montserrat-bold",sans-serif;
font-weight: bold;
}
p{
color: #8f8f8f;
}
/* Navigation bar */
.navbar-brand{
font-family: "Ubuntu";
font-size: 2.5rem;
font-weight: bold;
}
.navbar{
padding:0 0 4.5rem;
}
.nav-item{
padding: 0 18px;
}
.nav-link{
font-size: 1.2rem;
font-family: "Montserrat-Light",sans-serif;
}
/* Download buttons */
.download-button{
margin: 5% 3% 5% 0;
}
/* Tittle image */
.title-image{
width: 20%;
transform: rotate(25deg);
/* position: relative;
left: 60px; */
position: absolute; /*Edited*/
right: 355px; /*Edited*/
}
/* Feature section */
#features{
padding: 7% 15%;
background-color: #fff;
/* position: relative;
bottom: 235px; */
position: relative; /*Edited*/
}
.feature-box{
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
/* margin-bottom: 1rem; */
padding-bottom: 15px;
}
.icon:hover{
color: #FF4C68;
}
/* Testimonials section */
#testimonials{
text-align: center;
background-color: #ef8172;
color: #fff;
/* position: relative;
bottom: 235px; */
}
.testimonial-image{
width: 10%;
border-radius: 100%;
margin: 20px;
}
.carousel-item{
padding: 7% 15%;
}
#press{
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
/* position: relative;
bottom: 230px; */
}
.press-logo{
width: 15%;
margin: 20px 20px 50px;
}
/* Pricing section */
#pricing{
padding: 100px;
}
.pricing-column{
padding: 3% 2%;
}
#media only screen and (max-width:1028px) { /*Edited*/
#title{
text-align: center;
}
.title-image{
width: 60%;
position: static;
transform: rotate(0);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:wght#400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<!-- font awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">
</script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<!-- <div class="card-deck"> -->
<!-- card-deck is not woriking in bootstrap 5 -->
<!-- <div class="card-group"> so we can use "card-group" -->
<div class="row">
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" href="" class="btn w-100 btn-lg btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button> <!--here we have used w-100 that will take 100% width of the block>
button type="button" href="" class="btn btn-block btn-lg btn-outline-primary">Sign Up</button> -->
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" href="" class="btn w-100 btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
strong text
I am trying to get #features div to overlap part of .title-image using z-index. When I set .title-image position to absolute, the image gets bigger than what it was previously. My question is, if .title-image is contained in a div called col-lg-6with sizing dimensions already added to it, would the sizing be thrown out even though the image was contained in a div? I used another image as the .title-image so that you would see what I am experiencing. What am I doing wrong?
#title {
background-color: #ff4c68;
color: #fff;
}
body {
font-family: 'Montserrat';
font-weight: normal;
}
h1 {
font-family: 'Montserrat';
font-size: 3.5rem;
font-weight: 900;
line-height: 1.5;
}
h2 {
font-family: 'Montserrat';
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
}
h3 {
font-family: 'Montserrat';
font-weight: bold;
}
p {
color: #8f8f8f;
}
.container-fluid {
padding: 3% 15%;
}
/* Navigation Bar */
.navbar {
padding: 0 0 4.5rem;
}
.navbar-brand {
font-family: 'Ubuntu';
font-size: 2.5rem;
font-weight: bold;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: 'Montserrat';
font-weight: 400;
}
/* Download Buttons */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title Image */
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
#features {
padding: 7% 15%;
background-color: #fff;
position: relative;
z-index: 1;
}
.features-box {
text-align: center;
padding: 5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* Testimonial Section */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
padding: 7% 15%;
}
/* Pricing */
#pricing {
padding: 100px;
}
.sign-up {
margin-top: 35px;
}
.pricing-column {
padding: 3% 2%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu:wght#300;400;700&display=swap" rel="stylesheet">
<!-- CSS Stylesheet -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<!-- Bootstrap script -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">TinDog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby</h1>
<button type="button" class="btn btn-lg btn-dark download-button"><i class="fab fa-google-play"></i> Download</button>
<button type="button" class="btn btn-lg btn-outline-light download-button"><i class="fab fa-apple"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="https://img.favpng.com/18/8/0/iphone-6s-plus-iphone-6-plus-apple-iphone-6s-png-favpng-2qagf951EWF4xaNNGb9WBPdNZ.jpg" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="features-box col-lg-4">
<i class="icon fas fa-check-circle fa-4x"></i>
<h3>Easy to use</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="features-box col-lg-4">
<i class="icon fas fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="features-box col-lg-4">
<i class="icon fas fa-heart fa-4x"></i>
<h3>Guaranteed to work</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false" data-bs-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<div class="row text-center">
<div class="pricing-column col-lg-4 col-md-6">
<div class="card h-100">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button" class="sign-up w-100 btn btn-lg btn-outline-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4 col-md-6">
<div class="card h-100">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="sign-up w-100 btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column col-lg-4">
<div class="card h-100">
<div class="card-header">
<h3>Mastiff</h3>
</div>
<div class="card-body">
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button" class="w-100 btn btn-lg btn-dark">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
That's the default behavior of the browser on absolute or fixed positioning. Although it's still inside the container div, the width: 60% on .title-image no longer affects it as it's unable to find any parent element with its position set to relative or absolute.
Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relative to the page itself.
The trade-off (and most important thing to remember) about absolute
positioning is that these elements are removed from the flow of
elements on the page. An element with this type of positioning is not
affected by other elements and it doesn’t affect other elements. This
is a serious thing to consider every time you use absolute
positioning. Its overuse or improper use can limit the flexibility of
your site.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/#absolute
If what you want is to position the .title-image relative to it's parent div you must set its (the parent div) position to relative or absolute.
Example: https://jsfiddle.net/o9wjrcd7/
Hope that helps!
just add
Position:relative;
to the parent of title-img.
you are following the course full-stack course of angilia.
I was also having the same doubt
I had the same problem, and I wasted like a day trying to solve that issue on my own.
This problem is caused because of different version of bootstrap.
position: absolute; changes the size of the image depending on the size of its nearest ancestor, and its parent should have a position other than static.
You need to set the position of its parent to relative in order to solve this problem.
<div class="title-image-div col-lg-6">
<img class="title-image" src="https://img.favpng.com/18/8/0/iphone-6s-plus-iphone-6-plus-apple-iphone-6s-png-favpng-2qagf951EWF4xaNNGb9WBPdNZ.jpg" alt="iphone-mockup">
</div>
<style>
.title-image-div {
position: relative;
}
</style>
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I think you could try to position it relative and also reduce the rotation.
<div class="col-lg-6">
<img class="title-image" src="https://img.favpng.com/18/8/0/iphone-6s-plus-iphone-6-plus-apple-iphone-6s-png-favpng-2qagf951EWF4xaNNGb9WBPdNZ.jpg" alt="iphone-mockup">
</div>
try adding inline style to the parent of .title-image (col-lg-6) so it looks like this:
<div class="col-lg-6" style="position: relative;">
<img class="title-image" src="https://img.favpng.com/18/8/0/iphone-6s-plus-iphone-6-plus-apple-iphone-6s-png-favpng-2qagf951EWF4xaNNGb9WBPdNZ.jpg" alt="iphone-mockup">
</div>
The reason for this is, angela used Bootsrap 4 in her course which give col-lg-6 default position's value of relative. meanwhile, in Bootstrap 5 col-lg-6 has default position's value of static
CMIIW
/* Title Images */
.title-image-con {
position: relative;
}
.title-image {
width: 60%;
transform: rotate(25deg);
position: absolute;
}
/* Features */
#features {
padding: 7% 15%;
background-color: white;
position: relative;
z-index: 1;
}
<div class="title-image-con col-lg-6">
<img class="title-image rotate" src="images/iphone6.png" alt="iphone-
mockup">
</div>
Adding another class name to the element and make the position relative on css works for me.
css snippet