I have designed a webpage layout (as a JPG file) and am struggling to align the subheadings and body text according to specific positions. I created the design in Photoshop and am currently using pixel measurements within a flex container in my CSS styles. However, I also want to incorporate a breakpoint to adjust the styling at certain screen sizes. I'm uncertain if using pixel measurements is the best approach for this.
/*Universal selector-reset default*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Barlow, sans-serif;
}
/*nav flex box content*/
.navbar-container {
display: flex;
justify-content: space-between;
height: 64px;
width: 1365px;
background-color: #f9eaec;
border: 2px solid red;
}
.navbar {
height: 100%;
width: 100%;
}
#websiteName {
color: black;
font-style: Extrabold;
font-size: 18px;
align-items: center;
align-content: center;
height: 100%;
}
#logo {
left: 62.3px;
top: 6px;
}
.dropdown {
top: 26px;
align-items: flex-end;
}
/*body flex box content*/
.body-container {
display: flex;
height: 410px;
width: 693px;
margin: auto;
transform: translateY(115.6px);
border: 2px solid red;
}
#name {
font-style: Extrabold;
font-size: 59px;
left: 339.8px;
top: 179px;
border: 2px solid blue;
width: 276.2px;
}
#subname {
font-style: Extrabold;
font-size: 59px;
border: 2px solid blue;
width: 276.2px;
}
.subheading {
font-style: Extrabold;
font-size: 18px;
}
#subheadingOne {
margin-left: 317px;
border: 2px solid blue;
width: 156px;
}
#subheadingTwo {
margin-left: 561px;
border: 2px solid blue;
}
#chemistryLab {
border: 2px solid blue;
top: 149px;
left: 0px;
height: 235px;
width: 287.2px;
}
#down {
padding-top: 1000px;
}
#translations {
border: 2px solid blue;
font-style: Thin;
font-size: 14px;
margin-top: 61px;
margin-left: 317px;
}
#definition {
font-style: Thin;
font-size: 14px;
border: 2px solid blue;
margin-top: 158px;
margin-left: 317px;
}
.dropdown-content {
display: none;
}
#dropdown-btn:checked~.dropdown-content {
display: flex;
flex-direction: column;
top: 23px;
left: 1329px;
align-content: space-between;
gap: 20px;
margin: 20px 0;
}
.search-box {
position: absolute;
top: 23px;
left: 1197.8px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" type="text/css" href="periodictable.css">
<title>EVERYTHING CHEMISTRY</title>
</head>
<body>
<!--nav bar flex box-->
<div class="navbar-container">
<!--navbar general styling-->
<div class="navbar">
<!--navbar building blocks-->
<h3 id='websiteName'>EVERYTHING CHEMISTRY</h3>
<img id='logo' src="icon.png" alt="Hydrogen atom">
<div class="dropdown">
<input type="checkbox" id="dropdown-btn">
<label for="dropdown-btn" class="dropbtn">
<i class="fa-solid fa-bars"></i>
</label>
<div class="dropdown-content">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<!--search box-->
<form class="search-box" action="action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<!--body flex box-->
<div class="body-container">
<!--body general styling-->
<div class="body">
<div class="page-title">
<h1 id='name'>Periodic</h1>
<h1 id='subname'>Table</h1>
</div>
<img id='chemistryLab' src="Chemistry.JPG" alt="Chemist Lab">
<div class="subheading">
<h2 id='subheadingOne'>118 Elements</h2>
<h2 id='subheadingTwo'>7 Periods</h2>
</div>
<div class="body-text">
<p id='translations'>{Eng: Periodic Table; Arabic: الجدول الدوري; Afrikaans: Periodieke tabel; Mandarin: 周期表
(zhōuqī biǎo); Urdu: پیرودیک ٹیبل.}</p>
<p id='definition'>The periodic table is a tabular arrangement of the chemical elements, organized on the basis
of their atomic number, electron configurations, and chemical properties. Elements are presented in rows
(called periods) and columns (called groups or families) according to their increasing atomic number. The
elements in a group have similar chemical and physical properties, and those in a period show a progression
of properties as the atomic number increases. The table provides a useful summary of the properties of the
elements and their chemical reactivity. It is widely used in chemistry and other sciences to predict the
properties and behavior of elements and their compounds.</p>
</div>
</div>
</div>
<aside class="move-down"><a href="#down"><i class="fa-solid fa-angle-down"></i></a>
</aside>
</body>
</html>