Adding hover to a grid ( that look like table) - grid

Im trying to add hover to my grid.
I literally manage to do so for every single cell including the whole div, but when im trying to do for the whole row nothing happens! (IGNORE please the colorful rows at the start)
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.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 text-lg-start text-start text-sm-right text-md-start col-sm-12 col-md-6 col-lg-3">Make</div>
<div class="col-12 text-lg-center text-center text-sm-center text-md-center col-sm-12 col-md-6 col-lg-3">Things</div>
<div class="col-12 text-lg-center text-center text-sm-center text-md- center col-sm-6 col-md-6 col-lg-3">Go</div>
<div class="col-12 text-lg-end text-end text-sm-end col-sm-6 col-md-6 text-md-end col-lg-3 ">Right</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="dif" class="col">animal</div>
<div id="dif" class="col">price</div>
<div id="dif" class="col">image</div>
</div>
<div class="row">
<div id="td" class="col">kitten</div>
<div id="td" class="col">70$</div>
<div id="td" class="col"> <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-circle " class="rounded" alt="Sheep"></div>
</div>
<div class="row">
<div id="td" class="col">puppy</div>
<div id="td" class="col">80$</div>
<div id="td" class="col"> <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep"></div>
</div>
<div class="row">
<div id="td" class="col">bunny</div>
<div id="td" class="col">30$</div>
<div id="td" class="col"> <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep"></div>
</div>
</div>
</body>
</html>
CSS:
.row {
margin-bottom: 10px;
}
.row > div {
height: 50px;
font-size: x-large;
text-align: center;
}
.row > div:nth-child(1) {
background: red
}
.row > div:nth-child(2) {
background: yellow
}
.row > div:nth-child(3) {
background: blue
}
.row > div:nth-child(4) {
background: purple
}
#dif {
background:white;
font-weight: 900;
border: solid black 1px;
height: 150px;
}
#td {
height: 150px;
background:white;
border: solid black 1px;
margin: 0px;
}
.row {
margin: 0px
}
.row:hover{background-color:gray;}
img {
border-radius: 50%;
}
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa


Remove the following code and the rows will highlight in grey:
.row > div:nth-child(1) {
background: red
}
.row > div:nth-child(2) {
background: yellow
}
.row > div:nth-child(3) {
background: blue
}
.row > div:nth-child(4) {
background: purple
}
Remove background:white; from
#td {
height: 150px;
background:white;
border: solid black 1px;
margin: 0px;
}

Related

Re-order blocks inside bootstrap columns using grid css

I have two columns and each column contains two blocks
The current order in mobile is
1
2
3
4
And I want it to be :
3
1
2
4
I tried to use grid but I don't know how I can get block 3 out from column 2.
See:
body {
padding-top: 50px;
}
.block {
padding: 40px;
text-align: center;
}
.y{
background:yellow;
}
.r{
background:red;
}
.b{
background:lightblue;
}
.g{
background:lightgreen;
}
#media only screen and (max-width: 991px) {
.container {
display: grid;
background-color: pink;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-8">
<div class="block y"> 1</div>
<div class="block r">2 </div>
</div>
<div class="col-md-4">
<div class="block b"> 3</div>
<div class="block g">4 </div>
</div>
</div>
And another question can we did this ordering by using CSS supported by IE11? because display:grid is not supported by IE.

Change the layout a little and you will be able to achieve this using bootstrap classes (https://getbootstrap.com/docs/4.3/utilities/flex/#order) without the need of CSS grid:
body {
padding-top: 50px;
}
.block {
padding: 40px;
text-align: center;
}
.y {background: yellow;}
.r {background: red;}
.b {background: lightblue;}
.g {background: lightgreen;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8 order-1 order-md-0">
<div class="block y"> 1</div>
</div>
<div class="col-md-4 order-0 order-md-1">
<div class="block b"> 3</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="block r">2 </div>
</div>
<div class="col-md-4">
<div class="block g">4 </div>
</div>
</div>
</div>
With you current code, the only way is to use display:contents which is not well supported (https://caniuse.com/#feat=css-display-contents)
body {
padding-top: 50px;
}
.block {
padding: 40px;
text-align: center;
}
.y {
background: yellow;
}
.r {
background: red;
}
.b {
background: lightblue;
}
.g {
background: lightgreen;
}
#media only screen and (max-width: 991px) {
.container {
background-color: pink;
display:flex;
flex-direction:column;
padding:0!important;
}
.container > .row,
.container > .row > div{
display:contents;
}
.b {
order:-1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="block y"> 1</div>
<div class="block r">2 </div>
</div>
<div class="col-md-4">
<div class="block b"> 3</div>
<div class="block g">4 </div>
</div>
</div>
</div>

Hexagon shape using CSS3 or Bootstrap

I wanna create a hexagon be created with pure CSS3, as shown below.
As you see in the image, there is a b-g image on the background.
i have tried to create the hexagon but the text within the hexagon is not displaying properly( category1, category3 etc). its not transparent.
somehow am not able to get the actual image, my manager is asking for.
when I ran this code, am getting the hexagon with filled-in color.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<title>hexagon-tiles</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> li.hex-row {
margin-top: -10vw;
}
li.hex-row:nth-child(2n) .hexagon {
transform: translateX(50%) rotate(120deg);
}
ul#hexagonContainer {
margin: 0;
list-style: none;
padding: 0;
margin-top: 10vw;
}
.hexagon {
width: 18vw;
background: transparent;
height: 9vw;
display: inline-block;
transform: rotate(120deg);
overflow: hidden;
visibility: hidden;
margin-bottom: 7vw;
position: relative;
}
li.hex-row {
white-space: nowrap;
//filter: drop-shadow(0.5vw 2vw 0.5vw black);
}
.hexagon .hex-inner {
width: 100%;
height: 100%;
background: rebeccapurple;
transform: rotate(-60deg);
overflow: hidden;
position: relative;
}
.hexagon .hex-img {
width: 100%;
height: 100%;
transform: rotate(-60deg);
visibility: visible;
box-shadow: 1px 0px 0px 0px;
background-color: #6B8E23;
}
.hexagon .hex-img:after {
position: absolute;
width: 100%;
content: '';
z-index: 1;
height: 100%;
//background-image:
url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);
background-position: center center;
background-repeat: no-repeat;
}
.hex-img.hide {
visibility: hidden;
}
.text{
position: absolute;
//z-index: 1000;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<br/>
<ul id="hexagonContainer">
<!-- First row. -->
<li class="hex-row">
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img">
<div class="text">
<p>My Overall<br/> Score</p>
</div>
</div>
</div>
</div>
</li>
<!-- Second row. -->
<li class="hex-row">
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img">
</div>
</div>
</div>
<div class="hexagon">
<div class="hex-inner">
<div class="hex-img hide">
</div>
</div>
</div>
</li>
<!-- Seventh row. -->
</ul> </div> </body> </html>

Here's a possible solution.
Instead of the current green background that you're setting to the hexagon, try a radial-gradient.
background: radial-gradient(circle, transparent 0%, #6B8E23 60%);
Edit: This is the solution to the anchor tag, I used flex so the tag will use the entire w & h of the container and center the text.
HTML:
<div class="text">
My overall score
</div>
CSS:
.text {
position: absolute;
z-index: 10;
width: 100%;
text-align: center;
height: 100%;
}
.text a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Hope this helps.

CSS Grid issues with content going outside of container

I am trying to follow a guide to using CSS Grid here: Tutorial. I am not trying to make the same thing.
I have two defined areas: aside and main.
Here is my grid definition:
body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"aside main"
"aside main";
}
aside is my left-hand navigation such as Profile, Support, etc. main is obviously the main content area.
When I view the page in Chrome on my laptop, the aside container / grid area takes up 100% of the page, no problem.
When I use Chrome's dev tools and re-size to a mobile view, the aside grid area stops short of the full page, it only displays one or two menu items. The other items are displayed, I can see them if I select all on the page, they are just outside the aside container.
It seems like I need to specify more rows for the content to fit? But that does not sound right because how would I know how many rows I need for varying amount of content?
I tried to use grid-auto-columns: auto; but that didn't help.
Note: I am messing around with media queries although I had the problem before I started doing that so I don't think it's related.
Any help would be greatly appreciated.
Edit
Image of Desktop
Image of Mobile
Here is my full CSS and HTML:
html, body {
height: 100% !important;
}
body {
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 60px 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"main";
}
nav {
grid-area: nav;
background-color: pink;
}
aside {
grid-area: aside;
display: none;
background-color: rgb(10, 116, 187);
color: white;
border-right: 5px solid rgb(2, 106, 175);
}
main {
grid-area: main;
color: #4C4C4C;
background-color: rgb(248, 248, 248);
}
/******************************************
MEDIA QUERIES
******************************************/
/* 600px screen width OR larger */
#media only screen and (min-width: 600px) {
body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"aside main"
"aside main";
}
aside {
display: inline;
}
nav {
display: none;
}
.brandText {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.smallProfileImageDiv {
height: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.smallProfileImageDiv img {
width: 100px;
height: 100px;
}
.imgCircle {
border-radius: 50%;
}
.profileNameBox {
text-align: center;
margin-bottom: 60px;
}
.profileName {
font-size: 16px;
}
.positionTitle {
margin-top: 5px;
}
.leftNavOptions {
margin-left: 25px;
}
.leftNavItemOption {
margin-bottom: 20px;
padding: 5px;
}
.leftNavItemOption:hover {
margin-bottom: 20px;
padding: 5px;
background-color: orange;
}
.leftNavOptionIcon {
min-width: 20px;
font-size: 18px;
}
.leftNavOption {
margin-left: 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CarePower.io</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
<meta name="author" content="CarePower.io" />
<!-- Favicons -->
<link href="" rel="icon">
<link href="" rel="apple-touch-icon">
<!-- Bootstrap CSS File -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<nav>
Hi
</nav>
<aside>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 brandText">
CarePower.io
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="smallProfileImageDiv">
<img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="profileNameBox">
<span class="profileName">John Doe</span>
<div class="positionTitle">
<span class="badge badge-primary">CEO</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
</div>
</div>
</div>
</div>
</aside>
<main>Main</main>
<!-- JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
</body>
</html>

You should avoid applying the display grid directly to the body element to avoid having unwanted element considered inside the grid. Then you can simplify the grid-template-rows using 60px auto auto and get rid of the grid-area on the mobile view. You can also consider using min-height:100vh to have full height page and allow the content to grow on small device.
div.body {
font-family: 'Montserrat', sans-serif;
display: grid;
grid-template-rows: 60px 1fr;
min-height: 100vh;
}
nav {
background-color: pink;
}
aside {
display: none;
background-color: rgb(10, 116, 187);
color: white;
border-right: 5px solid rgb(2, 106, 175);
}
main {
color: #4C4C4C;
background-color: rgb(248, 248, 248);
}
/******************************************
MEDIA QUERIES
******************************************/
/* 600px screen width OR larger */
#media only screen and (min-width: 600px) {
div.body {
display: grid;
grid-template-rows: 100px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas: "aside main" "aside main";
}
aside {
grid-area: aside;
}
main {
grid-area: main;
}
nav {
display: none!important;
}
.brandText {
text-align: center;
font-size: 25px;
margin-top: 10px;
}
.smallProfileImageDiv {
height: 100px;
margin-top: 30px;
margin-bottom: 20px;
}
.smallProfileImageDiv img {
width: 100px;
height: 100px;
}
.imgCircle {
border-radius: 50%;
}
.profileNameBox {
text-align: center;
margin-bottom: 60px;
}
.profileName {
font-size: 16px;
}
.positionTitle {
margin-top: 5px;
}
.leftNavOptions {
margin-left: 25px;
}
.leftNavItemOption {
margin-bottom: 20px;
padding: 5px;
}
.leftNavItemOption:hover {
margin-bottom: 20px;
padding: 5px;
background-color: orange;
}
.leftNavOptionIcon {
min-width: 20px;
font-size: 18px;
}
.leftNavOption {
margin-left: 15px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- Main Stylesheet File -->
<link href="css/main.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class="body">
<nav>
Hi
</nav>
<aside>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 brandText">
CarePower.io
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="smallProfileImageDiv">
<img class="imgCircle mx-auto d-block" src="imgs\1\current\avatar.jpg">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="profileNameBox">
<span class="profileName">John Doe</span>
<div class="positionTitle">
<span class="badge badge-primary">CEO</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-edit leftNavOptionIcon"></i><span class="leftNavOption">Profile</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-clock leftNavOptionIcon"></i><span class="leftNavOption">Jobs</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-envelope leftNavOptionIcon"></i><span class="leftNavOption">Support</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-user-friends leftNavOptionIcon"></i><span class="leftNavOption">Refer</span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="leftNavItemOption">
<i class="fas fa-sign-out-alt leftNavOptionIcon"></i><span class="leftNavOption">Logout</span>
</div>
</div>
</div>
</div>
</aside>
<main>Main</main>
</div>
<!-- JavaScript Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Why won't text will not align to center in <section> background?

I am learning HTML and CSS. My <h3> text will not align to the center of the page. I know this has to do with the background width being 50%, but I need that in order for the page to be two colors. Any way around this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3>Contact Me</h3>
</div>
</section>
And my CSS:
* {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact {
background: linear-gradient(to right, black 50%, gray 50%);
}
h3 {
color: white;
text-align: center;
}

This rule in your CSS is setting the background color of every element to #070606, as you're using the asterisk, which is a wildcard selector that catches everything.
* { background: #070606; }
If you only meant to set the background color of the page to that color, use body instead of *.

Your text is not centered because text-align:center refers to the parent width so it means it's centered in the 50% wide div. In order to center it you can wrap contact and h3 in a wrapper with a position relative. Then set position absolute to h3 (you need to move it out of .contact div) and set 100% width for h3. It should work in that way. Remember that if you position if with absolute you need to set up height for parent.
.contact {
background-color: black;
background-attachment: fixed;
background-size: cover;
width: 50%;
overflow-x: hidden;
position: absolute;
height:100%;
}
h3 {
text-align: center;
font-size: 300%;
position: absolute;
width:100%;
}
.wrapper{
position:relative;
height:200px;
}
<section class="wrapper">
<div class="contact"></div>
<h3>Contact me</h3>
</section>
But this example is not a best approach. The best approach in this case is to make a gradient background (like showed in comments snippets) for the parent container with 50/50 of the colors. This won't make your HTML structure and CSS code messy.

Bootstrap Altering a child div in a row

Here is my html:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 div1">DIV1</div>
<div class="col-sm-6 div2">DIV2</div>
<div class="col-sm-6 div3">DIV3</div>
<div class="col-sm-6 div4">DIV4</div>
</div>
</div>
Here is my css:
.row div{
height: 100px;
}
.div1{
background: blue;
}
.div2{
background: red;
}
.div3{
background: darkcyan;
}
.div4{
background: cyan;
}
Its ok in normal view
Is it possible to alter div4 with div3 on mobile view like below image

You can swap the color of div3 and div4 using media query for mobile min-width: 767px
.row div{
height: 100px;
}
.div1{
background: blue;
}
.div2{
background: red;
}
.div3{
background: darkcyan;
}
.div4{
background: cyan;
}
#media(max-width:767px){
.div3{
background: cyan;
}
.div4{
background: darkcyan;
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 div1"></div>
<div class="col-sm-6 div2"></div>
<div class="col-sm-6 div3"></div>
<div class="col-sm-6 div4"></div>
</div>
</div>

Resources