Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
- <title></title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
- <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
- </head>
- <body>
- <section class="container-fluid">
- <div class="main">
- <div class="topnav">
- <div id="menu" class="collapse">
- <div class="menu"><a class="#Home">Home</a></div>
- <div class="menu"><a href="#News">News</a></div>
- <div class="menu"><a href="#Gallery">Gallery</a></div>
- <div class="menu"><a href="#About us">About us</a></div>
- <div class="menu" style="border-right:none;"><a href="#Contact">Contact</a></div>
- </div>
- <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
- </div>
- <div style="width: 100%; margin: 0 auto; position: relative;">
- <div class="row-full">
- <div class="column-1">
- <div class="black"> </div>
- </div>
- <div class="column-2">
- <div class="row-up-1">
- <div class="red"> </div>
- <div class="medium-blue"> </div>
- <div class="dark-blue"> </div>
- <div class="red-corner"> </div>
- </div>
- <div class="row-up-1">
- <div class="white">Free TExt Free TExt Free TExt Free</div>
- <div class="light-blue"> </div>
- </div>
- </div>
- </div>
- <div class="div-table">
- <div class="table-row">
- <div class="table-cell">
- <div class="resize-blocks" style="background:#fe0000; margin:0 0 0 50px; float:left; "></div> /* אדום */
- </div>
- <div class="table-cell">
- <div style="background:#1a247b; margin:0px; width: 280px; padding-top:0px; left:20px;
- height: 270px; float:left;"></div> /* כחול כהה */
- </div>
- <div class="table-cell">
- <div class="resize-blocks" style="background:#fe0000; margin-left:30px; float:right;" ></div> /* אדום */
- </div>
- <div class="table-cell">
- <div style="background:#0D62B3; margin:0px; width: 290px;
- height: 270px; float:left;"></div> /* כחול בינוני */
- </div>
- <div class="table-cell" style="vertical-align: bottom";>
- <div style="background:#fe0000; display:block; margin-left:30px; width: 270px;
- height: 280px;"></div> /* אדום */
- </div>
- </div>
- <div class="table-row">
- <div class="table-cell">
- <div style="background:#0D62B3; margin-left:50px; width: 280px;
- height: 270px; float:left; display:inline-block;"></div> /* כחול בינוני */
- </div>
- <div class="table-cell">
- <div class="resize-blocks" style="background:#fe0000; margin:30 0 0 0px; left:20px;"></div> /* אדום */
- </div>
- <div class="table-cell">
- <div style="background:#63c2c8; float:right; width: 280px;
- height: 270px; margin: 0 0 0 15px; display:inline-block;"></div> /* תכלת */
- </div>
- <div class="table-cell">
- <div class="resize-blocks red" style="background:#fe0000; margin:30 0 30 55px; width: 270px;
- height: 270px; float:left;"></div> /* אדום */
- </div>
- <div class="table-cell">
- <div class="red" style="background:#1a247b; float:left; margin: 0 0 0 30px; width: 270px;
- height: 270px;"></div> /* כחול כהה */
- </div>
- </div>
- </div>
- <!--
- <div class="row-full">
- <div class="column-left">
- <div class="row-up-2">
- <div class="resize-blocks" style="background:#fe0000; margin:30 0 30 55px; width: 24%;
- height: 270px; float:left; display:inline-block;"></div> /* אדום */
- <div class="resize-blocks" style="background:#1a247b; margin:0px; width: 346px;
- height: 270px; float:left;"></div> /* כחול כהה */
- </div>
- <div class="row-down-2">
- <div class="resize-blocks" style="background:#0D62B3; margin-left:30px; width: 346px;
- height: 270px; float:left; display:inline-block;"></div> /* כחול בינוני */
- <div class="resize-blocks" style="background:#fe0000; margin:30 0 30 55px; width: 325px;
- height: 326px; float:left; display:inline-block;"></div> /* אדום */
- </div>
- </div>
- <div class="column-middle">
- <div class="row-up-2">
- <div class="red" style="display:inline-block; margin-left:30px;" ></div> /* אדום */
- <div class="resize-blocks"style="background:#0D62B3; margin:0px; width: 346px;
- height: 270px; float:left;"></div> /* כחול בינוני */
- </div>
- <div class="row-down-2">
- <div class="resize-blocks red" style="background:#63c2c8; float:left; width: 325px;
- height: 326px; margin: 0 0 0 15px; display:inline-block;"></div> /* תכלת */
- <div class="resize-blocks red" style="background:#fe0000; margin:30 0 30 55px; width: 325px;
- height: 326px; float:left;"></div> /* אדום */
- </div>
- </div>
- <div class="column-right">
- <div class="row-3">
- <div class="red" style="background:#fe0000; display:block; margin-left:30px; width: 325px;
- height: 356px;"></div> /* אדום */
- <div class="red" style="background:#1a247b; float:left; margin: 0 0 0 30px; width: 325px;
- height: 356px;"></div> /* כחול כהה */
- </div>
- </div>
- </div>
- -->
- </div>
- </div>
- </section>
- <script>
- function myFunction() {
- /*
- // לא צריכים את זה יותר!
- var x = document.getElementById("myTopnav");
- if (x.className === "topnav") {
- x.className += " responsive";
- } else {
- x.className = "topnav";
- }
- */
- var myMobileMenu = document.querySelector('#menu');
- if(myMobileMenu.className === 'expand') {
- myMobileMenu.className = 'collapse';
- }
- else {
- myMobileMenu.className = 'expand';
- }
- }
- </script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- </body>
- </html>
- @import 'https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900,300italic,400italic,500italic,700italic,900italic';
- html,
- body {
- height: 100%;
- direction: ltr;
- }
- body {
- font-family: Calibri;
- margin: 0;
- padding: 0;
- font-size: 100%
- }
- div.main {
- width: 100%;
- max-width: 1920px;
- background: #9932CC; /* לבן #FFF */
- margin: 0 auto;
- position: relative;
- }
- p.clear{
- height:0;
- clear:both;
- }
- div.row-full{
- width:100%;
- margin:0px;
- }
- div.column-1{
- width:25%;
- display:inline-block;
- }
- div.column-2{
- width:75%;
- float:right;
- }
- div.row-up-1{
- width:100%;
- overflow:hidden;
- }
- div.black {
- width: 70%;
- height: 565px;
- background: #000;
- float:left;
- padding:0 px;
- margin-left: 50px;
- }
- div.red {
- width: 22%;
- height: 270px;
- background: #F80606;
- float:left;
- margin: 0px;
- }
- div.medium-blue {
- width: 24%;
- height: 270px;
- background: #0D62B3; /* כחול בינוני */
- float:left;
- }
- div.dark-blue {
- width: 24%;
- height: 270px;
- background: #1A247B; /* כחול כהה */
- float:left;
- margin: 0 0 0 55px;
- }
- div.red-corner {
- width: 22%;
- height: 270px;
- background: #F80606;
- float:left;
- }
- div.light-blue {
- width: 22%;
- height: 270px;
- background: #63C2C8; /* תכלת */
- float:left;
- display: block;
- margin: 35px;
- }
- div.white {
- width: 70%;
- height: 300px;
- background: #FFF;
- float:left;
- color: #000;
- font-size:450%;
- font-weight: 900;
- text-align:center;
- vertical-align: middle;
- line-height: 500%;
- padding-top:50px;
- }
- div.resize-blocks {
- width: 257px !important;
- height: 270px !important;
- }
- div.resize-blocks-2 {
- width: 280px !important;
- height: 270px !important;
- }
- div.row-up-2{
- width:100%;
- overflow:hidden;
- }
- div.column-left .column-middle{
- width:40%;
- display: inline-block;
- }
- div.column-right{
- width:20%;
- display: block;
- }
- .group-under-black {
- margin-top:25px;
- display:block;
- width:auto;
- }
- .div-table {
- display: table;
- table-layout: fixed;
- width: 100%;
- }
- .div-table .table-row {
- display: table-row;
- width: 100%;
- height: auto;
- position: relative;
- }
- .div-table .table-cell {
- display: table-cell;
- width: auto;
- height: auto;
- vertical-align: middle;
- border: 1px solid;
- }
- /*Menu */
- div.topnav {
- overflow: hidden;
- max-width:1920px;
- height:80px;
- background-color: #DDDDDF; /* אפור-תפריט */
- margin: 0 auto 10px; /* ממרכז בצדדים ונותן רווח מלמטה */
- color: #000;
- }
- div.menu{
- text-align: center;
- padding: 0px;
- display: inline-block;
- border-right: 1px solid #8c8b8b;
- margin-left: 0px;
- margin-top: 12px;
- }
- div.topnav a {
- float: left;
- display: block;
- color: #000;
- text-align: center;
- padding: 10px 20px;
- text-decoration: none;
- font-size: 20px;
- vertical-align:middle;
- }
- div.topnav a:hover {
- color: #1C19D3;
- }
- div.topnav a.active {
- background-color: #DDDDDF;
- color: #000;
- }
- div.topnav.icon {
- display: none;
- }
- /* להדביק בתחתית דף הCSS */
- .topnav #menu:not(.expand),
- .topnav #menu.expand {
- display: block;
- }
- @media only screen and (max-width: 1024px) {
- .clearfix {
- clear: both;
- }
- .topnav #menu:not(.expand) {
- display: none !important;
- }
- .topnav #menu.expand {
- display: block !important;
- }
- .topnav #menu ~ a.icon {
- display: inline-block !important;
- height: 100% !important;
- padding: 20px 17px 0;
- font-size: 23px;
- line-height: 23px;
- }
- .topnav #menu {
- position: absolute;
- top:0;
- left:0;
- background: inherit;
- z-index: 2;
- min-height: calc(100% - 80px);
- margin-top:80px;
- background: rgba(221,221,223,0.9);
- width: 75%;
- }
- .topnav #menu .menu {
- display: block;
- width: 100%;
- border-right: 0;
- }
- .topnav #menu .menu a {
- display: block;
- width: 100%;
- text-align: left;
- float: none;
- padding-top: 0;
- }
- .topnav #menu .menu:not(:last-child) {
- border-bottom:1px solid #8c8b8b;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement