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>
Related
*{
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>
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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to make a message with bootstrap to I would like something like it
Image example:
Here is what I tried so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
<div class="panel panel-default">
<div class="panel-heading">message here</div>
</div>
</div>
</body>
</html>
The question is how to get a bootstrap panel style like the image example and also align the user picture to the panel ?
Try this?
Edited to show user image closer
#curvedarrow {
position: relative;
width: 0;
height: 0;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-right: 7px solid #ddd;
border-radius: 1px 3px 17px 0px;
top: 12px;
left: -5px;
width: 12px;
height: 12px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#img-block{
padding-right: 5px;
padding-left: 5px;
width: 60px;
display: inline-block;
}
#message-block{
padding-left: 0;
display: inline-block;
width: calc(100% - 65px);
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div id="img-block">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
</div>
<div class="col-xs-12" id="message-block">
<div class="panel panel-default">
<div id="curvedarrow"></div>
<div class="panel-heading">message here</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here's my basic attempt. I simply used the idea from here: CSS3 moon shape
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<img src="http://www.limestone.edu/sites/default/files/user.png" width="40px;" height="40px;" class="img-responsive img-circle" />
<div class="something">
</div>
<div class="panel panel-default">
<div class="panel-heading">message here</div>
</div>
</div>
<style>
.something {
box-shadow: inset 0px 15px #ddd, inset 0px 15px 1px 1px #ddd;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
top: 10px;
left: -2px;
z-index: -1;
transform: rotate(-250deg);
}
.panel {
position: relative;
top: 5px;
left: -25px;
background: #00728D;
}
.container * {
display: inline-block;
}
</body>
</html>
I'm very new to Bootstrap. I'm working on a very simple website. However, I'm having trouble adding a background-color property to a my rows. I was hoping someone could help me figure out where I'm going wrong
Here's my HTML file
<!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>Pizza Store</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mystyles.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 class="jumbotron">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h1>Pizza Store</h1>
</div>
</div>
</div>
</header>
<div class="containter">
<div< class="row menu-content">
<div class="col-xs-12">
<hr>
</div>
<div class="col-xs-12 col-sm-8">
<h3>Vegetable Pizza</h3>
</div>
<div class="col-xs-12 col-sm-4">
A Pizza with Vegetables on it
</div>
<div class="col-xs-12">
<hr>
</div>
</div>
<div< class="row menu-content">
<div class="col-xs-12">
<hr>
</div>
<div class="col-xs-12 col-sm-8">
<h3>Cheese Pizza</h3>
</div>
<div class="col-xs-12 col-sm-4">
A Pizza with only cheese
</div>
<div class="col-xs-12">
<hr>
</div>
</div>
</div>
</body>
Here's the mystyle.css file
.row-header{
margin:0px auto;
padding:0px auto;
}
.menu-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
background-color: #76A0D3;
}
.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: black;
color: white;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
All classes are working fine except the menu-content class style. In that class, the only thing that's not working is the background-color property. Could someone please explain why that is?
Thanks for the help
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;
}