Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https://i.sstatic.net/L4VhS.png
The crux of the matter is placing an image of a phone beneath this opening section, which would likely necessitate a <div>. In this regard, I've employed Bootstrap in my code to implement a navbar and utilized the col-lg-6 class for situating the phone on the right-hand side:
https://i.sstatic.net/Dcmmo.png
However, what I truly desire is for the phone image to be positioned slightly below the blue segment of the screen, akin to the wireframe's specification. Regrettably, the current implementation displays the image across the entire screen. Do disregard the presence of the h1 element on the left side of the screen. Here's the snippet of the code I've utilized with a live preview; kindly download the image from here.
.phone {
height: 500px;
width: 550px;
}
#title {
background-color: #2978b5;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Techno-Log</title>
<link rel="stylesheet" href="styles.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Techno-Log</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="">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Brands</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6">
<h1>Get the best technology updates and product news.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img class="phone" src="https://specials-images.forbesimg.com/imageserve/5f8ebc300be77fed7b88aaf4/960x0.jpg?fit=scale" alt="iphone-mockup">
</div>
</div>
</section>
</body>