I want bottom of iphone not be seen. So I am doing the position of title-image is absolute, and features id's position is absolute, and z index:1 , so it will be shown instead of bottom of phone. But it doesn't work and it just destroys the page. What should I do then? Could you help me please?
I couldn't find a way to solve this issue.
body {
font-family: "Montserrat";
}
#title {
background-color: #ff4c68;
color: white;
}
.container-fluid {
padding: 3% 15% !important; /* by default bootstrap have padding in container-fluid, i have to write !important to overwrite on it */
}
h1 {
font-family: 'Montserrat', sans-serif;
line-height:1.5;
font-size:3.5rem;
}
h2 {
line-height: 1.5;
font-size: 3rem;
}
p {
color: #8f8f8f;
font-family: "Montserrat-Bold";
}
/* Navigation Bar */
.navbar {
padding: 0 0 4.5rem; /* top right-left and bottom */
}
.navbar-brand {
font-family: "Ubuntu";
font-weight: bold;
font-size: 1.5rem;
}
.nav-item {
padding:0 18px; /*i could do this with margin too */
}
.nav-link {
font-size:1.2rem;
font-family: "Montserrat-Light";
}
/* Download Button */
.download-button {
margin: 5% 3% 5% 0;
}
/* Title Image */
.title-image{
width:60%; /*family parent ?n?n 60% sini kapsad? */
transform: rotate(20deg);/*if positive, right rotation*/
}
/* Features Section */
#features {
padding:7% 13%;
/* text-align: center; buraya da yazsak oluyor asl?nda, a?a??daki ile ayn? */
background-color: white;
}
.feature-box{
text-align: center;
padding:5%;
}
.icon {
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover {
color: #ff4c68;
}
/* Testimonial Section */
#testimonials {
padding: 7% 13%;
text-align: center;
background-color: #ef8172;
color:white;
}
.testimonial-img {
width:10%;
border-radius: 100%; /*makes it circular */
margin:20px;
}
.carousel-item {
padding:7% 15%; /*oklar? biraz daha k?y?ya ?ektik */
}
/* Press */
#press {
background-color: #ef8172;
text-align:center;
padding-bottom:3%;
}
.press-logo {
width:15%;
margin:20px 20px 15px;
}
/* Pricing */
#pricing {
padding:100px;
text-align: center;
}
.pricing-column{
padding:3% 2%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- this is for bootstrap 5-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- google fonts-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Ubuntu&display=swap" rel="stylesheet">
<!--this is font awesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<!-- this is for javascript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 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="">Company</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<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-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="fas fa-check-circle fa-3x icon"></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="fas fa-bullseye fa-3x icon"></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="fas fa-heart fa-3x icon"></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">
<div class="carousel-inner">
<div class="carousel-item active"> <!--active yazan ilk ba?ta g?zükecek-->
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" 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="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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/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-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 class="btn btn-lg btn-outline-dark col-12" type="button">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 class="btn btn-lg btn-dark col-12" type="button">Sign Up</button>
</div>
</div>
</div>
<div class="pricing-column 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 class="btn btn-lg btn-dark col-12" type="button">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> <!--documentationdan bakt?m, btn-dark vs orda var her ?ey-->
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>? Copyright 2018 TinDog</p>
</footer>
</body>
</html>
question from:
https://stackoverflow.com/questions/65617226/i-want-bottom-of-phone-not-to-be-seen-i-adjust-position-of-my-id-features-and 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
