UltraEdit Website Clone
SOURCE CODE:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Download Ultraedit for windos</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<header>
<nav class="nav">
<ul>
<li class="logo">
<a href=""><img class="logo-1" src="UE-Logo-1.webp" alt="" /></a>
</li>
<li class="menu">
<a href="">Products<i class="fa-solid fa-angle-down"></i></a>
</li>
<li class="menu">
<a href="">For business<i class="fa-solid fa-angle-down"></i></a>
</li>
<li class="menu">
<a href="">Resources<i class="fa-solid fa-angle-down"></i></a>
</li>
<li class="menu">
<a href="">Support<i class="fa-solid fa-angle-down"></i></a>
</li>
<li class="menu">
<a href="">Our Company<i class="fa-solid fa-angle-down"></i></a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Download <b>UltraEdit </b>for Windows</h1>
<a href=""><img class="img1" src="Reviews.png" alt="" /></a>
<p class="para1">
Download and try UltraEdit before you buy it! This download includes the
full Windows version of the text editor.
</p>
<div class="button">
<button class="btn-1">Download Mac or Linux Version</button>
</div>
<section class="section-2">
<div class="img-2">
<img
src="Screenshot 2024-09-27 at 17-26-35 Download UltraEdit text editor for Windows.png"
alt=""
/>
</div>
<div class="headline">
<span>Download UltraEdit</span> v2024.1(released 2024-08-27) | Hotfix
information (2024-08-18)
</div>
</section>
<section class="section-3">
<div class="item">
<p>English</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337485873834783724</p>
<p>374634</p>
</div>
<div class="item">
<p>Deutsch</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>Italiano</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>Español</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>français</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>Português brasileiro</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>日本</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>한국어</p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>中国 </p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
<div class="item">
<p>中國 </p>
<button class="btn">Download 64-bit</button>
<p>SHA256</p>
<p>A232EAD3627AA321EA237S23394Y374788337</p>
<p>374634</p>
</div>
</section>
</main>
</body>
</html>
CSS
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
ul {
display: flex;
list-style: none;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.menu {
display: flex;
}
.menu a {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 28px;
padding-top: 40px;
text-align: center;
text-decoration: none;
color: black;
}
.logo .logo-1 {
width: 250px;
padding: 23px;
padding-left: 60px;
margin-right: 350px;
}
i {
font-size: small;
padding-left: 5px;
}
main h1 {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-weight: 350;
font-size: 50px;
text-align: center;
padding-top: 70px;
padding-left: 280px;
display: inline-block;
}
main .img1 {
width: 120px;
padding-bottom: 5px;
padding-left: 20px;
}
main .para1 {
text-align: center;
font-size: 25px;
font-weight: 350;
padding-left: 200px;
padding-right: 200px;
padding-top: 40px;
}
main .btn-1 {
text-align: center;
background: none;
padding: 16px 20px;
color: white;
font-size: 15px;
font-weight: 600;
background-color: #09a6bd;
margin-top: 20px;
margin-left: 530px;
border: none;
border-radius: 4px;
}
main .button :hover {
background-color: #1f8c9c;
}
.section-2 {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 50px;
margin-bottom: 50px;
margin-right: 200px;
}
.headline span {
font-size: 30px;
}
.img-2 {
display: flex;
}
.section-2 .headline {
margin-top: 15px;
}
.section-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
width: 70vw;
margin-left: 210px;
justify-content: center;
text-align: center;
}
.section-3 .item {
width: 302px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 5px;
}
.section-3 .item p:first-child {
font-weight: 700;
font-size: 18px;
padding-top: 10px;
}
.section-3 .item button {
margin-top: 50px;
font-weight: 700;
border: none;
background-color: rgb(60, 182, 60);
color: white;
padding: 8px;
border-radius: 7px;
}
.section-3 .item p:nth-child(3) {
font-size: 10px;
padding-top: 20px;
}
.section-3 .item p:nth-child(4) {
font-size: 8px;
}
.section-3 .item p:nth-child(5) {
font-size: 8px;
}
video is not working so see screenshots
Comments
Post a Comment