Hello I'm trying to style my navbar and have everything aligned properly, but I'm not sure what is making my nav content display like this. Also, how can I remove the grey box next to my nav brand? I messed around with it on the inspect elements, but I don't know how to get rid of it. I have provided my code below. Thanks!
When bs css link isn't added (How I want to keep it):
When bs css link is added:
HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Dashboard UI </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
My details
Profile
Password
Team
Plan
Billing
Email
Notifications
Integrations
API
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Intergrations and connected apps</h2>
<p>Supercharge your workflow and connect the tool you use every day.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Request integration</span>
</a>
</div>
</div>
<div class="content">
<div class="content-panel">
<div class="vertical-tabs">
View all
Developer tools
Communication
Productivity
Browser tools
Marketplace
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Zeplin</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Collaboration between designers and developers.</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>GitHub</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Link pull requests and automate workflows.</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Figma</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Embed file previews in projects.</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script><script src="./script.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: flex;
align-items: flex-start;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
You are using Bootstrap 5, yet you did not linked it in the head:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Then change the structure of your Navbar:
<!---Navbar--->
<header>
<div class="navbar navbar-expand-md">
<div class="container">
Logo Here
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainmenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">Home</li>
<li class="nav-item">Page</li>
<li class="nav-item dropdown">
Dropdown
<ul class="dropdown-menu">
<li>Dropdown 01</li>
<li>Dropdown 02</li>
</ul>
</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
</div>
</header>
<!---Navbar--->
And finally, remove the custom CSS you made in your CSS file. Eventually, in the css file, search for Nav and delete everything related to the navbar
Related
This question already has answers here:
How to remove/disable styling on some bootstrap elements
(5 answers)
Removing bootstrap styling from certain elements
(1 answer)
How do you completely remove a style from bootstrap by overriding it
(2 answers)
How can I remove a Bootstrap CSS styling for a specific element?
(1 answer)
How can I override Bootstrap CSS styles?
(14 answers)
Closed 5 months ago.
I added the Bootstrap styling link in my page head, but it adds some extra styling to my cards that I don't want. How can I remove it without deleting the Bootstrap CSS link?
I have provided a screenshot and my code below.
How I want to keep it
How it looks when BS CSS link gets added
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item {
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
#alert {
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*,
::after,
::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover,
.button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus,
.search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover,
.horizontal-tabs a:focus,
.horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a+* {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
width: 100%;
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
flex-direction: column;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
.content-main-wrapper {
width: 100%;
display: flex;
flex-direction: row;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover,
.vertical-tabs a:focus,
.vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a+* {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
/*---Profile---*/
/*---Profile---*/
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked+span {
background-color: var(--c-accent-primary);
}
.toggle input:checked+span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus+span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0, 0, 0, .125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active {
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<!---Bootstrap CSS--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">
Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" /><a href="editprofile.html">Edit
profile</a>
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" /><a href="#"
onclick="signOut();">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<!---Tab 1--->
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main-wrapper">
<div class="content-main">
<h3>Legal Name</h3>
<p class="legalName text-muted">User's Legal Name</p>
</div>
</div>
</div>
<!---Tab 1--->
<!---Tab 2--->
<div class="content" data-tab="2">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content-main-wrapper">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
<!---Tab 2--->
<!---Tab 3--->
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main-wrapper">
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
<!---Tab 3--->
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
You can add other Bootstrap classes to .card-header which is where the background and border come from.
You can use bg-white for the white background and border-0 for no border.
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav {
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item {
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
#alert {
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*,
::after,
::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover,
.button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus,
.search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover,
.horizontal-tabs a:focus,
.horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a+* {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
width: 100%;
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
flex-direction: column;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
.content-main-wrapper {
width: 100%;
display: flex;
flex-direction: row;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover,
.vertical-tabs a:focus,
.vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a+* {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
/*---Profile---*/
/*---Profile---*/
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked+span {
background-color: var(--c-accent-primary);
}
.toggle input:checked+span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus+span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0, 0, 0, .125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active {
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<!---Bootstrap CSS--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -60px; font-size: 12px !important">
Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" /><a href="editprofile.html">Edit
profile</a>
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<!---Tab 1--->
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main-wrapper">
<div class="content-main">
<h3>Legal Name</h3>
<p class="legalName text-muted">User's Legal Name</p>
</div>
</div>
</div>
<!---Tab 1--->
<!---Tab 2--->
<div class="content" data-tab="2">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content-main-wrapper">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header bg-white border-0">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header bg-white border-0">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header bg-white border-0">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
</div>
<!---Tab 2--->
<!---Tab 3--->
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main-wrapper">
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
<!---Tab 3--->
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
Solution 1
You can override Bootstrap's styles.
.card-header {
background: white;
border: none;
}
in case this doesn't work, consider using !important
Solution 2
If you want to keep .card-header's styles for your application but just want to change it in one place then add a custom class to your .card-header div and style it accordingly.
PS: CSS libraries do not always provide the desired styling or classes you want. So it's best to learn what to do in such cases.
So I have my personal website and I have paragraphs within it. When viewed on a large screen it looks fine however on a phone it is in a single column and I would like to fix that. I have a screen shot with what I mean and a code pen with the code. I have tried using #media screen and (mad-width:) however it does not help.
#media only screen and (max-width: 500px) {
.masthead {
padding: 3em 0;
}
#media screen and (max-width: 600px) {
.column-left {
display: none;
}
}
#media screen and (max-width: 1800px) {
.button {
display: none;
}
}
.masthead-heading {
font-size: 3em;
}
.content-footer {
padding: 2em 2.5em;
}
}
.about,
.about-content,
.skills,
.skills-content,
.title::after,
.text {
color: white;
}
.navbar {
background-color: #ac5fdb;
color-scheme: 100%;
}
.content-footer {
padding: 2px 0;
text-align: center;
background-color: #ac5fdb;
color-scheme: 100%;
text-decoration: none;
max-height: 2000px;
}
.footer-text {
padding-bottom: 70px;
}
.content-footer>p {
color: grey;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
html {
scroll-behavior: smooth;
background-color: #1e2029;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* all similar content styling codes */
section {
padding: 100px 0;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
.about,
.services,
.skills,
.teams,
.contact,
footer {
font-family: "Poppins", sans-serif;
}
.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
section .title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 60px;
padding-bottom: 20px;
font-family: "Ubuntu", sans-serif;
}
section .title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #1e2029;
transform: translateX(-50%);
}
section .title::after {
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: #ac5fdb;
padding: 0 5px;
background: #1e2029;
transform: translateX(-50%);
}
/* navbar styling */
.nav-link {
color: #fff;
}
.navbar {
position: fixed;
width: 100%;
z-index: 999;
padding: 30px 0;
font-family: "Ubuntu", sans-serif;
transition: all 0.3s ease;
}
.navbar.sticky {
padding: 15px 0;
background: #ac5fdb;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 35px;
font-weight: 600;
}
.navbar .logo a span {
color: #ac5fdb;
transition: all 0.3s ease;
}
.navbar.sticky .logo a span {
color: #fff;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
display: block;
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #ac5fdb;
}
.navbar.sticky .menu li a:hover {
color: #ffff;
}
/* menu btn styling */
.menu-btn {
color: #fff;
font-size: 23px;
cursor: pointer;
display: none;
}
.scroll-up-btn {
position: fixed;
height: 45px;
width: 42px;
background: #ac5fdb;
right: 30px;
bottom: 10px;
text-align: center;
line-height: 45px;
color: #fff;
z-index: 9999;
font-size: 30px;
border-radius: 6px;
border-bottom-width: 2px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.scroll-up-btn.show {
bottom: 30px;
opacity: 1;
pointer-events: auto;
}
.scroll-up-btn:hover {
filter: brightness(90%);
}
/* home section styling */
.home {
display: flex;
background: url("/Files/banner.jpg");
height: 90vh;
color: #fff;
min-height: 90vh;
background-size: cover;
background-attachment: fixed;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
width: 100%;
display: flex;
}
.home .max-width .row {
margin-right: 0;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: #ac5fdb;
font-weight: 500;
}
.home .home-content a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.home .home-content a:hover {
color: #ac5fdb;
background: none;
}
/* about section styling */
.about .title::after {
content: "who I am";
}
.about .about-content .left {
width: 45%;
}
.about .about-content .column-left img {
height: 400px;
width: 400px;
object-fit: cover;
border-radius: 6px;
}
.about .about-content .right {
width: 55%;
}
.about .about-content .right .text {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.about .about-content .right .text span {
color: #ac5fdb;
}
.about .about-content .right p {
text-align: justify;
}
.about .about-content .right a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 20px;
font-weight: 500;
padding: 10px 30px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.about .about-content .right a:hover {
color: #ac5fdb;
background: none;
}
/* skills section styling */
.skills .title::after {
content: "what i know";
}
.skills .skills-content .column {
width: calc(50% - 30px);
}
.skills .skills-content .left .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.skills .skills-content .left p {
text-align: justify;
}
.skills .skills-content .left a {
display: inline-block;
background: #ac5fdb;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 16px;
margin-top: 20px;
border-radius: 6px;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.skills .skills-content .left a:hover {
color: #ac5fdb;
background: none;
}
.skills .skills-content .right .bars {
margin-bottom: 15px;
}
.skills .skills-content .right .info {
display: flex;
margin-bottom: 5px;
align-items: center;
justify-content: space-between;
}
.skills .skills-content .right span {
font-weight: 500;
font-size: 18px;
}
.skills .skills-content .right .line {
height: 5px;
width: 100%;
background: lightgrey;
position: relative;
}
.skills .skills-content .right .line::before {
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
background: #ac5fdb;
}
.skills-content .right .html::before {
width: 100%;
}
.skills-content .right .css::before {
width: 90%;
}
.skills-content .right .js::before {
width: 75%;
}
.skills-content .right .php::before {
width: 70%;
}
.skills-content .right .mysql::before {
width: 50%;
}
/* services section styling */
.contact {
background-color: #1e2029;
}
.title,
.head,
.text {
color: #fff;
}
.services,
.teams {
color: #fff;
background-color: #1e2029;
}
.services .title::before,
.teams .title::before {
background-color: #1e2029;
color: #ffff;
}
.services .title::after,
.teams .title::after {
background: #111;
content: "what I've made";
}
.services .serv-content .card {
width: calc(33% - 20px);
background: #222;
text-align: center;
border-radius: 6px;
padding: 50px 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.services .serv-content .card:hover {
background: #ac5fdb;
}
.services .serv-content .card .box {
transition: all 0.3s ease;
}
.services .serv-content .card:hover .box {
transform: scale(1.05);
}
.services .serv-content .card i {
font-size: 50px;
color: #ac5fdb;
transition: color 0.3s ease;
}
.services .serv-content .card:hover i {
color: #fff;
}
.services .serv-content .card .text {
font-size: 25px;
font-weight: 500;
margin: 10px 0 7px 0;
}
/* contact section styling */
.contact .title::after {
content: "get in touch";
}
.contact .contact-content .column {
width: calc(50% - 30px);
}
.contact .contact-content .text {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.contact .contact-content .left p {
text-align: justify;
}
.contact .contact-content .left .icons {
margin: 10px 0;
}
.contact .contact-content .row {
display: flex;
height: 15px;
align-items: center;
}
.contact .contact-content .row .info {
margin-left: 30px;
background-color: #1e2029;
}
.contact .contact-content .row i {
font-size: 25px;
color: #ac5fdb;
}
.contact .contact-content .info .head {
font-weight: 500;
}
.contact .contact-content .info .sub-title {
color: #fff;
background-color: #1e2029;
}
.contact .right form .fields {
display: flex;
background-color: #1e2029;
}
.contact .right form .field,
.contact .right form .fields .field {
height: 45px;
width: 100%;
margin-bottom: 15px;
background-color: #1e2029;
}
.contact .right form .textarea {
height: 80px;
width: 100%;
background-color: #1e2029;
}
.contact .right form .name {
margin-right: 10px;
background-color: #1e2029;
}
.contact .right form .field input,
.contact .right form .textarea textarea {
height: 70%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 6px;
outline: none;
padding: 0 15px;
font-size: 17px;
font-family: "Poppins", sans-serif;
transition: all 0.3s ease;
background-color: #1e2029;
}
.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus {
border-color: #b3b3b3;
background-color: #1e2029;
}
.contact .right form .textarea textarea {
padding-top: 10px;
resize: none;
background-color: #1e2029;
}
.contact .right form .button-area {
display: flex;
align-items: center;
background-color: #1e2029;
}
.right form .button-area button {
color: #fff;
display: block;
width: 160px !important;
height: 45px;
outline: none;
font-size: 18px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
flex-wrap: nowrap;
background: #ac5fdb;
border: 2px solid #ac5fdb;
transition: all 0.3s ease;
}
.right form .button-area button:hover {
color: #ac5fdb;
background: none;
}
.fa-twitter,
.fa-github,
.fa-linkedin {
color: white;
}
.navbar-toggler-icon {
color: #ac5fdb;
}
.about,
.skills {
background-color: #1e2029;
}
#media (max-width: 991px) {
.services .max-width {
padding: 0;
}
.services .serv-content,
.services .serv-content .card {
width: 100%;
}
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/3263ba6030.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Edward Wynman</title>
<link rel="icon" type="image/x-icon" href="Files/PFP.jpg">
</head>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Edward Wynman</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
<li class="nav-item">
<a class="nav-link" href="/Files/Resume.pdf">Resume</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<body>
<section class="home">
<div class="jumbotron text-center">
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Edward Wynman</div>
<div class="text-3">And I'm a <span class="typing">
<script>
$(document).ready(function () {
// typing text animation script
var typed = new Typed(".typing", {
strings: ["Student", "Developer", "Engineer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
var typed = new Typed(".typing-2", {
strings: ["Student", "Developer", "Engineer"],
typeSpeed: 100,
backSpeed: 60,
loop: true
});
});
</script>
</span></div>
Email Me!
</div>
</div>
</section>
</section>
<section class="about" id="about">
<div class="max-width">
<h2 class="title">About me</h2>
<div class="about-content">
<div class="column-left" id="pic">
<img src="/Files/PFP.jpg" alt="">
</div>
<div class="column right">
<div class="text">I'm Eddie and I'm a <span class="typing-2"></span></div>
<p>At the age of <strong>thirteen</strong> I started programming and have taught myself a thing or two since then. Topics that interest me are <strong>web development,
UX Design , and Software Engineering </strong>Now, I'm a Computer Science student at
<strong> Montclair State University </strong>. I am currently seeking 2023 Summer internship opportunities in Software Engineering and Web Development. I am also pursuing a minor in <strong>Data Science</strong> This website showcases some
of <strong>my
abilities and skills.</strong>
</p>
Download Resume
Read More
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="max-width">
<h2 class="title">My skills</h2>
<div class="skills-content">
<div class="column left">
<div class="text">My Skills</div>
<p>Over the years I have taken a lot from the classes I have taken and they have led me to a specfic set of skills. I am proficcient in Java, Python, C, JavaScript, HTML, CSS, PHP, Adobe Creative Suite Apps, and I am proficcient in MS Office products
as well.
</p>
Read more
</div>
<div class="column right">
<div class="bars">
<div class="info">
<span>Java</span>
<span>100%</span>
</div>
<div class="line html"></div>
</div>
<div class="bars">
<div class="info">
<span>Python</span>
<span>90%</span>
</div>
<div class="line css"></div>
</div>
<div class="bars">
<div class="info">
<span>JavaScript</span>
<span>80%</span>
</div>
<div class="line js"></div>
</div>
<div class="bars">
<div class="info">
<span>HTML | CSS </span>
<span>70%</span>
</div>
<div class="line php"></div>
</div>
<div class="bars">
<div class="info">
<span>PHP</span>
<span>50%</span>
</div>
<div class="line mysql"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<footer class="content-footer">
<section class="footer-text">
<strong>Say hi to me on these social networks:</strong>
</section>
<ul class="social">
<i class="fab fa-twitter fa-2x mr-3"></i>
<i class="fab fa-github fa-2x mr-3"></i>
<a href="https://www.linkedin.com/in/edward-wynman/" target="_blank"><i
class="fab fa-linkedin fa-2x mr-3"></i></a>
</ul>
</footer>
</body>
You need to remove the width: 50%; on .about .about-content .right using a media query. The reason it's rendering like that is that it's using 50% of the available space on mobile, which is not much.
Could look something like this:
#media only screen and (max-width: 800px) {
.about .about-content .right {
width: 100%;
}
}
Here you go...
Add the following:
#media only screen and (max-width: 768px) {
.about .about-content .right {
width: 100% !important;
}
}
Hey in your codepen you made a mistake. The max-width needs to go from wider screens to smaller ones and not the oposite way, because, as the lower value in the page will always overwrite the further up ones, your media queries will never be met.
Put the max-width media queries at the end of the css or at least after the element you want to have a different style on smaller screens.
Then start with the highest number (max-width="1800px") and end with the lowest one (max-width="500px").
so:
//default (bigger than 993px)
.class {
font-size: 10px;
}
//992px and smaller
#media screen and (max-width:992px){
.class {
font-size: 20px;
}
}
//767px and smaller
#media screen and (max-width:767px){
.class {
font-size: 24px;
}
}
//600px and smaller
#media screen and (max-width:600px){
.class {
font-size: 32px;
}
}
Just like Cervus and Kameron have pointed out
.about .about-content .right {width: 100%}
is your main fix, then the next issue is the padding left and right on your max-width class because of
box-sizing: border-box
it will render 100% and then remove 80px of space on either side. If viewed on a small device it will be removing to much of the available space for example on 320px wide screen half the available space would be removed.
.max-width {padding: 0 80px}
Might be better being
.max-width {padding: 0 20px}
And then at a larger media query it can update to 80px when it fits.
I would like the title to be at the bottom of the header, here is an example below
Except that, my problem is that the title is placed at the same height as the header and not at the bottom.
If I remove the header block, you can see the title.
I think it's a problem with my blocks? However, there is one solution, but I want to avoid doing a padding-top on the title to get this result:
I made a reproduction angular.
Here is a reproduction html/css.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 240px;
background: #0a2558;
transition: all 0.5s ease;
}
.sidebar.active {
width: 60px;
}
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
background-color: #fff;
}
.sidebar .logo-details i {
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center;
}
.sidebar .logo-details .logo_name img {
height: 100px;
margin-left: 18px;
}
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
display: flex;
justify-content: start;
text-decoration: none;
transition: all 0.4s ease;
border-bottom: 1px solid #ccc;
padding: 13px 0;
}
.sidebar .nav-links li a.active {
background: #081d45;
}
.sidebar .nav-links li a:hover {
background: #081d45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links .item {
text-transform: uppercase;
}
.sidebar .nav-links li i.fa-chevron-down {
right: 0;
position: absolute;
}
.sidebar .nav-links li.active i.fa-chevron-down {
transform: rotate(180deg);
}
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.home-section {
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.home-section .heading {
display: flex;
justify-content: space-between;
height: 100px;
background: #fff;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.home-section .heading .sidebar-button {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
.heading .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}
.menu-summary-container {
display: grid;
margin: 0 auto;
text-align: center;
width: 100%;
}
.menu-summary-container .user,
.menu-summary-container .last-connection {
font-size: 22px;
}
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<script src="script.js"></script>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="logo_name">
<a href="https://zupimages.net/viewer.php?id=22/30/27uw.png"
><img src="https://zupimages.net/up/22/30/27uw.png" alt=""
/></a>
</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="links_name" style="margin-left: 20px;">Administrateur</span>
<i class="fa fa-chevron-down"></i>
</a>
</li>
</ul>
</div>
<section class="home-section">
<div class="heading">
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="menu-summary-container">
<span class="user">User: </span>
<span class="last-connection">last connection: </span>
</div>
</div>
<h1>Portfolio page</h1>
</section>
</body>
Thank you a lot for your help.
If you must use a fixed position together with flexbox you can wrap the text in another div:
<div class="heading text">
<h1>Portfolio page</h1>
</div>
I then added some additional CSS:
.home-section .heading.text {
height: calc(100% - 100px);
align-items: start;
top: 100px;
padding-top: 10px;
background: #eee;
}
If you can follow the advice from #isherwood and don't mix fixed position and flexbox at all.
Example layouts using flexbox can be searched on the internet.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
height: 100%;
width: 240px;
background: #0a2558;
transition: all 0.5s ease;
}
.sidebar.active {
width: 60px;
}
.sidebar .logo-details {
height: 100px;
display: flex;
align-items: center;
background-color: #fff;
}
.sidebar .logo-details i {
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center;
}
.sidebar .logo-details .logo_name img {
height: 100px;
margin-left: 18px;
}
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
}
.sidebar .nav-links li a {
display: flex;
justify-content: start;
text-decoration: none;
transition: all 0.4s ease;
border-bottom: 1px solid #ccc;
padding: 13px 0;
}
.sidebar .nav-links li a.active {
background: #081d45;
}
.sidebar .nav-links li a:hover {
background: #081d45;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links .item {
text-transform: uppercase;
}
.sidebar .nav-links li i.fa-chevron-down {
right: 0;
position: absolute;
}
.sidebar .nav-links li.active i.fa-chevron-down {
transform: rotate(180deg);
}
.sidebar .nav-links li.active i {
color: white;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.home-section {
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.home-section .heading {
display: flex;
justify-content: space-between;
height: 100px;
background: #fff;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.home-section .heading.text {
height: calc(100% - 100px);
align-items: start;
top: 100px;
padding-top: 10px;
background: #eee;
}
.home-section .heading .sidebar-button {
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
.heading .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}
.menu-summary-container {
display: grid;
margin: 0 auto;
text-align: center;
width: 100%;
}
.menu-summary-container .user,
.menu-summary-container .last-connection {
font-size: 22px;
}
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<script src="script.js"></script>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="logo_name">
<a href="https://zupimages.net/viewer.php?id=22/30/27uw.png"
><img src="https://zupimages.net/up/22/30/27uw.png" alt=""
/></a>
</span>
</div>
<ul class="nav-links">
<li>
<a href="#">
<span class="links_name" style="margin-left: 20px;">Administrateur</span>
<i class="fa fa-chevron-down"></i>
</a>
</li>
</ul>
</div>
<section class="home-section">
<div class="heading">
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="menu-summary-container">
<span class="user">User: </span>
<span class="last-connection">last connection: </span>
</div>
</div>
<div class="heading text">
<h1>Portfolio page</h1>
</div>
</section>
</body>
So i was just finishing building my first full site (with html and css), and in the video it was missing a portfolio page, i created one watching a video of a cool image grid i founded, but the grid keeps getting cut off. (Thats not the full html code, i deleted the other pages that are correct) Full image
body {
font-family: "Open Sans", sans-serif;
background-color: #040404;
color: #fff;
position: relative;
background: transparent;
}
body::before {
content: "";
position: fixed;
background: #040404 url("../../assets/img/background.jpg") top right no-repeat;
background-size: cover;
left: 0;
right: 0;
top: 0;
height: 100vh;
z-index: -1;
}
a {
color: #18d26e;
}
a:hover {
color: #35e888;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", sans-serif;
}
#header {
transition: ease-in-out 0.3s;
position: relative;
height: 100vh;
display: flex;
align-items: center;
z-index: 997;
overflow-y: auto;
}
#header * {
transition: ease-in-out 0.3s;
}
#header h1 {
font-size: 48px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
font-family: "Poppins", sans-serif;
}
#header h1 a, #header h1 a:hover {
color: #fff;
line-height: 1;
display: inline-block;
}
#header h2 {
font-size: 24px;
margin-top: 20px;
color: rgba(255, 255, 255, 0.8);
}
#header h2 span {
color: #fff;
border-bottom: 2px solid #18d26e;
padding-bottom: 6px;
}
#header img {
padding: 0;
margin: 0;
}
#header .social-links {
margin-top: 40px;
display: flex;
}
#header .social-links a {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
color: #fff;
line-height: 1;
margin-right: 8px;
border-radius: 50%;
width: 40px;
height: 40px;
}
#header .social-links a:hover {
background: #18d26e;
}
#media (max-width: 992px) {
#header h1 {
font-size: 36px;
}
#header h2 {
font-size: 20px;
line-height: 30px;
}
#header .social-links {
margin-top: 15px;
}
#header .container {
display: flex;
flex-direction: column;
align-items: center;
}
}
.nav-menu {
margin-top: -450px;
margin-left: 70%;
}
.nav-menu ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu li + li {
margin-left: 30px;
}
.nav-menu a {
display: block;
position: relative;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
font-family: "Poppins", sans-serif;
font-weight: 400;
}
.nav-menu a:before {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #18d26e;
visibility: hidden;
width: 0px;
transition: all 0.3s ease-in-out 0s;
}
.nav-menu a:hover:before, .nav-menu li:hover > a:before, .nav-menu .active > a:before {
visibility: visible;
width: 25px;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
color: #fff;
text-decoration: none;
}
.mobile-nav-toggle {
position: fixed;
right: 15px;
top: 15px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
transition: all 0.4s;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #fff;
}
.mobile-nav {
position: fixed;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
z-index: 9999;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
transition: ease-in-out 0.2s;
opacity: 0;
visibility: hidden;
border-radius: 10px;
padding: 10px 0;
border: 2px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #fff;
padding: 10px 20px;
font-weight: 500;
outline: none;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
color: #18d26e;
text-decoration: none;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(9, 9, 9, 0.6);
overflow: hidden;
display: none;
transition: ease-in-out 0.2s;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
opacity: 1;
visibility: visible;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #fff;
}
/* Header Top */
#header.header-top {
height: 80px;
position: fixed;
left: 0;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.9);
}
#header.header-top .social-links, #header.header-top h2 {
display: none;
}
#header.header-top h1 {
margin-right: auto;
font-size: 36px;
}
#header.header-top .container {
display: flex;
align-items: center;
}
#header.header-top .nav-menu {
margin: 0;
}
#media (max-width: 768px) {
#header.header-top {
height: 60px;
}
#header.header-top h1 {
font-size: 26px;
}
}
section {
overflow: hidden;
position: absolute;
width: 100%;
top: 140px;
bottom: 100%;
opacity: 0;
transition: ease-in-out 0.4s;
z-index: 2;
}
section.section-show {
top: 100px;
bottom: auto;
opacity: 1;
padding-bottom: 45px;
}
section .container {
background: rgba(0, 0, 0, 0.9);
padding: 30px;
}
#media (max-width: 1080px) {
section {
top: 120px;
}
section.section-show {
top: 80px;
}
}
.section-title h2 {
font-size: 14px;
font-weight: 500;
padding: 0;
line-height: 1px;
margin: 0 0 20px 0;
letter-spacing: 2px;
text-transform: uppercase;
color: #aaaaaa;
font-family: "Poppins", sans-serif;
}
.section-title h2::after {
content: "";
width: 120px;
height: 1px;
display: inline-block;
background: #4ceb95;
margin: 4px 10px;
}
.section-title p {
margin: 0;
margin: -15px 0 15px 0;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
color: #fff;
}
.about-me .content h3 {
font-weight: 700;
font-size: 26px;
color: #18d26e;
}
.about-me .content ul {
list-style: none;
padding: 0;
}
.about-me .content ul li {
padding-bottom: 10px;
}
.about-me .content ul i {
font-size: 20px;
padding-right: 2px;
color: #18d26e;
}
.about-me .content p:last-child {
margin-bottom: 0;
}
.counts {
padding: 70px 0 60px;
}
.counts .count-box {
padding: 30px 30px 25px 30px;
width: 100%;
position: relative;
text-align: center;
background: rgba(255, 255, 255, 0.08);
}
.counts .count-box i {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
background: rgba(255, 255, 255, 0.1);
padding: 12px;
color: #18d26e;
border-radius: 50px;
}
.counts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #fff;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-size: 14px;
}
.skills .progress {
height: 50px;
display: block;
background: none;
}
.skills .progress .skill {
padding: 10px 0;
margin: 0 0 6px 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: "Poppins", sans-serif;
color: #fff;
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: rgba(255, 255, 255, 0.15);
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
background-color: #18d26e;
}
.interests .icon-box {
display: flex;
align-items: center;
padding: 20px;
background: rgba(255, 255, 255, 0.08);
transition: ease-in-out 0.3s;
}
.interests .icon-box i {
font-size: 32px;
padding-right: 10px;
line-height: 1;
}
.interests .icon-box h3 {
font-weight: 700;
margin: 0;
padding: 0;
line-height: 1;
font-size: 16px;
color: #fff;
}
.interests .icon-box:hover {
background: rgba(255, 255, 255, 0.12);
}
.testimonials .testimonial-item {
box-sizing: content-box;
min-height: 320px;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
margin: -40px 0 0 40px;
position: relative;
z-index: 2;
border: 6px solid rgba(255, 255, 255, 0.12);
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 45px;
color: #fff;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0 0 0 45px;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.25);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 15px 0 15px;
padding: 20px 20px 60px 20px;
background: rgba(255, 255, 255, 0.1);
position: relative;
border-radius: 6px;
position: relative;
z-index: 1;
}
.testimonials .owl-nav, .testimonials .owl-dots {
margin-top: 5px;
text-align: center;
}
.testimonials .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3) !important;
}
.testimonials .owl-dot.active {
background-color: #18d26e !important;
}
#media (max-width: 767px) {
.testimonials {
margin: 30px 10px;
}
}
.honeycomb
{
display: flex;
flex-wrap: wrap;
list-style: none;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 10px;
transform: translateY(80px);
}
.honeycomb-cell
{
-webkit-box-flex: 0;
flex: 0 1 250px;
max-width: 250px;
height: 137.5px;
margin: 65.4px 12.5px 25px;
position: relative;
padding: 0.5em;
text-align: center;
z-index: 1;
box-shadow: 0px 0px 15px 0 rgba(0,0,0,0.1);
}
.honeycomb-cell_img
{
object-fit: cover;
object-position: center;
filter: grayscale(100%);
}
.honeycomb-cell_title
{
height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-word;
text-transform: uppercase;
color: #fff;
font-weight: 700;
font-size: 1.75em;
transition: opacity 350ms;
}
.honeycomb-cell_title > small
{
font-weight: 300;
margin-top: 0.25em;
}
.honeycomb-cell::before,
.honeycomb-cell::after
{
content: '';
}
.honeycomb-cell::before,
.honeycomb-cell::after,
.honeycomb-cell_img
{
top: -50%;
left: 0;
width: 100%;
height: 200%;
display: block;
position: absolute;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
z-index: -1;
}
.honeycomb-cell::before
{
background: #fff;
transform: scale(1.055);
}
.honeycomb-cell::after
{
background: #111111;
opacity: 0.7;
transition: opacity 350ms;
-webkit-transition: opacity 350ms;
}
.honeycomb-cell:hover
.honeycomb-cell_title
{
opacity: 0;
}
.honeycomb-cell:hover
.honeycomb-cell_img
{
filter: grayscale(0%);
}
.honeycomb-cell:hover::before
{
background: #18d26e;
}
.honeycomb-cell:hover::after
{
opacity: 0;
}
.honeycomb_Hidden
{
display: none;
opacity: 0;
width: 250px;
margin: 0 12.5px;
}
#media (max-width: 550px)
{
.honeycomb-cell
{
margin: 81.25px 25px;
}
}
#media (min-width: 550px) and (max-width: 1080px)
{
.honeycomb-cell:nth-child(3n)
{
margin-right: calc(50% - 125px);
margin-left: calc(50% - 125px);
}
.honeycomb_Hidden:nth-child(3n + 5)
{
display: block;
}
}
#media (min-width: 825px) and (max-width: 1100px) {
.honeycomb-cell:nth-child(5n + 4)
{
margin-left: calc(50% - 275px);
}
.honeycomb-cell:nth-child(5n + 5)
{
margin-right: calc(50% - 275px);
}
.honeycomb_Hidden:nth-child(5n),
.honeycomb_Hidden:nth-child(5n + 3)
{
display: block;
}
}
#media (min-width: 1100px)
{
.honeycomb-cell:nth-child(7n + 5) {
margin-left: calc(50% - 400px);
}
.honeycomb-cell:nth-child(7n + 7),
.honeycomb-cell:nth-child(7n + 5):nth-last-child(2)
{
margin-right: calc(50% - 400px);
}
.honeycomb_Hidden:nth-child(7n + 7),
.honeycomb_Hidden:nth-child(7n + 9),
.honeycomb_Hidden:nth-child(7n + 11)
{
display: block;
}
}
.services .icon-box {
text-align: center;
background: rgba(204, 204, 204, 0.1);
padding: 80px 20px;
transition: all ease-in-out 0.3s;
}
.services .icon-box .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: #18d26e;
border-radius: 5px;
transition: all .3s ease-out 0s;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transform-style: preserve-3d;
}
.services .icon-box .icon i {
color: #fff;
font-size: 28px;
}
.services .icon-box .icon::before {
position: absolute;
content: '';
left: -8px;
top: -8px;
height: 100%;
width: 100%;
background: rgba(255, 255, 255, 0.15);
border-radius: 5px;
transition: all .3s ease-out 0s;
transform: translateZ(-1px);
}
.services .icon-box h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 24px;
}
.services .icon-box h4 a {
color: #fff;
}
.services .icon-box p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .icon-box:hover {
background: #18d26e;
border-color: #18d26e;
}
.services .icon-box:hover .icon {
background: #fff;
}
.services .icon-box:hover .icon i {
color: #b2c2b9;
}
.services .icon-box:hover .icon::before {
background: #35e888;
}
.services .icon-box:hover h4 a, .services .icon-box:hover p {
color: #fff;
}
#-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.credits {
position: fixed;
right: 0;
left: 0;
bottom: 0;
padding: 15px;
text-align: right;
font-size: 13px;
color: #fff;
z-index: 999999;
}
#media (max-width: 992px) {
.credits {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
}
}
.credits a {
color: #18d26e;
transition: 0.3s;
}
.credits a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Rodrigo C. Programmer</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon/favicon.ico" rel="icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
<link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
<link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
<link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="header-tops">
<div class="container">
<h1>Rodrigo Carrard</h1>
<h2>Apenas um <span>Programador</span> do Brasil</h2>
<div class="social-links">
<i class="icofont-instagram"></i>
</div>
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav><!-- .nav-menu -->
</div>
</header><!-- End Header -->
<!-- ======= Portfolio Section ====== -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="section-title">
<h2>Portfolio</h2>
<p>Meus projetos</p>
</div>
<ul class="honeycomb">
<li class="honeycomb-cell">
<img class="honeycomb-cell_img" src="assets/img/LogoRc.png">
<div class="honeycomb-cell_title">R.C Portfolio</div>
</li>
<li class="honeycomb-cell">
<img class="honeycomb-cell_img" src="assets/img/clientes/diceshield.png">
<div class="honeycomb-cell_title">Party Buddy</div>
</li>
<li class="honeycomb-cell honeycomb_Hidden">
</li>
</ul>
</div>
</section>
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<div class="container">
<div class="section-title">
<h2>Services</h2>
<p>Meus serviços</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 d-flex align-items-stretch">
<div class="icon-box">
<div class="icon"><i class="bx bxl-dribbble"></i></div>
<h4>Desenvolvimento de site</h4>
<p>Farei seu site do utilizando Html / Css / JavaScript / Php </p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-file"></i></div>
<h4>Wordpress Site</h4>
<p>Desenvolverei seu site profissional ultilizando o Wordpress</p>
</div>
</div>
<div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0">
<div class="icon-box">
<div class="icon"><i class="bx bx-tachometer"></i></div>
<h4>Criação de aplicativos Mobile</h4>
<p>Desenvolverei seu aplicativo mobile com base no seu pedido</p>
</div>
</div>
</div>
</div>
</section><!-- End Services Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>Contact</h2>
<p>Meu contato</p>
</div>
<div class="row mt-2">
<div class="col-md-6 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-map"></i>
<h3>Endereço</h3>
<p>Itapema, Meia Praia, SC, Brasil</p>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-share-alt"></i>
<h3>Social Profiles</h3>
<div class="social-links">
<i class="icofont-instagram"></i>
</div>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-envelope"></i>
<h3>Meu email</h3>
<p>rodrigocarrard.pessoal#gmail.com</p>
</div>
</div>
<div class="col-md-6 mt-4 d-flex align-items-stretch">
<div class="info-box">
<i class="bx bx-phone-call"></i>
<h3>Telefone</h3>
<p>Ainda não disponivel</p>
</div>
</div>
</div>
<form action="forms/contact.php" method="post" role="form" class="php-email-form mt-4">
<div class="form-row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validate"></div>
</div>
<div class="col-md-6 form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validate"></div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validate"></div>
</div>
<div class="form-group">
<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validate"></div>
</div>
<div class="mb-3">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
</div>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</section>
<!-- Vendor JS Files -->
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/vendor/counterup/counterup.min.js"></script>
<script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/venobox/venobox.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>
You can replace this for your body styling
body{
position:relative;
z-index:1;
color:#070707;
}
body::before{
content:"";
width:100vw;
height:100vh;
background-image: url("https://i.stack.imgur.com/ILQso.png");
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
position:absolute;
z-index:-1;
}
I have positioned the body relative and body::before pseudo element position absolute and made it go at the back of the body using z-index for it to appear as a background. Try out this implemetation. For the Image I have used an online image url
I'm making a homepage look like this one: https://www.daum.net/
When the display is reduced(between the size of 800 px and 1280px - i made a media query when under 800px), this site has overflow-x scroll but mine doesn't look like that
By the way, the login form seems floating when I reduced the size as well even I set the clearfix.
And I assume that it would make x-scroll doesn't work correctly.
Please check this code
+)ADD EXPLAN
I'm still struggling with this homepage. I made a media query when the size is only under 800. When the size is above 800px, the x-scroll should work. It seems to work thankfully but The login form is floating when user reducing the size of display like this. This is what i've want.
(Screenshot at the moment )
It must look like this (Expected Result)
/* NOTE:
* Grid layout stuff starts at line 138.
*/
/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
}
body {
margin: 0;
height: 100%;
overflow-x:scroll;
}
.wrapper {
margin: 0;
height: 100%;
}
.homepage-content-wrapper{
max-width: 1280px;
margin: 0 auto;
height: 100%;
}
ul{list-style: none;}
/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar */
}
/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
color: #404040;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 18px;
line-height: 1.5;
}
h1,
h2,
h3 {
margin: 0;
padding: 1em 0;
}
/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
.site {
background: #ededed;
min-height: 100vh;
}
.main-content,
.main-homepage-content,
.twin,
.footer {
padding: 1em 2em;
}
.masthead{
padding: 1em 0em;
color: white;
}
.sidebar{padding:1em 0.375em; }
.main-content,
.main-homepage-content{
background: white;
}
.news-container{width:100%;}
.colophon {
padding: 2em;
background: #3E454C;
color: white;
}
.colophon a {
color: white;
}
.colophon a:hover,
.colophon a:focus {
border-bottom: 1px solid white;
}
.column-left{position: relative; float: left; width: 900px;}
.column-right{position: relative; float: right; width: 300px;}
.main-homepage-content:after,
.column-left:after,
#main-ad:after,
.column-right:after{content: ""; clear: both; display: table;}
#media (max-width: 800px) {
.column-left{width: 100%;}
}
/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
#supports not (display: grid) {
.wrapper {
max-width: 50em;
margin: 0 auto;
}
}
/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/
#media screen and (min-width: 800px) {
#supports (display: grid) {
.content-wrapper {
display: grid;
grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
}
.homepage-content-wrapper {
display: grid;
grid-template-columns: 100%;
grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
}
.column-left{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.column-right{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.masthead,
.colophon {
grid-column: span 12;
}
.main-content {
grid-column: 2/12;
}
.sidebar {
grid-column: 1/1;
}
}
}
/*--------------------------------------------------------------
Login &Search Form & Logo
--------------------------------------------------------------*/
.header-level-1{
max-width: 1500px;
margin: 0 auto;
padding: 0.5em 0;
}
.header-level-1 .clearlist{
float:right;
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.header-level-1 .clearlist:after{content: ""; clear: both; display: table;}
.header-level-1 .clearlist li{
list-style: none;
margin: 0;
padding: 0;
text-align: left;
float:left;
}
.header-level-1 .clearlist li a{
display: block;
font: normal 11px 돋움;
color: #585858;
text-decoration: none !important;
letter-spacing: -1px;
text-align: center;
}
.header-level-1 .clearlist li:not(:first-child) a::before {
content: "|";}
/*
.header-level-1 .clearlist li a:before {
content: "|";
}
.header-level-1 .clearlist li:first-child a:before {
content: "";
}*/
.header-level-2 {
max-width: 1500px;
margin: 0 auto;
}
.header-level-2-1{width:100px; float:left}
.header-level-2-2{width:auto;}
.header-level-2-1:after,
.header-level-2-2:after{
content: ""; clear: both; display: table;
}
#media screen and (min-width: 800px)
.logo-image{
grid-column: 1/1;
}
.search-form {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.logo-image:after,.search-form:after{content: ""; clear: both; display: table;}
.search-form form {
width: 100%;
max-width: 600px;
margin-bottom: 0;
}
.search-form .inner-form {
background: #fff;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.search-form form .inner-form .input-field {
height: 68px;
}
.search-form form .inner-form .input-field input {
height: 100%;
background: transparent;
border: 0;
display: block;
width: 100%;
padding-left: 10px;
font-size: 16px;
color: #555;
}
.search-form form .inner-form .input-field input.placeholder {
color: #888;
font-size: 16px;
}
.search-form form .inner-form .input-field input:-moz-placeholder {
color: #888;
font-size: 16px;
}
.search-form form .inner-form .input-field input::-webkit-input-placeholder {
color: #888;
font-size: 16px;
}
.search-form form .inner-form .input-field input:hover, .search-form form .inner-form .input-field input:focus {
box-shadow: none;
outline: 0;
border-color: #fff;
}
.search-form form .inner-form .input-field.first-wrap {
width: 150px;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.search-form form .inner-form .input-field.first-wrap .choices__inner {
background: transparent;
border-radius: 0;
border: 0;
height: 100%;
color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 10px 30px;
box-sizing: unset !important;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner .choices__list.choices__list--single {
display: -ms-flexbox;
display: flex;
padding: 0;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner .choices__item.choices__item--selectable.choices__placeholder {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 100%;
opacity: 1;
color: #888;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner .choices__list--single .choices__item {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
height: 100%;
color: #555;
}
.search-form form .inner-form .input-field.first-wrap .choices[data-type*="select-one"]:after {
right: 30px;
border-color: #e5e5e5 transparent transparent transparent;
}
.search-form form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown {
border: 0;
background: #fff;
padding: 20px 30px;
margin-top: 2px;
border-radius: 4px;
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
}
.search-form form .inner-form .input-field.first-wrap .choices__list.choices__list--dropdown .choices__item--selectable {
padding-right: 0;
}
.search-form form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
background: #fff;
color: #eb008b;
}
.search-form form .inner-form .input-field.first-wrap .choices__list--dropdown .choices__item {
color: #555;
min-height: 24px;
}
.search-form form .inner-form .input-field.second-wrap {
-ms-flex-positive: 1;
flex-grow: 1;
}
.search-form form .inner-form .input-field.third-wrap {
width: 74px;
}
.search-form form .inner-form .input-field.third-wrap .btn-search {
height: 100%;
width: 100%;
white-space: nowrap;
color: #fff;
border: 0;
cursor: pointer;
background: #eb008b;
transition: all .2s ease-out, color .2s ease-out;
}
.search-form form .inner-form .input-field.third-wrap .btn-search svg {
width: 16px;
}
.search-form form .inner-form .input-field.third-wrap .btn-search:hover {
background: #eb008b;
}
.search-form form .inner-form .input-field.third-wrap .btn-search:focus {
outline: 0;
box-shadow: none;
}
#media screen and (max-width: 992px) {
.search-form form .inner-form .input-field {
height: 50px;
}
}
#media screen and (max-width: 800px) {
.header-level-2-2{width: 90%; margin: 0 auto;}
.header-level-1 .clearlist{
position: absolute;
top: 5em;
right: 0.275em;
}
.logo-image{
display: none;
}
.search-form {
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Poppins', sans-serif;
}
.search-form form .inner-form {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 1em;
margin-top:5em;
}
.search-form form .inner-form .input-field {
margin-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.search-form form .inner-form .input-field input {
padding: 10px 15px;
}
.search-form form .inner-form .input-field.first-wrap {
width: 100%;
border-right: 0;
}
.search-form form .inner-form .input-field.first-wrap .choices__inner {
padding: 10px 15px;
}
.search-form form .inner-form .input-field.first-wrap .choices[data-type*="select-one"]:after {
right: 11.5px;
border-color: #e5e5e5 transparent transparent transparent;
}
.search-form form .inner-form .input-field.second-wrap {
width: 100%;
margin-bottom: 30px;
}
.search-form form .inner-form .input-field.third-wrap {
margin-bottom: 0;
width: 100%;
}
.choices__list--dropdown {
display: none;
z-index: 1;
position: absolute;
width: 80%;
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
border-bottom-right-radius: 2.5px;
overflow: hidden;
word-break: break-all;
}
}
/*--------------------------------------------------------------
Navigation:
--------------------------------------------------------------*/
.nav-header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: absolute;
top: 0px;
width: 100%;
z-index: 999;
}
.nav-header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.nav-header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
color:#666 !important;
}
.nav-header li a:hover,
.nav-header .menu-btn:hover {
background-color: #eb008b;
color: #fff!important;
}
/* menu */
.nav-header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.nav-header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.nav-header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.nav-header .menu-icon .navicon:before,
.nav-header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.nav-header .menu-icon .navicon:before {
top: 5px;
}
.nav-header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.nav-header .menu-btn {
display: none;
}
.nav-header .menu-btn:checked ~ .menu {
max-height: 400px;
}
.nav-header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.nav-header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.nav-header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.nav-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
#media (min-width: 800px) {
.nav-header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: relative;
width: 100%;
margin-top:1em;
z-index: 3;
}
.nav-header:after{content: ""; clear: both; display: table;}
.nav-header li {
float: left;
}
.nav-header li a {
padding: 20px 30px;
}
.nav-header .menu {
clear: none;
float: right;
max-height: none;
}
.nav-header .menu-icon {
display: none;
}
}
/*--------------------------------------------------------------
HomePage
--------------------------------------------------------------*/
#loginForm{background-color: #e9ecef;}
.login-input{
margin: 50px 0 0 30px;
display: inline;
float: left;
width: 156px;
}
.login-input input{
width: 100%;
}
.login-input input::-webkit-input-placeholder {
font-size: 12px;
line-height: 3;
padding-left:5px;
}
.btn-login{
overflow: hidden;
float: left;
width: 70px;
height: 60px;
margin-top: 50px;
font-weight: bold;
background-color: white;
}
.login-set {
position: absolute;
top: 15px;
left: 30px;
width: 350px;
height: 30px;
font-size: 12px;
letter-spacing: -1px;
}
.list-user {
overflow: hidden;
width: 270px;
padding: 15px 0 30px 20px;
font-size: 12px;
line-height: 14px;
letter-spacing: -1px;
}
.list-user li {
overflow: hidden;
float: left;
padding: 0 0 1px 10px;
}
.tab-content {
height: 360px;
}
.tab-pane ul{
width:400px;
}
.list_thumb li {
float: left;
width: 180px;
height: 160px;
}
.list_thumb li:last-child:after{
content: "";
clear: both;
display: table;
}
#media screen and (max-width: 800px) {
#main-ad,
.column-right{display: none;}
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.com/libraries/bootstrap-slider"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="wrapper">
<header class="masthead">
<div class="header-wrapper">
<div class="header-level-1">
<!-- Login -->
<ul class="clearlist">
<li>로그인</li>
<li>회원가입</li>
<li>소개</li>
</ul>
</div>
<div class="header-level-2">
<!-- Logo and Title -->
<div class="header-level-2-1">
<div class="logo-image" >
<img src="#" alt="#">
</div>
</div>
</div>
<nav>
<!-- Navigation-->
<div class="nav-header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li class="menu-item">신문줄광고</li>
<li class="menu-item">신문보기</li>
<li class="menu-item">부동산</li>
<li class="menu-item">알뜰장터</li>
<li class="menu-item">자동차</li>
<li class="menu-item">커뮤니티</li>
</ul>
</div>
</nav>
</header><!-- .masthead -->
<div class="homepage-content-wrapper">
<!-- Main Content -->
<main class="main-homepage-content">
<div class="column-left">
<!-- AD TOP -->
<div id="main-ad">
<img src="https://via.placeholder.com/900x170.jpg" class="img-fluid">
</div>
<!-- NEWS Section -->
<div class="news-container">
<ul class="nav" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="allnews-tab" data-toggle="tab" href="#allnews" role="tab" aria-controls="allnews" aria-selected="true">전체기사</a>
</li>
<li class="nav-item">
<a class="nav-link" id="politic-tab" data-toggle="tab" href="#politic" role="tab" aria-controls="politic" aria-selected="false">정치/이민</a>
</li>
<li class="nav-item">
<a class="nav-link" id="economy-tab" data-toggle="tab" href="#economy" role="tab" aria-controls="economy" aria-selected="false">경제</a>
</li>
<li class="nav-item">
<a class="nav-link" id="society-tab" data-toggle="tab" href="#society" role="tab" aria-controls="society" aria-selected="false">사회</a>
</li>
<li class="nav-item">
<a class="nav-link" id="entertain-tab" data-toggle="tab" href="#entertain" role="tab" aria-controls="entertain" aria-selected="false">연예/스포츠</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="allnews" role="tabpanel" aria-labelledby="allnews-tab">
<ul class="list_thumb">
<li>
<a href="#" class="link_item">
<span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpg" width="154" height="94" class="img_thumb" alt="">
</span>
<div class="cont_item">
<strong class="tit_item">산다라박, 오늘 화제가 됐던 그 옷 맞습니다</strong>
</div>
</a>
</li>
<li><a href="#" class="link_item">
<span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpgg" width="154" height="94" class="img_thumb" alt=""></span>
<div class="cont_item">
<strong class="tit_item">한소희, '백일의 낭군님' 종방연 참석한 세자빈</strong>
</div>
</a>
</li>
<li>
<a href="#" class="link_item"><span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpg" width="154" height="94" class="img_thumb" alt="">
</span>
<div class="cont_item">
<strong class="tit_item">소희 '격한 안무에도 미모유지~'</strong>
</div>
</a>
</li>
<li>
<a href="#" class="link_item">
<span class="thumb_g">
<img src="https://via.placeholder.com/154x94.jpg" width="154" height="94" class="img_thumb" alt="">
</span>
<div class="cont_item">
<strong class="tit_item">'여우각시별' 김지수, 이제훈을 감싸는 이유 고...</strong>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="politic" role="tabpanel" aria-labelledby="politic-tab">
정치/이민
</div>
<div class="tab-pane fade" id="economy" role="tabpanel" aria-labelledby="economy-tab">
경제
</div>
<div class="tab-pane fade" id="society" role="tabpanel" aria-labelledby="society-tab">
사회
</div>
<div class="tab-pane fade show" id="entertain" role="tabpanel" aria-labelledby="entertain-tab">
연예
</div>
</div>
</div>
<!-- NEWS Section -->
</div>
<div class="column-right">
<!-- 로그인 -->
<form id="loginForm" name="loginform" accept-charset="utf-8" method="post" action="" autocomplete="off">
<div class="login-input">
<label class="" for="kyocha_id" style="display: none;">아이디</label>
<input type="text" id="kyocha_id" name="kyocha_id" class="tf_login" maxlength="50" placeholder="아이디" tabindex="1">
<label class="" for="kyocha_pwd" style="display: none;">비밀번호</label>
<input type="password" id="kyocha_pwd" name="kyocha_pwd" class="tf_login tf_pw" maxlength="32" placeholder="비밀번호" tabindex="2">
</div>
<button type="submit" id="loginSubmit" class="btn-login #loginbtn" tabindex="3" onclick="">
<span class="ir_wa">로그인</span>
</button>
<div class="login-set">
<span class="info_check">
<input type="checkbox" id="stln" name="stln" class="inp_steady" tabindex="4" onclick="">
<label id="lbStln" class="lab_steady" for="stln" onclick="">
<span class="ico_login ico_check"></span>로그인 상태 유지
</label>
</span>
</div>
<ul class="list-user">
<li class="fst">
회원가입
</li>
<li>
아이디<span class="screen_out">찾기</span>
<span class="ico_dot">·</span>
비밀번호 찾기
</li>
</ul>
</form>
<!-- //로그인 -->
</div>
</main>
</div>
<footer class="colophon grid">
<aside></aside>
</footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</body>
</html>
I may be misinterpreting your question, but in looking at your expected result image it appears you want a portion of your webpage to overflow horizontally while in a desktop viewport.
By simply changing the following rule from:
.homepage-content-wrapper{
max-width: 1280px;
margin: 0 auto;
height: 100%;
}
To:
.homepage-content-wrapper{
width: 1280px;
margin: 0 auto;
height: 100%;
}
You should see your login form remain to the right of your place holder image even when your viewport is under 1280px wide.