I'm new to this but I feel incredibly sluggish.
Can anyone please describe how I build this front page with HTML / CSS? Mostly need help with the structure of boxes and how they are organized.
Thanks in advance!
Page structure to build
As inferred from the problem statement, you needed to have an html/css layout for the rows and columns inside the image given, so I have tried achieving a layout that may help serve your broader purpose. You may also refer to the codepen link: https://codepen.io/Gritika190694/pen/vYGVNPM
.container{
font-size: 24px;
font-family: arial,sans-serif,helvetica;
text-align: center;
}
.topmost{
display: grid;
grid-template-columns: 50% 50%;
}
.topmost > .left{
grid-row: 1 / span 2;
background-color: skyblue;
height: 150px;
}
.topmost > .right-top{
background-color: orangered;
height: 75px;
}
.topmost > .right-bottom{
background-color: orange;
height: 75px;
}
nav > ul{
display: flex;
justify-content: space-evenly;
align-items: center;
list-style-type: none;
background-color: #eeeeee;
margin: 0;
height: 50px;
}
.below-nav{
display: grid;
grid-template-rows: 150px 150px;
}
.below-nav > .top {
background-color: #a4a4a4;
color: #ffffff;
}
.below-nav > .bottom{
background-color: goldenrod;
}
.cards-wrapper{
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 100px 100px;
}
.card:nth-child(even){
background-color: #cccccc;
}
.card:nth-child(odd){
background-color: skyblue;
}
.bottommost{
height: 50px;
background-color: #a6a6a6;
display: flex;
align-items: center;
justify-content: center;
}
.bottommost > a:link,
.bottommost > a{
text-decoration: none;
color: #ffffff;
}
<html>
<body>
<div class="container">
<div class="topmost" id="topmost">
<div class="left">We got you covered</div>
<div class="right-top">Learn More</div>
<div class="right-bottom">
Join now
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="below-nav">
<div class="top">Your Personal Finnancial safety net online</div>
<div class="bottom">About Us</div>
</div>
<div class="cards-wrapper">
<div class="card">01</div>
<div class="card">02</div>
<div class="card">03</div>
<div class="card">04</div>
<div class="card">05</div>
<div class="card">06</div>
</div>
<div class="bottommost">Scroll To Top</div>
</div>
</body>
</html>
Very simple. You need to use the grid system or flexbox.
I drew over the image with grid containers led out. Just study the grid for a couple of minutes, take out some paper and see how you can organize the grid efficiently.
Related
Just finished a mini project and everything seemed to be going accordingly until I completed the footer this page. For each section, the divs do not stretch to the end, which wasn't an issue before. I'm assuming it's something to do with the pixels on the page?
Notice the gap on the left/right of the screen:
enter image description here
enter image description here
HTML:
<body>
<div class="header">
<div class="header-left">
<div class="logo">Header Logo</div>
</div>
<div class="header-right">
<div class="links-top">
<li>header link one</li>
<li>header link two</li>
<li>header link three</li>
</div>
</div>
</div>
<div class="hero">
<div class="hero-left-head">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes here under the main title. It’s a smaller font and the color is lower contrast.</p>
<button class="hero-button">Sign Up</button>
</div>
<div class="sade">
<img src="https://s3.us-east-1.amazonaws.com/vnda-cockpit/www-streetopia-me/2020/09/11/5f5bfd8c2bb85sade01.jpg" alt="sade" height="200" width="350">
</div>
</div>
<div class="middle">
<div class="title"><h1>Some Information?</h1></div>
<div class="bmw-pics">
<div class="bmw-text">
<img src="https://aprperformance.com/wp-content/uploads/2015/01/BMW_M4_Lip_Installed_LR_7.jpg" alt="puke-green">
<p>Puke Green</p>
</div>
<div class="bmw-text">
<img src="https://cdn.bmwblog.com/wp-content/uploads/2015/03/Yas-Marina-Blue-BMW-F80-M3-Gets-Some-Essential-Updates-7.jpg" alt="yas">
<p>Yas Marina</p>
</div>
<div class="bmw-text">
<img src="https://f80.bimmerpost.com/forums/attachment.php?attachmentid=2671354&stc=1&d=1628858312" alt="Frost White">
<p>Frost White</p>
</div>
<div class="bmw-text">
<img src="https://1c2a8a2161d644d95009-22d26b38e78c173d82b3a9a01c774ffa.ssl.cf1.rackcdn.com/image/projectcars/f80m3/f80_m3_carbon_mirror_covers_7_w705.jpg" alt="Imola Red">
<p>Imola Red</p>
</div>
</div>
</div>
<div class="above-footer">
<div class="above-footer-p1">
<p>If you do what you've always done, then you'll get what you've always had, you dumb buffons!</p>
</div>
<div class="above-footer-p2">
<p>- A Wise Prophet</p>
</div>
</div>
<div class="last-space">
<div class="blue-box">
<div class="action"><strong>Call to action! It's time!</strong></div>
<div class="product-bit">Sign up for our product by clicking the button to your right :)</div>
<button class="last-button">Sign Up!</button>
</div>
</div>
<div class="footer">
<p>Copyright © The Odin Project 2021</p>
</div>
</body>
CSS:
.header {
background-color: #1F2937;
display: flex;
justify-content: space-around;
color: #f9faf8;
font-size: 24px;
padding: 10px;
}
.links-top {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
gap: 16px;
font-size: 20px;
}
a {
text-decoration: none;
color: #f9faf8;
}
p {
font-size: 15px;
}
.hero {
display: flex;
flex-direction: row;
background-color: #1F2937;
gap: 50px;
align-items: center;
justify-content: center;
padding-bottom: 30px;
}
.hero-left-head {
font-size: 24px;
color: #f9faf8;
}
.sade {
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.hero-button {
background-color: #3882F6;
color:#f9faf8;
border-radius: 25px;
padding: 0;
height: 30px;
width: 100px;
}
.middle {
display: flex;
flex-direction: column;
color:#1F2937;
}
.bmw-pics {
display: flex;
margin-left: auto;
margin-right: auto;
gap: 20px;
}
.bmw-text img {
height: 260px;
border-radius: 10px;
width: 250px;
}
.bmw-text p {
text-align: center;
}
.title {
text-align: center;
}
.above-footer {
background-color: #e5e7eb;
justify-content: center;
display: flex;
flex-direction: column;
}
.above-footer-p1 p,
.above-footer-p2 p {
font-size: 36px;
}
.above-footer-p2 {
display: flex;
justify-content: flex-end;
margin-right: 50px;
}
.above-footer-p1 p {
font-style: italic;
margin-top: 100px;
color: #1F2937;
display: flex;
align-items: center;
justify-content: center;
}
.last-space {
color: #f9faf8;
display: flex;
justify-content: center;
align-items: center;
}
.blue-box {
display: flex;
background-color: #3882F6;
width: 800px;
margin: 50px;
flex-direction: column;
padding: 50px;
border-radius: 15px;
}
.last-button {
align-self: flex-end;
padding:5px 25px 5px 25px;
color:#F9FAF8;
background-color: #3882F6;
border-radius: 10px;
border-color: #F9FAF8;
justify-content: center;
}
.footer {
background-color: #1F2937;
color: #F9FAF8;
display: flex;
justify-content: center;
align-items: center;
}
Please forgive the extensive css sheet, I'm still learning :) Any help is greatly appreciated!
There's margin on the body. By default the body element has 8px of margin on all sides. You can resolve this by adding this CSS to your project:
body {
margin: 0;
}
Some call this a CSS reset. You can learn more here. Hope this helps!
It's because the body html element (along with many other elements) has margin automatically applied. You can just clear it by adding this to your CSS:
body {
margin: 0px
}
You might want to try using something like Normalize.css for your projects. It really removes a lot of these "why is this happening" issues related to CSS. Also, you should read up on your browser's Devtools (on Chrome, for example, you can click Ctrl+Shift+i and it will open. You can then inspect specific elements and it will tell you why a certain element has a certain style.
For example, you can see that by hovering over the first paragraph of your post that it has a margin-bottom of 1.1em because it is selected by .s-prose p.
Hope that helps!
im trying to get my "Home" and "Clock" link up inside the navigation-bar. I am clueless why the CSS i wrote doesnt solve this issue. Can someone help me out? Ive tried using the grid property for the children of the navigation-bar, but they seem to not fit. Is there a better way to do this?
<link rel="stylesheet" type="text/css" href="styles.css" />
<div class="container">
<div class="header">Home</div>
<div class="navigation">
Navigation
<ul>
<li>Home</li>
<li>Clock</li>
</ul>
</div>
<div class="content-large">
Overview
<div class="grid-item">
<form>
<button class="cal_btn" formaction="">Calendar</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="">Show</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="/tagung/">Add</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="/cal/">Edit</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="">Delete</button>
</form>
</div>
</div>
<div class="content-small">. . .</div>
<div class="content-small">. . .</div>
<div class="footer">Footer</div>
</div>
And the CSS file below
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
font-family: "Quicksand", sans-serif;
font-weight: bold;
font-size: 1.5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 50px 1fr 1fr 100px;
grid-gap: 0.5rem;
padding: 0.5rem;
box-sizing: border-box;
}
.header,
.navigation,
.footer,
.content-large,
.content-small {
padding: 0.5rem;
border: 1px solid black;
}
.container > .header {
grid-column: 1/4;
}
.container > .navigation {
grid-column: 1/4;
background-color: #eee;
}
.navigation ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 1/4;
font-size: large;
}
.nav-element {
font-size: 10px;
background-color: blue;
}
.container > .content-large {
grid-row: 3 / span 2;
grid-column: 1/3;
}
.grid-item {
padding: 1px;
}
.nav-item {
grid-column: 1/3;
}
.container > .cal_btn {
transition-duration: 0.4s;
background-color: #e7e7e7;
color: black;
border: 2px solid black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 300px;
height: 100px;
}
.cal_btn:hover {
background-color: aliceblue;
color: cornflowerblue;
}
.container > .footer {
grid-column: 1/4;
}
Thanks in advance!
P.S. Ive added a link to my Codesandbox here.
The main reason why you are not getting the desired layout is that display: grid; rule for .navigation ul makes the ul a block element, which gets the whole width of its parent. There may be various ways to achieve this. A solution with minimal changes to your code is replacing display: grid; with
display: inline-grid;
width: 200px;
Of course you can adjust the width as you wish.
I have two div nested inside a div .content and inside I have an img.png and I want another div with some boxes in it that will be below the img.png
<div class="navBox">
/*Contact*/
</div>
<div class="navBox">
/*Expertise*/
</div>
<div class="navBox">
/*Projects*/
</div>
In addition, I tried with every possible combination with positioning, padding, margin, I did not try z-index (do not know exactly how to use it) and did not have any good result.
Thanks in advance.
*EDIT: I managed to use other distribution.
.mainBox{
position: relative;
display: flex;
width: 95%;
height: 25vh;
padding-top: 5vh;
justify-content: space-evenly;
align-items: left;
vertical-align: middle;
}
.navBox{
padding-top: 25px;
padding-left: 10px;
padding-right: 10px;
width: 20%;
height: 20vh;
text-align: center;
top: 50%;
background: transparent;
}
.navBox a:hover{
padding-top: 50%;
background: transparent;
color: var(--text-color);
text-decoration: none;
}
a:visited, a:active, a:link{
text-decoration: none;
color: var(--text-color);
}
.navBox a{
vertical-align: middle;
color: var(--text-color);
padding-top: 0.5rem;
}
Next time please share your code and not some screenshot, anyway here is a sample code without using the z-index
HTML
<div class="container">
<div class="your-image"> </div>
<div class="your-boxes"> </div>
</div>
CSS
.container {
display: grid;
grid-template-rows: 1 / 1;
grid-template-columns: 1 / 1;
justify-items: center;
align-items: center
}
.your-image {
background-color: red;
width: 250px;
height: 250px;
grid-area: 1 / 1 / 1 / 1;
}
.your-boxes {
background-color: green;
width: 150px;
height: 150px;
grid-area: 1 / 1 / 1 / 1;
justify-self: center;
}
Basically you create a 1x1 grid and overlap both the divs on the same column and same row.
https://codepen.io/ChrisCoder9000/pen/NWMJdBo
My footer is in fixed position and I am seeing the same view on every device. I also want to fix the LinkedIn logo in white div and orange div above it. So that my website will have same view on every device. but I am not to fix them. Can anyone please help?. I have been trying from last 2 weeks.
I am not able to add my codes here. so attaching the same in screenshot
html code
css code
This how my website currently looks like//i.stack.imgur.com/VNVDN.jpg
This is how I want my website to look like//i.stack.imgur.com/VNVDN.jpg
Actually I made an easy template of what you need. It is pretty simple so I am sure that you will get the point. Please ask me whatever you want.
HTML
<div class="footer-wrapper">
<div class="orange-container">
</div>
<div class="social-container">
<img src="#">
</div>
<div class="black-container">
<p>text text text</p>
<p>text text text</p>
</div>
</div>
CSS
.footer-wrapper {
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: relative;
bottom: 0;
}
.orange-container {
width: 100%;
height: 40px;
background: orange;
}
.social-container {
width:100%;
display: flex;
justify-content: center;
}
.social-container img {
background: red;
width: 30px;
height: 30px;
}
.black-container {
width: 100%;
background: black;
padding-top: 1rem;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
}
.black-container p {
text-align: center;
margin: 0;
}
It is better way to use display:flex or display:grid when you want to center something. Padding is used to make small spaces. Also with the display flex or grid you can easily handle the responsive view of your website pretty easy.
Please I am also advising you to check how to make your questions good Click Here
I hope my answer will be helpful for you, and again if not, don't hesitate to ask anything :)
You can use flexbox. And assign to the main part flex-grow.
* {
padding: 0px;
margin: 0px;
}
.w {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh;
}
.header {
background: orange;
padding: 5px;
}
.main {
flex-grow: 1;
}
.footer {
background: black;
height: 40px;
text-align: center;
color: white;
padding: 5px;
}
<div class="w">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
I am a total beginner in coding & try to create a webpage for a student project, using React.
I have a problem while creating the navbar for the page. How do I position the items (Home, Project, Team, Kontakt) to the right side of the bar?
This is what it currently looks like:[1]: https://i.stack.imgur.com/gUJPi.png
Here is the code I am currently using:
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);
& scss code for the container and the navbar:
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
}
and
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F, 30%);
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 20px;
list-style: none;
float: right;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
Thanks in advance for your help! :) (
Wrap you left elements and use flexbox
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__left">
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);
I would add flex: 1 to the .navbar__title. It will push everything after it to the right as much as it can.
Use flexbox for the items. I did change the code a bit, and made it HTML-CSS friendly, so adapt it for React (className, RouterLinks etc).
Summary: The Nav has display: flex applied and it has 2 child elements (Logo+Title and Menu), and I added justify-content: space-between.
In the <ul> class, I added another display: flex so the items are behaved as a row. By default, the flex-direction is row. If you want anything as column, you must add flex-direction: column.
Here is a working snippet:
* {
list-style: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar__navigation-items ul {
display: flex;
}
.navbar__navigation-items ul li {
margin-right: 10px;
}
<nav class="navbar">
<div class="container">
<div class="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div class="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div class="navbar__navigation-items">
<ul>
<li>Home</li>
<li>Project</li>
<li>Team</li>
<li>Kontakt</li>
</ul>
</div>
</nav>
All you need to do, is to add margin-left: auto for your navbar__navigation-items style.
That will position your navbar__navigation-items to the right and push everything else within the same container to the left.
Another option would be to use flexbox. For your container apply display: flexbox to it. and add justify-content: space-between; and it will also work. But this will control all other elements within container to behave based on that call.
Check below, I've done it and all works.
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F, 30%);
}
.container {
max-width: 115rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
margin-left: auto;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 20px;
list-style: none;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
<nav class="navbar">
<div class="container" >
<div class="navbar__title">
<h2>Our project</h2>
</div>
<div class="navbar__navigation-items">
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
</div>
</div>
</nav>
there is multiple ways to do it but adding
float: right
to
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
float: right;
}
should do the trick,
might need to add width: 100% to the container aswell
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
Edit:
i agree that float is not the best tool but i suggested it because he already use it in his code and it required only css changes but https://stackoverflow.com/a/63427704/8382007 answer with width to 100%
.container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
surely is better