Skip to content

Instantly share code, notes, and snippets.

@o0pmitev

o0pmitev/index.html

Last active April 23, 2022 03:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save o0pmitev/f07ded7b6bc71497c2f92f7fc04d25ca to your computer and use it in GitHub Desktop.
Save o0pmitev/f07ded7b6bc71497c2f92f7fc04d25ca to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Website: Portfolio
Raw
index.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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Oswald|Orbitron|KoHo|Cute+Font">
<title>Plamen Mitev`s page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> -->
</head>
<body data-spy="scroll" data-target="#navbarID">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation" id="navbarID">
<a class="navbar-brand" href="https://careerfoundry.com">CareerFoundry</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link" href="#carouselExampleIndicators">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about_nav">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact_nav">Contact<span class="sr-only">(current)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq_nav">FAQ<span class="sr-only">(current)</a>
</li>
</ul>
</div><!-- /collapse navbar-collapse -->
</nav><!-- /navbarID -->
<!-- Carousel -->
<section class="sceleton" id="carouselExampleIndicators">
<div class="row" id=mainID>
<nav class="containerCR col-xs-12 col-sm-12 col-md-12">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="row" id="in_carouselID">
<div class="carousel-item active">
<img class="d-block w-100" src="img/first_slide.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block" id="first_slideID">
<div class="row">
<h1 class="col-xs-12 col-md-12">Plamen Mitev</h1>
<p class="col-xs-12 col-md-12">Web Developer</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/second_slide.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block" id="second_slideID">
<h1>TAKING IDEAS TO REALITY</h1>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/third_slide.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block" id="third_slideID">
<h1>Art is the life of the soul</h1>
<p>"Emilian Stanev"</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</nav>
<!--/containerCR -->
<!-- Three Column Grid -->
<div class="container col-xs-12 col-sm-12 col-md-8">
<div class="row" id="work">
<div class="col-xs-12 col-sm-4 col-md-4">
<h2>Portfolio Concept</h2>
<p>Unfortunately i don't have previous experience in this field. This is my work over the <a href="#" title="a bonus exercises in careerfoundry course" id="item1">bonus</a> exercieces!<br></p>
<div class="dropdown">
<button class="dropbtn" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="a side projects" &raquo;>Projects</button>
<div class="dropdown-content">
<a href="calculator/calculator.html" target="_blank"><i class="fas fa-calculator"></i> Calculator</a>
<a href="blog/blog.html" target="_blank"><i class="fab fa-blogger"></i> My Blog</a>
<a href="pmitev/index.html" target="_blank"><i class="fas fa-file"></i> Portfolio_V2</a>
</div>
</div>
</div><!-- /portfolio concept -->
<div class="col-xs-12 col-sm-4 col-md-4">
<h2>Project Goals</h2>
<p>I am taking this course part time so, each week i can commit from 20 <i>to</i>
30 hours of work on this course.</p>
<button type="button" class="btn btn-primary btn_about" data-toggle="tooltip" data-placement="top" title="under construction">View details &raquo;</button>
</div><!-- /project goals -->
<div class="col-xs-12 col-sm-4 col-md-4">
<h2>Course Goals</h2>
<p>My main goal for taking this course is to obtain the needed skill to become a successful
<i>Front-end Developer</i>. I am trying to change my career path and advance in the <i>Web Developers</i>
sphere. After finishing this course i want to be hired as an entry level developer or to become
a freelancer on full time working day.</p>
<button type="button" class="btn btn-primary btn_about" data-toggle="tooltip" data-placement="top" title="under construction">View details &raquo;</button>
</div><!-- course goals -->
</div><!-- /container row -- >
</div><!-- /container -->
</div><!-- /main row -->
</section><!-- /sceleton-->
<!-- About Page -->
<!-- <div class="container"> -->
<section class="about content" class="nav-item" id="about_nav">
<div class="row" id="about_header_rowID">
<div class="col-xs-2 col-sm-2 col-md-4"></div>
<div class="header col-xs-10 col-sm-10 col-md-3">
<h1>About Me</h1>
</div><!-- /header -->
</div><!-- /about_header_rowID -->
<div class="row" id="ctctID">
<div class="container content">
<div class="image column col-xs-12 col-sm-8 col-md-3">
<img src="img/portfolio.jpg" alt="portfolio image">
</div><!-- /image -->
<div class="intro column si col-xs-12 col-sm-12 col-md-4">
<h2>Introduction</h2>
<p>I can`t never stop workin` hard<br>each day i feel i have to improve<br>
Hard work<br>Determination<br>I`ve got to keep pushing myself!</p>
</div><!-- /intro -->
<div class="skill column si col-xs-12 col-sm-12 col-md-3">
<h3>My Skills</h3>
<ul id="skill-list">
<li>HTML</li>
<li>CSS</li>
<li>Linux System Administration</li>
<li>Cisco Networking</li>
</ul>
</div><!-- /skill -->
</div><!-- /container content-->
</div><!-- /ctctID_row-->
<div class="row" id="main_text_rowID">
<div class="container">
<div class="main-text col-xs-12 col-sm-12 col-md-12">
<h3>More About Me</h3>
<p>My name is <i>Plamen Mitev</i>. Born in 1989 in <i>Haskovo, Bulgaria</i>. I moved here in <i>Berlin</i>
in 2017 because my wife was living here. I have started using computer from 2002, mostly for
gaming. Since 2015 i have started using different "flavors" of <i>GNU/Linux</i> and exploring the world
of IT. This is the first professional course that i take and hope after the end of this course
i can serve all of your web development needs.</p>
</div><!-- /main text -->
</div><!-- /container-->
</div><!-- /row main text -->
<!-- WORK -->
<div class="container">
<div class="row" id="arbait">
</div><!-- /row -->
</div><!-- /container-->
<!-- MODAL -->
<!-- <div class="container"> -->
<div class="row">
<div class="col-sm">
<h2>Learn More</h2>
</div><!-- /col-sm -->
<div class="col-sm">
<button type="button" class="btn btn-primary modal-button" data-toggle="modal" data-target=".bg-example-modal">Modal</button>
<div class="modal fade bg-example-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5>CV</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div><!-- /modal-header -->
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<embed id="modal-embed" src="img/CV-English.pdf"><!-- I must put my CV here !!!!!!!!!!!!!! -->
</div><!-- /modal-body -->
</div><!-- /modal-content -->
</div><!-- /modal-dialog -->
</div><!-- /modal fade -->
</div><!-- /col-sm -->
</div><!-- /row -->
<!-- /MODAL -->
</section><!-- /about -->
<!--/end of the about page -->
<!-- Contact page -->
<div id="contact_nav" class="contact_info">
<div class="container">
<div class="row">
<div class="contact col-xs-12 col-sm-12 col-md-12">
<h4 class="contact">Find me at:</h4>
<p><b><i class="fas fa-envelope"> Email:</i></b>pmitev89@gmail.com</p>
<p><b><i class="fas fa-mobile"> Mobile:</i></b> 232134123</p>
<p><b><i class="fas fa-fax"> Fax:</i></b> 234 2314</p>
<a href="https://gist.github.com/o0pmitev/f07ded7b6bc71497c2f92f7fc04d25ca" target="_blank" id="gitID"><img src="img/Mark.png" alt="github icon" class="center"></a>
</div><!-- /contact -->
</div><!-- /row -->
<!-- Form -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-10 contact_form">
<div id="contact">
<form>
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" name="name" for="name" placeholder="Name*" class="form-control" id="name" required/>
</div><!-- /form-group -->
<div class="form-group">
<label for="email">
Email address
</label>
<input type="email" name="email" for="email" placeholder="example@gmail.com *" class="form-control" id="email" required/>
</div><!-- /form-group -->
<label for="message-box">
Message
</label>
<div class="form-group">
<textarea style="resize:none" name="text-area" cols="40" rows="5" id="message-box" placeholder=" Your message here *" required/></textarea>
<p id="char-count"></p>
<p id="visible-coment"></p>
</div><!-- /area -->
<button type="submit" id="submit-button" class="btn btn-primary">Send</button>
</form>
</div><!-- /contact -->
</div><!-- /contact_form-->
</div>
<!--/row-->
</div><!-- /container -->
</div><!-- /container for contact page -->
<!-- End of contact page -->
<!-- MAPS -->
<div id="myMap">
</div>
<!-- /MAPS -->
<!-- FAQ page-->
<div class="container content" id="faq_nav">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3"></div>
<section class="containerCoL col-xs-12 col-sm-12 col-md-3">
<div class="row" id="inner_rowID">
<div id="accordion">
<div class="card">
<div class="card-header mb-0 col-xs-12 col-sm-12 col-md-12" id="headingOne">
<h5 class="mb-0 col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why have i decided to become a web developer?
<i class="fas fa-arrow-circle-down"></i>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
The simple answer is that I just love it!I’ve been messing up with HTML/CSS code since 11th grade. I have been wondering why my websites look really unpolished.
Then I came to know about different technologies like, javascript and it’s frameworks, and you can build some amazing things out of those.Now, I always try to make
something better than my previous project, hence, getting more attracted to web-development.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0 col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Why should you hire me?
<i class="fas fa-arrow-circle-down"></i>
</button>
</h5>
</div>
<div id="collapseTwo" class="#missing class" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Hard working, self-disciplined, really good at managing my time, fast learner!<b> I DENY FAILURE! </b>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0 col-xs-12 col-sm-12 col-md-12">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
How long does it take me to build your site?
<i class="fas fa-arrow-circle-down"></i>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Once I have all the content (text and images), it should take 3-6 weeks for me to design and build a typical, small scale website of 8-10 pages.
The most time consuming phase of any web project is collecting and writing the content.
</div>
</div>
</div>
</div>
</div>
<!--box row-->
</section><!-- /containerCoL -->
</div><!-- /row -->
</div><!-- /container FAQ page -->
<!-- End of FAQ page -->
<!-- Embed Video -->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div><!-- /embed-responsive -->
<!-- Footer -->
<footer>
<div class="copyright">
<p>&copy; Plamen Mitev 2018</p>
<iframe class="fb_button" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450"
height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<a href="https://twitter.com/PlamenMitev4?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-screen-name="false" data-show-count="false">Follow @PlamenMitev4</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/work.js"></script>
<script src="js/scripts.js"></script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=AuDPrGcPkKopc2l6xQvDICMzya7ubVFwOVl_9A3hQGe4MvI62BDoPMKAd1LLwxkU' async defer></script>
</body><!-- /body -->
</html>
Raw
scripts.js
$(document).ready(function(){
//smooth scrolling
var $root = $('html, body');
$('#navbarID a').click(function() {
var href = $.attr(this, 'href');
if (href != undefined && href != '#') {
$root.animate({
scrollTop: $(href).offset().top
}, 500, function() {
window.location.hash = href;
});
}
return false;
});
//tooltip
$(function () {
$('#item1').tooltip();
});
//clicked
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
$("#submit-button").on('click', function(){
console.log('clicked');
var comment = $('#message-box').val();
console.log(comment);
$('#visible-coment').html(comment);
// $('#message-box').hide('slow');
// return false;
//begin
if(comment === ""){
$("#message-box").css("border", "2px solid red")
} else {
$('#message-box').hide('slow')
};
//end
});
//keyup
$("#message-box").on("keyup", function() {
console.log("keyup happened");
var charCount = $("#message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "yellow")
} else {
$("#char-count").css("color", "coral")
};
});
//work section
for(var i = 0; i < works.length; ++i) {
$("#arbait").append("\
<div class='col-sm-6 col-md-3'>\
<a href='" + works[i].url + "' class='work-img'>\
<img class='img-responsive' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'>P.MITEV:</p>[Project]</span>\
</a>\
</div>\
");
var images = $("#arbait img");
console.log(images);
if (i%2 === 0) {
$(images[i]).css("border", "2px solid black");
} else {
$(images[i]).css("border", "2px solid white");
};
$(".work-img").mouseenter( function() {
$(".info", this).show();
}).mouseleave(function(){
$(".info", this).hide();
});
};
//map ne e vqrno !!! trqbva na novo vsi4ko
// function GetMap(){
// var map = new Microsoft.Maps.Map('#myMap', {
// center: new Microsoft.Maps.Location(52.514579, 13.468397),
// mapTypeId: Microsoft.Maps.MapTypeId.aerial,
// zoom: 10
// });
// }
});//document
/********************************* BING MAP ******************************************/
function GetMap(){
var map = new Microsoft.Maps.Map('#myMap', {
center: new Microsoft.Maps.Location(52.513060, 13.478890),
mapTypeId: Microsoft.Maps.MapTypeId.grayscale,
zoom: 17
});
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
map.entities.push(pushpin);
//console.log click`s
Microsoft.Maps.Events.addHandler(map, 'click', function () { console.log('mapClick');
});
}
Raw
styles.css
* {
box-sizing: border-box
}
.body {
position: relative;
}
.content {
padding-top: 70px;
}
/****************************NAVIGATION****************************/
#navbarID {
position: fixed;
z-index: 12;
width: 100% !important;
}
.navbar-brand {
font-family: 'Orbitron', sans-serif;
color: #0056b3 !important;
}
.nav-item {
text-transform: uppercase;
font-family: 'Orbitron', sans-serif;
}
.nav-link {
color: #ff0 !important;
}
#navbarID {
background-color: coral !important;
}
nav a:hover {
color: #0056b3 !important;
text-decoration: none;
transition: color 600ms;
-webkit-transition: color 600ms;
}
/*****carousel styles*******/
/*first_slide*/
#first_slideID {
position: absolute;
top: 8px;
left: 16px;
margin-right: 30%;
margin-top: 5%;
}
#first_slideID h1 {
font-family: 'Abril Fatface', sans-serif;
color: #000;
font-size: 5em;
text-overflow: clip;
}
#first_slideID p {
font-family: 'Oswald', sans-serif;
font-size: 2em;
font-weight: 100;
color: coral;
text-shadow: 0.5px 0.5px black;
}
/*secong_slide*/
#second_slideID h1 {
text-align: center;
margin-bottom: 14%;
color: coral;
font-size: 3em;
font-family: 'Cute Font', cursive;
text-shadow: 0.6px 0.6px black;
letter-spacing: 1px;
}
/*third_slide*/
#third_slideID h1 {
text-align: center;
font-family: 'Cute Font', cursive;
font-size: 4em;
color: coral;
text-shadow: 0.6px 0.6px black;
letter-spacing: 1px;
}
#third_slideID p {
font-size: 1em;
font-family: 'Oswald', sans-serif;
color: black;
}
#third_slideID {
margin-bottom: 25%;
}
//**************************** TREE COLUM GRID ****************************/
.container {
margin: 0 auto;
width: 80%;
}
/**************************** INDEX PAGE ****************************/
#linkID {
color: #000;
text-decoration: underline overline;
}
#contactID {
color: #000;
text-decoration: underline overline;
margin-left: 15px;
}
.col-sm-4 {
margin-top: 1%;
margin-bottom: 50px;
}
/****************************ABOUT PAGE***************************/
.header {
text-align: center;
padding: 10px;
margin-top: 40px;
margin-bottom: 10px;
}
.column {
float: left;
}
.main-text {
font-size: 1.5em;
padding-top: 20px;
padding-bottom: 140px;
}
.image img {
width: 100%;
border: 1px solid #021a40;
background-color: #fff;
}
/*Typography*/
h1,
h2,
h3 {
font-family: 'Abril Fatface', Verdana, Helvetica, Arial, sans-serif;
}
.intro p {
font-family: 'Oswald', Verdana, Helvetica, Arial, sans-serif;
font-size: 1.5em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skill h3 {
text-align: center;
text-transform: uppercase;
}
.skill {
font-family: 'Oswald', sans-serif;
}
.main-text {
font-family: 'Oswald', sans-serif;
}
/*Color*/
body {
background-color: #c8cdc6;
color: black;
}
.skill {
background-color: #ff7f5033;
color: mintcream;
margin-left: 20px;
}
/**************************** WORKS ***************************/
/* .img-responsive {
display: inline-block;
width: 250px;
height: 250px;
margin-bottom: 40px;
} */
#arbait {
margin-bottom: 40px;
}
.work-img {
display: block;
margin: auto;
max-width: 200px;
position: relative;
}
.info {
position: absolute;
top: 15%;
left: 22%;
color: yellow;
text-shadow: 5px 2px 10px black;
font-family:'Orbitron', Futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
display: none;
}
.proj-title { font-weight: 100; }
/**************************** CONTACT PAGE***************************/
#contact_nav {
background-image: url("../img/contacts.jpg");
background-attachment: fixed;
background-size: cover;
height: 800px;
}
#gitID img {
position: relative;
margin: auto;
width: 20%;
padding: 0 0%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/*TYPOGRAPHY*/
.contact h4 {
text-align: center;
font-family: 'Orbitron', sans-serif;
margin-top: 20px;
}
.contact p {
text-align: center;
color: #AA3939;
}
/*form*/
.form-control {
width: 66%;
}
textarea {
width: 66%;
}
.contact_form {
margin-left: 20%
}
label {
color: #AA3939;
}
#char-count{
color: #AA3939;
}
/************************ MAP ***************************/
#myMap {
height: 400px;
width: 600px;
margin: 20px;
border: 1px solid coral;
left: 32%;
}
/************************ FAQ PAGE ***************************/
.btn-link {
margin-top: 58px;
font-family: 'Orbitron', sans-serif;
background-color: #c8cdc6;
}
.card-header {
background: #c8cdc6;
}
.card-header button {
color: #000;
}
.card-body {
font-size: 20px;
}
#faqID {
background: #c8cdc6;
}
.card-body {
background: #dee1da;
}
/**************************** DROPDOWN BUTTON ***************************/
.dropbtn {
background-color: coral;
color: yellow;
padding: 16px;
font-size: 16px;
border: none;
border-radius: 12px;
transition: all 1s ease;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
background: coral;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #007bff;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #007bff;
}
/**************************** EMBED VIDEO ***************************/
.embed-responsive {
display: block;
position: relative;
left: 29%;
height: 40%;
width: 40%;
border: 3px solid #fff;
margin-top: 20px;
margin-bottom: 20px;
}
/**************************** FOOTER ***************************/
.twitter-follow-button {
float: right;
margin-right: 5px;
}
footer p {
font-size: 0.8em;
float: left;
}
.fb_button {
float: right;
}
/**************************** MODAL ***************************/
@media (min-width: 768px) {
.modal-button button {
float: right;
}
}
#modal-embed {
width: 100%;
height: 500px;
}
.modal-button {
float: right;
margin-bottom: 20px;
margin-right: 10px;
background-color: coral;
border: coral;
color: yellow;
}
.col-sm h2 {
float: left;
margin-left: 10px;
}
.modal-button:hover {
background-color: #007bff;
color: yellow;
transition: all 0.5s ease;
}
/**************************** BUTTONS ***************************/
.btn_about {
background-color: coral;
color: yellow;
padding: 16px;
font-size: 16px;
border: none;
border-radius: 12px;
transition: all 1s ease;
}
/****************************TOOLTIP***************************/
.tooltip-inner {
color: yellow !important;
background: coral !important;
}
Raw
works.js
var works = [
{
title: "First Project",
pic: "../img/works/project1.jpg",
url: "../calculator/calculator.html"
},
{
title: "Second Project",
pic: "../img/works/project2.jpg",
url: "../blog/blog.html"
},
{
title: "Third Project",
pic: "../img/works/project3.jpg",
url: "../pmitev/index.html"
},
{
title: "Fourth Project",
pic: "../img/works/project4.jpg",
url: "https://gist.github.com/o0pmitev/f07ded7b6bc71497c2f92f7fc04d25ca"
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment