Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @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;
- display: block;
- height: auto;
- position: relative;
- }
- 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: 40% !important; /* הכוונה 40% מרוחב הדוב בו נמצאת הקובייה */
- height: 270px !important;
- }
- /*
- div.Parent {
- position: relative;
- width: 100%;
- height: 100vh;
- display: block;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- overflow:hidden;
- }
- div.Parent .Child {
- position: relative;
- width: 241px;
- height: 270px;
- display: inline-block;
- float:left;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- background: #000;} /* ברירת מחדל */
- /* ככל שיש יותר ילדים, כך כל ילד משפיע על ה"אח" שלו ומזיז אותו יותר הצידה */
- /*
- .Parent .Child:nth-child(1) ~ :nth-child(2) {
- margin-left: calc(300px * -.03);
- }
- .Parent .Child:nth-child(2) ~ :nth-child(3) {
- margin-left: calc(300px * .05);
- }
- .Parent .Child:nth-child(3) ~ :nth-child(4) {
- margin-left: calc(300px * -.03);
- }
- .Parent .Child:nth-child(4) ~ :nth-child(5) {
- margin-left: calc(300px * .05);
- }
- @media screen and (max-width: 500px) {
- .Parent .Child {
- width: 53px !important;
- height: 53px !important;
- }
- */
- /* וכאן להקטין את 163 שהגדרנו קודם למידה החדשה - 53 */
- /*
- .Parent .Child:nth-child(1) ~ :nth-child(2) {
- margin-left: calc(53px * -.08 );
- }
- .Parent .Child:nth-child(2) ~ :nth-child(3) {
- margin-left: calc(53px * .05); /* הבא יהיה כפול 3, וככה הלאה */
- /* }
- }
- */
- div.row-up-2{
- width:100%;
- overflow:hidden;
- margin-bottom:30px;
- display:block;
- }
- div.row-down-2{
- display:block;
- }
- div.column-left {
- width:37%;
- height:650px;
- display:inline;
- float:left;
- margin-left:50px;
- }
- div.column-middle{
- width:37%;
- height:650px;
- display:inline;
- float:left;
- }
- div.column-right{
- width:21%;
- height:650px;
- display: block;
- overflow:hidden;
- float:right;
- margin-right:0px;
- }
- div.row-3{
- height:600;
- }
- /*
- .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;
- }
- }
- .clearfix {
- clear: both;
- }
- /* Tablet */
- @media only screen and (min-width: 764px) and (max-width: 1024px) {
- div.main {
- width: 100%;
- max-width: 1024px;
- background: #9932CC; /* לבן #FFF */
- margin: 0 auto;
- position: relative;
- }
- div .column-1 {
- display:none;
- }
- div.black{
- display:none;
- }
- .row-up-1 .cube { /* including cube בתוכו מכיל את הקוביות */
- width: 20%;
- height: 200px;
- }
- div .column-1 .white{
- display:none;
- }
- div.column-2{
- width:100%;
- }
- div.red.cube-margin-left{
- margin-left:45px !important;
- }
- div.white{
- display:none;
- }
- .row-up-1 .white-cube-tablet{
- height: 200px;
- width: 50%;
- background: #FFF;
- float:right;
- margin-right: 45px;
- color: #000;
- font-size:200%;
- font-weight: 900;
- text-align:center;
- vertical-align: middle;
- line-height: 200%;
- padding-top:20px;
- color:#1148A0;
- }
- }
- <!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 href="#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"> <!-- including cube בתוכו מכיל את הקוביות-->
- <div class="red cube cube-margin-left "> </div>
- <div class="medium-blue cube"> </div>
- <div class="dark-blue cube"> </div>
- <div class="red-corner cube "> </div>
- <div class="clearfix"></div>
- </div>
- <div class="row-up-1">
- <div class="white cube">Free TExt Free TExt Free TExt Free</div>
- <div class="white-cube-tablet">Free TExt </div>
- <div class="light-blue cube"> </div>
- <div class="clearfix"></div>
- </div>
- </div>
- </div>
- <!--
- <div style="height:600px;">
- <div class="Parent">
- <div class="Child resize-blocks" style="background:#fe0000; margin-left:50px; margin-top:40px;float:left;"></div> /* אדום */
- <div class="Child" style="background:#1a247b; margin:0px; width: 280px; padding-top:0px;
- height: 270px;"></div> /* כחול כהה */
- <div class="Child resize-blocks" style="background:#fe0000; margin-left:80px;" ></div> /* אדום */
- <div class="Child" style="background:#0D62B3; margin-right:50px; width: 290px;
- height: 270px;"></div> /* כחול בינוני */
- <div class="Child" style="background:#fe0000; display:block; margin-right:80px; width: 270px; float:right;
- height: 280px;"></div> /* אדום */
- </div>
- <div class="Parent" >
- <div class="Child" style="background:#0D62B3; margin-left:50px; width: 280px;
- height: 270px; "></div> /* כחול בינוני */
- <div class="Child resize-blocks" style="background:#fe0000; margin:30 0 0 0px;"></div> /* אדום */
- <div class="Child" style="background:#63c2c8; width: 280px; height: 270px; margin: 0 0 0 15px;"></div> /* תכלת */
- <div class="Child resize-blocks" style="background:#fe0000; margin:30 0 30 55px;"></div> /* אדום */
- <div class="Child" style="background:#1a247b; margin: 0 0 0 30px; width: 270px; height: 270px; display:block;"></div> /* כחול כהה */
- </div>
- </div>
- -->
- <div class="row-full">
- <div class="column-left" style="background:green;">
- <div class="row-up-2">
- <div class="resize-blocks" style="background:#fe0000; float:left; display:inline-block;"></div> /* אדום */
- <div style="background:#1a247b; margin:0px; width:43%; height:270px; float:left;"></div> /* כחול כהה */
- </div>
- <div class="row-down-2">
- <div style="background:#0D62B3; width:43%; height:270px; float:left;margin-top:30px; display:inline-block;"></div> /* כחול בינוני */
- <div class="resize-blocks" style="background:#fe0000; float:left; margin-top:30px; "></div> /* אדום */
- </div>
- </div>
- <div class="column-middle" style="background:yellow;">
- <div class="row-up-2" >
- <div class="resize-blocks" style="background:#fe0000;float:left; display:inline-block; " ></div> /* אדום */
- <div style="background:#0D62B3;float:left;width:43%; height:270px; "></div> /* כחול בינוני */
- </div>
- <div class="row-down-2">
- <div style="background:#63c2c8; float:left; width:43%; height:270px; margin-top:30px; display:inline-block;"></div> /* תכלת */
- <div class="resize-blocks" style="background:#fe0000; margin-top:30px; float:left;"></div>
- </div>
- </div>
- <div class="column-right" style="background:brown;">
- <div class="row-3">
- <div style="background:#fe0000; display:block; width:72%; height:290px; margin-left:30px;"></div>
- </div>
- <div style="background:#1a247b; float:left; width:72%; height:270px; margin: 0 0 0 30px;"></div> /* כחול כהה */
- </div>
- </div>
- <p class="clear"></p>
- </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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement