I am working on sample blog design and trying to learn css & html with flex and grid. I am trying to set back ground image to the grid 1,3,5 . I tried giving the class and add url with image but unable to do. I have provided my code for your reference. it silly question but with grid I am unable to get it..
Code pen link : code pen link
I tried something like this :
.bg{
background: url(1.jpg);
}
tried to assign this bg class to div but didnt work. I tried removing the back ground color from inner grid but it didnt work..
CSS :
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
background: lightgreen;
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url(/image1.jpg);
border: crimson;
display: grid;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item">Home</li>
<li class="nav-item">Article</li>
<li class="nav-item">Article</li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div>1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item">Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item">footer 1</li>
<li class="nav-item">footer 2</li>
<li class="nav-item">footer 3</li>
</ul>
</navbar>
</div>
</body>
</html>
assign bg class to div(1 , 3, 5) and remove the back ground color from inner grid :)
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
background-color: seashell;
}
#page {
display: flex; /*display:flex; not flexbox */
height: calc( 100vh - 30px);
flex-direction: row; /* Change flex-direction to column*/
}
#sidebar {
margin-left: 2.5rem;
margin-right: 2.5rem;
width: 100px;
}
#content{
flex:1;
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: auto;
background-color: #2196F3;
padding:10px;
}
#inner-grid{
flex:1;
display : grid ;
grid-template-rows:2fr 2fr;
grid-gap:5px;
}
#inner-grid > div {
/*background: lightgreen;*/
padding: 8px;
border: black;
}
.one {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
display: grid;
}
.bg{
background-image: url('https://picsum.photos/200/300') !important;
background-repeat: no-repeat;
background-size: cover;
border: crimson;
display: grid !important;
}
.two {
background-color: blue;
}
.three {
background-color: purple;
}
.box {
background-color: #444;
grid-template-rows: 5;
grid-template-columns: 10;
color: #fff;
border-radius: 5px;
padding: 30px;
font-size: 150%;
}
.nav-list {
background: #5bb1f9;
box-shadow: 0px 0px 10px var(--clr-gray200);
padding: 1rem 0;
border-radius: var(--radius);
display: flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
align-items: baseline;
}
.nav-item {
list-style: none;
margin-right: 2rem;
text-align: center;
}
.nav-item a {
text-decoration: none;
color: black;
transition: all 200ms ease-in;
text-align: center;
}
.nav-item a:hover {
color: var(--clr-primary-dark);
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog Post</title>
<link rel="stylesheet" href="common.css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
<style>
</style>
</head>
<body>
<div id="header">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-show-count="false"
>Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item">
<script src="https://platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script>
</li>
<li class="nav-item">Home</li>
<li class="nav-item">Article</li>
<li class="nav-item">Article</li>
<li class="nav-item">Login</li>
</ul>
</navbar>
</div>
<div id="page">
<div id="sidebar">
<div>
My profile
</div>
<div>
My interest
</div>
</div>
<div id="content">
<div class="one">
<div id="inner-grid">
<div class="bg">1</div>
<div>2</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">3</div>
<div>4</div>
</div>
</div>
<div class="one">
<div id="inner-grid">
<div class="bg">5</div>
<div>6</div>
</div>
</div>
</div>
</div>
<div id="footer">
<navbar>
<ul class="nav-list">
<li class="nav-item">Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li class="nav-item"> <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
<li class="nav-item">footer 1</li>
<li class="nav-item">footer 2</li>
<li class="nav-item">footer 3</li>
</ul>
</navbar>
</div>
</body>
</html>
Related
So, i am doing this frontend mentor challenge. I have done the mobile first design. My problem is how do i get my navbar to be like this . I have tried using display flex with flex direction row but the mobile design navbar is not changing its shape and size.
My code is producing the navbar like this
Can anyone please tell me what i am doing wrong in the media query that i am not getting the output i desire.
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<script src="https://kit.fontawesome.com/572b4fce3c.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles/style.css">
<title>Frontend Mentor | Shortly URL shortening API Challenge</title>
<!-- Feel free to remove these styles or customise in your own stylesheet đź‘Ť -->
</head>
<body>
<main>
<section class="header">
<!-------- Header Section -------->
<nav>
<img src="/images/logo.svg" alt="logo"></a>
<div class="nav-links" id="navLinks">
<!-- <i class="fa fa-solid fa-xmark"></i> -->
<ul>
<li>Features</li>
<li>Pricing</li>
<li>Resources</li>
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showHideMenu()"></i>
</nav>
<img class='illustration' src="/images/illustration-working.svg" alt="illustration">
<div class="first-section-content">
<h1>More than just <span class="short">shorter links</span></h1>
<p>Build your brand's recognition and get detailed insights on how your links are
performing.</p>
<button class="get-started">Get Started</button>
</div>
</section>
<!-- URL shortening -->
<article class="shorten-details">
<section class="shorten">
<div class="shorten-link">
<input type="text" placeholder="Shorten a link here....">
</div>
<span class="error-msg">Please add a link</span>
<button class="short-it">Shorten It!</button>
</section>
</article>
<!-- URL Copy -->
<article class="url-copy">
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<!-- <div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section>
<div class="hide-url">
<section class="copying-url">
<p class="given-link">https://www.linkedin.com/</p>
<hr>
<div class="return-links">
<p class="small-link">shrtco.de/8RPDKD</p>
<button class="copy">Copy</button>
</div>
</div>
</section> -->
<section class="advanced-stats">
<h2>Advanced Statistics</h2>
<p class="perform">Track how your links are performing across the web with our advanced statistics
dashboard.</p>
<div class="stats">
<div class="stat">
<img class="brand-img" src="/images/icon-brand-recognition.svg" alt="brand-recognition">
<h3>Brand Recognition</h3>
<p class="stat-desc">Boost your brand recognition with each click. Generic links don’t mean a thing.
Branded links help instil confidence in your content.</ class="boost">
</div>
<div class="stat-1">
<img class="brand-img" src="/images/icon-detailed-records.svg" alt="detailed-records">
<h3>Detailed Records</h3>
<p class="stat-desc">Gain insights into who is clicking your links. Knowing when and where people
engage with your content helps inform better decisions.</p>
</div>
<div class="stat-2">
<img class="brand-img" src="/images/icon-fully-customizable.svg" alt="fully-customizable">
<h3>Fully Customizable</h3>
<p class="stat-desc">Improve brand awareness and content discoverability through customizable
links, supercharging audience engagement.</p>
</div>
</div>
</section>
</article>
<article class="boost-links">
<section class="boost">
<h2>Boost your links today</h2>
<button class="get-started-2">Get Started</button>
</section>
</article>
<article class="last-footer">
<section class="footer">
<div class="footer-links">
<div class="footer-link">
<h2>Shortly</h2>
<h3>Features</h3>
<ul>
<li>Link Shortening</li>
<li>Branded Links</li>
<li>Analytics</li>
</ul>
</div>
<div class="footer-link">
<h3>Resources</h3>
<ul>
<li>Blog</li>
<li>Developers</li>
<li>Support</li>
</ul>
</div>
<div class="footer-link">
<h3>Company</h3>
<ul>
<li>About</li>
<li>Our Team</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="socials">
<div class="social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
</section>
</article>
</main>
<script src="script.js"></script>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Nelson Uprety.
</div>
</body>
</html>
CSS code for the header / navbar part:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;700&display=swap');
#import url('css-reset.css');
:root {
--color-cyan: hsl(180, 66%, 49%);
--color-dark-violet: hsl(257, 27%, 26%);
--color-red: hsl(0, 87%, 67%);
--color-gray: hsl(0, 0%, 75%);
--color-grayish-violet: hsl(257, 7%, 63%);
--color-grayish-violet-op: hsl(257, 7%, 63%, 0.3);
--color-very-dark-blue: hsl(255, 11%, 22%);
--color-very-dark-violet: hsl(260, 8%, 14%);
--color-second-bg: hsl(230, 25%, 95%);
--color-white: hsl(0, 0%, 100%);
--font-weight-five: 500;
--font-weight-seven: 700;
}
body {
font-family: 'Poppins',
sans-serif;
}
main {
overflow: hidden;
/* border: 1px solid green; */
max-width: 390px;
height: auto;
margin: 0 auto;
}
/* -------Header Section--------- */
.header {
display: flex;
flex-direction: column;
padding: 30px;
max-width: 350px;
}
.nav {
display: flex;
position: relative;
}
.nav-links {
background-color: var(--color-dark-violet);
width: 330px;
height: 370px;
border-radius: 10px;
position: absolute;
z-index: 2;
transition: 0.3s;
top: 100px;
right: 63px;
visibility: hidden;
}
nav .fa {
display: block;
color: var(--color-grayish-violet);
font-size: 30px;
cursor: pointer;
right: 63px;
top: 30px;
position: absolute;
}
.nav-links ul li {
list-style: none;
padding: 14px;
text-align: center;
display: block;
}
.nav-links ul li a {
text-decoration: none;
color: var(--color-white);
font-weight: var(--font-weight-seven);
font-size: 1.2rem;
padding: 10px 100px;
border-radius: 25px;
}
.nav-links ul li a:hover {
background-color: var(--color-cyan);
color: var(--color-white);
}
.nav-links ul li:nth-child(3) {
border-bottom: 1px solid var(--color-grayish-violet-op);
padding-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
margin-top: 15px;
margin-bottom: 15px;
}
.illustration {
position: relative;
right: -50px;
transform: scale(1.6);
margin-top: 100px;
right: -90px;
z-index: 1;
display: block;
}
.first-section-content {
margin-top: 100px;
transition: 0.3s;
}
.first-section-content.menu-open {
margin-top: 130px;
transition: 0.3s;
}
.first-section-content h1 {
font-size: 2.67rem;
font-weight: var(--font-weight-seven);
color: var(--color-very-dark-blue);
margin-bottom: 20px;
margin-left: 9px;
width: 350px;
line-height: 1.2;
}
.short {
margin-left: 15px;
}
.first-section-content p {
font-size: 1rem;
color: var(--color-grayish-violet);
font-weight: var(--font-weight-five);
margin-bottom: 35px;
margin-left: 6px;
width: 350px;
line-height: 2;
letter-spacing: 0.7px;
overflow: hidden;
}
.get-started {
background-color: var(--color-cyan);
color: var(--color-white);
border: none;
padding: 14px;
font-weight: var(--font-weight-seven);
width: 190px;
border-radius: 30px;
cursor: pointer;
margin-left: 70px;
}
#media (min-width:768px) {
body {
overflow-y: scroll;
min-height: 100vh;
overflow-x: hidden;
}
main {
height: 100vh;
max-width: 100%;
overflow: scroll;
}
.header {
display: flex;
/* align-items: center; */
/* flex-direction: row; */
width: 100%;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
gap: 2.3rem;
padding: 2.9rem 9.2rem;
position: relative;
}
.nav-links {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.nav-links ul li {}
.nav-links ul li a {
display: flex;
display: inline;
flex-direction: row;
background-color: transparent;
visibility: visible;
color: var(--color-gray);
}
nav .fa {
display: none;
}
}
display: flex; needs to be on the ul inside the .nav-links div - that ul is the element which contains the navigation items.
.page-wrapper {
grid-template-columns: 100%;
}
.middle-wrapper {
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding: 25px;
border: 3px solid #ffffff;
}
.main-page-content {
margin-bottom: 0.5rem;
padding: 0;
}
.title1 {
font-family: tahoma;
font-size: 20px;
text-align: center;
margin-bottom: 2rem;
}
p {
margin: 1rem 0 2rem;
}
.callout {
background: rgba(238, 238, 238, 0.395);
border-radius: var(--elem-radius);
box-shadow: rgb(95, 95, 95);
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem 0;
padding: 2rem;
text-align: left;
}
.boxed {
border: 1px solid rgb(78, 78, 78) ;
padding: 1rem;
width: 37em;
margin-left: auto;
margin-right: auto;
}
.textinrect {
word-spacing: 100px;
}
.sidebar {
grid-area: sidebar;
padding-top: 3rem;
max-width: 200px;
}
.list {
list-style: none;
padding-left: 0.5em;
}
.sidebar-heading {
color: Black;
font-size: 18px;
font-family: tahoma;
letter-spacing: 1.5px;
margin-left: 7px;
}
.subject-header {
color: rgba(0, 0, 0, 0.749);
font-size: 14px;
font-family: tahoma;
letter-spacing: 1px;
}
.subject {
margin-bottom: 1em;
}
.toggle {
margin-bottom: 15px;
}
.sub-topic {
color: black;
}
.toggle1 {
padding-top: 1em;
}
.toggle0 {
list-style: none;
padding-left: 1.5em ;
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fortest.css">
</head>
<body>
<div class="page-wrapper">
<div class="main-wrapper">
<div class="middle-wrapper">
<article class="main-page-content">
<h2 class="title1">How to create an HTML website</h2>
<div class="section1">
<p>1. Nav Bar</p>
<div class="callout">
<div class="boxed">
<div class="textinrect">
Yourwebsitename home about page3
</div>
</div>
</div>
</div>
</article>
</div>
<aside class="sidebar">
<nav class="sidebar-inner">
<p class="sidebar-heading">Subjects</p>
<div>
<ol class="list">
<li class="subject">
<a href="#">
<h5 class="subject-header">Subject1</h5>
</a>
</li>
<li class="toggle">
<details>
<summary>
All the school sunjects
</summary>
<ol class="toggle0">
<li class="toggle1">
<a class="sub-topic" href="#">The molecular mass and power</a>
</li>
<li class="toggle1">
<a class="sub-topic" href="#">the molecular mass and power</a>
</li>
</ol>
</details>
</li>
<li class="toggle">
<details>
<summary>
Not all school subjects
</summary>
</details>
</li>
</ol>
</div>
</nav>
</aside>
</div>
</body>
</html>
My goal is that the sidebar stays on the side at the very beginning of the document on the left side of the main text. For some reason it says down below the main section. I know this is a matter of position but I can not find the correct position. I would deeply appreciate any answer that you may give.
Try this,
#sidebar {
float: left;
width: 208px;
padding-top: 30px;
background-color:#D2D2D2;
margin-left:initial;
/*position: fixed;*/ //remove it
}
#content {
float: left; // change right to left
width: 564px;
padding-top: 30px;
}
I'm trying to recreate FreeCodeCamp's Product Landing Page as a personal project.
For the content below the Get Started button and above the video, I used a grid to try to align them properly. However, I'm having trouble aligning the text (the heads and paragraphs) vertically in their rows. How may I go about doing this? They seem to be sitting at the "bottom" of their rows.
HTML code:
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
According to my experience, If we want to align items(vertically or horizontally) in a grid we can use flex property inside that child element. The following example will help to get an idea.
To vertically align:
align-items:{position}
To horizontally align:
justify-content:{position}
body{
color: #ffff;
}
.content{
display: grid;
grid-gap: 10px;
max-width: 960px;
margin: auto;
text-align: center;
font-weight: bold;
font-size: 50px;
font-family: sans-serif;
grid-template-columns: repeat(3,1fr);
grid-auto-rows:200px;
}
.content div{
background: gray;
padding: 30px;
}
.content div:nth-child(even){
background: green;
}
.one{
display:flex;
align-items: start;
justify-content: start;
}
.two{
display:flex;
align-items: center;
justify-content: center;
}
.three{
display:flex;
align-items: end;
justify-content: end;
}
.four{
display:flex;
align-items: start;
justify-content: center;
}
.five{
display:flex;
align-items: end;
justify-content: center;
}
.six{
display:flex;
align-items: start;
justify-content: end;
}
<html>
<body>
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
</html>
What I did was I made the div surrounding the h1 and p tags into a flexbox
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
And that seemed to work. It was really as simple as that.
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
h1 {
margin-bottom: 0;
}
p {
margin-top: 0;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
<!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 rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
This is the HTML part
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="top-bar">
<div class="container">
<div class="row">
<div class="top-bar-section">
<p class="top-bar-question">Do you have any questions? Call Us 0774747790 </p>
</div>
<div class="row">
<div class="top-nav-bar">
<img class="logo" src="assets/images/logo.png" alt="">
<ul class="top-nav-options">
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Home</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Appointment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Treatment</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Facility</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Gallery</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">About Us</a></li>
<li class="top-nav-option"><a class="top-nav-option-link" href="#">Contact Us</li></a>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="background-image-block">
<img class="background-img1" src="assets/images/background.jpg" alt="">
</div>
</div>
<div class="row">
<div class="box-left">
</div>
<div class="box-mid">
</div>
<div class="box-right">
</div>
</div>
</body>
</html>
This is the CSS
#media only screen and (min-width: 200px) and (max-width: 275px)
{
body
{
background-color: #FFFFFF;
}
.top-bar
{
background-color: #3FA4F6;
width: 500px;
height: 40px;
}
.top-bar-section
{
margin-top: 10px;
width: 375px;
}
.top-bar-question
{
color: white;
font-size: 12px;
padding-left: 12px;
}
.top-nav-bar
{
width: 375px;
height: 100px;
}
.top-nav-bar
{
margin-top: 20px;
}
.logo
{
width: 141px;
margin-bottom: 8px;
padding-left: 15px;
}
.top-nav-option
{
font-size: 17px;
padding: 4px;
font-size: 15px;
list-style: none;
color: black;
}
.background-img1
{
width: 272px;
margin-top: 176px;
height: 180px;
margin-left: 13px;
}
.top-nav-option-link
{
text-decoration: none;
color: black;
}
.top-nav-option-link:hover
{
text-decoration: none;
color: #3FA4F6;
}
.box-left
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-mid
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
.box-right
{
width: 229px;
height: 271px;
background-color: #3FA4F6;
box-shadow: 0 0 5px grey;
margin-left: 38px;
margin-bottom: 10px;
margin-top: 10px;
}
}
The problem is the links are working upto Apartment option. I have figured out problem is with the bootstrap css I'm using.When I remove the bootstrap cdn it works fine but when I put it back It won't work.I need Bootstrap container and row classes cause I have ordered them according to those divs
Remove the margin-top from the class .background-img1 and add margin-top: 176px; to .background-image-block class;
The Links are not working because the div with class .background-image-block was on its top.
I created three separate div elements for [logo, brand name],[product details] and [hamburger icon].
And in the CSS, I applied display=flex and flex=1. But the last two elements are stuck together. Can anyone help me with the mistakes in my code.
My Output
Sorry if the question was too silly, but I'm new to CSS.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container, .nav-links, .hamimg {
align-items: center;
display: flex;
flex: 1;
margin: auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
I have attached the updates.
Currently, on your implement, there is no need to set flex: 1 for all child elements of the header. If you set as follows, the nav, hamburger icon and logo will have the same width and it's not reasonable because their size is different.
I think your goal is to put the nav items in the center of header between logo and hamburger icon.
It can be simply done using margin: 0 auto.
Attached implementation shows the updated header.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.nav-links {
margin: 0 auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
Setting flex: 1 and margin: auto isn't nescessary, just add justify-content: space-between to your header and make sure to remove the default padding from your ul:
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.logo {
height: 20px;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
padding: 0;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
<div class="logo-container">
<img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="hamBurger">
</div>
</header>