We Keep Coding

How to adapt the slider to pure html and css

I made a slider for a website in pure css and html, but after creating it for desktop, the question arose about adapting it to mobile devices. I can't solve this problem in any way. the slider itself will of course work for mobile devices, but it all looks clumsy
.section-slider__plaster {
position: relative;
margin-top: 40px;
height: 500px;
padding-left: 15px;
padding-right: 15px;
}
.slider {
max-width: 1300px;
margin: 0 auto;
height: 469px;
overflow: hidden;
border-radius: 20px;
}
.middle {
position: relative;
}
.slides {
width: 400%;
height: 100%;
display: flex;
}
.slide {
width: 25%;
transition: all .6s ease;
}
.navigation {
position: absolute;
right: 50%;
bottom: 0;
display: flex;
gap: 10px;
}
.bar {
width: 10px;
height: 10px;
background: #C4C4C4;
border-radius: 50%;
cursor: pointer;
transition: all .4s ease;
}
.bar:hover{
background: rgba(45, 166, 221, 1);
transform: scale(1.025);
}
input[name="r"] {
position: absolute;
visibility: hidden;
}
.slide img{
width: 100%;
height: 100%;
}
#r1:checked ~ .s1{
margin-left: 0;
}
#r2:checked ~ .s1{
margin-left: -25%;
}
#r3:checked ~ .s1{
margin-left: -50%;
}
#r4:checked ~ .s1{
margin-left: -75%;
}
.block-slider__text {
position: absolute;
top: 130px;
left: 70px;
}
.heading-slider__text {
font-weight: 700;
font-size: 38px;
line-height: 118%;
text-transform: uppercase;
color: #254152;
}
.info-slider__text {
font-weight: 400;
font-size: 18px;
line-height: 140%;
letter-spacing: 0.02em;
color: #254152;
}
<main class="main">
<section class="section-slider__plaster">
<div class="slider middle">
<div class="slides">
<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<div class="slide s1"><img src="img/slider-one.png" alt=""></div>
<div class="slide"><img src="img/slider-one.png" alt=""></div>
<div class="slide"><img src="img/slider-one.png" alt=""></div>
<div class="block-slider__text">
<h1 class="heading-slider__text">Механизированная штукатурка<br> стен от 250 р/м2</h1>
<p class="info-slider__text">Качественная механизированная шуткатурка в <br> новостройках, домах, помещениях, зданиях и квартирах.</p>
</div>
</div>
</div>
<div class="navigation">
<label for="r1" class="bar"></label>
<label for="r2" class="bar"></label>
<label for="r3" class="bar"></label>
</div>
</section>
</main>
I tried to change the size of the slider itself, but there is no sense from this, it is necessary that the image retains quality, even if it remains without any part:

CSS not applying to newly added elements through Javascript

I'm adding a new <div> to the page on button click. The problem is that the styling isn't applying to the new div, well to parts of it, mainly the inner divs which is where i need it. I have looked at some questions and tried using escape charaters but nothing seems to work.
The styling works if the div is there when the page loads.
The javascript to add the div:
AddNewSection: function () {
var me = IndexController;
$("#addNew").before('<div id="New' + me.options.count + '" class="block center">\
<div style="width:100%;flex:1;display:inline-flex" >\
<div class="group">\
<input id="Question' + me.options.count + '" type="text" class="inputHighlight">\
<span class="bar"></span>\
<label class="labelHighlight">Question</label>\
</div>\
<div class="group">\
<label>Type</label>\
</div>\
<div class="group">\
<input id="Drop'+ me.options.count + '" value="1" />\
</div>\
</div>\
<div id="TypeDiv'+ me.options.count + '">\
</div>\
</div>');
me.CreateDropDown(me.options.count);
me.options.count++;
},
The div that is hardcoded on the page:
<div id="New1" class="block center">
<div style="width:100%;flex:1;display:inline-flex">
<div class="group">
<input id="Question1" type="text" class="inputHighlight" required>
<span class="bar"></span>
<label class="labelHighlight">Question</label>
</div>
<div class="group">
<label>Type</label>
</div>
<div class="group">
<input id="Drop1" value="1" />
</div>
</div>
<div id="TypeDiv1">
</div>
CSS
<style>
p {
margin: 10px;
}
body {
background: white;
min-height: 100%;
}
#Page {
position: relative;
padding: 5px 10px;
background-color: whitesmoke;
margin: 60px auto;
font: normal 12px/21px sans-serif;
color: #444;
}
#Page.wide {
width: 70%;
}
#Page.narrow {
width: 30%;
}
#Page:before, #Page:after {
content: '';
position: absolute;
left: 0;
box-shadow: 0 0 10px black;
border-radius: 50%;
width: 100%;
height: 20px;
display: none;
}
#Page.top-shadow:before {
display: block;
top: 0px;
clip: rect(-40px auto 0 auto);
}
#Page.bottom-shadow:after {
display: block;
bottom: 0px;
clip: rect(20px auto 40px auto);
}
.AddNew {
width: 90%;
height: 100px;
border: thin solid #ddd;
flex: 1;
text-align: center;
}
.center {
margin: 15px auto 15px;
padding: 10px;
}
.block {
width: 90%;
height: 150px;
border: thin solid #ddd;
flex: 1;
text-align: center;
}
.block.center {
margin: 15px auto 15px;
padding: 10px;
}
.group {
position: relative;
margin-bottom: 45px;
}
.inputHighlight {
font-size: 18px;
padding: 10px 10px 5px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
.inputHighlight:focus {
outline: none;
}
/* LABEL ======================================= */
.labelHighlight {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
.inputHighlight:focus ~ .labelHighlight, .inputHighlight:valid ~ .labelHighlight {
top: -10px;
font-size: 14px;
color: #5264AE;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
.inputHighlight:focus ~ .bar:before, .inputHighlight:focus ~ .bar:after {
width: 50%;
}
The output:
Let me know if you need anything else.
Thank you in davance.

Show/Hide Image Caption on hover

Building a portfolio page with images and trying to use jquery to make the caption show and slide up on hover but then, when i tried, it didn't work with my code. The code is shown below plus a snippet that can also be run.
Here's a Snippet
$('.port-img').hover(function() {
if ($(".caption").is('hidden')) {
$(this).show('slideUp', 'slow');
$(this).hide('slideDown', 'slow');
};
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
visibility: hidden;
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>

You can do it with alternative way, using CSS only :
.caption-style-2{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-2 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-2 li:hover .caption{
opacity: 1;
transform: translateY(-100px);
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);
}
.caption-style-2 img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-2 .caption{
cursor: pointer;
position: absolute;
opacity: 0;
top:300px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
.caption-style-2 .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}
.caption-style-2 .caption-text h1{
text-transform: uppercase;
font-size: 18px;
}
.caption-style-2 .caption-text{
z-index: 10;
color: #fff;
position: absolute;
width: 300px;
height: 300px;
text-align: center;
top:20px;
}
<ul class="caption-style-2">
<li>
<img src="http://via.placeholder.com/300x300" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</ul>

$('.port-img').hover(function(){
$(".caption").show('slideUp');
$(".caption").hide('slideDown');
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
display: none;
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
$(this) means $('.port-img') not ('.caption')

Please have a look at snippet.
$('.port-img').hover(function(){
var $caption = $(".caption");
if ($caption.is(':hidden')){
$caption.slideDown('slow');
} else {
$caption.slideUp('slow');
}
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
display: none; /* default hide */
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>

Go to accordion tab when click button Vanilla JavaScript

Right now I have an accordion and interactive cycle I made using pure CSS. When a user clicks on a certain box on the cycle it opens up that specific accordion tab. Is it possible using vanilla JavaScript (no JQuery) to have it also scroll down to the specific tab when a user clicks a box on the cycle? Anything helps, cheers.
.container1 {
width: 250px;
height: 250px;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
transform: scale(0.85);
}
.ele,
.arrow,
.circle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#one {
transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
display: inline-block;
background-color: #1f497d;
width: 105px;
height: 50px;
border-width: 2px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
z-index: 3;
}
.ele:hover {
cursor: pointer;
transform: scale(1.019);
border-color: f4f4f4;
background-color: #214d84;
box-shadow: 0px 2px 9px #888888;
zoom: 1.02;
}
.circle {
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #cccfd7;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
z-index: 1;
left: -17px;
}
#two:hover ~ .arrow {
border-top-color: #006850;
transform: rotate(24deg);
}
#three:hover ~ .arrow {
border-top-color: #006850;
transform: rotate(66deg);
}
#four:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
transform: rotate(25deg);
}
#five:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
border-bottom-color: #006850;
transform: rotate(26deg);
}
#six:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
border-bottom-color: #006850;
transform: rotate(66deg);
}
#one:hover ~ .arrow {
border-color: #006850;
}
#one:hover ~ .circle:after {
border-top-color: #006850;
}
.circle:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -96px;
left: -36px;
background: #fff;
background-color: white;
transform: rotate(-120deg);
z-index: 1;
}
.circle:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: -83px;
left: -44px;
transform: rotate(-120deg);
z-index: 2;
}
.text1line {
font-size: 13px;
margin-top: 14%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.text1line:hover {
text-decoration: none;
}
.text2line {
font-size: 13px;
margin-top: 6%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.text2line:hover {
text-decoration: none;
}
.textcircle {
font-size: 15px;
margin-top: 37.5%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.textcircle:hover {
text-decoration: none;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight: bold;
color: #005bab;
}
.top {
margin-top: -20px;
text-align: center;
font-size: 13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
<div class="container1">
<div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div>
<div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div>
<div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div>
<div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
<div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
<div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
<div class="arrow"></div>
<div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span>
</p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Select A Top Team</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox" />
<label class="label" for="tab-two">Get Off To A Great Start</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-train" type="checkbox"/>
<label class="label" for="tab-train">Train For Success</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-manage" type="checkbox"/>
<label class="label" for="tab-manage">Manage Work For Results</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-grow" type="checkbox"/>
<label class="label" for="tab-grow">Grow Careers</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-build" type="checkbox"/>
<label class="label" for="tab-build">Build A Deep bench</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>

Use document.getElementById("button_id").addEventListener("click", function); for trigger.
Use window.location.hash = '#div_id';to get focus.
Example:
document.getElementById("bt1").addEventListener("click", getfocus1);
document.getElementById("bt2").addEventListener("click", getfocus2);
document.getElementById("bt3").addEventListener("click", getfocus3);
document.getElementById("bt4").addEventListener("click", getfocus4);
document.getElementById("bt5").addEventListener("click", getfocus5);
function getfocus1(){
window.location.hash = '#tab1';
}
function getfocus2(){
window.location.hash = '#tab2';
}
function getfocus3(){
window.location.hash = '#tab3';
}
function getfocus4(){
window.location.hash = '#tab4';
}
function getfocus5(){
window.location.hash = '#tab5';
}
div{
width:100%;
height:300px;
text-align: center;
}
<button type="button" id = "bt1">Click Me for get focus in div 1!</button>
<button type="button" id = "bt2">Click Me for get focus in div 2!</button>
<button type="button" id = "bt3">Click Me for get focus in div 3!</button>
<button type="button" id = "bt4">Click Me for get focus in div 4!</button>
<button type="button" id = "bt5">Click Me for get focus in div 5!</button>
<div id ="tab1">
Data 1
</div>
<div id ="tab2">
Data 2
</div>
<div id ="tab3">
Data 3
</div>
<div id ="tab4">
data 4
</div>
<div id ="tab5">
data 5
</div>
I hope this is what you want.

Why is my jquery animation going slow and laggy?

Hey i am using the textillate.js plug in for my portfolio and i was testing the animation and it is really slow and laggy. dont know if its my laptop or not. The animation is my heading class and also whenever i did the animation in a separate page with only the header only it worked smoothly. is it possible my pages load time is affecting the animation?
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body>
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper">
<div class = "heading tlt">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading tlt">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
<!------------------------------------------------------------ABOUT ME-------------------------------------------------------------------->
<div class = "about-container">
<div id = "underline">
<h1 class = "title" id = "about-me">About Me</h1>
</div>
<div class = "about-me-wrapper">
<div class = "details selfie wow fadeIn" data-wow-duration="2s"></div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<p id = "sum"><br>Lorem Ipsum </p>
</div>
<div class = "details wow fadeIn" data-wow-duration="2s">
<div id = "details-hobbies">
<div class = "square">
<div class = "square-cont">
<div class = "ion-code ion-cont">
<p class = "under-img">Coding
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-basketball ion-cont">
<p class = "under-img">Basketball
</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-ios-people ion-cont">
<p class = "under-img">Family</p>
</div>
</div>
</div>
<div class = "square">
<div class = "square-cont">
<div class = "ion-university ion-cont">
<p class = "under-img">School</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------SKILLS------------------------------------------------------------------->
<div class = "skills-container">
<div id = "underline-second">
<h1 class = "title second" id = "skills">Skills</h1>
</div>
<div class = "skills-wrapper wow bounceInUp" data-wow-duration="3s">
<div class = "skills">
<div class = "logo">
<div class = "ion-social-html5">
<p class = "des">HTML5</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-css3">
<p class = "des">CSS3</p>
</div>
</div>
</div>
<div class = "skills">
<div class = "logo">
<div class = "ion-social-javascript">
<p class = "des">JAVASCRIPT</p>
</div>
</div>
</div>
<div class = "skills last">
<div class = "logo">
<div class = "ion-social-angular">
<p class = "des">ANGULAR JS</p>
</div>
</div>
</div>
</div>
</div>
<!--------------------------------------------------------------PORTFOLIO----------------------------------------------------------------->
<div class = "portfolio-container">
<div id = "underline-last">
<h1 class = "title last" id = "portfolio">Portfolio</h1>
</div>
<div class = "portfolio-wrapper">
<a href = "#" class = "tiles wow slideInUp" data-wow-offset="280">
<div class = "port"><img src = "bg.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #1</h3>
<p class="content-text">Dallas Mavericks</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg2.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
<a href = "#" class = "tiles wow slideInUp" data-wow-offset = "280">
<div class = "port"><img src = "bg3.PNG">
<div class = "content-overlay"></div>
<div class="content-details fadeIn-bottom">
<h3 class="content-title">Project #2</h3>
<p class="content-text">ATLAS</p>
</div>
</div>
</a>
</div>
</div>
<!-------------------------------------------------------------CONTACT-------------------------------------------------------------------->
<div id = "contact-container">
<div id = "contact-underline">
<h1 id = "contact-title">Hey Lets Keep In Touch!</h1>
</div>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="text" placeholder="email"/>
<input type="text" placeholder="subject"/>
<textarea placeholder="messge" rows = "7" cols = "60"></textarea>
<button>create</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "jquery-3.1.0.js"></script>
<script src="index.js"></script>
<script src = "jquery.lettering.js"></script>
<script src = "jquery.textillate.js"></script>
<script src= "wow.min.js"></script>
<script>new WOW().init();</script>
<!--<script src="viewportchecker.js"></script>-->
</body>
</html>
<!----------------------CSS-------------------------------------------->
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
/*-----------------------------------------------------------ABOUT ME--------------------------------------------------------------------*/
.about-container{
position: relative;
width: 100%;
height: 700px;
background-color: #ededed;
margin-top: 0;
padding: 0;
}
#underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #0A0A0A;
margin-bottom: 40px;
}
.title{
color: #0A0A0A;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
.about-me-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.details{
position: relative;
width: 370px;
height: 470px;
margin-top: 10px;
}
.details.selfie{
background-image: url(selfie2.png);
background-size: cover;
background-repeat:no-repeat;
border-radius: 10px;
}
#details-hobbies{
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
flex-direction: column;
}
.square{
width: 50%;
height: 50%;
}
.square-cont{
position: relative;
width: 100%;
height: 100%;
}
.ion-cont{
position: absolute;
color: #0A0A0A;
text-align: center;
font-size: 105px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.under-img{
font-size: 25px;
color: #0A0A0A;
margin-top: -5px;
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-align: center;
}
/*-------------------------------------------------------------------SKILLS--------------------------------------------------------------*/
.skills-container{
position: relative;
width: 100%;
height: 700px;
background-color: #e1e1e1;
margin-top: 0;
padding: 0;
margin-top: 0;
padding: 0;
bottom: 0;
}
.title.second{
color: black;
text-align: center;
margin-bottom: 0px;
padding-top: 40px;
font-family:'Raleway', sans-serif;
font-size: 55px;
}
#underline-second{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid black;
margin-bottom: 40px;
}
.skills-wrapper{
position: relative;
margin: auto;
width: 1200px;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.skills{
width: 280px;
height: 470px;
margin-top: 10px;
border-right: 4px solid black;
}
.skills.last{
border: none;
}
.logo{
width: 265px;
height: 340px;
margin-top: 10px;
}
.ion-social-html5{
text-align: center;
font-size: 280px
}
.des{
font-size: 25px;
margin-top: 0px;
color: black;
}
.ion-social-css3{
text-align: center;
font-size: 280px
}
.ion-social-javascript{
text-align: center;
font-size: 280px
}
.ion-social-angular{
text-align: center;
font-size: 280px
}
/*--------------------------------------------------------------------PORTFOLIO---------------------------------------------------------*/
.portfolio-container{
position: relative;
width: 100%;
height: 870px;
background-color: #444444;
top: 0;
padding: 0;
}
#underline-last{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #f5f5f5;
margin-bottom: 40px;
}
.title.last{
color:#f5f5f5;
}
.portfolio-wrapper{
position: relative;
max-width: 990px;
height: auto;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.port{
position: relative;
width: 280px;
height: 315px;
margin-top: 15px;
display:inline-block;
background-repeat: no-repeat;
}
.port:hover{
outline: #4169E1 solid 3px;
}
img{
position: relative;
max-width: 100%;
height: 100%;
}
.content-overlay{
background: rgba(0,0,0,0.9);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.port:hover .content-overlay{
opacity: 1;
}
.content-details {
position: absolute;
text-align: center;
font-family: 'Raleway',sans-serif;
padding-left: 1em;
padding-right: 1em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.port:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
}
.content-details h3{
color: #fff;
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
text-transform: uppercase;
}
.content-details p{
color: #fff;
font-size: 0.8em;
}
.fadeIn-bottom{
top: 80%;
}
/*--------------------------------------------------------------CONTACT ME---------------------------------------------------------------*/
#contact-container{
position: relative;
width: 100%;
height: 650px;
background: rgba(32,157,229,1);
background: -moz-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(32,157,229,1)), color-stop(100%, rgba(32,108,229,1)));
background: -webkit-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -o-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: -ms-linear-gradient(left, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
background: linear-gradient(to right, rgba(32,157,229,1) 0%, rgba(32,108,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209de5', endColorstr='#206ce5', GradientType=1 );
}
#contact-underline{
width: 500px;
margin: 0 auto;
border-bottom: 5px solid #e1e1e1;
margin-bottom: 40px;
padding-top: 20px;
}
#contact-title{
font-family: 'Raleway',sans-serif;
margin-bottom: 10px;
text-align: center;
color: white;
}
.login-page{
width: 400px;
margin: auto;
height: 400px;
}
.form{
position: relative;
background: #FFFFFF;
max-width: 360px;
/*margin: 0 auto 80px;*/
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form textarea{
font-family: "Raleway", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
outline: 0;
background: #1148a0;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
<!-------------------------------------JS--------------------------------->
$(document).ready(function(){
$('.heading').textillate({
in: {
effect: 'fadeInDown',
delay: 1000,
sync: true
}
});
});
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});