css

@import url('https://fonts.googleapis.com/css?family=Patua+One');

/* nav */

ul {
    position: absolute;
    top:0vw;
    width: 99vw;
    left:0vw;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    z-index: 1;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color:#4CAF50;}




<--codepen-->

.slider {
  width: 100vw;
  height: 50vw;
  position: absolute;
  top:3vw;
  left:0vw;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  width: 100vw;
  height: 40vw;
  position: absolute;
  top:3vw;
  left:0vw;
}
.slide1 {
  background: url(images/cgc3.jpg)no-repeat center;
      background-size: cover;
    animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;

}
.slide2 {
  background: url(images/cgc1.jpeg)no-repeat center;
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.slide3 {
    background: url(images/cgc2.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}

.card {
    width: 22vw;
    border-radius: 2vw;
    transition: all 2s;
    color: white;
}

.card:hover {
    transform:rotate(360deg);
}

img {
    border-radius: 2%;
    width:22vw;
    height: 22vw;
}

.container {
    padding: -1.6vw 5vw;
}
#card1{
    position: absolute;
    top:55vw;
    margin-left: 6vw;
    background-color: black;
}
#card2{
    position: absolute;
    top:55vw;
    margin-left: 37vw;
    background-color: black;

}
#card3{
    position: absolute;
    top:55vw;
    margin-left: 68vw;
    background-color: black;

}

#owen {

    opacity: 0.4;
    position: absolute;
    width: 14vw;
    height: 12vw;


}

#Ram {

    position: absolute;
    font-size: 5vw;
    display: inline;


}

.ram1 {

    position: absolute;
    top: 43vw;
    left: 10vw;
}

.ram2 {

    position: absolute;
    top: 43vw;
    left: 39vw;
}

.ram3 {

    position: absolute;
    top: 43vw;
    left: 74vw;
}





<--portfolio-->
* {
    box-sizing: border-box;
}

body {
    background-color: whitesmoke;
    padding: 20px;
    font-family: Arial;
}

.main {
    position: absolute;
    top:85vw;
    max-width: 100%;
    margin: auto;
}

.hey {

    width: 90%;
    height: 90%;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 8px -16px;
    width: 100vw;
}

.row,
.row > .column {
    padding: 8px;
}

.column {
    float: left;
    width: 45%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.content {
    background-color: white;
    padding: 10px;
}

@media screen and (max-width: 900px) {
    .column {
        margin-left: 20vw;
        width: 50%;
    }
    .content{
        background-color: grey;
    }
}

@media screen and (max-width: 600px) {
    .column {
        margin-left: 0vw;
        width: 100%;
    }
}