Skip to content

Instantly share code, notes, and snippets.

@MuhammadRabi

MuhammadRabi/index.html

Created April 29, 2019 16:30
Show Gist options
  • Save MuhammadRabi/6be6afa76d9928660d6aea6fc454fca7 to your computer and use it in GitHub Desktop.
Save MuhammadRabi/6be6afa76d9928660d6aea6fc454fca7 to your computer and use it in GitHub Desktop.
Download ZIP
P20-Porto III
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fullscreen-nav</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Normalize.css -->
<link rel="stylesheet" href="css/normalize.css">
<!-- my style -->
<link rel="stylesheet" href="css/mystyle-p20.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=Cairo" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="logo">COBALT-Design</div>
<div class="bars">
<i class="fas fa-bars"></i>
</div>
</nav>
<div class="menu-list">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">contact us </a></li>
<li><a href="#">photo Gallery</a></li>
</ul>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">contact us </a></li>
<li><a href="#">photo Gallery</a></li>
</ul>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">careers</a></li>
<li><a href="#">contact us </a></li>
<li><a href="#">photo Gallery</a></li>
</ul>
<ul class="menu">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">منتجات</a></li>
<li><a href="#">تكنولوجيا</a></li>
<li><a href="#">معلومات</a></li>
<li><a href="#">اتصل بنا </a></li>
<li><a href="#">وظائف</a></li>
</ul>
<ul class="menu">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">منتجات</a></li>
<li><a href="#">تكنولوجيا</a></li>
<li><a href="#">معلومات</a></li>
<li><a href="#">اتصل بنا </a></li>
<li><a href="#">وظائف</a></li>
</ul>
</div>
<section></section>
<div class="overlay">
<div class="container center">
<h1>home sweet home</h1>
<p> home quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homehome quite homevhome quite homehome quite homehome quite homehome quite homehome quite home</p>
</div>
</div>
</header>
<!--
<section class="united">
<div class="color-one"></div>
<div class="color-two"></div>
<div class="pic"></div>
</section>
-->
<section>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13640.180608946937!2d29.997402222287565!3d31.27484624291076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14f5d070fc90f301%3A0xb98635fcce33c78c!2sEl-Mandara%2C+Al+Mandarah+Bahri%2C+Qism+El-Montaza%2C+Alexandria+Governorate!5e0!3m2!1sen!2seg!4v1556045809889!5m2!1sen!2seg" width="1325" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</section>
<section class="business-cards">
<div class="container">
<div class="card">
<!--img src="#" alt="image01"-->
<div class="layer"></div>
<div class="img"></div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut m veniam, quis nostrud exercitatio</p>
<h3>Tom karius</h3>
<span>UI/UX Designer</span>
</div>
<div class="card">
<!--img src="#" alt="image01"-->
<div class="layer"></div>
<div class="img"></div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut m veniam, quis nostrud exercitatio</p>
<h3>Mark Zola</h3>
<span>UI/UX Designer</span>
</div>
<div class="card">
<!--img src="#" alt="image01"-->
<div class="layer"></div>
<div class="img"></div>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut m veniam, quis nostrud exercitatio</p>
<h3>Markus Aurellio</h3>
<span>UI/UX Designer</span>
</div>
</div>
</section>
<!-- start alpha section -->
<section class="alpha">
<div class="overlay">
<div class="container">
<div class="content">
<h2>subscribe to our newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du</p>
<button>subscribe</button>
</div>
</div>
</div>
</section>
<!-- Services section -->
<section class="services center">
<div class="container">
<h2>Leading company in <span>energy solutions</span> and inovations</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Du</p>
<div class="service-box-wrapper">
<div class="service-box">
<i class="fab fa-gg-circle"></i>
<h3>home building and inovation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>
<div class="service-box">
<i class="fab fa-galactic-senate"></i>
<h3>home building and inovation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>
<div class="service-box">
<i class="fas fa-desktop"></i>
<h3>home building and inovation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>
<div class="service-box">
<i class="fas fa-recycle"></i>
<h3>home building and inovation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>
<div class="service-box">
<i class="fas fa-award"></i>
<h3>home building and inovation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>
<div class="service-box">
<i class="fas fa-atlas"></i>
<h3>home building and inovation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore </p>
</div>
</div>
</div>
</section>
<!--scroll to top -->
<div class="scroll-to-top"><i class="fas fa-angle-double-up"></i></div>
<!-- end scroll to top -->
<!-- start footer -->
<footer>
<div class="container">
<div class="part">
<p></p>
<div class="social-icons">
<ul>
<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fab fa-facebook"></i></a></li>
<li><a href="#"><i class="fab fa-behance-square"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="part useful-links">
<h3>useful links</h3>
<div class="footer-lists">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</div>
<div class="part contacts">
<h3>contacts</h3>
<ul>
<li><i class="fas fa-id-card-alt"></i>Mon-Friday 9AM-6PM</li>
<li><i class="fas fa-phone-square"></i>+201066940972</li>
<li><i class="fas fa-paper-plane"></i>Mon-Friday</li>
<li><i class="far fa-envelope"></i><a href="mailto:einestien_1942@yahoo.com">Einestien</a></li>
</ul>
</div>
<div class="part newsletter">
<h3>newsletter</h3>
<form>
<input type="email" name="email" placeholder="your email ..">
</form>
<button>subscribe</button>
</div>
</div>
<div class="copyrights">
<p>Copyrights @2019 Cobalt-Design Co. All rights reserved.</p>
</div>
</footer>
<!-- jQuery Library CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- my script -->
<!--script src="js/script.js"></script-->
<script>
$(function() {
var myMenu = $('.menu-list')
$('.bars').on('click', function() {
myMenu.toggleClass('is-visible');
$('.bars').toggleClass('fa-bars fa-times');
if (myMenu.hasClass('is-visible')) {
myMenu.animate({
left: 0
}, 500);
} else {
myMenu.animate({
left: '-' + myMenu.innerWidth()
}, 500);
}
});
});
// scroll-to-top button
$(window).scroll(function() {
scrollToTop();
});
//cashing the main selector
var Top = $('.scroll-to-top');
// creating the function
function scrollToTop() {
if ($(window).scrollTop()) {
Top.fadeIn(500);
} else {
Top.fadeOut(500);
}
}
// to activate the scroll-to-Top Button
Top.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 1000);
});
</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
}
/* end global rules */
/* start framework */
.first-color-bg {
background: #03A9F4;
color: #fff
}
.first-color {
color: #03A9F4;
background: #fff
}
.first-color-text {
color: #03A9F4;
}
/* end framework */
body {
height: 2000px;
font-family: Helvetica
}
nav {
background: black;
color: #fff;
min-height: 60px;
display: flex;
justify-content: space-between;
padding: 0 100px;
align-items: center
}
nav .logo {
font-size: 32px;
/* background:url('../img/svg/Netflix_logo-vector.svg');
background-size:cover;
height:50px;
min-width:100%;*/
}
.bars i {
font-size: 32px;
cursor: pointer;
position: absolute;
top: 15px;
right: 50px;
z-index: 999
}
header section {
background: url('../img/traffic-a-lot-of-cars-driving-across-the-golden-gate-bridge-picjumbo-com.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 94vh;
position: relative
}
header .overlay {
position: absolute;
width: 100%;
height: 94vh;
top: 60px;
left: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
}
header .overlay .container {
margin-top: 200px;
}
header .overlay h1 {
border: 8px solid #00B0FF;
padding: 15px;
width: 400px;
margin: 50px auto;
text-transform: uppercase;
transition: 0.5s
}
header .overlay h1:hover {
border: 8px solid #f1f1f1;
width: 450px;
color: #00B0FF
}
header .overlay p {
padding: 0 125px;
line-height: 23px;
}
header .menu-list {
display: flex;
align-items: center;
justify-content: space-around;
background: #00B0FF;
color: #fff;
font-family: 'Cairo', sans-serif;
height: 100vh;
position: absolute;
top: 0;
left: -100%;
width: 100%;
z-index: 2;
transition: 0.5s ease-in-out;
}
/*.menu-list span {
position: absolute;
top: 15px;
right: 35px;
font-size: 48px;
cursor: pointer;
transition: 0.5s
}*/
.menu-list span:hover {
transform: rotate(90deg)
}
header .menu {
display: flex;
flex-direction: column;
border-left: 1px solid #333
}
header .menu li {
font-size: 26px;
font-weight: 500;
padding: 10px 0;
text-transform: capitalize;
}
header .menu li a {
transition: 0.5s
}
header .menu li a:hover {
color: #333
}
/* trial 001 */
/*.united {
margin-top: 100px;
position: relative;
}
.united .color-one {
background: #ccc;
font-size: 50px;
float: left;
width: 75%;
z-index: 1;
height: 400px;
}
.color-two {
background: #fff;
color: #fff;
float: right;
width: 25%;
font-size: 50px;
}
.pic {
position: absolute;
border: 1px solid #000;
top: 10px;
left: 100px;
width: 400px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
height: 500px;
background: #555;
border-radius: 5px;
z-index: 2
}
*/
/* trial 001 */
/* trial 002 business cards */
.business-cards {
background: #eee;
font-family: Helvetica
}
.business-cards .container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.business-cards .container .card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
border-radius: 5px;
flex-basis: 25%;
background: #333;
position: relative;
transition: 0.5s;
overflow: hidden;
/* to hide the overflowed portion of the layer */
}
.card .layer {
position: absolute;
top: calc(100% - 5px);
/* equals full height - 5px */
width: 100%;
height: 100%;
left: 0;
z-index: 1;
transition: 1s;
background: #03A9F4;
background: -moz-linear-gradient(-45deg, #03A9F4 0%, #FF1F26 100%);
background: -webkit-linear-gradient(-45deg, #03A9F4 0%, #FF1F26 100%);
background: linear-gradient(135deg, #03A9F4 0%, #FF1F26 100%);
}
.card:hover .layer {
top: 0;
}
.business-cards .container .card:hover {}
.card .img {
border: 2px solid #ddd;
width: 125px;
height: 125px;
background: #bdc3c7;
border-radius: 50%;
position: absolute;
top: -60px;
z-index: 2;
}
.card p {
text-align: center;
margin-top: 65px;
padding: 5px 25px;
font-size: 18px;
line-height: 24px;
z-index: 2;
}
.card h3 {
margin-bottom: 5px;
z-index: 2;
}
.card span {
color: #ddd;
font-style: italic;
margin-bottom: 20px;
z-index: 2;
}
/* its better to wrap p + h3 + span in a "content" div */
/* trial 002 business cards */
/* section alpha */
.alpha {
background: url('../img/beta-sec.jpg');
background-size: cover;
text-align: center;
position: relative;
height: 300px;
}
.alpha .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
background: rgba(0, 0, 0, 0.8)
}
.alpha .content {
margin-top: 60px;
padding: 10px 250px;
color: #EEEEEE;
font-family: Helvetica
}
.alpha .content h2 {
text-transform: uppercase;
font-weight: 700;
text-transform: capitalize
}
.alpha .content p {
font-size: 14px;
line-height: 24px;
}
.alpha .content button {
background: transparent;
border-radius: 15px;
color: #fff;
border: 1px solid transparent;
font-size: 14px;
padding: 7px 20px;
cursor: pointer;
text-transform: capitalize;
background: #03A9F4;
transition: 0.5s;
font-weight: 700;
}
.alpha .content button:hover {
color: #03A9F4;
background: #fff;
transform: translateY(10px)
}
/* start services */
.services {
background: #EEEEEE
}
.services .container {
width: 1000px
}
.services h2 {
color: #444;
font-size: 48px;
padding: 0 150px;
}
.services span {
font-weight: 700;
}
.services p {
padding: 0 200px;
font-size: 16px;
line-height: 24px;
}
.services .service-box-wrapper {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
}
.service-box {
flex-basis: 31%;
border: 1px solid #ccc;
margin-top: 20px;
transition: 0.5s;
border-radius: 5px;
background: #FAFAFA;
}
.service-box i {
font-size: 64px;
margin-top: 15px;
color: #03A9F4
}
.service-box h3 {
color: #000;
padding: 0 55px;
}
.service-box p {
color: #616161;
padding: 0 25px;
}
.service-box:hover i {
color: #fff;
}
.service-box:hover {
background-color: #03A9F4;
transform: translateY(-10px)
}
.service-box:hover p {
color: #fff
}
.service-box:hover h3 {
color: #212121
}
/* end services section */
/* start scroll-top-top */
.scroll-to-top {
width: 40px;
height: 40px;
top: 600px;
position: fixed;
right: 30px;
background: #03A9F4;
color: #fff;
border-radius: 5px;
text-align: center;
cursor: pointer;
transition: 0.5s;
opacity: 0.7;
display: none
}
.scroll-to-top i {
font-size: 34px
}
.scroll-to-top:hover {
transform: translateY(-10px);
opacity: 0.9
}
/* end scroll-top-top */
/* start footer */
footer {
background-color: #211f1f;
color: #d4d3d3;
}
footer .container {
display: flex;
justify-content: space-around;
align-items: center
}
footer .part {
flex-basis: 23%;
border: 1px solid transparent
/* for testing */
}
footer h3 {
color: #fff;
text-transform: capitalize
}
footer .social-icons ul {
display: flex;
justify-content: space-around;
}
footer .social-icons a {
margin: -20px;
}
footer .social-icons i {
font-size: 28px;
flex-basis: 25%;
transition: 1s;
}
.social-icons .fa-twitter-square:hover {
color: #1da1f2;
transform: rotate(360deg);
}
.social-icons .fa-facebook:hover {
color: #3b5998;
transform: rotate(360deg)
}
.social-icons .fa-behance-square:hover {
color: #1769ff;
transform: rotate(360deg)
}
.social-icons .fa-linkedin:hover {
color: #0077b5;
transform: rotate(360deg)
}
footer .footer-lists {
display: flex;
justify-content: space-around;
margin-right: 140px
}
/*footer .footer-lists a{
padding:150px 0
}*/
footer .useful-links h3 {
margin-left: 30px;
}
footer .contacts h3 {
margin-left: 45px;
}
footer .contacts i {
color: #03A9F4;
margin-right: 7px;
font-size: 18px;
padding-top: 5px;
}
footer .contacts ul li {
padding: 1px 10px;
font-size: 14px
}
footer button {
background: transparent;
border-radius: 15px;
color: #03A9F4;
border: 2px solid #03A9F4;
font-size: 16px;
padding: 7px 30px;
cursor: pointer;
text-transform: capitalize;
transition: 0.5s;
font-weight: 700;
}
footer button:hover {
color: #fff;
background: #03A9F4
}
footer .newsletter {
padding-left: 25px;
margin-bottom: 40px;
}
footer input[type=email] {
background: #333;
border-radius: 15px;
height: 30px;
margin-bottom: 20px;
padding: 15px;
font-size: 16px;
color: #ccc;
border: 1px solid transparent
}
footer .copyrights {
background-color: #2d2c2c;
padding: 0 100px;
}
footer .copyrights p {
padding: 10px;
font-weight: 700;
font-size: 12px
}
/* end footer */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment