Hi I'm new to coding and I'm trying to create 1 column for text and 1 column for an image for an about me section. However, the columns don't see to be working. The text is above the image, which I don't really mind in terms of design, but for future reference, I would like to know why they don't appear as columns. I tried using a validator but it did not give me any errors. Can someone please check my code and see where I went wrong?
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav a{
color: #fff;
text-decoration: none;
font-size: 14px;
}
nav a:hover{
color:#f44336;
transition: .4s;
}
.nav-links{
flex:1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
nav ul li a:hover{
color:#f44336;
transition: .4s;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 54px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
nav{
display: flex;
padding: 4% 8%;
justify-content: space-between;
align-items: center;
}
.text-box h1{
font-size: 14px;
}
.text-box p{
font-size: 11px;
}
.nav-links ul li {
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav ul li a:hover{
color:#12161d;
transition: .4s;
}
nav .fa{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
/*--footer--*/
.footer{
width: 100%;
text-align: center;
padding: 20px 0;
}
.icons .fa{
color: #808080;
margin: 0 13px;
cursor: pointer;
padding: 18px 0;
}
/*--about page--*/
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.about-us{
width: 80%;
margin: auto;
padding-top: 80px;
padding-bottom: 50px;
}
.about-col{
flex-basis:48%;
padding: 30px 2px;
}
.about-col img{
width: 100%;
}
.about-col h1{
padding-top: 0;
}
.about-col p{
padding: 15px 0 25px;
}<!DOCTYPE html>
<html>
<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>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<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=Noto Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<section class="sub-header">
<nav>
<a href="index.html">AMANDA YEE</a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">CV</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<h1>ABOUT</h1>
</section>
<!--about content-->
<section class="about-us">
<div class="row">
<div class="about-col">
<h1>About Me</h1>
<p>Born and raised in the Bay</p>
</div>
<div class="about-col">
<img src="images/about.jpg" alt="girl smiling">
</div>
</div>
</section>
<!--Footer-->
<section class="footer">
<div class="icons">
<i class="fa fa-linkedin-square"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-envelope-o"></i>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>CodePudding user response：
Just add display:flex; to row class.
.row {
display:flex;
}
CodePudding user response：
Since you are a junior, I suggest you use flex this makes it a lot easier for you .
In this code you add this link at the head of the page
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
and about us section change to
<section class="about-us">
<div class="d-flex ">
<div>
<h1>About Me</h1>
<p>Born and raised in the Bay</p>
</div>
<div>
<img src="images/about.jpg" alt="girl smiling">
</div>
</div>
</section>
for more info check this link Bootstrap Flex