<body >
<div class="outer-container">
<div class="container">
<div class="header">
HOME
ABOUT
CONTACT
RESUME
</div>
<div class="big-heading">
<h2 style=color:white>
I'm Ankit Soni.
</h2>
</div>
<div class="social-media">
<a href="https://www.linkedin.com/in/ankit-soni-991495152/">
<i class="fa fa-linkedin"></i></a>
<a href="https://github.com/ankysony">
<i class="fa fa-github"></i></a>
<a href="mailto:ankit.soni.che16#iitbhu.ac.in">
<i class="fa fa-envelope"></i></a>
</div>
<div class="scrolldown">
<a href="">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
</body>
I cannot find any type of mistake in it but my links in it are not working (no cursor pointer no redirects). Only the last one with arrow circle is working. The links under class social-media are not.
I got a part of css which is creating the error please see to it and suggest the possible way to fix error.
.outer-container .container .big-heading
{
height: 100%;
width: 100%;
display: flex;
font-size: 3em;
position: absolute;
align-items: center;
justify-content: center;
margin-top: -50px;
}
and the entire css code is below.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.outer-container
{
height: 792px;
width: 1440px;
}
h2{
font-family: sans-serif;
}
html {
background: url(../images/banner.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
.outer-container .container .header
{
text-align: center;
word-spacing: 100px;
padding-top: 10px;
}
.outer-container .container .header a
{
font-family: sans-serif;
text-decoration: none;
color: white;
}
.outer-container .container .big-heading
{
height: 100%;
width: 100%;
display: flex;
font-size: 3em;
position: absolute;
align-items: center;
justify-content: center;
margin-top: -50px;
}
.outer-container .container .social-media
{
height: 100%;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.outer-container .container .social-media i
{
padding: 20px;
margin: 20px;
color: white;
text-shadow: 1px 1px 1px #ccc;
font-size: 30px;
}
.outer-container .container .scrolldown
{
height: 100%;
width: 100%;
display: flex;
position: absolute;
align-items: center;
justify-content: center;
margin-top: 300px;
}
.outer-container .container .scrolldown i
{
padding: 20px;
margin: 20px;
color: white;
text-shadow: 1px 1px 1px #ccc;
font-size: 50px;
}
In the header class, your href is not redirecting you anywhere, because you only specified href="#", which neither points to another page nor points to any specific id on your page. You should add your url to to navigate to another page (or, in this case maybe an id on your own page):
href="www.site.com"
Also, it seems like in the social-media class, you did not specify any text for the link, which is why they aren't showing up.
You should put some text between the opening and closing tags:
link text
Cursor: pointer is showing and working fine in your code, to get font awesome work you need to include the library of font awesome.
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body >
<div class="outer-container">
<div class="container">
<div class="header">
HOME
ABOUT
CONTACT
RESUME
</div>
<div class="big-heading">
<h2 style=color:white>
I'm Ankit Soni.
</h2>
</div>
<div class="social-media">
<a target="_blank" href="https://www.linkedin.com/in/ankit-soni-991495152/">
<i class="fa fa-linkedin"></i></a>
<a target="_blank" href="https://github.com/ankysony">
<i class="fa fa-github"></i></a>
<a target="_blank" href="mailto:ankit.soni.che16#iitbhu.ac.in">
<i class="fa fa-envelope"></i></a>
</div>
<div class="scrolldown">
<a href="">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
</body>
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<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>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
i am developing my portfolio website but i came into an error can anyone just help me.
i need to make my social icons responsive.
Here The The Image For Desktop Version.
I need To make it responsive and direction to row for mobile version. Please Help Me.
As You Can See Here The Social Icons Are Not Responsive.
index.html
```
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul>
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
Styles.css
.home{
display: flex;
flex-wrap: wrap;
background: url("/img/banner.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;
font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
width: 100%;
display: flex;
}
.home .max-width .row{
margin-right: 0;
}
.home .home-content .text-1{
font-size: 27px;
}
.home .home-content .text-2{
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3{
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span{
color: #32de84;
font-weight: 500;
}
.home .home-content a{
display: inline-block;
background: #32de84;
color: #fff;
font-size: 25px;
padding: 12px 36px;
margin-top: 20px;
font-weight: 400;
border-radius: 6px;
border: 2px solid #32de84;
transition: all 0.3s ease;
}
.home .home-content a:hover{
color: #32de84;
background: none;
}
.social{
position: absolute;
top: 35%;
right: 5%;
color: #fff;
/* background-color: #ffffff; */
}
.social ul{
list-style: none;
}
.social li{
margin-bottom: 20px;
text-align: center;
}
.circle{
background-color: transparent;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
.social i{
padding-top: 7px;
height: 30px;
width: 30px;
color: #ffffff;
}
#media (max-width: 947px) {
.home .home-content .text-2 {
font-size: 60px;
}
}```
Try thinking of your problem the other way around.
Layout shifts like this are much easier to deal with when working with a 'mobile first' approach. (style the mobile version and then override at a min-width media query to style the desktop version, rather than styling the desktop perfectly and then trying to fold everything down to mobile.)
I've knocked up a quick demo of what should work for you.
This is NOT a direct replication of or fix of your existing code, just a demo of the methods you could use, but hopefully from this demo and the snippets, you should understand what is happening and be able to apply some of these methods to your own code.
The method is entirely done with flex properties.
The socials are no longer absolutely positioned and the unnecessary social wrapper div is removed.
I've added border colors and padding just to more obviously show you whats happening to the box model when you resize your browser.
To view the demo, click 'run code snippet' - but make sure to then also click the 'full page' option otherwise it'd only show you the mobile layout.
Here's the JSFiddle where I created the demo incase it's useful: CLICK TO VIEW FIDDLE
.contentWrapper {
border: 1px solid pink;
padding: 10px;
}
.mainContent {
border: 1px solid blue;
padding: 10px;
}
.social {
border: 1px solid green;
padding: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
gap: 10px;
}
.circle {
background-color: red;
border: 2px solid white;
border-radius: 200px;
height: 35px;
width: 35px;
}
#media screen and (min-width: 948px) {
.myWrapper {
display: flex;
min-height: 100vh;
flex-direction: row;
}
.contentWrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center
}
.mainContent {
width: calc(100% - 55px);
max-width: 1000px;
margin: 0 auto;
}
.social {
display: flex;
flex-direction: column;
justify-content: center;
}
.social ul {
display: flex;
flex: 0 0 55px;
flex-direction: column;
}
}
<section class="myWrapper">
<div class="contentWrapper">
<div class="mainContent">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<ul class="social">
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</section>
To make icons in row
we can do it using #media in the approach
APPROACH
Use flexbox to make your icons in a row
and use grid to make everything in a row when you are on a big screen
you can also set width and then add margin auto to make things centre but using justify-content center is better ---> not told in this answer
<!-- home -->
<section class="home bd-grid" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, Myself</div>
<div class="text-2">Piyush Shrivastava</div>
<div class="text-3">And I'm a <span class="typing"></span></div>
Download CV
</div>
</div>
<div class="social">
<ul class="icons"> // give class icons to make it a flexbox
<li>
<div class="circle">
<i class="fa fa-facebook-f" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-twitter" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="circle">
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</section>```
***css***
.icons{
display: flex;
flex-direction: column;
justify-content: center;
}
#media screen and (min-width: 800px //your mobile screen width) {
.icons {
display: flex;
justify-content:center;
}
.home{
display:grid;
width: 100vw;
gap: 20px;
text-align:center;
grid-template-column:2fr 2fr;
}
This is my website:
How to convert it to like this one example below:
I have tried:
text-align: start;
but that doesn't seem to work,
Is this an HTML or CSS issue?
I already have text-alight: center in my code, but for some reason, it doesn't works, how to solve this issue?
This is my code:
CSS
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
align-items: center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
HTML
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
Thank you in advance, I really appreciate your help
Before anything first understand how the icons www.fontawesome.com works.
There's only one simple thing to understand that is:
That the < i > tag you used here is getting commented out and a svg is been loaded to your code above the tag
<i class="sidebar-icon fas fa-user-graduate"></i>
Solution
Just add these Properties to your html
Padding-left: 30px or as per your requirement;
Justify-content: flex-start;
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
padding-left: 30px;
justify-content: flex-start;
align-items: center
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
New Class to be Added for svg
Added a fixed width for svg.
Margin-right to align the test in the same line
.sidebar ul li a svg{
margin-right: 15px;
width: 25px !important;
}
Run this Code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
display: flex;
justify-content: center;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
padding-left: 30px;
justify-content: flex-start;
align-items: center
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
align-self: flex-start;
}
.sidebar ul li a svg{
margin-right: 15px;
width: 25px !important;
}
<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="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
You can try using flex box and then doing justify-content to be space-between or space-evenly
You should do two things:
Add a new class to every icon in your sidebar, for instance:
<i class="sidebar-icon fas fa-user-graduate"></i>
Style that class by adding horizontal margin. Adjust the pixels as you see fit.
.sidebar-icon {
width: 1.5em !important; /* Prevent uneven width of icons */
margin-left: 16px;
margin-right: 16px;
}
This is the result
i see your problem you just simply need to add some css justify-content:center; , you use display flex that;s why text-align is not working,
<!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="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>pomodone.app</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
/* sidebar starts here*/
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #df7f27;
overflow-x: hidden;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
text-align: center;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: rgb(255, 255, 255);
height: 60px;
display: flex;
align-items: center;
/* my chnages here */
justify-content:center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
margin-right: 5px;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
display: inline-block;
margin-right: 5px;
}
Checkout my code, Hope it will help you. :)
try to add float and margin to the icons
.sidebar ul li a i {
float:left;
margin:0 5px
}
.menuitem {
display: flex;
align-items: center;
justify-content: center;
}
change the div display to flex and try this.
please inform that I put menuitem to all the div class names.
I need two of my main buttons to have the same sizes, I'm still new to web development so I have no clue.
I currently have the following HTML and CSS for the index.html
<body>
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
And then created a center class and 2 different button classes.
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
This is the output:
https://leonisgeweldig.be/stackoverflow/
Give both buttons same width and reduce the font-size
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 100px;
font-size: 10px;
}
.container{
position: relative;
}
.center{
position: absolute;
top: 50%;
left: calc(50% - 210px);
color: white;
}
<body>
<div class="container">
<img height="100%" width="100%" src="https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
</div>
</div>
</body>
You can add a width and an align center to the classes:
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
width: 300px;
text-align: center;
}
.button1 {
padding: 20px 60px;
background-color: #00B056;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
a{text-decoration:none;}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
width: 100px;
font-size: 11px;
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<div>
<img src="img/projectfly-logo.svg">
<p class="center">We're upgrading!</p>
<div class="center">
<h1 class="button1"><i class="fas fa-bell"></i> Update</h1>
<h1 class="button2"><i class="fab fa-paypal"></i> Support the project</h1>
<div>
</div>
Avoid wrapping block level element with inline element.
Also you can define common button class for both these buttons and add another
class which defines
background color to differentiate.
so you can write HTML and css more semantic as:
.button{
padding: 20px;
background-color: #00B056;
border-radius: 300px;
display: inline-block;
width: 150px;
text-align:center;
margin:0 10px;
color: #fff;
text-decoration: none;
}
.background-grey{
background: grey
}
.center{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#" class="button">
<i class="fas fa-bell"></i>
<span> Update</span>
</a>
<a href="#" class="button background-grey">
<i class="fab fa-paypal"></i>
<span> Support the project<span>
</a>
<div>
Simply give them same width.
.button1,
.button2 {
min-width: 250px !important;
text-align: center;
font-size: 18px;
margin: 10px 15px;
box-sizing: content-box;
}
.button1 {
padding: 20px 60px;
background-color: #00B056 !important;
border-radius: 300px;
display: inline-block;
}
.button2 {
padding: 20px 60px;
background-color: grey;
border-radius: 300px;
display: inline-block;
}
.center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
a {
text-decoration: none;
color: white;
}
<p class="center">We're upgrading!</p>
<div class="center">
<a href="#">
<h1 class="button1"><i class="fas fa-bell" aria-hidden="true"></i> Update</h1>
</a>
<h1 class="button2"><i class="fab fa-paypal" aria-hidden="true"></i> Support the project</h1>
<div>
</div>
</div>
<div>
In my project I have footer with image as background.
I set it inside css. You can see it below. It looks nice only in big screen devices but ugly in mobile screen. How to make image responsive?
I don't have much experience in frontend and I would like to know what are the options?
I use bootstrap 4 by the way.
Here the link to jsfiddle.
/*
* START: Footer
*/
footer {
background: url('http://enjoyjumping.kz/static/img//footer.png') no-repeat;
background-size: 100% 100%;
width: 100%;
height: 500px;
bottom: 0;
position: absolute;
}
footer .row {
align-items: flex-end;
}
.flex-container {
display: flex;
flex-direction: column;
}
.flex-container > div {
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.social {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.social__button {
display: block;
width: 70px;
height: 70px;
border-radius: 100%;
border-color: #fff;
position: relative;
cursor: pointer;
margin: 5px;
text-align: center;
}
.social__button i {
display: inline-block;
position: absolute;
left: 0;
top: 0;
height: 70px;
line-height: 70px;
width: 70px;
font-size: 30px;
z-index: 2;
transition: 0.3s;
color: black;
border: 2px solid;
border-radius: 100%;
}
.social__button i:hover {
color: white;
}
.copyright {
margin-bottom: 2.1rem !important;
font-size: 18px;
font-weight: bold;
}
.menu-link {
color: black !important;
font-weight: bold;
}
.menu-link-li {
margin: 10px;
}
.footer-menu {
margin-bottom: 0.7rem !important;
}
/*
* END: Footer
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<footer>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-sm text-center footer-menu">
<ul class="list-unstyled">
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/about/">About Us</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" data-toggle="modal" data-target="#citiesModel" style="cursor: pointer;">Our clubs</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/coaches/">News</a>
</li>
<li class="menu-link-li">
<a class="menu-link no-underline text-uppercase" href="/bonus/">Events</a>
</li>
</ul>
</div>
<div class="col-sm text-center">
<div class="flex-container">
<div class="w-100">
<div class="social">
<a href="#" class="social__button facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="social__button instagram">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="social__button vk">
<i class="fa fa-vk"></i>
</a>
<a href="#" class="social__button youtube">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
<div class="w-100">
<span>+7(701)</span><strong>262-47-50</strong>
</div>
</div>
</div>
<div class="col-sm text-center">
<p class="copyright">Copyright © 2018 example.com</p>
</div>
</div>
</div>
</footer>
You need to change the background-size and background-position attributes of <footer>:
footer {
background: url('http://enjoyjumping.kz/static/img/footer.png') no-repeat top center /cover;
}
See it working: https://jsfiddle.net/7mejchb8/11/
Edit, based on comments: See this example on how to keep footer glued to the bottom of the page on all devices, while allowing it to have a variable height, without using position:absolute: https://jsfiddle.net/websiter/d4n1sxop/
CSS behind it is:
body {
min-height: 100vh;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
header {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
flex-grow: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 500px;
}