How to align these items on top of each other?

How to align these items on top of each other? - html

I am making a website about Super Smash Bros as a personal project, but I am having an issue. I cannot figure out how to get the videos aligned on top of each other when in mobile view.
I tried display flex but that doesn't seem to be working, the idea was to have them inline when in desktop but when switched to mobile they would change. What do I need to learn?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SmashBrosGuide</title>
<link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="./styles/mobilenav.css">
<link rel="icon" type="image/x-icon" href="./assets/images/smashbrostabicon.png">
<script src="./js/main.js" defer></script>
<script src="https://kit.fontawesome.com/64ae5ea867.js" crossorigin="anonymous"></script>
<!--Mobile Nav-->
<input type="checkbox" name="" id="" class="check">
<ul class="menu-items">
<li>Home</li>
<li>Characters</li>
<li>Stages</li>
<li>Gamemodes</li>
</ul>
<div class="ham-menu">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<!--End of Mobile Nav-->
</head>
<body>
<!--Back to top button-->
<button
type="button" class="btn btn-danger btn-floating btn-lg" id="btn-back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
<!--End of Back to top button-->
<!--Hero-->
<div class="herocontainer">
<!--Nav Bar-->
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</div>
<div class="navcontainer">
<div class="navbar">
<div class="navitem"><img src="./assets/images/homeicon.png" alt="home" class="homeicon"></div>
<div class="navitem"><img src="./assets/images/characters.png" alt="characters" class="charactersicon"></div>
<div class="navitem"><img src="./assets/images/stage.png" alt="stages" class="stageicon"></div>
<div class="navitem"><img src="./assets/images/gamemodes.png" alt="gamemodes" class="gamemodesicon"></div>
</div>
</div>
<!--End of Nav-->
<!--Logo-->
<div class="flex-center">
<div class="smashlogo">
<img src="./assets/images/smashlogo.png" class="smashlogoimage">
</div>
</div>
</div>
<!--End of Hero-->
<!--Body-->
<div class="body">
<div class="content">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<h1>Light or Dark Mode</h1>
</div>
<div class="main">
<div class="info">
<h1 class="header">World Of Light:</h1>
<div class="iframe-1">
<iframe width="50em" height="30em" src="https://www.youtube.com/embed/WShCN-AYHqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="info">
<h1 class="header">Newest Character:</h1>
<div class="iframe-1">
<iframe width="50em" height="30em" src="https://www.youtube.com/embed/82Q2XTJ8jWk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
<div class="info">
<h1 class="header">Most Popular Video:</h1>
<div class="iframe-1">
<iframe width="50em" height="30em" src="https://www.youtube.com/embed/dKR_w6C5A5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
<!--End Of Body-->
<!--Footer-->
<footer>
<div class="footer--flex-container">
<div class="footer--flex-item">
<h2 class="footer--headline1">Navigate</h2>
<ul>
<li>Home</li>
<li>Characters</li>
<li>Stages</li>
<li>Gamemodes</li>
</ul>
</div>
<div class="footer--flex-item">
<h2 class="footer--headline2">Useful Links</h2>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Super_Smash_Bros." target=”_blank>What is SSBU</a></li>
<li>FAQ</li>
</ul>
</div>
<div class="footer--flex-item">
<h2 class="footer--headline3">Other</h2>
<ul>
<li>Sitemap</li>
<li>Info</li>
<li>What is this site about</li>
</ul>
</div>
<div class="footer--flex-item">
<h2 class="footer--headline4">Search</h2>
<form><input type="Search" id="fname" name="fname" placeholder="Search"></form>
</div>
</div>
</footer>
<!--End of footer -->
</body>
</html>
* {
padding: 0;
margin: 0;
font-family: Geonik;
}
#font-face {
font-family: Geonik;
src: url(../assets/fonts/ckhans-fonts-geonik-pro-regular-demo.otf);
}
#font-face {
font-family: Nexa;
src: url(../assets/fonts/NexaText-Trial-Regular.ttf);
}
body {
background-color: rgb(58, 58, 57);
}
html {
scroll-behavior: smooth;
}
/*Back To Top*/
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 30px;
display: none;
height: 5em;
width: 5em;
border-radius: 5em;
border: 0.3em solid white;
background-color: rgb(19, 20, 41);
color: white;
-webkit-text-stroke-color: black;
z-index: 2;
transition: all .2s ease-in-out;
}
#btn-back-to-top:hover {
transform: scale(1.1);
}
/*Hero*/
.herocontainer {
background-position: center;
width: 100%;
height: 100vh;
background-size: cover !important;
background-repeat: no-repeat;
}
.flex-center {
height: 87.5vh;
display: flex;
justify-content: center;
align-items: center;
}
.smashlogoimage {
width: 100%;
transition: all .2s ease-in-out;
}
.smashlogoimage:hover {
transform: scale(1.1);
}
.smashlogo {
width: 25em;
padding: 0 20% 0 20%;
}
/*Navbar*/
.navcontainer {
height: 12.5vh;
display: flex;
min-height: 12.5vh;
max-height: 12.5vh;
}
.navbar {
height: 100%;
width: 40%;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 10%;
margin-top: 2%;
}
.navitem {
background-image: url('../assets/images/box.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 6vw;
width: 6vw;
display: flex;
justify-content: center;
align-items: center;
transition: all .2s ease-in-out;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.384);
}
.navitem:hover {
transform: scale(1.1);
filter: grayscale(1);
}
/*Individual Icons*/
.homeicon {
width: 50%;
height: 48%;
}
.charactersicon {
width: 32%;
height: 51%;
}
.stageicon{
width: 54%;
height: 52%;
}
.gamemodesicon {
width: 48%;
height: 50%;
}
/*Background*/
.crossfade > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: -1;
}
.crossfade > figure:nth-child(1) { background-image: url('../assets/background/pokemonbackground.png'); }
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('../assets/background/charizardbackground.png');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('../assets/background/snakebackground.png');
}
.crossfade > figure:nth-child(4) {
animation-delay: 18s;
background-image: url('../assets/background/terrybackground.png');
}
.crossfade > figure:nth-child(5) {
animation-delay: 24s;
background-image: url('../assets/background/bayonettabackground.png');
}
/*Body*/
.body {
height: 100vh;
}
.content {
height: 100vh;
/* border: 2px dotted red; */
}
.info {
width: 30%;
/* border: 2px dotted red; */
height: 65%;
background-color: beige ;
border-radius: 2em;
margin-top: 5em;
}
.iframe-1 {
/* border: 2px dotted red; */
height: 100%;
width: 103%;
}
iframe {
height: 100%;
width: 100%;
border-radius: 2em;
}
.header {
color: black;
text-align: center;
font-family: Nexa;
font-size: 1.6em;
}
.main {
/* border: 2px dotted red; */
display: flex;
height: 50vh;
gap: 2.5em;
justify-content: center;
}
/*Footer*/
li {
transition: all .2s ease-in-out;
width: 0em;
}
li:hover {
transform: scale(1.1);
}
input[type=Search] {
height: 4em;
}
.footer--flex-container {
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
background:rgba(0, 0, 0, 0.384);
color: white;
padding-top: 0.75em;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
}
.footer--flex-item {
margin-left: 3em;
}
.footer--headline1 {
color: #F31E2C;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 1.65em;
}
.footer--headline2 {
color: #18cf54;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 1.65em;
}
.footer--headline3 {
color: #e59815;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 1.65em;
}
.footer--headline4 {
color: #2883ec;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 1.65em;
}
.flex-footer > ul > li:nth-child(n+1):nth-last-child(n+4) {
background-color: white;
}
.footer--flex-item {
flex:1;
}
.footer--flex-item * {
list-style: none;
min-width: 10rem;
}
.footer--flex-item > ul > li {
padding-bottom: 0.9em;
}
.footer--flex-item a {
color: white;
text-decoration: none;
}
.footer--flex-item a:hover {
color: white;
}
/*Animations*/
#keyframes
imageAnimation { 0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
/* Media */
#media only screen and (max-width: 820px) {
.navbar {
display: none;
}
.herocontainer {
background-position: right;
background-image: url('../assets/background/mobilebackground.webp');
width: 100%;
height: 100vh;
background-size: cover !important;
background-repeat: no-repeat;
}
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 30px;
display: none;
height: 3em;
width: 3em;
border-radius: 5em;
border: 0.3em solid rgb(255, 255, 255);
background-color: rgb(19, 20, 41);
color: white;
-webkit-text-stroke-color: black;
z-index: 2;
}
.crossfade > figure {
display: none;
}
.crossfade > figure:nth-child(1) { display: none;}
.crossfade > figure:nth-child(2) {
display: none;
}
.crossfade > figure:nth-child(3) {
display: none;
}
.crossfade > figure:nth-child(4) {
display: none;
}
.crossfade > figure:nth-child(5) {
display: none;
}
/*Body*/
.body {
height: 150vh;
}
.content {
height: 100vh;
/* border: 2px dotted red; */
}
.info {
width: 100%;
/* border: 2px dotted red; */
height: 20%;
background-color: beige ;
border-radius: 2em;
margin-top: 5em;
}
.iframe-1 {
/* border: 2px dotted red; */
height: 100%;
width: 103%;
}
iframe {
height: 100%;
width: 100%;
border-radius: 2em;
}
.header {
color: black;
text-align: center;
font-family: Nexa;
font-size: 1.6em;
}
.main {
border: 2px dotted red;
height: 100vh;
gap: 2.5em;
display: flex;
align-items: baseline;
}
}
/*Scrollbar*/
::-webkit-scrollbar {
width: 0.3em;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/*Light Dark*/
#import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One);
:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
}
[data-theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #161625;
--heading-color: #818cab;
}
body {
font-family: ;
background-color: var(--bg-color);
color: var(--font-color);
max-width: 100%;
margin: 0 auto;
font-size: 1em;
/* border: 2px dotted red; */
}
h1 {
color: var(--heading-color);
font-family: Geonik;
font-size: 2rem;
margin-bottom: 1vh;
}
p {
font-size: 1.1rem;
line-height: 1.6rem;
}
a {
color: var(--primary-color);
text-decoration: none;
border-bottom: 3px solid transparent;
font-weight: bold;
&:hover, &:focus {
border-bottom: 3px solid currentColor;
}
}
/*slider switch css */
.theme-switch-wrapper {
display: flex;
align-items: center;
h1 {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: #66bb6a;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

#media only screen and (max-width: 820px) {
.navbar {
flex-direction: column;
}
Is that what you were looking for ?

Related

div position problem i want this hello text under the pricing section

div position problem i want this hello text under the pricing section`
please help me to solve this problem
i am using different div but it still show me same result
div position problem i want this hello text under the pricing sectiondiv position problem i want this hello text under the pricing section div position problem i want this hello text under the pricing section
#import url("https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght#100&family=Poppins:wght#300;400;500;600&family=Roboto:wght#300&family=Silkscreen&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
body {
background: #161c41;
}
.gallery {
position: relative;
float: left;
/* display: flex; */
}
.cardBx {
width: 100%;
/* min-height: 100%; */
/* display: flex; */
/* flex-wrap: wrap; */
justify-content: center;
align-items: center;
float: left;
}
.cardBx .card {
width: 280px;
border-radius: 10px;
margin: 20px 40px;
background: #1b2141;
overflow: hidden;
}
.cardBx .card img {
width: 100%;
height: 250px;
object-fit: cover;
}
.cardBx .card .content {
padding: 10px;
}
.cardBx .card .content h4 {
color: white;
margin: 15px 0;
}
.cardBx .card .progress-line {
position: relative;
height: 10px;
width: 100%;
background-color: #35407e;
margin-bottom: 15px;
border-radius: 10px;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.cardBx .card .progress-line span {
position: absolute;
height: 100%;
width: 80%;
border-radius: 10px;
background: #1aeeef;
transform: scaleX(0);
transform-origin: left;
animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
#keyframes animate {
100% {
transform: scaleX(1);
}
}
.cardBx .card .info {
border-top: 2px solid #35407e;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.cardBx .card .info p {
font-size: 1em;
color: white;
}
.cardBx .card .info p span {
color: #1aeeef;
}
.cardBx .card .content .info a {
display: inline-block;
padding: 10px 20px;
margin: 20px 0;
border: 1px solid #1aeeef;
text-decoration: none;
font-weight: 700;
border-radius: 5px;
color: white;
letter-spacing: 1px;
}
.cardBx .card .content .info a:hover {
background: #1aeeef;
border: none;
color: #050e2d;
box-shadow: 0 0 10px #1aeeef;
}
.cardBx {
display: flex;
justify-content: center;
align-items: center;
}
/* ////nav */
nav {
display: flex;
align-items: center;
justify-content: space-between;
background: #05123d;
height: 70px;
text-decoration: none;
}
.logo {
width: 160px;
margin-right: 45px;
margin-left: 10px;
}
.nav-left {
display: flex;
align-items: center;
}
.nav-left ul li {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
cursor: pointer;
list-style: none;
margin-left: 70px;
text-decoration: none;
display: inline-block;
}
.nav-left ul li a {
color: rgb(255, 255, 255);
font-size: 25px;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
text-decoration: none;
padding: 1rem;
}
/* ===========hjbhedbfj======== */
/* html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica", sans-serif;
} */
img {
max-width: 100%;
}
.slider-container {
height: 600px;
width: 100%;
border-top: 2px solid #1aeeef;
border-bottom: 2px solid #1aeeef;
position: relative;
overflow: hidden;
text-align: center;
}
.menu {
position: absolute;
left: 0;
z-index: 900;
width: 100%;
bottom: 0;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50px;
margin: 0 0.2em 1em;
&:hover {
background: red;
}
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-size: cover;
background-position: 50% 50%;
transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
.slide-1 {
background-image: url("https://wallpaperaccess.com/full/625497.jpg");
}
.slide-2 {
background-image: url("https://freefiremobile-a.akamaihd.net/common/web_event/official2.ff.garena.all/img/20228/29bfa3738921a9e9d096f5c4cdfaf297.jpg");
}
.slide-3 {
background-image: url("https://wallpaperaccess.com/full/625497.jpg");
}
/* ==========footer========== */
.bddiv {
display: inline-block;
vertical-align: middle;
color: #1aeeef;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200&display=swap");
</style>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- css link -->
<link rel="stylesheet" href="./shop.css" />
<!-- <link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
/> -->
<title>Shop</title>
</head>
<body>
<nav>
<div class="nav-left">
<img src="./ggh.svg" class="logo" />
<ul>
<li>Home</li>
<li><a>Turnament</a></li>
<li><a>News</a></li>
<li class="shopname"><a>Shop</a></li>
<li><a>About us</a></li>
</ul>
</nav>
<main>
<?php
include './slider/slider.php' ?>
<?php
include 'shopdb.php';
$sql="SELECT * from shop_table";
$query=mysqli_query($conn,$sql);
while($info=mysqli_fetch_array($query)){
?>
<div class="gallery">
<div class="cardBx">
<div class="card" data-item="pc">
<img src="shop/<?php echo $info['imageup']; ?>" alt="loding">
<div class="content">
<h4><?php echo $info['gamename']; ?></h4>
<div class="progress-line"><span></span>
</div>
<div class="info">
<p>pricing<br /><span> <?php echo $info['price']; ?></span></p>
Buy Now
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
<div class="bddiv"> hello</div>
</main>
</body>
</html>
`

the float made this problem if you want to put your price section in the right , remove float and use this code:
.gallery {
position: relative;
}
.cardBx {
width: 100%;
justify-content: start;
align-items: center;
}

Please Try This
Just add clear:both as style in <div> containing "Hello" text
<div class="bddiv" style="clear:both;"> hello</div>

I just increase the padding-top and padding-left and it works fine, Here's the code of the CSS I changed.
.bddiv {
padding-top: 230px;
padding-left: 60px;
color: #1aeeef;
}
Just change the bddiv CSS. The Html code is working good

Can't set iframe video to a responsive size centered to page

I am trying to have my iframe video center to page and also resize. I have tried setting the height to a viewpoint height and using 100% for the width. I have also tried to take in the padding to half of the page. When I give the div a height the video resizes to the div - even when the size is smaller. Right now setting the margin and adding a max width works but I am trying to resize the video with no resolve.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a16d2517bd.js" crossorigin="anonymous"></script>
<title>Keith McDonald Plumbing | Commercial</title>
</head>
<body>
<nav>
<div class="logo_header">
<a href="./home.html"><img src="https://cdn-icons-png.flaticon.com/512/2301/2301541.png"
alt="Site Name" /></a>
<h1>Keith McDonald Plumbing</h1>
</div>
<ul class="navigation_links">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="./app.js"></script>
<section id="hero">
<div class="container">
<div class="info">
<h2>Commercial</h2>
</div>
<div class="info">
<h3>We gotcha' covered!</h3>
</div>
<div class="info">
Request Service
</div>
</div>
</section>
<main>
<div class="vid_com">
<iframe src="https://www.youtube.com/embed/rVVsJa6LOeM" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</main>
<footer>
<section class="footer_social">
<div class="social"><i class="fa-brands fa-twitter-square"></i></div>
<div class="social"><i class="fa-brands fa-facebook-square"></i>
</div>
<div class="social"><a href="https://www.instagram.com/?hl=en"><i
class="fa-brands fa-instagram-square"></i></a></div>
</section>
<ul class="navigation_links_footer">
</li>
<!--Align skunk with menu items. Make sure it doesn't glow.-->
<li>ABOUT</li>
<li>COMMERCIAL</li>
<li>EMPLOYMENT</li>
<li>SERVICES</li>
</li>
</ul>
<h4>Contact Us</h4>
<p>keithmcdonald#plumbing.com</p>
</footer>
<div>
</div>
</body>
</html>
CSS
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
html {
scroll-behavior: smooth;
margin: 0 auto;
}
/*
grey:#666666
dark blue: #204060
blue: #336699
red: #F20505
white: #FFFFFF
*/
/* NAV BAR */
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 15vh;
background-color: white;
width: 100%;
}
.logo_header {
color: #204060;
text-transform: uppercase;
letter-spacing: 5px;
display: inline-flex;
padding-right: 10%;
width: 40%;
}
.logo_header a{
padding-right: 3%;
}
.logo_header img{
width: 2em;
padding-right: 3%;
}
.navigation_links {
display: flex;
text-decoration: none;
width: 30%;
background-color: white;
}
.navigation_links a {
color: #204060;
text-decoration: none;
}
.navigation_links a:hover {
font-weight: bold;
text-decoration: underline;
}
.navigation_links li {
list-style: none;
}
.burger {
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: #204060;
margin: 5px;
}
#media screen and (max-width:1736px){
.logo_header a{
padding-right: 3%;
padding-left: 5%;
}
}
#media screen and (max-width:1280px){
.navigation_links {
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x: hidden;
}
.navigation_links {
position: absolute;
right: 0;
height: 26vh;
top: 15vh;
background-color: #204060;
color: #204060;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
transform: translatex(100%);
transition: transform 0.5s ease-in;
}
.navigation_links a {
color: white;
text-decoration: none;
}
.navigation_links li {
padding: 2vh;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav_active{
transform: translatex(0%);
}
/* HERO BOX */
#hero {
height: 65vh;
background: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #336699), url(https://scontent-atl3-2.xx.fbcdn.net/v/t31.18172-8/28516625_1598055023650084_5608745362596556363_o.jpg?_nc_cat=101&ccb=1-7&_nc_sid=e3f864&_nc_ohc=ydWG8T9iKucAX8wEQ-V&_nc_ht=scontent-atl3-2.xx&oh=00_AT9aRGA5yl35nf6769WG8cFz8NlXwhqsaM9HxahErVehJA&oe=62EE5264) no-repeat center / cover;
background-color: #204060;
color: #F20505;
}
#hero img {
height: 80em;
}
#hero h2{
font-size: 50px;
}
#hero h3 {
color: white;
font-size: 25px;
}
.container {
width: 90%;
height: 100%;
max-height: 50px;
padding:8vw;
}
.info {
margin-top: 2vh;
}
.info a {
background-color: #F20505;
text-decoration: none;
color: white;
padding: 5px;
border-radius: 10px;
border: 1px solid #F20505;
}
.info a:hover {
font-weight: bold;
}
#media screen and (max-width:600px){
.logo_header {
display: none;
}
#hero {
height: 675px;
}
.about-column {
display: inline;
}
}
/* HOME INFO SECTION */
main {
height: min-content;
}
.service {
background-color: #336699;
height: min-content;
padding: 5vh 0vh 5vh 0vh;
color: white;
}
.row {
display: flex;
width: 70%;
}
.service-column {
flex: 30%;
text-align: right;
padding: 1em;
}
.about-column {
flex: 70%;
text-align: left;
margin: 3em;
}
main h1 {
margin-top: 2vh;
text-align: center;
height: 10%;
width: 100%;
padding: 1vw;
}
/* Location Section */
.location {
background-color: #336699;
height: min-content;
padding: 1vh 0vh 1vh 0vh;
color: #F20505;
}
.location h1 {
padding: 0 auto;
}
/* Member Logo Section */
.member {
text-align: center;
background-color: #c9dbed;
height: min-content;
padding: 5vh;
}
.member h4, h5 {
color: #F20505;
}
.member_logo img{
width: 300px;
padding: 1vw;
}
.top_button {
color:#F20505;
text-decoration: none;
}
.top_button:hover {
text-decoration: underline;
}
/* Footer */
footer{
background-color: #336699;
height: min-content;
padding: 2vh 0vh;
color: #F20505;
padding: 2vh;
color:#c9dbed;
}
footer .social {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
box-sizing: border-box;
margin: 0;
padding: 0;
display:inline-block;
}
footer .social i {
text-align: center;
padding-bottom: 25px;
color:#c9dbed;
}
footer .social a {
font-size: 24px;
text-align: center;
text-decoration: none;
list-style: none;
}
footer ul {
text-decoration: none;
list-style: none;
}
footer ul a {
text-decoration: none;
font-weight: 500;
color:#c9dbed;
}
footer ul a:hover {
text-decoration: none;
font-weight: 700;
}
footer h4 {
color:#c9dbed;
margin-top: 2em;
}
/* COMMERCIAL */
.vid_com {
margin: auto;
max-width: 300px;
}
iframe {
width: 100%;
height: 600px;
}
JS
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation_links');
burger.addEventListener('click',() =>{
nav.classList.toggle('nav_active');
});
}
navSlide();

Container is not showing the full grid

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 want the menu to become a hamburger icon once it minimizes to mobile screen

I am trying to make the menu a hamburger icon, 3 layers when I minimize to a mobile screen, but I am doing something wrong, and I don't know why it is not working. The icon isn't supposed to show up until after a minimize to a mobile screen. However, the icon is there, but it's just one line.
I know there is something wrong, but I just cannot pin it.
[The images attached are some guidelines to help me get through the code.]
[1]: https://i.stack.imgur.com/Dc5U5.jpg
[2]: https://i.stack.imgur.com/nwhMo.jpg
[3]: https://i.stack.imgur.com/Et5Uw.jpg
< script type = "text/javascript" >
$(document).ready(function() {
$("header p").click(function() {
$("nav").toggleClass("slideDown");
});
$('.slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
autoplay: true,
autoplaySpeed: 2.5,
dots: true,
});
});
$(window).scroll(function() {
$("header").stop().animate({
top: $(document).scrollTop()
}, 'slow');
});
$("#hamburger").click(function() {
$(this).toggleClass("change");
$("nav").toggleClass("slideDownFurther");
}); <
/script>
#media screen and (max-width:640px) {
.floatRight,
.floatLeft {
float: none;
}
.slick,
#pinkkimono {
display: block;
width: 95%;
min-width: 95%;
margin: auto;
}
}
#media screen and (min-width:641px) {
#hamburger {
display: none;
}
}
.p {
display: none;
}
#font-face {
font-family: 'agendaimport';
src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2') format('woff2'), url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h3 {
font-family: 'agenda';
font-size: 1.8em;
}
body {
background-image: url("../Demo\ Site\ Stage\ 3\ pt\ 2/images/BRICKSxMORTAR.jpg");
background-size: 200px;
background-color: black;
color: floralwhite;
font-size: 1.2em;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: auto;
margin: auto;
}
a {
color: aquamarine;
font-size: 25px;
}
#wrapper {
width: 80%;
height: auto;
margin: auto;
padding: 1em;
background: #000;
position: relative;
top: 4.5em;
z-index: 0;
}
div {
color: rgb(255, 255, 255);
font-size: 20px;
}
#img {
display: block;
margin: auto;
}
#logo {
display: block;
margin: auto;
width: 60%;
height: auto;
max-width: 200%;
}
nav {
width: 100%;
height: auto;
background: aquamarine;
margin-right: auto;
margin-left: auto;
margin-top: -99em;
padding: 1em 0;
text-align: center;
margin-bottom: 1em;
padding-top: 1em rgb(255, 255, 255);
padding-bottom: 1em white;
color: magenta;
/*border-top: 1px white;
border-bottom: 1px white;*/
transition: margin-top 0.8s ease-in-out;
}
a.menu:link {
display: block;
color: black;
}
a.menu:visited {
color: rgb(6, 8, 8);
text-decoration: none;
}
a.menu.slideDown {
color: magenta;
text-decoration: underline;
background-color: aquamarine;
}
a.menu:active {
text-decoration: underline;
background-color: aquamarine;
}
#magenta {
font-size: 0.8em;
}
#smaller {
font-size: 0.8em;
color: black;
}
footer {
width: 100%;
background-color: floralwhite;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
clear: both;
}
footer p {
margin: auto;
width: 90%;
color: magenta;
}
footer a {
margin: auto;
width: 90%;
color: magenta;
}
footer p:link {
color: black;
}
footer a:link {
color: black;
}
.slick {
width: 50%;
height: auto;
min-width: 200px;
max-width: 500px;
margin: 1.5em;
position: relative;
top: -1em;
}
.slider {
width: 100%;
height: auto;
}
#magentaman {
width: 50%;
height: auto;
min-width: 300px;
max-width: 800px;
margin: 1em;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
#banner {
width: 100%;
height: auto;
background: #000;
border-bottom: 1px solid #fff;
position: fixed;
z-index: +1;
top: 0;
left: 0;
right: 0;
}
header {
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: +1;
}
header p {
width: 99%;
height: auto;
color: black;
background-color: aquamarine;
font-weight: bold;
padding-left: 1%;
}
/*header:hover nav{
margin-top:-1em;
}
header.slideDown nav{
margin-top:-1em;
}*/
.slideDown {
margin-top: -1em;
}
.slideDownFurther {
margin-top: 3em;
}
header:hover p {
color: magenta;
cursor: pointer;
}
h3 {
animation-name: strobe;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#keyframes strobe {
0% {
color: floralwhite;
}
50% {
color: magenta;
}
100% {
color: white;
}
}
#hamburger {
top: 0.95em;
left: 1em;
cursor: pointer;
}
#bar1 {
width: 35px;
height: 5px;
top: 6px;
bottom: 6px;
background-color: aquamarine;
transition-property: 0.5s;
}
#bar2 {
width: 35px;
height: 5px;
top: 6px;
bottom: 6px;
background-color: aquamarine;
transition-property: 0.5s;
}
#bar3 {
width: 35px;
height: 5px;
top: 6px;
bottom: 6px;
background-color: aquamarine;
transition-property: 0.5s;
}
.change #bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change #bar2 {
opacity: 0;
}
.change #bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index.html</title>
<meta name="description" content="The homepage of Bricks and Mortar, Toronto's premiere custom clothing shop." />
<link rel="stylesheet" href="external.css">
<script src="script/jquery-ui.js"></script>
<script src="script/jquery-3.6.0.min.js"></script>
<script src="script/slick/slick.js"></script>
<link rel="stylesheet" href="script/slick/slick.css" />
<link rel="stylesheet" href="script/slick/slick-theme.css" />
<link rel="stylesheets" href="stylesheets/mediaqueries.css">
<script type="text/javascript">
$(document).ready(function() {
$("header p").click(function() {
$("nav").toggleClass("slideDown");
});
$('.slick').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
autoplay: true,
autoplaySpeed: 2.5,
dots: true,
});
});
$(window).scroll(function() {
$("header").stop().animate({
top: $(document).scrollTop()
}, 'slow');
});
$("#hamburger").click(function() {
$(this).toggleClass("change");
$("nav").toggleClass("slideDownFurther");
});
</script>
</head>
<body>
<br>
<div id="banner">
<br>
<div id="hamburger">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
</div>
<img src="images/logo.png" id="logo"></div>
<br>
<br>
<br>
<br>
<div id="wrapper">
<header>
<p>menu</p>
<nav>
<a class="menu" href="OURSTORY.HTML">OUR STORY</a>
<a class="menu" href="#">OUR SERVICES</a>
<a class="menu" href="#">LOCATIONS</a>
<a class="menu" href="F.A.Q.html">F.A.Q</a>
</nav>
</header>
<div id="mission">
<h3 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h3>
<div class="slick floatRight">
<div><img class="slider" src="images/aqua-androgynous.jpg" /></div>
<div><img class="slider" src="images/bandmate-blouses.jpg" /></div>
<div><img class="slider" src="images/sequins-and-stones.jpg" /></div>
<div><img class="slider" src="images/roses-vest.jpg" /></div>
</div>
<p>For too long consumers have been forced to fit into a mould of one kind or another—assigned a size on an arbitrary scale of unrealistic and unhealthy beauty and body standards. In an over-sexualized and Photoshopped fashion market, we offer a different
kind of clothing philosophy.
<br>
<br>
<br> BRICKSxMORTAR strives to connect with the individual and to consult and create custom clothing for them with them in a collaborative manner. By doing so, our fashion studio endeavours to change consumers' perceptions of the current fashion
landscape as well as their own views about their bodies and their fashion choices.
<img class="floatLeft" id="magentaman" src="images/kimono-and-shorts.jpg" />
<br> What does it feel like to wear something especially made for one's body rather than fitting one's body into a predetermined shape? We aim to answer this question a million times over as we help every client move towards a more comfortable
version of themselves.
</p>
<!--end of mission-->
<br>
<br>
<br>
<br>
<br>
<footer>
<h3>
<div class="magenta"></div>
<p>
<div class="smaller" font-size="0.8em">
</p>
</h3>
<p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
<a class="menu" href="mailto:info#bricksxmortar.com" style="color:magenta"> <u>info#bricksxmortar.com</u></a>
</p>
</footer>
</div>
<!--end of wrapper-->
</html>
</body>

Try making a media query only when the width of the page changes (minimizes).
#hamburger {
display: none
}
#media screen and (max-width:641px) {
#hamburger {
display: inherit;
}
}

I hope this can help, I remove the unwanted jquery from your code because its shows a console error. if you want menu responsive menu then visit this Link
$(document).ready(function() {
$("header p").click(function() {
$("nav").toggleClass("slideDown");
});
$(window).scroll(function() {
$("header").stop().animate({
top: $(document).scrollTop()
}, 'slow');
});
$("#hamburger").click(function() {
$(this).toggleClass("change");
$("nav").toggleClass("slideDownFurther");
});
});
#media screen and (min-width:641px) {
#hamburger {
display: none;
}
}
.p {
display: none;
}
#font-face {
font-family: 'agendaimport';
src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2') format('woff2'), url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
h3 {
font-family: 'agenda';
font-size: 1.8em;
}
body {
background-image: url("../Demo\ Site\ Stage\ 3\ pt\ 2/images/BRICKSxMORTAR.jpg");
background-size: 200px;
background-color: black;
color: floralwhite;
font-size: 1.2em;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: auto;
margin: auto;
}
a {
color: aquamarine;
font-size: 25px;
}
#wrapper {
width: 80%;
height: auto;
margin: auto;
padding: 1em;
background: #000;
position: relative;
top: 4.5em;
z-index: 0;
}
div {
color: rgb(255, 255, 255);
font-size: 20px;
}
#img {
display: block;
margin: auto;
}
#logo {
display: block;
margin: auto;
width: 60%;
height: auto;
max-width: 200%;
}
nav {
width: 100%;
height: auto;
background: aquamarine;
margin-right: auto;
margin-left: auto;
margin-top: -99em;
padding: 1em 0;
text-align: center;
margin-bottom: 1em;
padding-top: 1em rgb(255, 255, 255);
padding-bottom: 1em white;
color: magenta;
/*border-top: 1px white;
border-bottom: 1px white;*/
transition: margin-top 0.8s ease-in-out;
position: absolute;
left: 0;
}
a.menu:link {
display: block;
color: black;
}
a.menu:visited {
color: rgb(6, 8, 8);
text-decoration: none;
}
a.menu.slideDown {
color: magenta;
text-decoration: underline;
background-color: aquamarine;
}
a.menu:active {
text-decoration: underline;
background-color: aquamarine;
}
#magenta {
font-size: 0.8em;
}
#smaller {
font-size: 0.8em;
color: black;
}
footer {
width: 100%;
background-color: floralwhite;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
clear: both;
}
footer p {
margin: auto;
width: 90%;
color: magenta;
}
footer a {
margin: auto;
width: 90%;
color: magenta;
}
footer p:link {
color: black;
}
footer a:link {
color: black;
}
.slick {
width: 50%;
height: auto;
min-width: 200px;
max-width: 500px;
margin: 1.5em;
position: relative;
top: -1em;
}
.slider {
width: 100%;
height: auto;
}
#magentaman {
width: 50%;
height: auto;
min-width: 300px;
max-width: 800px;
margin: 1em;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
#banner {
width: 100%;
height: auto;
background: #000;
border-bottom: 1px solid #fff;
position: fixed;
z-index: +1;
top: 0;
left: 0;
right: 0;
}
header {
width: 100%;
height: auto;
top: 0;
left: 0;
position: relative;
z-index: +1;
}
header p {
width: 99%;
height: auto;
color: black;
background-color: aquamarine;
font-weight: bold;
padding-left: 1%;
}
.slideDown {
margin-top: -1em;
}
.slideDownFurther {
margin-top: 3em;
}
header:hover p {
color: magenta;
cursor: pointer;
}
h3 {
animation-name: strobe;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#keyframes strobe {
0% {
color: floralwhite;
}
50% {
color: magenta;
}
100% {
color: white;
}
}
#hamburger {
top: 0.95em;
left: 1em;
cursor: pointer;
}
#bar1 {
width: 35px;
height: 5px;
top: 6px;
bottom: 6px;
background-color: aquamarine;
transition-property: 0.5s;
margin: 5px 0;
}
#bar2 {
width: 35px;
height: 5px;
top: 6px;
bottom: 6px;
background-color: aquamarine;
transition-property: 0.5s;
margin: 5px 0;
}
#bar3 {
width: 35px;
height: 5px;
top: 6px;
bottom: 6px;
background-color: aquamarine;
transition-property: 0.5s;
}
.change #bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-6px, 6px);
}
.change #bar2 {
opacity: 0;
}
.change #bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#media screen and (max-width:640px) {
.floatRight,
.floatLeft {
float: none;
}
.slick,
#pinkkimono {
display: block;
width: 95%;
min-width: 95%;
margin: auto;
}
div#wrapper header p {
display: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index.html</title>
<meta name="description" content="The homepage of Bricks and Mortar, Toronto's premiere custom clothing shop." />
<link rel="stylesheet" href="external.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<br>
<div id="banner">
<br>
<div id="hamburger">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
</div>
<img src="images/logo.png" id="logo"></div>
<br>
<br>
<br>
<br>
<div id="wrapper">
<header>
<p>menu</p>
<nav>
<a class="menu" href="OURSTORY.HTML">OUR STORY</a>
<a class="menu" href="#">OUR SERVICES</a>
<a class="menu" href="#">LOCATIONS</a>
<a class="menu" href="F.A.Q.html">F.A.Q</a>
</nav>
</header>
<div id="mission">
<h3 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h3>
<div class="slick floatRight">
<div><img class="slider" src="images/aqua-androgynous.jpg" /></div>
<div><img class="slider" src="images/bandmate-blouses.jpg" /></div>
<div><img class="slider" src="images/sequins-and-stones.jpg" /></div>
<div><img class="slider" src="images/roses-vest.jpg" /></div>
</div>
<p>For too long consumers have been forced to fit into a mould of one kind or another—assigned a size on an arbitrary scale of unrealistic and unhealthy beauty and body standards. In an over-sexualized and Photoshopped fashion market, we offer a different
kind of clothing philosophy.
<br>
<br>
<br> BRICKSxMORTAR strives to connect with the individual and to consult and create custom clothing for them with them in a collaborative manner. By doing so, our fashion studio endeavours to change consumers' perceptions of the current fashion
landscape as well as their own views about their bodies and their fashion choices.
<img class="floatLeft" id="magentaman" src="images/kimono-and-shorts.jpg" />
<br> What does it feel like to wear something especially made for one's body rather than fitting one's body into a predetermined shape? We aim to answer this question a million times over as we help every client move towards a more comfortable
version of themselves.
</p>
<!--end of mission-->
<br>
<br>
<br>
<br>
<br>
<footer>
<h3>
<div class="magenta"></div>
<p>
<div class="smaller" font-size="0.8em">
</p>
</h3>
<p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
<a class="menu" href="mailto:info#bricksxmortar.com" style="color:magenta"> <u>info#bricksxmortar.com</u></a>
</p>
</footer>
</div>
<!--end of wrapper-->
</html>
</body>

I wanna make my text Responsive in CSS but I got Problem

I'm using media queries in my codes. I added breakpoint for my header and it worked very well but It doesn't work on my original text.
I thought that I can fix it by changing "pre" tag to "p" but It messed up and destroyed all of spacing on my text
so what do i do?
In my HTML : (main-title is a class of heading and original text is a class for "pre" tag)
In my CSS: my media queries. I tired to do on 768px screen first but it didn't work. same as other resolutions
/* Navbar starts ===============================================================================*/
body{
padding:0px;
margin:0px;
overflow-x: hidden;
}
.container{
width: 100%;
height:78px;
position: relative;
background-color: rgb(39, 44, 52);
z-index: 1;
}
.logo{
position: absolute;
padding:0.6%;
padding-top: 0.2%;
}
.nav-list{
font-family: 'Noto Serif', serif;
position: absolute;
right: 0px;
top: 1%;
display: flex;
padding:1.0%;
z-index: 1;
}
.nav-list a{
margin: 15px;
text-decoration: none;
color: #80e560;
transition: color 400ms ease-in-out;
}
.nav-list a:hover{
color: #a8fbfc;
}
.nav-list ul{
list-style-type: none;
}
.hamburger{
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;
}
.hamburger div{
width: 20px;
height: 2px;
background-color: #80e560;
margin: 3px;
margin-left: 50%;
transition: transform 210ms ease-in-out;
}
.sidemenu{
position: absolute;
right: 0px;
width: 40%;
height: 100%;
width: 20%;
background-color: rgb(39, 44, 52);
transform:translateX(100%);
transition:transform 500ms;
z-index: 1;
}
.side-items{
height:80%;
justify-content:space-between;
position: absolute;
display: flex;
flex-direction: column;
font-family: 'Noto Serif', serif;
align-items : space-between;
}
.side-item{
list-style-type: none;
}
.side-item a{
color: white;
text-decoration: none;
transition: color 500ms ease-in-out;
}
.side-item a:hover{color:#80e560;}
#media screen and (max-width:1500px){
.logo{padding-top: 0.3%;}
}
#media screen and (max-width:768px){
.nav-item{
display: none;
}
.hamburger{
display:inline;
bottom: 12px;
right: 35px;
}
.side-items{
right: 20%;
}
.nav-list{
padding: 40px;
}
.container{
height: 89px;
}
.logo{padding-top: 2%;}
.main-title{font-size: 3vw;}
.Original-text{font-size: 3vw;}
}
#media screen and (max-width:568px){
.hamburger{
right: 50%;
}
.side-items{
right: 20%;
font-size: 12px;
}
.container{
height: 89px;
}
.main-title{
font-size: 4vw;
padding: 0px;
}
}
#media screen and (max-width:280px)
{
.side-items{
right: 9%;
}
.hamburger{
right: 6%;
}
}
/* Navbar Ends ========================================================================*/
.mid-section{
background-image: url(/img/background.jpg);
background-position:center;
background-size:cover;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
#keyframes colorchange{
0% {
color: rgb(216, 200, 86);
}
45% {
color: rgb(231, 103, 71);
}
50% {
color: rgb(198, 228, 73);
}
65% {
color: rgb(179, 228, 73);
}
73%{
color: rgb(70, 232, 155);
}
85%{
color: rgb(70, 232, 211);
}
100%{
color: rgb(69, 233, 224);
}
}
.main-title{
text-align: left;
padding: 45px;
color: rgb(234, 226, 164);
animation-name:colorchange;
animation-iteration-count: infinite;
animation-duration: 7s;
padding-bottom: 0px;
}
.Original-text{
font-size: 1.8vw;
font-family: 'Sansita Swashed', cursive;
padding-top: 0;
color: gold;
}
<!--Navbar Starts ====================================== -->
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item"><li>Home</li></ul>
<ul class="nav-item"><li>Products</li></ul>
<ul class="nav-item"><li>About</li></ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu" id="sdmenu">
<div class="side-items">
<ul class="side-item"><li>Home</li></ul>
<ul class="side-item"><li>Products</li></ul>
<ul class="side-item"><li>About</li></ul>
</div>
</div>
</header>
<script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#600&display=swap" rel="stylesheet">
<h1 class="main-title">Welcome to the Land of Electronics</h1>
<pre class="Original-text">
This Land Will Show the Future! get any Electronics You need
from us!
eveything is ready for you. direct from manufacture
Original components. with 2 years guarantee
so lets go and and explore or world
</pre>
</div>

Well, using vw over standard font-size units is up to you, but I really discourage you from using it in your projects because it will change the size of your element whenever the viewport width changes and depend on which box and element are you working on and how's your HTML markup structure is, it's gonna be act very differently in different situations.
But the actual problem here is with the order of specificity for your styles, due to this fact whatever comes last will overwrite the first so your queries won't work as expected. To get them to work (In this particular case) you can move all of them to the bottom of your styles.
/* Navbar starts ===============================================================================*/
body {
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
.container {
width: 100%;
height: 78px;
position: relative;
background-color: rgb(39, 44, 52);
z-index: 1;
}
.logo {
position: absolute;
padding: 0.6%;
padding-top: 0.2%;
}
.nav-list {
font-family: 'Noto Serif', serif;
position: absolute;
right: 0px;
top: 1%;
display: flex;
padding: 1.0%;
z-index: 1;
}
.nav-list a {
margin: 15px;
text-decoration: none;
color: #80e560;
transition: color 400ms ease-in-out;
}
.nav-list a:hover {
color: #a8fbfc;
}
.nav-list ul {
list-style-type: none;
}
.hamburger {
position: relative;
cursor: pointer;
display: none;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
transition: width 800ms ease-in-out;
transition: height 800ms ease-in-out;
}
.hamburger div {
width: 20px;
height: 2px;
background-color: #80e560;
margin: 3px;
margin-left: 50%;
transition: transform 210ms ease-in-out;
}
.sidemenu {
position: absolute;
right: 0px;
width: 40%;
height: 100%;
width: 20%;
background-color: rgb(39, 44, 52);
transform: translateX(100%);
transition: transform 500ms;
z-index: 1;
}
.side-items {
height: 80%;
justify-content: space-between;
position: absolute;
display: flex;
flex-direction: column;
font-family: 'Noto Serif', serif;
align-items: space-between;
}
.side-item {
list-style-type: none;
}
.side-item a {
color: white;
text-decoration: none;
transition: color 500ms ease-in-out;
}
.side-item a:hover {
color: #80e560;
}
/* Navbar Ends ========================================================================*/
.mid-section {
background-image: url(/img/background.jpg);
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
#keyframes colorchange {
0% {
color: rgb(216, 200, 86);
}
45% {
color: rgb(231, 103, 71);
}
50% {
color: rgb(198, 228, 73);
}
65% {
color: rgb(179, 228, 73);
}
73% {
color: rgb(70, 232, 155);
}
85% {
color: rgb(70, 232, 211);
}
100% {
color: rgb(69, 233, 224);
}
}
.main-title {
text-align: left;
padding: 45px;
color: rgb(234, 226, 164);
animation-name: colorchange;
animation-iteration-count: infinite;
animation-duration: 7s;
padding-bottom: 0px;
}
.Original-text {
font-size: 1.8vw;
font-family: 'Sansita Swashed', cursive;
padding-top: 0;
color: gold;
}
#media screen and (max-width:1500px) {
.logo {
padding-top: 0.3%;
}
}
#media screen and (max-width:768px) {
.nav-item {
display: none;
}
.hamburger {
display: inline;
bottom: 12px;
right: 35px;
}
.side-items {
right: 20%;
}
.nav-list {
padding: 40px;
}
.container {
height: 89px;
}
.logo {
padding-top: 2%;
}
.main-title {
font-size: 3vw;
}
.Original-text {
font-size: 3vw;
}
}
#media screen and (max-width:568px) {
.hamburger {
right: 50%;
}
.side-items {
right: 20%;
font-size: 12px;
}
.container {
height: 89px;
}
.main-title {
font-size: 4vw;
padding: 0px;
}
}
#media screen and (max-width:280px) {
.side-items {
right: 9%;
}
.hamburger {
right: 6%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>ElectroLand</title>
</head>
<body>
<!--Navbar Starts ====================================== -->
<header>
<div class="container">
<nav>
<div class="logo"><img src="/img/logo.png"></div>
<div class="nav-list">
<ul class="nav-item">
<li>Home</li>
</ul>
<ul class="nav-item">
<li>Products</li>
</ul>
<ul class="nav-item">
<li>About</li>
</ul>
<div class="hamburger" onclick="clk()" id="burger">
<div id="line1"></div>
<div id="line2"></div>
<div id="line3"></div>
</div>
</div>
</nav>
</div>
<div class="sidemenu" id="sdmenu">
<div class="side-items">
<ul class="side-item">
<li>Home</li>
</ul>
<ul class="side-item">
<li>Products</li>
</ul>
<ul class="side-item">
<li>About</li>
</ul>
</div>
</div>
</header>
<script src="/func.js"></script>
<!--Navbar End===========================================-->
<div class="mid-section">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#600&display=swap" rel="stylesheet">
<h1 class="main-title">Welcome to the Land of Electronics</h1>
<pre class="Original-text">
This Land Will Show the Future! get any Electronics You need
from us!
eveything is ready for you. direct from manufacture
Original components. with 2 years guarantee
so lets go and and explore or world
</pre>
</div>
</body>
</html>
Update
Well, since there were some complaints about why we should put redundant code into the answer, I just break it down to just the necessary part of code, which is too short and more readable. 😉
.main-title {
text-align: left;
padding: 45px;
color: rgb(234, 226, 164);
animation-name: colorchange;
animation-iteration-count: infinite;
animation-duration: 7s;
padding-bottom: 0px;
}
.Original-text {
font-size: 1.8vw;
font-family: 'Sansita Swashed', cursive;
padding-top: 0;
color: gold;
}
#media screen and (max-width:768px) {
.main-title {
font-size: 3vw;
}
.Original-text {
font-size: 3vw;
}
}
#media screen and (max-width:568px) {
.main-title {
font-size: 4vw;
padding: 0px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght#600&display=swap" rel="stylesheet">
<h1 class="main-title">Welcome to the Land of Electronics</h1>
<pre class="Original-text">
This Land Will Show the Future! get any Electronics You need
from us!
eveything is ready for you. direct from manufacture
Original components. with 2 years guarantee
so lets go and and explore or world
</pre>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to align these items on top of each other? - html

#media only screen and (max-width: 820px) { .navbar { flex-direction: column; } Is that what you were looking for ?

Related

div position problem i want this hello text under the pricing section

Can't set iframe video to a responsive size centered to page

Container is not showing the full grid

I want the menu to become a hamburger icon once it minimizes to mobile screen

I wanna make my text Responsive in CSS but I got Problem

Categories

Resources