*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
}
/*---------------------Dashboard-----------------------*/
.dashboard{
position: relative;
width: 100%;
min-height: 100vh;
}
/*--------------------Dashboard Sidebar Begin-----------------------*/
.dashboard-sidebar{
position: fixed;
width: 50px;
min-height: 100vh;
background-color: #2E86C1;
color: white;
padding: 15px 6px;
}
.dashboard-sidebar .dashboard-sidebar-top{
position: relative;
width: 100%;
min-height: 100vh;
justify-content: center;
display: flex;
}
.dashboard-sidebar-top i{
font-size: 17px;
}
/*-----------------------Dashboard Sidebar End--------------------*/
/*--------------------Dashboard Main Content Start----------------------*/
.dashboard-main-content{
position: absolute;
width: calc(100% - 50px);
height: 100vh;
left: 50px;
padding: 10px 15px;
}
.dashboard-main-content .dashboard-app{
position: relative;
background-color: white;
width: 70px;
height: 70px;
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.dashboard-main-content .dashboard-app:hover{
background-color: #EBEDEF;
}
.dashboard-main-content .dashboard-app i{
font-size: 30px;
color: #2874A6
}
.app-name{
font-size: 12px;
font-family: tahoma, sans-serif;
color: #2874A6
}
/*--------------------Dashboard Main Content End----------------------*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="dashboard.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="dashboard"><!--Dashboard begin-->
<div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
<div class="dashboard-sidebar-top">
<i class="bx bxs-dashboard"></i>
</div>
</div><!--Dashboard sidebar end-->
<div class="dashboard-main-content"><!--Dashboard contents begin-->
<div class="dashboard-app"><!--App begin-->
<i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div>
</div><!--App end-->
</div> <!--Dashboard contents end-->
</div><!--Dashboard end-->
<script src="script.js"></script>
</body>
</html>
I have the following dashboard layout. The dashboard has the Begin Design dashboard app which will have many sub components of its own and will have a separate html file called begin-design.html. When the use clicks on it, it will take the user to the design app components. My question is, how can I go about bringing thebegin-design.html app into the dashboard.html file rather than writing the entire begin-design.htmlcomponents in the dashboard.html file? I would like to keep all the components in seperate html files and connect eachother together.
****HTML****
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="dashboard.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="dashboard"><!--Dashboard begin-->
<div class="dashboard-sidebar"><!--Dashboard sidebar begin-->
<div class="dashboard-sidebar-top">
<i class="bx bxs-dashboard"></i>
</div>
</div><!--Dashboard sidebar end-->
<div class="dashboard-main-content"><!--Dashboard contents begin-->
<div class="dashboard-app"><!--App begin-->
<i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div>
</div><!--App end-->
</div> <!--Dashboard contents end-->
</div><!--Dashboard end-->
<script src="script.js"></script>
</body>
</html>
<a href="begin-design.htmk"><i class="bx bx-laptop"></i>
<div class="app-name">
<span>Begin Design</span>
</div></a>
Related
How can I center my icons in the middle of the page and place the text under the icons?
I tried 4 hours and it didn't work ; It would be great if it were based on the Flex box and in the middle of the DIV,
<pre>
<!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="style.css">
<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=Poppins:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.row{
display: flex; /* مهمة */
justify-content: space-between;
.servics{
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
}
.icons{
display: flex;
}
.child{
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
}
.icon1, .icon2, .icon3, .icon4{
color: rosybrown;
line-height: 150px;
}
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="row">
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
</pre>
The following code might help
<!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="style.css">
<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=Poppins:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.servics{
height: 100%;
width: 100%;
padding-top: 2%;
text-align: center;
margin: 10% auto;
/* https://www.youtube.com/watch?v=wfaDzSL6ll0 */
}
.icons{
display: flex;
justify-content: center;
}
.child{
width: 150px;
height: 150px;
background-color: transparent;
border: 4px solid #87CEEB;
border-radius: 100%;
font-size: 50px;
text-align: center;
}
.icon1, .icon2, .icon3, .icon4{
color: rosybrown;
line-height: 150px;
}
</style>
</head>
<body>
<section class="servics">
<h1>Unsere Leistungen</h1>
<div class="icons">
<div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
<div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
<div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
<div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
</div>
</div>
</section>
</body>
</html>
for put any thing in middle of the page you can use >>
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
and is one more way to put text under icon ,
use ur border style on i tag :)
looc at this >>
.ur-icon{
border: & & &;
border-radius: &;
}
looc ^^^ i used border style in icon not div(child icon#)
and after u can put with and height
and for spaces use padding / margin
have nice time . 👋😀
Try this one: its flex layout method. In the past it was a struggle to center page to the middle, nowadays it's changed. Remove all your code in style and replace with the code below:
/* CSS */
body{
display: flex;
justify-content: center;
background: orange;
align-items: center;
height: 100vh;
}
.icons *{
display: inline-block;
}
.servics{
text-align: center;
}
I have started with a website, which uses border-radius in css. But not working as per requirement. It is getting curved on top-left and bottom-left but not on top-right and bottom-right. I have also tried specific border-top-right-radius: but still is not working.
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/*** HEADER ***/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://via.placeholder.com/150') no-repeat;
border-radius: 60px;
width: 150 px;
height: 150px;
margin: 10px 15px 10px 5px;
border-collapse: inherit;
}
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="">
<div id="logo-img" alt="Logo image"></div>
</a>
</div>
</div>
</nav>
</header>
The width should have no spaces between the value and the units, otherwise it is width 100% which is the default one for a block element as div is.
Even though you only distinguish the part with the background at first sight but if you use your browser's inspector tools you can check it.
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/*** HEADER ***/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://via.placeholder.com/150') no-repeat;
border-radius: 60px;
width: 150px;
height: 150px;
margin: 10px 15px 10px 5px;
border-collapse: inherit;
}
<!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">
<title>Big Bite</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="">
<div id="logo-img" alt="Logo image"></div>
</a>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I am having problem with positioning div. I have the following css
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
Here is the javascript:
$("#main").click(function(event){
$("#popup").css({'left':event.pageX, 'top':event.pageY, 'display':'block'});
});
here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="shortcut icon" href="img/favicon-ksu.ico" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main2.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h1">Something Goes arround here <span style="color: red;">Something More here</span></h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="helper" id="helper">
Click Here!
</div>
<div class="popup" id="popup">
oops! You clicked at wrong place. Try again!
</div>
<div class="workspace" id="workspace" contenteditable="true"></div>
<div id="main" class="main">
</div>
</div>
</div>
</div><!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
everything works fine up to here! But when i specify following,
body {
padding: 0px;
width: 1230px;
margin: 0 auto;
}
the div is not positioned at the place of click, div appears somewhere else. I am wondering what is wrong! If someone could help!!!
changing position to fixed from absolute solves this problem.
Instead of this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: absolute;
border-radius: 10px;
z-index: 2;
}
use this:
.popup{
display: none;
text-align: center;
background: #eee;
max-width: 200px;
font-size: 2em;
color: #ff0000;
position: fixed;
border-radius: 10px;
z-index: 2;
}
so I am using bootstrap and trying to create a scenario where half the row is orange, the other half green, but directly in the middle I want the blue hexagon.
The problem I'm having is I can get the blue hexagon to sit in the center on desktop but I want to design it mobile friendly. Any ideas how I could get the hexagon to sit directly in the middle were the two divs meet and stay there when in mobile friendly too?
here's my 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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hexagon | Home</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 red-500">
</div>
<div class="col-md-6 green-500">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6 hex-cont">
<div class="hexagon">
<i class="fa fa-handshake-o logo" aria-hidden="true" style="font-size:7em;"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 white">
<h1 class="text-center wit">Friend Zone</h1>
<h3 class="text-center wit">Mediation Service</h3>
</div>
</div>
</div>
</header>
and here's my relevant CSS
body{
font-family: 'Arima Madurai', cursive;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #64C7CC;
margin: 57.74px 0;
display:block;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 57.74px solid #64C7CC;
}
.hexagon:after {
top: 100%;
margin-left:-83%;
width: 0;
border-top: 57.74px solid #64C7CC;
}
.red-500{
background:#FF4500;
height:250px;
z-index:0;
display:block;
}
.green-500{
background:#4CA64C;
height:250px;
z-index:-5;
}
If you've made the row with orange/green, put the hexagon element in that row, add position: relative; to the row (parent), set the hexagon element to position: absolute; and use a combination of left: 50%; transform: translateX(-50%); to center it.
body{
font-family: 'Arima Madurai', cursive;
}
.row {
position: relative;
}
.hexagon {
position: relative;
width: 200px;
height: 115.47px;
background-color: #64C7CC;
display:block;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 57.74px solid #64C7CC;
}
.hexagon:after {
top: 100%;
margin-left:-83%;
width: 0;
border-top: 57.74px solid #64C7CC;
}
.red-500{
background:#FF4500;
height:250px;
z-index:0;
display:block;
}
.green-500{
background:#4CA64C;
height:250px;
z-index:-5;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hexagon | Home</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 red-500">
</div>
<div class="hexagon">
<i class="fa fa-handshake-o logo" aria-hidden="true" style="font-size:7em;"></i>
</div>
<div class="col-md-6 green-500">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-6 hex-cont">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 white">
<h1 class="text-center wit">Friend Zone</h1>
<h3 class="text-center wit">Mediation Service</h3>
</div>
</div>
</div>
</header>
I've made div with bootstrap class attribute center-block and I want to align it vertically but nothing is working only manually adding margin to the div. Any tips how to accomplish this ?
Css code:
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 642px;
height: 642px;
border: 1px solid white;
}
.menu > p{
width: 300px;
height: 300px;
margin: 10px;
float: left;
color: white;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
Html code:
<!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">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body{
background-image: url(img/landscape1.jpg);
background-size: cover;
}
</style>
<title>Website</title>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Logo</h1>
</div>
<div class="center-block menu">
<p id="">demo1</p>
<p id="">demo2</p>
<p id="">demo3</p>
<p id="">demo4</p>
</div>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
The div with the class center-block cant be vertically aligned because its not inside an element that with a greater height. "container-fluid" doesnt have a height, so it will be as high as its content inside (the center-block div). The same goes for container-fluid's parents (body and html tags). So you need to wrap it in a container that is higher. I've made a pen to illustrate.
http://codepen.io/ugreen/pen/GjBWWZ
The magic part is this guy:
.flex {
display: flex;
align-items: center;
height: 100%;
border: 1px solid red;
}
body {
margin-bottom: 31px;
font-family: 'Lato', sans-serif;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 31px;
border-top: 1px solid white;
}
.menu{
width: 640px;
height: 640px;
}
.menu li > p{
width: 200px;
color: white;
text-align: left;
font-size: 28px;
text-shadow: 2px 2px 5px black;
}
ul {
list-style-type: none;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<h1 style="color: white;">Text Logo</h1>
</div>
<ul>
<div class="center-block menu">
<li> <p id="1">demo1</p></li>
<li> <p id="2">demo2</p></li>
<li> <p id="3">demo3</p></li>
<li><p id="4">demo4</p><li>
</div>
</ul>
</div>
<footer class="footer">
<div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
<p class="text-muted">Company all rights reserved © </p>
</div>
</footer>
</body>
</html>