Website itself
upload first steps
This commit is contained in:
eriel
commit
d5956dcdc3
45
about.html
Normal file
45
about.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>The App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page_container">
|
||||
<div class="nav_box">
|
||||
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
|
||||
<h2>About Us</h2>
|
||||
<div class="navigation">
|
||||
<a class="nav_butt_2" href="about.html">About Us</a>
|
||||
<a class="nav_butt_2" href="download.html">Download</a>
|
||||
<a class="nav_butt_2" href="contact.html">Contact</a>
|
||||
<a class="nav_butt_2" href="news.html">News</a>
|
||||
<a class="nav_butt_2" href="">###</a>
|
||||
<a class="nav_butt_2" href="">###</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_wrap">
|
||||
<div class="content_box">
|
||||
|
||||
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, repellat.</h2>
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum repudiandae quae ipsa error animi aut ducimus dolor dignissimos perspiciatis non aliquid, recusandae sed molestiae nisi nobis officiis ut quas. Possimus eos omnis nulla vero tenetur assumenda, suscipit vitae praesentium, corrupti sapiente animi quidem ipsum asperiores dolorum quasi dolores, odio doloremque eius molestiae? Perferendis distinctio suscipit eligendi, eaque consequuntur aspernatur quibusdam rerum possimus repudiandae veritatis temporibus ex eum rem. A illum inventore repudiandae laboriosam neque ut itaque eveniet pariatur nihil ab est corrupti unde, ipsa distinctio dolorem. Dolorem minima, rerum et mollitia doloremque magni minus suscipit numquam molestiae quae similique maiores.</p>
|
||||
<br>
|
||||
<h2>Lorem, ipsum dolor sit amet.</h2>
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur aspernatur, aut debitis. Dignissimos incidunt iusto voluptates voluptatum repudiandae nisi esse enim nam, nesciunt eaque non suscipit dolorum veniam sed aliquid quae laudantium inventore excepturi reprehenderit! Sapiente provident enim tempora dolorum doloribus natus error nostrum eveniet laborum veritatis. Assumenda, minus, molestiae.</p>
|
||||
<br>
|
||||
<img src="dog.webp" alt="" width="450px">
|
||||
<br>
|
||||
<br>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit aut veritatis, eaque commodi dolor ex doloremque saepe dolore, at porro error ut atque assumenda iusto aspernatur vel distinctio minima quo a officia vitae placeat voluptatibus. Totam, ipsam quas, non dolores et rem impedit, veniam alias ut aliquid explicabo sapiente, perspiciatis doloribus id at adipisci. Asperiores laudantium unde a illum dolore recusandae! Officia ducimus, nihil excepturi consequuntur labore ipsa provident error sunt, vitae ut eius corporis itaque illum cum veritatis iusto consequatur accusamus delectus aspernatur explicabo tempora facere incidunt. Adipisci harum nemo omnis reiciendis ad vitae, perferendis blanditiis quaerat, quis delectus dolorem distinctio officia quas veritatis ducimus? Quae distinctio consequatur est quo a porro incidunt maxime placeat. Mollitia soluta dolorum placeat optio voluptate fuga, sint ipsum dolores perferendis exercitationem architecto ab deserunt facere inventore doloribus provident iusto. Dolores, nostrum fugit a numquam ipsam reprehenderit sint, perspiciatis tenetur reiciendis, dolor suscipit sapiente.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
63
download.html
Normal file
63
download.html
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>The App - download page</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page_container">
|
||||
<div class="nav_box">
|
||||
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
|
||||
<h2>Download</h2>
|
||||
<div class="navigation">
|
||||
<a class="nav_butt_2" href="about.html">About Us</a>
|
||||
<a class="nav_butt_2" href="download.html">Download</a>
|
||||
<a class="nav_butt_2" href="contact.html">Contact</a>
|
||||
<a class="nav_butt_2" href="news.html">News</a>
|
||||
<a class="nav_butt_2" href="">###</a>
|
||||
<a class="nav_butt_2" href="">###</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_wrap">
|
||||
<div class="content_box">
|
||||
<h2>Lorem, ipsum, dolor.</h2>
|
||||
<br>
|
||||
<p>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Praesentium eveniet nostrum est voluptates expedita adipisci quod! Voluptate nemo, necessitatibus sint dolorum voluptatem eius in maiores ipsam quaerat earum cum, corporis?</p>
|
||||
<ul>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">Ver 1.2.3.4</a> - 18.11.2024</li>
|
||||
|
||||
</ul>
|
||||
<br>
|
||||
<p>Lorem ipsum dolor, sit amet <a class="content_butt" href="">consectetur</a> adipisicing elit. Praesentium maxime deserunt quia, odio perspiciatis corporis tempore labore, porro tempora modi. Impedit suscipit, itaque corrupti quas fuga non sapiente architecto saepe!</p>
|
||||
<br>
|
||||
<h2>Lorem, ipsum, dolor.</h2>
|
||||
<br>
|
||||
<p>Lorem ipsum, dolor sit amet consectetur, adipisicing elit. Praesentium eveniet nostrum est voluptates expedita adipisci quod! Voluptate nemo, necessitatibus sint dolorum voluptatem eius in maiores ipsam quaerat earum cum, corporis?</p>
|
||||
<ul>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">link/Name</a> - more_info</li>
|
||||
<li><a class="content_butt" href="">Ver 1.2.3.4</a> - 18.11.2024</li>
|
||||
|
||||
</ul>
|
||||
<br>
|
||||
<p>Lorem ipsum dolor, sit amet <a class="content_butt" href="">consectetur</a> adipisicing elit. Praesentium maxime deserunt quia, odio perspiciatis corporis tempore labore, porro tempora modi. Impedit suscipit, itaque corrupti quas fuga non sapiente architecto saepe!</p>
|
||||
<br>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
30
index.html
Normal file
30
index.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>The App</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="main_container">
|
||||
<div class="head">
|
||||
<img src="logo.svg" class="logo" alt="logo">
|
||||
<h1>The App</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae iusto id sed, sit nulla voluptas, suscipit reiciendis magni nostrum placeat quibusdam architecto sint quia eos corporis inventore explicabo hic quisquam.</p>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<a class="nav_butt_1" href="about.html">About Us</a>
|
||||
<a class="nav_butt_1" href="download.html">Download</a>
|
||||
<a class="nav_butt_1" href="contact.html">Contact</a>
|
||||
<a class="nav_butt_1" href="">News</a>
|
||||
<a class="nav_butt_1" href="">###</a>
|
||||
<a class="nav_butt_1" href="">###</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1
logo.svg
Normal file
1
logo.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2154.97 1971.9"><defs><style>.cls-1{fill:#ffffff;}</style></defs><path class="cls-1" d="M422.51,864.79c18-25,46.48,3.27,68.63,8.08,51.81,19.48,103.52,39.47,155.14,59.22,136.73,57.48,278.91,97.35,421.21,137.07,14.86,4.53,36.6,11.1,37.9,29.36-.8,45.82-.1,92,4.46,137.34,8.93,78.84,26.91,155.55,48.71,232.12,53.3,164.13,130.86,321.27,233.42,460.48,33,47.86,72.38,90.56,110.85,134.15,7.18,9.9,19.17-13.8,24.78-16.81,197.91-216.31,342.85-491.67,382.8-782.83,10.74-50.19,8.27-104.7,11.58-156.48-1.2-9.92-4.9-22.46,4.09-30.8,21.61-18.83,53.85-21.48,80.28-31.09,43.19-12.33,85.46-26.26,128.63-38.14,105.36-31.22,208.61-68.52,310.7-109.51,34.95-12.43,69.07-26.44,103.45-40.17,7.64-2.95,18.11-5.37,23.74,2.77,1,1.5,2.36,3.15,4.61,3.14v37.88c-46.86,538.2-452.65,996-896.18,1272.2-7.85,7.6-41.85,17-29,24.77,66.82,54.52,140.52,100.34,218.78,137.16,46.77,21.93,95,41.15,145,54.48,27.51,3.63,56,35.67,15.38,45.55h-5.26c-122.63-11.45-245.19-43.08-360.08-89.4-41.62-16.52-82.06-35.7-123-53.73-27.75-11.23-41.7-30.33-70.43-8.65-147.25,67.23-305.08,112-464,137.37-2.46,0-4.92,0-7.25.94-13,5.08-32.15-13-20.94-23.64,14.29-19.55,40.9-19.62,61.7-28.14,31.09-11.13,62-22.81,92.46-35.6,79.52-36.64,155.45-82.08,224.66-135.71,8.54-3.33-22-17-25.2-19.84a2281.15,2281.15,0,0,1-193.48-131.7C778.44,1766.19,460.45,1360.46,422.51,891.1Z" transform="translate(-422.51 -462.84)"/><path class="cls-1" d="M1527.36,462.84c248.38,11.94,410.93,280.66,290,504.13-122.13,238-475.49,242-606.44,10.1-126.08-226.75,26.2-497.15,282.79-514.23Z" transform="translate(-422.51 -462.84)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
143
style.css
Normal file
143
style.css
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
body,a,p,h1,h2,h3,h5{padding: 0; margin: 0}
|
||||
body{
|
||||
background-color: #000; /*Цвет фона всей страницы*/
|
||||
color:#fff; /*Цвет текста всей страницы*/
|
||||
}
|
||||
.geist-mono-all{
|
||||
font-family: "Geist Mono", monospace;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
h1{
|
||||
font-family: "Geist mono";
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
}
|
||||
h2{
|
||||
font-family: "Geist mono";
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
}
|
||||
p, a, ul, li{
|
||||
font-family: "Geist mono";
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
/*КНОПКИ НА ГЛАВНОЙ СТРАНИЦЕ*/
|
||||
.nav_butt_1:link, .nav_butt_1:visited {
|
||||
box-sizing: content-box;
|
||||
border: solid #fff 1px; /*Цвет рамки кнопки*/
|
||||
color: #fff; /*Цвет текста кнопки*/
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.nav_butt_1:hover, .nav_butt_1:active {
|
||||
background-color: #fff;/*цвет кнопки при наведении*/
|
||||
color: #000; /*цвет текста кнопки при наведении*/
|
||||
}
|
||||
|
||||
/*КНОПКИ НА СТРАНИЦАХ С БОКОВЫМ НАВИГАТОРОМ*/
|
||||
.nav_butt_2:link, .nav_butt_2:visited {
|
||||
box-sizing: content-box;
|
||||
border: solid #fff 1px; /*Цвет рамки кнопки*/
|
||||
color: #fff; /*Цвет текста кнопки*/
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
width: 120px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.nav_butt_2:hover, .nav_butt_2:active {
|
||||
background-color: #fff;/*цвет кнопки при наведении*/
|
||||
color: #000; /*цвет текста кнопки при наведении*/
|
||||
}
|
||||
/*КНОПКИ КОНТЕНТА*/
|
||||
|
||||
.content_butt:link, .content_butt:visited {
|
||||
font-weight: 500;
|
||||
color: #989898; /*Цвет текста кнопки*/
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
display: inline-block;
|
||||
}
|
||||
.content_butt:hover, .content_butt:active {
|
||||
background-color: #fff;/*цвет кнопки при наведении*/
|
||||
color: #000; /*цвет текста кнопки при наведении*/
|
||||
}
|
||||
|
||||
/*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/
|
||||
.main_container{
|
||||
max-width: 800px;
|
||||
max-height: 100vh;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-top: 200px;
|
||||
}
|
||||
.head{
|
||||
|
||||
}
|
||||
.logo{
|
||||
max-width: 80px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.links{
|
||||
padding-top: 100px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*СТИЛИ ВТОРИЧНЫХ СТРАНИЦ*/
|
||||
.page_container{
|
||||
|
||||
max-height: 100vh;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
.nav_box{
|
||||
height: 100vh;
|
||||
border-right: solid 1px #fff;
|
||||
width: 20%;
|
||||
position: fixed;
|
||||
padding-top: 10vh;
|
||||
}
|
||||
.content_wrap{
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
float: right;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.navigation{
|
||||
padding-top: 50px;
|
||||
width: 130px;
|
||||
margin:0 auto;
|
||||
}
|
||||
|
||||
.content_box{
|
||||
margin: 50px;
|
||||
}
|
||||
.logo_home, .logo_home:link, .logo_home:visited, .logo_home:hover, .logo_home:active {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in a new issue