Issue
The thing that I am trying to do is: image
The problem in my code is, I am using bootsrap grid system to achieve this easily but when I put this two text and image in a grid system(rows and columns), they look like this: problematic image. How can I achieve the look in the first photograph I put? Also, I want my website to be responsive. So, please write an answer accordingly. Thanks.
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Own CSS-->
<link rel="stylesheet" href="stayil.css">
<!-- Fonts -->
<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=Great+Vibes&family=Montserrat:wght@300;400;600;700&display=swap"
rel="stylesheet">
<title>Bati Gozen</title>
</head>
<body>
<!-- Navbar -->
<header id="home">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Batı Gözen</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#mywork">My Work</a>
<a class="nav-link" href="#resume">CV</a>
</div>
</div>
</div>
</nav>
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="images/IMG_0109.jpg" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-6">
<div class="col-6"><img class="img-fluid ib" src="images/ibimag.png" alt="IB"></div>
</div>
<div class="col-6 m-auto">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</header>
<!-- Photo Gallery -->
<section id="mywork">
<h3>My Work</h3>
<div class="continer-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/2.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/3.jpg" alt="Certificate" class="basari">
</div>
</div>
<div class="row paddingekle">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/5.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/6.jpg" alt="Certificate" class="basari">
</div>
</div>
</div>
</section>
<!-- Resume -->
<section id="resume">
<h3>My Resume</h3>
<button class="btn btn-lg btn-light">
<a href="images/Bati's+Resume+(4).pdf" class="pdf"><i class="far fa-file-pdf"></i> Download</a>
</button>
</section>
<!-- Bootsrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>
CSS:
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}
.navbar-brand,
.nav-link {
color: #555555;
}
.navbar-brand {
margin-left: 10px;
}
.navbar-brand:hover,
.nav-link:hover {
color: black;
}
Solution
Because you want these elements grouped closely, it makes sense to nest them in the same parent and use flex only on that parent.
Instead of making them in two different .col's. Try putting them in the same one and use .d-flex with .align-items-center and .justify-content-center classes on that parent. You can then use .gap-3 for 1rem of gap betwen the two elements.
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="https://dummyimage.com/100/000/fff" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center gap-3">
<img class="img-fluid ib" src="https://dummyimage.com/100/000/fff" alt="IB">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</div>Answered By - Kameron Answer Checked By - Dawn Plyler (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.