Untitled
raw download clone
TEXT
views 38
,
size 1635 b
<!DOCKTYPE html>
<html>


<head>

<title> </title>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="n.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="header"> </div>

<div class="stats"> <p> إحصائيات كورونا في سوريا </p> </div>
<div class="container">
<center>
<div class="box1"> </div>
<div class="box1"> </div>
<div class="box1"> </div>
<div class="box1"> </div>
</center>
</div>
</body>

</html>


















@import url(https://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

.header {
	border-top: 150px solid black;
	position: relative;
	
}

.stats {
	
	font-family: 'droid arabic kufi' , serif;
	color: white;
	position: absolute;
	margin-top: -110px;
    text-align: center;
	width: 100%;
	font-size: 40px;
}

.container {
	width: 100%;
	height: auto;

}

.box1 {
	width: 20%;
	height: 300px;
	border-radius: 7px;
	background: black;
	margin-top: 100px;
	box-sizing: border-box;
	display: flex;
}

/**/

@media screen and (max-width:1200px){
	
	.box1 {
		width: 40%;
		
	}
	
	
	
	
	
}

@media screen and (max-width:600px){
	
	.box1 {
		width: 90%;
		
	}
	
	
	
	
	
}
close fullscreen
Login or Register to edit or fork this paste. It's free.