Sorry if this is an easy problem to solve, I am still relatively new to polymer. Basically I just can not figure out how to make the cards stack or go side by side based on the available screen space. So in the image I attached, the cards are just stacked on top of one another but I want them to go side by side if there is available screen space.
My testing is just being done on the pre-made polymer demo so the code below is just my first page / "view1".
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
<h1>Game Development<div class="rightSide">Unity3D</div></h1>
<p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
</div>
<div class="card">
<div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
<h1>Game Development<div class="rightSide">Unity3D</div></h1>
<p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
</div>
<div class="card">
<div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
<h1>Game Development<div class="rightSide">Unity3D</div></h1>
<p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
</div>
</template>
<script>
Polymer({
is: 'my-view1'
});
</script>
</dom-module>
You can do it by with simple CSS:
#easy-css paper-card {
width: 300px; margin: 0 auto;
}
#flexbox-css { /* container element */
display: flex;
justify-content: center;
}
You can dig into the iron-flex-layout if you want, it's doing the flexbox way:
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"/>
<link rel="import" href="bower_components/paper-card/paper-card.html"/>
<dom-module id="my-element">
<style>
.container {
#apply(--layout-horizontal);
#apply(--layout-center-justified);
}
</style>
<template>
<div class="container">
<paper-card>center-justified</paper-card>
</div>
</template>
<script src="my-element.js"></script>
</dom-module>
Consider using display: inline-block, which is widely supported.
.card {
display: inline-block; /* layout side by side; wrap if needed */
}
HTMLImports.whenReady(() => {
Polymer({
is: 'my-view1'
});
});
body {
margin: 0;
font-family: Roboto, Noto, sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
<head>
<base href="https://polygit.org/polymer+1.7.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/hardware-icons.html">
</head>
<body>
<my-view1></my-view1>
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
h1 {
display: flex;
justify-content: space-between;
}
iron-icon {
color: #52ae54;
--iron-icon-width: 40px;
--iron-icon-height: 40px;
}
.card {
display: inline-block;
width: 25%;
min-width: 250px;
max-width: 300px;
margin: 24px 7px;
}
.rightSide {
display: inline;
font-weight: normal;
}
</style>
<template is="dom-repeat" items='[1,2,3,4]'>
<div class="card">
<div class="circle"><iron-icon icon="hardware:videogame-asset"></iron-icon></div>
<h1>Game Development [[index]]<div class="rightSide">Unity3D</div></h1>
<p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
</div>
</template>
</template>
</dom-module>
<dom-module id="shared-styles">
<template>
<style>
h1 {
margin: 16px 0;
font-size: 22px;
color: black;
}
.card {
margin: 24px;
padding: 16px;
color: #757575;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.circle {
display: inline-block;
width: 64px;
height: 64px;
text-align: center;
color: #555;
border-radius: 50%;
background: #ddd;
font-size: 30px;
line-height: 64px;
}
</style>
</template>
</dom-module>
</body>
codepen
Have a look at app-grid or iron-flex-layout, they are the solutions avaliable to your from the Polymer team anyway. You could go a number of diffrent ways. Another thing that might be worth a look is paper-card If you scroll down a bit to different layout and content section the paper-card element works out this problem for you.
Related
The look I'm trying to achieve is if you have black text on a white page, but that text runs into an image. The section of text that is over the image changes it's colour.
I have a 'working' (not flexible) example here using a data attribute to grab the same text and set it on the :before element using content:
https://codepen.io/moy/pen/rNeaGbJ
/* General Shit */
body {
color: #000;
font-family: Arial;
font-size: 1.2rem;
line-height: 1.5;
}
h2 {
font-size: 3.6rem;
margin-bottom: 30px;
}
p {
margin-bottom: 30px;
}
.btn {
background: #000;
color: #fff;
display: inline-block;
font-size: 1.2rem;
padding: 15px 60px;
}
img {
width: 100%;
max-width: 100%;
}
/* Grid */
.grid {
clear: both;
margin: 0 auto;
padding: 30px 0;
max-width: 1000px;
}
.grid__item {
box-sizing: border-box;
float: left;
}
.grid--flip .grid__item {
float: right;
}
.grid__item--caption {
padding: 30px 60px;
}
.one-half {
width: 50%;
}
/* Title */
.title-wrap {
display: -webkit-box;
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
margin-left: -60%;
overflow: hidden;
position: relative;
}
.grid--flip .title-wrap {
-webkit-box-pack: end;
justify-content: flex-end;
margin-left: 0;
margin-right: -60%;
}
.title {
color: #000;
}
.grid--flip .title {
color: #fff;
}
.title:before {
color: #fff;
content: attr(data-title);
display: block;
overflow: hidden;
position: absolute;
width: 27.75%;
white-space: nowrap;
}
.grid--flip .title:before {
color: #000;
width: 34.75%;
}
<div class="grid">
<div class="grid__item grid__item--image one-half">
<img src="http://www.fillmurray.com/800/800" />
</div>
<div class="grid__item grid__item--caption one-half">
<div class="title-wrap">
<h2 class="title" data-title="Title goes here">Title goes here</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Shop Collection
</div>
</div>
<div class="grid grid--flip">
<div class="grid__item grid__item--image one-half">
<img src="http://www.fillmurray.com/800/800" />
</div>
<div class="grid__item grid__item--caption one-half">
<div class="title-wrap">
<h2 class="title" data-title="Title goes here">Title goes here</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Shop Collection
</div>
</div>
The problem with this is if...
I adjust the width of the container, all the values are off and it looks broken.
the title is longer and wraps onto multiple lines, it is cut off due to the overflow
And why the widths are what they are on the :before element (if someone could explain that'd be great ha)
So I tried a version using px values instead of % which fixes the issues of changing the container width. However I still have the issue of it not behaving right when text wraps onto 2 lines.
Example (using px): https://codepen.io/moy/pen/JjXoMvb
Can anyone think of a better solution for this? Am I overcomplicating this or missing something obvious?
Edit: PX example wrong incorrect, updated link now.
Use the CSS clip-path property
Example
:root {
--size: 100px;
}
.resizable {
border: 2px solid black;
width: calc(var(--size) * 3);
height: calc(var(--size) * 2);
resize: both;
overflow: auto;
}
.container {
position: relative;
}
.divider {
height: 100px;
}
.title {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
}
img {
width: var(--size);
height: var(--size);
}
.left {
color: blue;
clip-path: polygon(0 0, var(--size) 0, var(--size) var(--size), 0 var(--size));
}
.right {
color: red;
clip-path: polygon(var(--size) 0, 100% 0, 100% 100%, 0 100%, 0 var(--size), var(--size) var(--size));
}
.container-reverse img {
float: right;
}
.container-reverse .left {
clip-path: polygon(100% 0, 100% var(--size), calc(100% - var(--size)) var(--size), calc(100% - var(--size)) 0);
}
.container-reverse .right {
clip-path: polygon(0 0, calc(100% - var(--size)) 0, calc(100% - var(--size)) var(--size), 100% var(--size), 100% 100%, 0 100%);
}
.container-reverse h1 {
text-align: right;
}
<div class="resizable">
<div class="container">
<h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<img src="http://placehold.it/100x100" />
</div>
<div class="divider"></div>
<div class="container container-reverse">
<h1 class="title left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<h1 class="title right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
<img src="http://placehold.it/100x100" />
</div>
</div>
I am trying to set the navigation bar to position: absolute; so it wont make the html move down when expand it. but when I do it, the div below the navigation move up and cover the navigation bar.
html:
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">testing</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#details">About</a>
<a class="nav-item nav-link" href="#abilities">Abilities</a>
</div>
</div>
</nav>
<div class="jumbotron text-center" id="main-jum">
<img src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
</div>
CSS:
.navbar {
position: absolute;
width: 100%;
}
body {
background-color:#000101;
font-family: 'Montserrat', sans-serif;
}
nav a {
color: #00253f!important;
}
nav button{
background-color: #00253f!important;
outline:none!important;
}
#main-jum {
border-radius: 0!important;
padding: 0;
width: auto;
background-color: Black;
}
#main-jum img {
width: 100%;
opacity: 0.5;
}
here's my codepen link:
https://codepen.io/obiwankenoobi/pen/PQpopE?editors=1100
try copy paste whole css if it works then i will explain what i have changed and why
DEMO:
.navbar {
position: relative;
top : 0;
z-index: 10;
width: 100%;
border:1px solid white
}
body {
background-color:#000101;
font-family: 'Montserrat', sans-serif;
}
nav a {
color: #00253f!important;
}
nav button{
background-color: #00253f!important;
outline:none!important;
}
#main-jum {
top:0;
position:absolute;
border-radius: 0!important;
padding: 0;
width: auto;
background-color: Black;
border:1px solid yellow;
}
#main-jum img {
width: 100%;
height:700px;
opacity: 0.5;
}
nav button:hover {
background-color: #003a3f!important;
}
nav a:hover {
color: #003a3f!important;
}
#abilities img {
width: 30vmin;
}
#details {
margin-top:100px;
margin-bottom: 150px;
}
#abilities {
margin-bottom: 300px;
}
p {
font-size: 20px;
color: #00253f;
}
a:hover {
text-decoration: none;
}
footer {
margin-top: 190px;
}
h4 {
font-size: 6vmin;
color: #003a3f;
}
.right {
float: right;
}
.left {
float: left;
}
#media (max-width: 768px) {
#abilities img {
display: block;
margin: 0 auto;
max-width: 100%;
width: 50vmin;
}
#main-jum {
display: block;
}
.col-sm-4 {
margin-top: 25px;
}
p {
font-size: 3.5vmin;
}
#abilities {
margin-bottom: 30px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">ob1wankenoooob1</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#details">About</a>
<a class="nav-item nav-link" href="#abilities">Abilities</a>
</div>
</div>
</nav>
<div id="details" class="container-fluid">
<div class="row">
<div id="about" class="col-md-8">
<h4>about me</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque, finibus vel enim in, laoreet scelerisque ligula. Sed at augue sed lorem sollicitudin pulvinar. Sed ut elit ullamcorper, aliquet ante ac, maximus urna. Sed a nisl eu massa imperdiet pellentesque. Pellentesque non justo vitae libero rhoncus posuere in eu est. Maecenas eu fringilla orci, eu porta ex.</p>
</div>
<div id="more" class="col-md-4">
<h4>more</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum odio mauris, vitae finibus erat imperdiet sit amet. Donec eget pretium turpis. Curabitur elit neque.</p>
</div>
</div> <!--row end-->
</div> <!-- container-fluid end-->
<div class="container">
<div class="row text-center" id="abilities">
<div class="col-sm-4 img-abilities">
<img id="code-img" src="https://cdn3.iconfinder.com/data/icons/luchesa-vol-9/128/Html-512.png">
</div>
<div class="col-sm-4">
<img class="img-abilities" id="responsive-img" src="https://cdn4.iconfinder.com/data/icons/flat-services-icons/512/responsive-web.png">
</div>
<div class="col-sm-4">
<img id="design-img" src="http://trstech.ca/wp-content/uploads/2016/03/design_icon.png">
</div>
</div> <!-- abilities end -->
</div> <!-- container-fluid ends-->
<footer class="text-center">
<p >all rights reserved #ob1wankenoooob1</p>
<p id="year">test</p>
</footer>
<script type="text/javascript">
var date = new Date();
var fullYear = date.getFullYear();
var yearElement = document.getElementById("year");
yearElement.innerHTML = fullYear + ' ©';
</script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal();
sr.reveal('#about', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#main-jum', {
opacity: 0 ,
duration: 2000 ,
reset: true ,
viewFactor: 0.6
});
sr.reveal('#more', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#code-img', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#responsive-img', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
sr.reveal('#design-img', {
duration: 2000,
origin:'bottom',
viewFactor: 0.9 ,
distance:'300px',
reset: true
});
</script>
ok so z-index: 10; was what fixed my code and this is the result i was trying to get. I should have to listen the full instruction here but I ignored z-index: 10; and this was what cause the problem.
.navbar {
position: absolute;
top : 0;
z-index: 10;
width: 100%;
}
body {
background-color:#000101;
font-family: 'Montserrat', sans-serif;
}
nav a {
color: #00253f!important;
}
nav button{
background-color: #00253f!important;
outline:none!important;
}
#main-jum {
border-radius: 0!important;
padding: 0;
width: 100%;
height: auto;
background-color: Black;
}
#main-jum img {
width: 100%;
height:auto;
opacity: 0.5;
}
nav button:hover {
background-color: #003a3f!important;
}
nav a:hover {
color: #003a3f!important;
}
#abilities img {
width: 30vmin;
}
#details {
margin-top:100px;
margin-bottom: 150px;
}
#abilities {
margin-bottom: 300px;
}
p {
font-size: 20px;
color: #00253f;
}
a:hover {
text-decoration: none;
}
footer {
margin-top: 190px;
}
h4 {
font-size: 6vmin;
color: #003a3f;
}
.right {
float: right;
}
.left {
float: left;
}
#media (max-width: 768px) {
#abilities img {
display: block;
margin: 0 auto;
max-width: 100%;
width: 50vmin;
}
#main-jum {
display: block;
}
.col-sm-4 {
margin-top: 25px;
}
p {
font-size: 3.5vmin;
}
#abilities {
margin-bottom: 30px;
}
#main-jum img {
max-width: 100%;
min-height: 400px;
object-fit:cover;
}
}
I would like my navbar to be centered and always be shown at the top of the screen however whenever i think I've fixed it something goes wrong this time the text text is mushed. I would like it to be strait across. Also sometimes when I try to fix it the "Home" button and the image overlap. Thank You.
How it looks centered
How I would like it to look, but not centered
<!doctype html>
<html lang="en">
<head>
<title>The Benjamin Project | Home</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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/assets/css/animate.css">
<link rel="icon" href="/static/assets/img/favicon.ico"> <!-- site icon -->
<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>
<script src="/static/assets/script.js"></script>
<style>
#font-face {
font-family: Panton;
src:url("/static/assets/font/Panton-LightCaps.otf");
}
body {
margin: 0;
padding: 0;
background-color: #8CD28C;
overflow-x: hidden;
min-height:75px;
line-height:75px;
}
.navbar {
margin: 0;
border-radius: 0;
background-color: #8CD28C; /*bg color for tabs on navbar*/
color: #606060; /*text color for tabs on navbar*/
padding: 50px 0px 50px 0px;
font-size: 2em;
font-family:Panton;
border: 0;
animation-duration: 1.5s;
}
.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav .active a:hover {
color: #606060; /*text color for active*/
background-color: #8CD28C; /*bg color for active*/
font-weight: bold;
}
.selected {
text-decoration-line:underline;
}
.navbar .navbar-brand img {
border-radius: 360%; /*rounds image*/
margin-top: -55px;
margin-right: 10px;
}
.navbar-default .navbar-nav li a {
color: #606060; /*non active colors*/
font-weight: bold;
}
.navbar-default .navbar-nav li a:hover {
color: #606060; /*color of text being hovered over*/
background-color: inherit;
text-decoration: underline;
}
.row {
margin-top: 3%;
padding-left: 20%;
padding-right: 20%;
animation-duration: 2s;
}
.row hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #606060;
border-radius: 100%;
margin: 1em 0;
padding: 0;
}
.center{
width:50%;
max-width:960px;
margin:0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-default fadeInDown animated navbar-static-top center">
<div class="container-fluid">
<div class="navbar-header navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <!-- navigation button on mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://imgur.com/k8SlOAa.png" allign="middle" width="125" height="125"></a> <!-- benjamin logo alt="Benjamin Logo"-->
</div>
<div class="collapse navbar-collapse navbar-left center" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active selected">Home</li> <!-- labels on navigation bar -->
<li>Commands & Info</li>
<li>About</li>
<li>Benjamins</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="/static/assets/script.js"></script>
<page class="main">
<div class="row fadeIn animated"><hr></div>
</page>
</body>
</html>
Your issue with making the nav look like your linked image was
.center{
width:50%;
max-width:960px;
margin:0 auto;
}
Here it works fine if removed. You can expand to look at full screen or see it here https://codepen.io/anon/pen/zpZGwZ.
body {
margin: 0;
padding: 0;
background-color: #8CD28C !important;
overflow-x: hidden;
}
.navbar {
margin: 0;
border-radius: 0;
background-color: #8CD28C !important;
/*bg color for tabs on navbar*/
color: #606060;
/*text color for tabs on navbar*/
padding: 50px 0;
margin: 0;
font-size: 1.5em;
font-family: Panton;
border: 0 !important;
animation-duration: 1.5s;
}
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:focus,
.navbar-default .navbar-nav .active a:hover {
color: #606060;
/*text color for active*/
background-color: #8CD28C;
/*bg color for active*/
font-weight: bold;
}
.selected {
text-decoration-line: underline;
}
.navbar .navbar-brand img {
border-radius: 360%;
margin-top: -55px;
margin-right: 10px;
}
.navbar-default .navbar-nav li a {
color: #606060;
/*non active colors*/
font-weight: bold;
font-size: 14px;
}
.navbar-default .navbar-nav li a:hover {
color: #606060;
/*color of text being hovered over*/
background-color: inherit;
text-decoration: underline;
}
.page-padding {
padding: 0 10%;
}
#media (min-width: 992px) {
.page-padding {
padding: 0 13%;
}
.navbar-default .navbar-nav li a {
color: #606060;
font-weight: bold;
font-size: 20px;
}
}
.page-content hr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #606060;
border-radius: 100%;
margin: 1em 0;
padding: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<body>
<div class="page-padding">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://i.imgur.com/k8SlOAa.png" width="125" height="125"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active selected">Home</li>
<li>Commands & Info</li>
<li>About</li>
<li>Benjamins</li>
<li>Login</li>
</ul>
</div>
<!--/.nav-collapse -->
</nav>
<page class="main">
<div class="page-content fadeIn animated">
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac felis facilisis, pellentesque mauris at, accumsan diam. Ut aliquet eros a quam consequat bibendum. Donec lacinia odio aliquet, rutrum magna sit amet, mollis tortor. Nunc in viverra
libero. Phasellus eget tellus eget lorem mollis sodales. Fusce sem eros, molestie eu turpis sed, tempus finibus ipsum. Donec consectetur lectus ac dui gravida, nec tristique eros semper. Proin in vestibulum eros, ut ullamcorper purus. Proin
tincidunt neque urna, non placerat mi tincidunt id. Nulla eros tellus, feugiat tincidunt ex quis, laoreet interdum elit. Morbi dapibus, lacus id viverra posuere, arcu nulla aliquet mi, eu sollicitudin quam massa sed justo. Suspendisse vel lobortis
nibh, non convallis quam.</p>
<hr>
</div>
</page>
</div>
</body>
</html>
I have a little problem with my overlay hover. It's not working well, because when i hover on .portfolio-project (text-layer) the hover on .portfolio-overlay is turning of. It's obvious but how to make it work together?
#portfolio .portfolio-grid {
padding: 0px;
}
#portfolio .portfolio-project-name {
position: relative;
background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 550px;
transition: ease-in .2s;
}
#portfolio .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(222, 39, 94, 0.0);
z-index: 1;
transition: ease-in .3s;
}
#portfolio .portfolio-overlay:hover {
background-color: rgba(222, 39, 94, 0.8);
}
#portfolio .portfolio-project {
z-index: 1;
position: absolute;
left: 15%;
top: 30%;
max-width: 70%;
text-align: center;
color: #fff;
p {
margin-top: 20px;
}
i {
margin-top: 20px;
font-size: 40px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="portfolio">
<div class="container-fluid portfolio-container">
<div class="row">
<a href="#" target="_blank">
<div class="portfolio-grid col-xs-12 col-md-4">
<div class="portfolio-overlay"></div>
<div class="portfolio-project-name">
<div class="portfolio-project">
<h2>Project Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</section>
You can add pointer-events: none; to your #portfolio .portfolio-project rules
#portfolio .portfolio-grid {
padding: 0px;
}
#portfolio .portfolio-project-name {
position: relative;
background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 550px;
transition: ease-in .2s;
}
#portfolio .portfolio-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(222, 39, 94, 0.0);
z-index: 1;
transition: ease-in .3s;
}
#portfolio .portfolio-overlay:hover {
background-color: rgba(222, 39, 94, 0.8);
}
#portfolio .portfolio-project {
z-index: 1;
position: absolute;
left: 15%;
top: 30%;
max-width: 70%;
text-align: center;
color: #fff;
pointer-events:none;
p {
margin-top: 20px;
}
i {
margin-top: 20px;
font-size: 40px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<section id="portfolio">
<div class="container-fluid portfolio-container">
<div class="row">
<a href="#" target="_blank">
<div class="portfolio-grid col-xs-12 col-md-4">
<div class="portfolio-overlay"></div>
<div class="portfolio-project-name">
<div class="portfolio-project">
<h2>Project Name</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
</div>
</div>
</div>
</a>
</div>
</section>
You need to wrap .portfolio-project-name into .portfolio-overlay. It has to be a child of the element you are hovering over.
add the class:
.portfolio-project {
pointer-events:none;
}
I am trying to create tabs similar to this - http://i.stack.imgur.com/KdBi0.jpg
After searching on web I found code for the tabs. I am facing the problem to design it according to the above screenshot.
I want to create a full width tab with a static content on the right side. If you check the screenshot, There is full width border on top and bottom of the tabs.
In the screenshot, on the right side there is "rewards" section, I want it something like that to remain even if the user click on different tabs.
Here's my code
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
#import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");
main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 11px 11px;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #878585;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 5px;
}
label[for*='1']:before {
content: '\f040';
}
label[for*='2']:before {
content: '\f27b';
}
label[for*='3']:before {
content: '\f003';
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #252424;
border: 1px solid #ddd;
border-top: 2px solid #ed1c24;
border-bottom: 1px solid #fff;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#media screen and (max-width: 650px) {
label {
font-size: 15px;
}
label:before {
margin: 5px;
font-size: 15px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Campaign</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Comments</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Contact</label>
<section id="content1">
<h2>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</h2>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
<section id="content2">
<p>comments</p>
</section>
<section id="content3">
<p>contact</p>
</section>
you want this ? considering your image.
Just added as per your requirement. just added one parent to both tab div and right side content div and applied css as you want. Hope it helps you. Thanks.
#import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
#import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");
main {
min-width: 320px;
max-width: 800px;
padding: 50px;
margin: 0 auto;
background: #fff;
}
section {
display: none;
padding: 20px 0 0;
border-top:1px solid #eee;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 11px 11px;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #878585;
border: 1px solid transparent;
}
label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 5px;
}
label[for*='1']:before {
content: '\f040';
}
label[for*='2']:before {
content: '\f27b';
}
label[for*='3']:before {
content: '\f003';
}
label:hover {
color: #888;
cursor: pointer;
}
input:checked + label {
color: #252424;
border-bottom: 2px solid #29DE75
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
#media screen and (max-width: 650px) {
label {
font-size: 15px;
}
label:before {
margin: 5px;
font-size: 15px;
}
}
#media screen and (max-width: 400px) {
label {
padding: 15px;
}
}
.parent{
width:100%;
}
.child{
width:60%;
float:left;
}
.side-content{
width: 30%;
display: inline-block;
margin: 75px 20px;
}
<div class="parent">
<div class="child">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Campaign</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Comments</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Contact</label>
<section id="content1">
<h2>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</h2>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</section>
<section id="content2">
<p>comments</p>
</section>
<section id="content3">
<p>contact</p>
</section>
</div>
<div class="side-content">
<p>kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutt</p>
</div>
</div>