noturavgchristian
New Coder
So I am working on a blogger template and I am having trouble lining the image with the header to the right. Sorry I am new to css I got most of the code from watching a youtuber. Thanks in advance.
HTML:
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="top-nav">
<div class="wrapper">
<div class="logo-icon">
<a href="#">
<img src="Images/Icons/Logo.png" alt="logo" width="32" height="32">
</a>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">My Blog</a>
</li>
<li>
<a href="#">Contact Me</a>
</li>
</ul>
</nav>
<div class="search-icon">
<img src="Images/Icons/outline_search_black_48dp2x.png" alt="search" width="32" height="32">
</div>
</div>
</div>
<header>
<div class="header-wrapper">
<div class="studies">
<div class="studies-left">
<h1 class="main-heading">NOTURAVGCHRISTIAN</h1>
<h2 class="subheading">✝A blogger who loves Jesus Christ, love to study, and go on adventures✝</h2>
<a href="#" class="btn">My Studies</a>
</div>
<div class="studies-right">
<img src="images/Bible V 07.jpg" alt="" width="300" height="426">
</div>
</div>
</div>
</header>
<script src="main.js"></script>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "playfair-display", sans-serif;
}
.wrapper {
width: 1152px;
margin: 0 auto;
}
/* Top Nav */
.top-nav {
position: fixed;
left: 0;
right: 0;
background: #222;
padding: 4px 0;
z-index: 200;
}
.top-nav .wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-nav .search-icon {
cursor: pointer;
}
.top-nav nav ul {
display: flex;
list-style: none;
}
.top-nav nav ul li a {
color: #fff;
text-decoration: none;
margin: 0 20px;
text-transform: uppercase;
font-size: 14px;
}
/* Studies Section */
.header-wrapper {
max-width: 1152px;
margin: 0 auto;
background: #000;
height: 60vh;
}
.header-wrapper .studies {
display: flex;
}
.header-wrapper .studies .studies-left,
.header-wrapper .studies .studies-right {
flex: 1;
}
.header-wrapper .studies .studies-left {
align-self: center;
padding-left: 80px;
}
.header-wrapper .studies h1.main-heading{
color:#fff;
font-family: "Abril-Fatface-family";
font-size: 34px;
padding: 0px 0px;
}
.header-wrapper .studies h2.subheading{
color:#fff;
font-family: "arial";
font-size: 12px;
padding-bottom: 20px;
}
a.btn {
background: #f00;
color: #000;
text-decoration: none;
padding: 8px 24px;
display: inline-block;
font-size: 16px;
}