Skip to content

Instantly share code, notes, and snippets.

@MuhammadRabi

MuhammadRabi/index.html

Last active April 29, 2019 16:26
Show Gist options
  • Save MuhammadRabi/b02816ae7798fe162900bc46a3dc88f9 to your computer and use it in GitHub Desktop.
Save MuhammadRabi/b02816ae7798fe162900bc46a3dc88f9 to your computer and use it in GitHub Desktop.
Download ZIP
P-17
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>j-Project</title>
<meta charset="utf-8">
<!-- Normalize.css -->
<link rel="stylesheet" href="css/normalize.css">
<!-- my style -->
<link rel="stylesheet" href="css/mystyle-p17.css">
<!-- resonsive style -->
<link rel="stylesheet" href="css/responsive.css">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!--animate css -->
<link rel="stylesheet" href="css/animate.css">
<!-- please wait preloader -->
<link rel="stylesheet" href="css/please-wait.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Exo+2|Margarine|Oswald:700|Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton|Montserrat" rel="stylesheet">
<link href="//db.onlinewebfonts.com/c/4361c3ce34740903e3af9d48d8a941ff?family=HelveticaNeueW01-66MediumIt" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<nav>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<h2>source <span class="first-color-text">code</span></h2>
</div>
<ul>
<li class='active'><a class="active" href="#">home</a></li>
<li><a href="#" data-scroll="service-cards">services</a></li>
<li><a href="#" data-scroll="quotes">quotes</a></li>
<li><a href="#" data-scroll="porto">portofolio</a></li>
<li><a href="#" data-scroll="plan-s">plans</a></li>
<li><a href="#" data-scroll="sponsers">sponsers</a></li>
</ul>
</nav>
<section>
<div class="overlay"></div>
<div class="content">
<h1>source <span class="first-color-text">code</span> is where your dreams come true</h1>
</div>
</section>
</header>
<!-- start nav section -->
<!--nav>
<div class="container">
<div class="nav-links">
<ul>
<li class="nav-clicked"><a href="#">home</a></li>
<li><a href="#" data-scroll="service-cards">services</a></li>
<li><a href="#" data-scroll="quotes">quotes</a></li>
<li><a href="#" data-scroll="porto">portofolio</a></li>
<li><a href="#" data-scroll="plan-s">plans</a></li>
<li><a href="#" data-scroll="sponsers">sponsers</a></li>
</ul>
</div>
<div class="nav-brand">
brand-name
</div>
<div class="menu-toggle"><i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!-- start header -->
<!--header>
<div class="header-overlay">
<div class="text container">
<h1>hello <span>world</span></h1>
<p> Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head. Modern sharks are classified within the clade Selachimorpha and are the sister group to the rays.</p>
</div>
</div>
</header>
<!-- service-cards section -->
<section id="service-cards" class="service-cards">
<div class="container">
<div class="box">
<div class="icon">01</div>
<div class="box-content">
<h3> service one</h3>
<p>face to face with an entity that takes the form of their worst fears. Searching for hope and a new beginning</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<div class="icon">02</div>
<div class="box-content">
<h3> service two</h3>
<p>face to face with an entity that takes the form of their worst fears. Searching for hope and a new beginning</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<div class="icon">03</div>
<div class="box-content">
<h3> service three</h3>
<p>face to face with an entity that takes the form of their worst fears. Searching for hope and a new beginning</p>
<a href="#">read more</a>
</div>
</div>
</div>
</section>
<!-- start stories section -->
<section class="stories">
<div class="story">
<h4>headline</h4>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen b </p>
<button>download</button>
</div>
<div class="story">
<h4>headline</h4>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen b </p>
<button>download</button>
</div>
<div class="story">
<h4>headline</h4>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen b </p>
<button>download</button>
</div>
</section>
<!--end paragraphs section -->
<!-- start new section -->
<section class="exp">
<div class="container">
<div class="image">
<img src="img/pequenoLaborial-Green_Capa.jpg">
</div>
<div class="details">
<div class="item">
<div class="headline">
<div class="bo"><i class="fas fa-burn"></i></div>
<h4>headline 4</h4>
</div>
<p>ttributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's D</p>
<span class="first-color-text">view details</span>
<i class="fas fa-arrow-alt-circle-right first-color-text"></i>
</div>
<div class="item">
<div class="headline">
<div class="bo"><i class="fas fa-download"></i></div>
<h4>headline 4</h4>
</div>
<p>ttributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's D</p>
<span class="first-color-text">view details</span>
<i class="fas fa-arrow-alt-circle-right first-color-text"></i>
</div>
<div class="item">
<div class="headline">
<div class="bo"><i class="fas fa-feather-alt"></i></div>
<h4>headline 4</h4>
</div>
<p>ttributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's D</p>
<span class="first-color-text">view details</span>
<i class="fas fa-arrow-alt-circle-right first-color-text"></i>
</div>
<div class="item">
<div class="headline">
<div class="bo"><i class="fab fa-nutritionix"></i></div>
<h4>headline 4</h4>
</div>
<p>ttributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's D</p>
<span class="first-color-text">view details</span>
<i class="fas fa-arrow-alt-circle-right first-color-text"></i>
</div>
</div>
</div>
</section>
<!-- start timeline section -->
<section class="timeline">
<div class="container">
<div class="testo">
<div class="contento">
<h3>headline 3</h3>
<p>"Do not go gentle into that good night,
Old age should burn and rave at close of day
Rage, rage against the dying of the light"
</p>
</div>
<div class="contento">
<h3>headline 3</h3>
<p>"Do not go gentle into that good night,
Old age should burn and rave at close of day
Rage, rage against the dying of the light"
</p>
</div>
</div>
</div>
</section>
<!-- end timeline section -->
<!--start sponsers section-->
<section class="sponsers center">
<div class="container">
<div class="separator"></div>
<ul class="social-icons">
<li><i class="fab fa-amazon-pay"></i></li>
<li><i class="fab fa-adobe"></i></li>
<li><i class="fab fa-d-and-d-beyond"></i></li>
<li><i class="fab fa-ebay"></i></li>
<li><i class="fab fa-ebay"></i></li>
<li><i class="fab fa-fedex"></i></li>
</ul>
<div class="copyrights">
<p></p>
</div>
</div>
</section>
<!-- start footer -->
<footer>
<div class="container">
<div class="footer-upper">
<div class="footer-col">
<h2>source <span class="first-color-text">code</span></h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'
<br>
<br>
making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like.</p>
<span>read more</span>
<div class="social">
<div class="social-item">
<h5>find us <br><span>on facebook</span></h5>
</div>
<div class="social-item">
<h5>find us <br><span>on facebook</span></h5>
</div>
<div class="social-item">
<h5>find us <br><span>on facebook</span></h5>
</div>
<div class="social-item">
<h5>find us <br><span>on facebook</span></h5>
</div>
</div>
</div>
<div class="footer-col">
<h3>headline3</h3>
<div class="footer-item">
<h4>headline4</h4>
<p>uld burn and rave at close of day
Rage, rage against the dying of the light"
<br>
uld burn and rave at close of day
Rage, rage against the dying of the light"
</p>
<span class="first-color-text">21December,2018</span>
</div>
<div class="footer-item">
<h4>headline4</h4>
<p>uld burn and rave at close of day
Rage, rage against the dying of the light"
<br>
uld burn and rave at close of day
Rage, rage against the dying of the light"
</p>
<span class="first-color-text">21December,2018</span>
</div>
<div class="footer-item">
<h4>headline4</h4>
<p>uld burn and rave at close of day
Rage, rage against the dying of the light"
<br>
uld burn and rave at close of day
Rage, rage against the dying of the light"
</p>
<span class="first-color-text">21December,2018</span>
</div>
</div>
<div class="footer-col">
<h3>headline3</h3>
<span>web design</span>
<span>borchures</span>
<span>maps</span>
<span>flyers</span>
<span>themeforest</span>
<span>flat design</span>
<div class="useful-links">
<h5>photoshop</h5>
<h5>illustrator</h5>
<h5>UI/UX</h5>
<h5>design</h5>
<h5>web design</h5>
</div>
</div>
<div class="footer-col">
<h3>headline3</h3>
<div class="footer-sec">
<h4>headline 4</h4>
<p>Proostwetering<br> 50
3543 AH Utrecht<br>
Netherlands the</p>
</div>
<div class="footer-sec">
<h4>headline 4</h4>
<p>57-58 Russell Square<br>
london<br>
WC1B 4HS<br>
united kingdom<br>
</p>
</div>
<div class="footer-sec">
<h4>headline 4</h4>
<p>Tel. +31(0)30 241 26 99<br>
Fax. +31(0)30 241 43 36</p>
</div>
<div class="footer-sec">
<h4>headline 4</h4>
<p>Email: [email protected]<br>
General Inquiries: [email protected]
</p>
</div>
</div>
</div>
</div>
<div class="footer-copyrights">
All rights Reserved
</div>
</footer>
<!-- end footer -->
<!-- scroll to top -->
<!-- jQuery Library CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- wow.js -->
<script src="js/wow.js"></script>
<script>
new WOW().init();
</script>
<!-- my script -->
<!--script src="js/script.js"></script-->
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-toggle").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
Raw
style.css
/* start global rules */
.container {
width: 1200px;
margin: auto;
}
section {
width: 100%;
padding-top: 30px;
padding-bottom: 30px;
transition: 300ms ease-in-out;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
}
.center {
text-align: center
}
* {
font-family: sans-serif;
}
/* end global rules */
/* start framework */
.first-color-bg {
background: #8BC34A;
color: #fff
}
.first-color {
color: #8BC34A;
background: #fff
}
.first-color-text {
color: #8BC34A;
}
/* end framework */
/* start responsive nav */
header section {
font-family: sans-serif;
width: 100%;
height: 100vh;
background: url('../img/beta-sec.jpg');
background-size: cover;
background-position: center;
position: relative
}
header section .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
padding: 0 100px;
color: #fff;
font-size: 15px;
}
section .content {
position: relative;
padding: 0 200px;
margin-top: 250px;
color: #fff
}
.content h1 {
font-size: 69px;
text-transform: capitalize
}
.content span {}
nav {
position: fixed;
width: 100%;
line-height: 50px;
text-transform: capitalize;
z-index: 999
}
nav .logo {
line-height: 50px;
position: fixed;
float: left;
color: #fff;
font-weight: bold;
letter-spacing: 2px;
padding: 0 100px;
margin-top: -20px
}
nav .logo span {
color: #8BC34A;
text-transform: uppercase;
font-size: 26px
}
nav ul {
line-height: 50px;
background: rgba(0, 0, 0, 0.1);
overflow: hidden;
color: #fff;
padding: 0;
margin: 0;
text-align: right;
padding: 0 100px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
font-size: 16px;
padding: 12px 15px;
transition: 0.5s
}
nav ul li a:hover,
nav ul li a.active {
color: #fff;
background: #8BC34A;
border-radius: 3px;
}
.menu-toggle {
line-height: 36px;
width: 100%;
background: #000;
text-align: right;
padding: 0 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-toggle {
display: block;
}
}
/* end responsive nav */
/* start service card */
.container {
width: 1200px;
margin: auto;
display: flex;
justify-content: space-around;
align-items: center
}
* {
box-sizing: border-box;
font-family: Tahoma
}
.box {
flex-basis: 25%;
margin-top: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
text-align: center;
padding: 20px;
border-radius: 4px;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}
.box .icon {
width: 70px;
height: 70px;
border-radius: 5% 45%;
background: #000;
color: #fff;
font-size: 55px;
font-weight: 500;
position: relative;
margin: 0 auto;
transition: 1s
}
.box:nth-child(1) .icon {
box-shadow: 0 0 0 0 #e91e63;
background: #e91e63
}
.box:nth-child(1):hover .icon {
box-shadow: 0 0 0 400px #e91e63;
background: #e91e63
}
.box:nth-child(2) .icon {
box-shadow: 0 0 0 0 #23e629;
background: #23e629
}
.box:nth-child(2):hover .icon {
box-shadow: 0 0 0 400px #23e629;
background: #23e629
}
.box:nth-child(3) .icon {
box-shadow: 0 0 0 0 #2396f3;
background: #2396f3;
}
.box:nth-child(3):hover .icon {
box-shadow: 0 0 0 400px #2396f3;
background: #2396f3;
}
.box-content {
position: relative;
transition: 0.5s;
z-index: 1;
margin-bottom: 20px;
font-size: 16px;
}
.box-content h3 {
text-transform: capitalize;
}
.box:hover .box-content {
color: #fff
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
z-index: 1
}
.box a {
text-decoration: none;
color: #000;
padding: 8px 15px;
font-weight: 500;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 4px;
text-transform: capitalize;
position: relative;
z-index: 1
}
/* end service cards */
/* start stories section */
.stories {
display: flex;
justify-content: flex-start;
align-items: center;
color: #fff
}
.story {
transition: 0.5s
}
.story p {
padding: 5px 50px;
line-height: 20px;
font-size: 14px
}
.story h4 {
padding: 0px 50px;
text-transform: capitalize
}
.story:nth-of-type(1) {
background: #00BCD4
}
.story:nth-of-type(3) {
background: #673AB7
}
.story:nth-of-type(2) {
background: #F06292
}
.story button {
background: transparent;
margin: 10px 150px 30px;
border-radius: 5px;
padding: 5px 15px;
border: 2px solid #fff;
color: #fff;
text-transform: capitalize;
transition: 0.5s
}
.story button:hover {
cursor: pointer;
background: rgba(0, 0, 0, 0.6)
}
.story:hover {
transform: translateY(20px)
}
/*.story:nth-of-type(1)button:hover{
color:#00BCD4;
}
.story button:hover:nth-of-type(2){
color:#673AB7
}
.story button:hover:nth-of-type(3){
color:#F06292
}*/
/* end stories section */
/* start new */
.exp .container {
display: flex;
justify-content: space-between
}
.exp .image {
flex-basis: 55%;
}
.exp .image img {
min-width: 100%
}
.exp h2 {
color: #263238;
margin-bottom: 380px;
margin-left: 10px;
}
.exp .details {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border: 1px solid transparent;
/* testing */
padding: 10px
}
.exp .details .item {
flex-basis: 43%;
margin-bottom: 30px
}
.exp .details .item .headline {
display: flex;
justify-content: flex-start;
align-items: center
}
.exp .details .item .bo {
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: rgba(0, 0, 0, 0.1);
width: 40px;
height: 40px;
color: #fff;
transition: 0.5s;
text-align: center;
}
.bo i {
color: #fff;
font-size: 20px;
line-height: 40px
}
.exp .details .item .bo:hover {
background: #8BC34A;
}
.exp .details .item h4 {
color: #37474F;
margin-left: 10px;
text-transform: capitalize
}
.exp .details .item .headline:hover .bo {
background: #8BC34A;
}
.exp .details .item p {
font-size: 14px;
color: #78909C;
line-height: 22px;
margin-top: 0px
}
.exp .details .item span {
font-size: 15px;
transition: 0.5s;
font-weight: bold
}
.exp .details .item span:hover {
color: #558B2F;
cursor: pointer
}
.exp .details .item span:hover i {
color: #558B2F
}
.exp .details .item i {}
/* start timeline*/
.timeline {
background: #FAFAFA;
min-height: 500px;
}
.testo {
position: relative;
display: flex;
justify-content: space-around;
}
.timeline .testo:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
min-height: 500px;
background: green;
}
.testo .contento {
color: #000;
flex-basis: 30%;
border: 1px solid #558b2f
}
/* start sponsers */
.sponsers ul {
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 15px
}
.sponsers ul li {
transition: 0.1s;
cursor: pointer;
background: #ECEFF1;
}
.sponsers ul li i {
font-size: 92px;
padding: 25px;
color: #fff;
transition: 1s;
}
.sponsers ul li:hover {
transform: translateY(10px);
transform: scale(1.1)
}
.sponsers ul li:hover i {
font-size: 92px;
background: #8BC34A;
}
/* start footer */
footer {
background: #101619;
color: #fff
}
footer h3,
footer h4 {
text-transform: capitalize;
color: #bdbebf;
}
.footer-upper {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.footer-upper .footer-col {
flex-basis: 24%;
border: 1px solid transparent
/* for debugging */
}
.footer-col:nth-of-type(1) h2 {
padding-left: 13px;
}
.footer-col:nth-of-type(1) p {
font-size: 12px;
line-height: 18px;
padding: 0 15px;
color: #90A4AE
}
.footer-col:nth-of-type(1) .social {
border-top: 1px solid #26311f;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
/* test */
.social-item {
display: flex;
flex-direction: column;
align-items: center
}
.social-item h5 {
position: relative;
padding-left: 40px
}
.social-item span {
font-size: 10px;
color: darkcyan
}
.social-item h5:before {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 5px;
text-align: center;
line-height:
}
.social-item:nth-of-type(1) h5:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
background: blue;
}
.social-item:nth-of-type(2) h5:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
background: orange;
}
.social-item:nth-of-type(3) h5:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
background: pink;
}
.social-item:nth-of-type(4) h5:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
background: red;
}
/* test */
.footer-col:nth-of-type(1) .social-item {
display: flex;
align-items: center;
justify-content: space-around;
flex-basis: 45%
}
.footer-col h3 {
padding: 0;
margin-top: 25px;
}
.footer-col:nth-of-type(2) .footer-item {
border-bottom: 1px solid #26311f;
margin-bottom: 10px;
padding-bottom: 5px
}
.footer-col:nth-of-type(2) .footer-item:last-of-type {
border-bottom: none
}
.footer-item h4 {
font-size: 14px;
padding: 0px 20px;
margin: 0;
position: relative
}
.footer-item h4:before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: transparent;
}
.footer-item p {
font-size: 12px;
color: #90A4AE
}
.footer-item span {
font-size: 11px;
}
.footer-col:nth-of-type(3) {
padding: 0 10px
}
.footer-col:nth-of-type(3) span {
padding: 5px 12px;
border: 1px solid #CFD8DC;
font-size: 16px;
color: #CFD8DC;
display: inline-block;
margin-bottom: 7px;
transition: 0.5s;
border-radius: 3px;
cursor: pointer
}
.footer-col:nth-of-type(3) span:hover {
background: #558b2f;
border: 1px solid #558b2f;
color: #fff
}
.footer-col:nth-of-type(3) h5 {
border-bottom: 1px solid #26311f;
position: relative;
padding: 15px;
margin: 2px;
transition: 0.5s;
cursor: pointer;
color: #90A4AE
}
.footer-col:nth-of-type(3) h5:last-of-type {
border-bottom: none;
}
.footer-col:nth-of-type(3) h5:hover {
color: #558b2f
}
.footer-col:nth-of-type(3) h5:before {
content: "";
position: absolute;
top: 18px;
left: 0;
width: 8px;
height: 8px;
transition: 0.5s;
background: #558b2f;
}
.footer-col:nth-of-type(3) h5:hover:before {
background: #90A4AE
}
.footer-col:nth-of-type(4) h4 {
margin: 10px 0 0 0
}
.footer-col:nth-of-type(4) p {
font-size: 12px;
color: #90A4AE;
padding-bottom: 10px;
border-bottom: 1px solid #26311f;
}
.footer-col:nth-of-type(4) .footer-sec:last-of-type p {
border-bottom: none
}
.footer-copyrights {
background: #0d1215;
text-transform: uppercase;
padding: 10px 100px;
font-size: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment