JSFiddle - React, Tailwind, and code Playground
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home"%>
<html>
<head runat="server">
<link rel = "icon" href="Pictures/download.jpg" />
<title>ספורט ישראלי</title>
<link href="HomeStyle.css" rel = "Stylesheet" type = "text/css" />
<link href="Animate.css" rel = "Stylesheet" type = "text/css" />
</head>
<body runat="server">
<form id="form1" runat="server">
<div id="header">
<nav>
<ul>
<li> <a href="http://localhost:61474/MyWebsite/Home.aspx#">דף בית</a></li>
<li><a href="#">התחברות</a></li>
<li><a href="#">הרשמה</a></li>
<li>
<a href="#">ספורט</a>
<ul>
<li><a href="http://localhost:61474/MyWebsite/Soccer.aspx#">כדורגל</a></li>
<li><a href="http://localhost:61474/MyWebsite/BasketballPage.aspx">כדורסל</a></li>
<li><a href="#">תקצירים</a></li>
<li><a href="#">אחר</a></li>
</ul>
</li>
<li><a href="http://localhost:61474/MyWebsite/ConatchPage.aspx">צור קשר</a></li>
</ul>
</nav>
</div>
<div id = "ContentPage">
<div id = "Title" class = "Animated zoomIn">
ספורט ישראלי
</div>
<div id = "ContentText">
<br />
ברוכים הבאים לאתר הספורט הישראלי - החדש.</br>
אני שמח לבשר לכם שאנחנו בפתיחה של אתר ישראלי חדש שיעסוק בספורט הישראלי בארץ ישראל!
<br />
אני רוצה להגיד שאני נרגש מאוד בפתיחת האתר החדש.<br />
האתר יעסוק בענפי הספורט הבאים :
<br />
כדורגל:<br />
ליגת העל ליגה לאומית<br />
<asp:Image ID="Image6" runat="server" Height="90px"
ImageUrl="~/Soccer Pictures/Ligat_winner_football.png" Width="99px" />
<asp:Image ID="Image7" runat="server" Height="90px"
ImageUrl="~/Soccer Pictures/2.png" Width="99px"...
CSS
body
{
font-family: VorT3eX Font;
direction:rtl;
height:100%;
width:100%;
padding:0;
margin:0;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url(http://localhost:27369/MyWebsite/Pictures/soccer-field-wallpaper-1.jpg);
}
@font-face
{
font-family: "VorT3eX Font";
src: url(http://localhost:61474/MyWebsite/Fonts/aharoniclm-boldoblique-webfont.ttf);
}
@font-face
{
font-family: "VorT3eX Font2";
src: url(http://localhost:27369/MyWebsite/Fonts/SecularOne-Regular.ttf);
}
@font-face
{
font-family: "VorT3eX Font3";
src: url(http://localhost:61474/MyWebsite/Fonts/migdalfontwin-webfont.ttf);
}
#ContentPage
{
font-family:VorT3eX Font2;
height:1200px;
width:951px;
margin:auto;
border:1.5px solid black;
background-color:white;
}
#header
{
margin:auto;
height:40px;
width:951px;
background-size:cover;
background-attachment:scroll;
background-position:center;
border:1.5px solid black;
background-image:url(http://localhost:27369/MyWebsite/Pictures/370483.jpg);
}
nav
{
overflow:hidden;
}
/*שלב ראשון*/
nav > ul
{
margin:0 auto;
width:1000px;
}
nav ul li
{
display:block;
float:right;
position:relative;
}
nav ul a
{
display:block;
width:150px;
float:right;
padding:10px 20px;
}
nav ul a:hover
{
}
/*שלב שני*/
nav ul li ul
{
padding:0;
margin:0;
display:none;
top:38px;
position:fixed;
}
nav ul li:hover > ul
{
display:block;
background-image:url(http://localhost:61474/MyWebsite/Pictures/370483.jpg);
}
nav ul li ul li
{
float:none;
}
a
{
color:White;
text-decoration:none;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#Title
{
font-family:VorT3eX Font;
font-size:32.5px;
text-align:center;
text-decoration:underline;
height: 35px;
margin-top: 7px;
color:gray;
text-shadow: -1px 0 black, 0 1px...