Μετάβαση στο κύριο περιεχόμενο

Αναρτήσεις

Εμφάνιση αναρτήσεων με την ετικέτα HTML

Show/Hide Menu with CSS

<style>
  /* wwwfoulscode.com */
  @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}

.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#fbfbfb;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s …

Animated popup menu

Χρονια πολλά καλή χρονια να έχουμε όλοι μας και όλος ο κόσμος!

Ένα καταπληκτικό menu γραμμένο με html και css.
Σας ντίνο τον παρακάτω κώδικα η αλλαγές είναι δικέ σας, υπάρχει live demo στο τέλος του θέματος!

<style>
  /* www.foulscode.com */
  * { padding: 0px; margin: 0px; border: 0px; outline: 0px; }

body {
    font-family:Tahoma, sans-serif;
    font-size: 12px;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

li { list-style: none; }

.container { margin: 0px 20% 0px 20%; }

#head { margin-top: 20px; }

#menu .box {
    position: fixed;
    text-align: center;
    overflow: hidden;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: rgba(0,0,0,0.8);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#menu ul {
    position: relative;
    top: 20%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
  …

Hacking Resources

Disclosures

Application Logic

06/18/2013 - https://labs.spotify.com/2013/06/18/creative-usernames/ - Creative usernames and Spotify account hijacking
06/26/2013 - Hijacking a Facebook Account with SMS - https://whitton.io/articles/hijacking-a-facebook-account-with-sms/
03/25/2014 - Phabricator Bypass auth.email-domains - https://hackerone.com/reports/2233
05/15/2016 - The Bank Job - https://boris.in/blog/2016/the-bank-job/
05/19/2016 - InstaBrute: Two Ways to Brute-force Instagram Account Credentials - https://www.arneswinnen.net/2016/05/instabrute-two-ways-to-brute-force-i...
06/06/2016 - Trello bug bounty: Payments informations are sent to the webhook - https://hethical.io/trello-bug-bounty-payments-informations-are-sent-to-...
06/07/2016 - Pwning Pornhub (memcache) - https://blog.zsec.uk/pwning-pornhub/
07/01/2016 - Magento – Re-Installation & Account Hijacking Vulnerabilities - http://netanelrub.in/2016/07/01/magento-re-installation-account-hijackin...
08/08/2016 - Free way to Facebook …

Κάντε το blog/site σας να ανανεώνεται αυτόματα

Για να κάνετε μια σελίδα να ανανεώνεται συνεχεια θα πρέπει να προσθέσετε τον παρακάτω κώδικα!
Στον παρακάτω κοντιά θα πρέπει να ρυθμίσετε σε πια σελίδα θα θέλετε να ανανεώνεται αυτόματα η και να μεταπηδά σε άλλη σελίδα.
Ρυθμίστε το url που θέλετε να ανανεώνεται η σελίδα η την σελίδα που θέλετε να μεταπηδά. Ο χρόνος αναμονής στον παρακάτω κώδικα είναι 60 δευτερόλεπτα το οποιο μπορείτε να το αλλάξετε!


<meta http-equiv="Refresh" content="60; URL=http://www.foulscode.com">

DEMO

Δημιουργώντας jQuery tabs με χρήση HTML και CSS.Ειδικά για αρχάριους..!

Demo του jQuery Tabs tutorial.
Ας δούμε ένα demo, για να δείτε τι θα φτιάξουμε σήμερα.Είναι πολύ απλό να δημιουργήσετε jQuery tabs με απλή HTML και λίγο CSS, όσο δεν φαντάζεστε.

Προαπαιτούμενη γνώση για το tutorial αυτό.
Οι γνώσεις που χρειάζονται για να παρακολουθήσετε το tutorial αυτό είναι πολύ απλή γνώση HTML-CSS και ελάχιστη γνώση jQuery.Ο κώδικας θα εξηγείται αναλυτικά στα σημεία που χρειάζεται.. :)

Ξεκινώντας το jQuery Tabs tutorial…
Πριν ξεκινήσουμε θα κάνουμε την εξής παρατήρηση. Όλο τον σημερινό κώδικα θα τον γράψουμε σε ένα αρχείο , το tabs.html. Αυτή η πρακτική ΔΕΝ ΣΥΝΙΣΤΑΤΑΙ σε κανονικά websites απλά εμείς θα το κάνουμε έτσι για λόγους παρουσίασης.Κανονικά πρέπει τα stylesheets, τα js αρχεία και το html να είναι σε ξεχωριστά αρχεία και να τα καλούμε όπου χρειαζόμαστε.Επίσης πολύ καλό είναι να το δημιουργήσετε και να το τρέξετε σε περιβάλλον WAMPserver.

Ξεκινάμε , δημιουργώντας στον αγαπημένο μας editor ένα κενό αρχείο και το σώζουμε με το όνομα :tabs.html. To αρχείο αυτό εί…

Demo for Tabbed Layout with CSS

Με το πάτημα του Tab2 το κείμενο έρχεται από κάτω προς τα επάνω και καλύβη το άλλο, δείτε το demo και θα καταλάβετε.

Αντιγραφή τον παρακάτω κώδικα:

<style>
/* FoulsCode.blogspot.gr */
* {margin:0;padding:0}
body {
  min-height:3000px;
  background-color:skyblue;
  font:normal normal 13px Arial,Sans-Serif;
  color:black;
}
/* Set the target element as a fixed position element to prevent page jump */
span {
  display:block;
  position:fixed;
  top:0;
  left:0;
}
/* --Basic tab dimension-- */
#tab {
  width:400px;
  margin:200px auto 200px;
}
#tab > ul {
  margin:0 0;
  padding:0 0;
  height:30px;
  overflow:hidden;
}
#tab > ul li {
  float:left;
  display:inline;
  list-style:none;
  margin:0 4px 0 0;
  padding:0 0;
}
#tab > ul li a {
  display:block;
  background-color:black;
  font-weight:bold;
  font-size:11px;
  line-height:30px;
  height:30px;
  color:white;
  text-decoration:none;
  padding:0 30px;
}
#tab > div {
  clear:both;
  background-color:darkred;
  paddin…

MINIMALIST GOOGLE CHROME WINDOW

Είναι σχεδιασμένο με CSS και HTML και μοιάζει με ένα παράθυρο από τον CHROME σε WINDOW.

Αντιγραφή τον παρακάτω κώδικα:



<style>
/* FoulsCode.blogspot.gr */
* {
  margin:0;
  padding:0;
}
body {
  background-color:#ccc;
  background-image:linear-gradient(top,#ccc,#aaa);
}
/* Window */
.chrome-window {
  background-color:#3B68B5;
  background-image:linear-gradient(top,#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  width:600px;
  border:1px solid;
  border-color:#595959 #444 #444 #494949;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-150px;
  overflow:hidden;
  font:normal normal 12px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#222;
  z-index:999;
}
/* Window title */
.chrome-window h1 {
  font:inherit;
  font-weight:bold;
  color:white;
  margin:0 0;
  padding:4px 0 4px 10px;
}
/* Window address bar */
.window-header {
  margin:0 2px;
  padding:1px 0;
  border:1px solid #2E518C;
  border-bottom-color:#AAAAAB;
  bac…