/*
Front build by
nikitajevdookishkin.github.io/designer/
*/
This commit is contained in:
Nikita 2024-11-19 20:54:51 +02:00
parent 944015c172
commit f565d68ca5
7 changed files with 62 additions and 72 deletions

View file

@ -6,22 +6,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>The App</title> <title>The App</title>
</head> </head>
<body> <body>
<div class="page_container"> <div class="page_container">
<div class="nav_box"> <div class="nav_box">
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a> <a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
<h2>About Us</h2> <h2>About Us</h2>
<!-- burger menu -->
<input type="checkbox" id="burger-toggle" class="burger-toggle"> <input type="checkbox" id="burger-toggle" class="burger-toggle">
<label for="burger-toggle" class="burger"> <label for="burger-toggle" class="burger">
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
<div class="navigation"> <div class="navigation">
<a class="nav_butt_2" href="about.html">About Us</a> <a class="nav_butt_2" href="about.html">About Us</a>
<a class="nav_butt_2" href="news.html">News</a> <a class="nav_butt_2" href="news.html">News</a>
@ -33,7 +28,6 @@
</div> </div>
<div class="content_wrap"> <div class="content_wrap">
<div class="content_box"> <div class="content_box">
<h1>H1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, ipsa.</h1> <h1>H1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, ipsa.</h1>
<br> <br>
<h2>H2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, obcaecati?</h2> <h2>H2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, obcaecati?</h2>
@ -45,8 +39,13 @@
NO TAG Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Eos, minus. NO TAG Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Eos, minus.
<br> <br>
<img class="img" src="dog.webp" alt="testpic"> <img class="img" src="dog.webp" alt="testpic">
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html>
<!--
Front build by
nikitajevdookishkin.github.io/designer/
-->

View file

@ -6,21 +6,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>The App</title> <title>The App</title>
</head> </head>
<body> <body>
<div class="page_container"> <div class="page_container">
<div class="nav_box"> <div class="nav_box">
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a> <a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
<h2>Contact</h2> <h2>Contact</h2>
<!-- burger menu -->
<input type="checkbox" id="burger-toggle" class="burger-toggle"> <input type="checkbox" id="burger-toggle" class="burger-toggle">
<label for="burger-toggle" class="burger"> <label for="burger-toggle" class="burger">
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
<div class="navigation"> <div class="navigation">
<a class="nav_butt_2" href="about.html">About Us</a> <a class="nav_butt_2" href="about.html">About Us</a>
<a class="nav_butt_2" href="news.html">News</a> <a class="nav_butt_2" href="news.html">News</a>
@ -32,9 +28,7 @@
</div> </div>
<div class="content_wrap"> <div class="content_wrap">
<div class="content_box"> <div class="content_box">
<div class="contacts"> <div class="contacts">
<p>xxxxcity, xxxxxxx street - xxx</p> <p>xxxxcity, xxxxxxx street - xxx</p>
<p>Tel: xxx-xxx-xxx</p> <p>Tel: xxx-xxx-xxx</p>
<a class="content_butt" href="mailto:xxx@xxx.xx">mail: mail@xxdomain.xx</a> <a class="content_butt" href="mailto:xxx@xxx.xx">mail: mail@xxdomain.xx</a>
@ -43,3 +37,9 @@
</div> </div>
</div> </div>
</body> </body>
</html>
<!--
Front build by
nikitajevdookishkin.github.io/designer/
-->

View file

@ -6,21 +6,17 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>The App - download page</title> <title>The App - download page</title>
</head> </head>
<body> <body>
<div class="page_container"> <div class="page_container">
<div class="nav_box"> <div class="nav_box">
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a> <a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
<h2>Download</h2> <h2>Download</h2>
<!-- burger menu -->
<input type="checkbox" id="burger-toggle" class="burger-toggle"> <input type="checkbox" id="burger-toggle" class="burger-toggle">
<label for="burger-toggle" class="burger"> <label for="burger-toggle" class="burger">
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
<div class="navigation"> <div class="navigation">
<a class="nav_butt_2" href="about.html">About Us</a> <a class="nav_butt_2" href="about.html">About Us</a>
<a class="nav_butt_2" href="news.html">News</a> <a class="nav_butt_2" href="news.html">News</a>
@ -42,7 +38,6 @@
<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> <li><a class="content_butt" href="">Ver 1.2.3.4</a> - 18.11.2024</li>
</ul> </ul>
<br> <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> <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>
@ -57,13 +52,17 @@
<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> <li><a class="content_butt" href="">Ver 1.2.3.4</a> - 18.11.2024</li>
</ul> </ul>
<br> <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> <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> <br>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html>
<!--
Front build by
nikitajevdookishkin.github.io/designer/
-->

View file

@ -6,7 +6,6 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>The App</title> <title>The App</title>
</head> </head>
<body> <body>
<div class="main_container"> <div class="main_container">
<div class="head"> <div class="head">
@ -14,7 +13,6 @@
<h1>The App</h1> <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> <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>
<div class="links"> <div class="links">
<a class="nav_butt_1" href="about.html">About Us</a> <a class="nav_butt_1" href="about.html">About Us</a>
<a class="nav_butt_1" href="news.html">News</a> <a class="nav_butt_1" href="news.html">News</a>
@ -26,3 +24,8 @@
</div> </div>
</body> </body>
</html> </html>
<!--
Front build by
nikitajevdookishkin.github.io/designer/
-->

View file

@ -12,15 +12,12 @@
<div class="nav_box"> <div class="nav_box">
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a> <a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
<h2>News</h2> <h2>News</h2>
<!-- burger menu -->
<input type="checkbox" id="burger-toggle" class="burger-toggle"> <input type="checkbox" id="burger-toggle" class="burger-toggle">
<label for="burger-toggle" class="burger"> <label for="burger-toggle" class="burger">
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
<div class="navigation"> <div class="navigation">
<a class="nav_butt_2" href="about.html">About Us</a> <a class="nav_butt_2" href="about.html">About Us</a>
<a class="nav_butt_2" href="news.html">News</a> <a class="nav_butt_2" href="news.html">News</a>
@ -32,45 +29,38 @@
</div> </div>
<div class="content_wrap"> <div class="content_wrap">
<div class="content_box"> <div class="content_box">
<!-- Дроп/блок новости 1-->
<div class="post_box"> <div class="post_box">
<div class="post_date"> <div class="post_date">
<p>18/11/2024</p> <p>18/11/2024</p>
</div> </div>
<div class="post_name"> <div class="post_name">
<h3>loaded post header</h3> <h3>loaded post header</h3>
</div> </div>
<div class="post_description multiline"> <div class="post_description multiline">
<p>only 2 first lines will be shown</p> <p>only 2 first lines will be shown</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias debitis facere eveniet temporibus aliquid inventore impedit ipsum rerum quia reprehenderit cum, itaque sint quis optio error pariatur. Suscipit sunt, corrupti commodi repudiandae minima, ducimus temporibus.</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias debitis facere eveniet temporibus aliquid inventore impedit ipsum rerum quia reprehenderit cum, itaque sint quis optio error pariatur. Suscipit sunt, corrupti commodi repudiandae minima, ducimus temporibus.</p>
</div> </div>
<a class="content_butt readmore" href="news/post_page.html">read more...</a> <a class="content_butt readmore" href="news/post_page.html">read more...</a>
</div> </div>
<!-- Дроп/блок новости 2-->
<div class="post_box"> <div class="post_box">
<div class="post_date"> <div class="post_date">
<p>18/11/2024</p> <p>18/11/2024</p>
</div> </div>
<div class="post_name"> <div class="post_name">
<h3>loaded post header</h3> <h3>loaded post header</h3>
</div> </div>
<div class="post_description multiline"> <div class="post_description multiline">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias debitis facere eveniet temporibus aliquid inventore impedit ipsum rerum quia reprehenderit cum, itaque sint quis optio error pariatur. Suscipit sunt, corrupti commodi repudiandae minima, ducimus temporibus.</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias debitis facere eveniet temporibus aliquid inventore impedit ipsum rerum quia reprehenderit cum, itaque sint quis optio error pariatur. Suscipit sunt, corrupti commodi repudiandae minima, ducimus temporibus.</p>
</div> </div>
<a class="content_butt readmore" href="news/">read more...</a> <a class="content_butt readmore" href="news/">read more...</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html>
<!--
Front build by
nikitajevdookishkin.github.io/designer/
-->

View file

@ -6,21 +6,17 @@
<link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../style.css">
<title>The App</title> <title>The App</title>
</head> </head>
<body> <body>
<div class="page_container"> <div class="page_container">
<div class="nav_box"> <div class="nav_box">
<a href="../index.html" class="logo_home"><img src="../logo.svg" class="logo" alt="logo"></a> <a href="../index.html" class="logo_home"><img src="../logo.svg" class="logo" alt="logo"></a>
<h2>News</h2> <h2>News</h2>
<!-- burger menu -->
<input type="checkbox" id="burger-toggle" class="burger-toggle"> <input type="checkbox" id="burger-toggle" class="burger-toggle">
<label for="burger-toggle" class="burger"> <label for="burger-toggle" class="burger">
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
<div class="line"></div> <div class="line"></div>
</label> </label>
<div class="navigation"> <div class="navigation">
<a class="nav_butt_2" href="../about.html">About Us</a> <a class="nav_butt_2" href="../about.html">About Us</a>
<a class="nav_butt_2" href="../news.html">News</a> <a class="nav_butt_2" href="../news.html">News</a>
@ -38,12 +34,16 @@
<div class="post_name"> <div class="post_name">
<h2>loaded post header</h2> <h2>loaded post header</h2>
</div> </div>
<div class="post_description "> <div class="post_description ">
<p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Ad, cupiditate veritatis possimus deleniti sunt natus eos! Porro nostrum molestias, fuga maiores unde sapiente nulla similique at enim ipsum voluptas quaerat obcaecati necessitatibus praesentium culpa tempore, distinctio quo quia. Quaerat doloremque consequuntur quod quidem deserunt molestiae ipsa facere autem praesentium omnis, quasi inventore, earum, hic vero, consectetur? Architecto quis dicta, quam aspernatur ea sapiente obcaecati similique, cupiditate. Voluptatem doloremque repudiandae eveniet nulla saepe maiores quaerat, illum quo dolore ad similique. Voluptatum deleniti veritatis quam reiciendis labore enim molestiae ullam saepe, ipsa ut, fugiat! Provident cupiditate ipsam sunt omnis dolorum assumenda harum dolores, id neque perferendis quis tempore sint aut distinctio nihil quod architecto in voluptas et. Quas nobis eos quos ad earum numquam sequi asperiores nesciunt molestias quis labore soluta a vel quidem cupiditate quisquam placeat obcaecati, aliquid at pariatur harum illo doloribus quibusdam exercitationem. Animi enim tenetur dolorum consequatur, libero totam nemo? Natus officiis sequi delectus dolores ab amet reprehenderit animi nemo fugiat, quod laudantium officia id ea quidem hic, provident dolore explicabo. Et necessitatibus excepturi sit accusantium sapiente, quaerat maiores officiis velit facilis praesentium ducimus eveniet nulla iure. Ducimus a, vero asperiores neque inventore rerum quaerat quasi animi sapiente! Aliquam velit libero distinctio impedit saepe quia ad quos quidem. Ducimus possimus, ex cupiditate in sint doloremque modi corporis nihil, dicta minus labore sunt, amet ipsam facilis suscipit consequatur earum tempore repudiandae fugit et placeat maiores esse? Vel, quis officia pariatur corrupti quo recusandae fugit error doloremque veritatis fuga hic delectus quidem, natus sint tempora ut debitis ex. Deleniti nam doloribus explicabo, praesentium dicta hic iste velit esse ipsam consectetur aut libero tempora itaque officia, architecto fuga voluptas, aliquid officiis obcaecati. Molestiae culpa vel vitae velit magnam omnis maxime est iste, voluptas soluta cupiditate laudantium qui, dolorem quidem doloribus quaerat eligendi, ratione nam minima! Ut, cum. Labore, delectus deserunt rerum aliquid sequi molestiae, perferendis, voluptatum exercitationem est nemo, praesentium. Ea rerum dignissimos, eum adipisci distinctio consectetur magni corporis sapiente deserunt, velit in odio laboriosam quaerat suscipit! Facilis, officiis, perspiciatis. Minus labore quas tenetur temporibus alias quia pariatur harum ipsum consequatur eveniet. Iste reiciendis amet beatae exercitationem mollitia sapiente nostrum incidunt, dolorum adipisci eligendi, corrupti soluta voluptates pariatur a et modi est nemo illo. Minima, quibusdam sit maiores iusto, modi assumenda deserunt. Doloribus quas praesentium esse fuga itaque dignissimos tenetur laudantium qui porro, similique veniam nobis provident fugit alias quibusdam, consequatur!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Ad, cupiditate veritatis possimus deleniti sunt natus eos! Porro nostrum molestias, fuga maiores unde sapiente nulla similique at enim ipsum voluptas quaerat obcaecati necessitatibus praesentium culpa tempore, distinctio quo quia. Quaerat doloremque consequuntur quod quidem deserunt molestiae ipsa facere autem praesentium omnis, quasi inventore, earum, hic vero, consectetur? Architecto quis dicta, quam aspernatur ea sapiente obcaecati similique, cupiditate. Voluptatem doloremque repudiandae eveniet nulla saepe maiores quaerat, illum quo dolore ad similique. Voluptatum deleniti veritatis quam reiciendis labore enim molestiae ullam saepe, ipsa ut, fugiat! Provident cupiditate ipsam sunt omnis dolorum assumenda harum dolores, id neque perferendis quis tempore sint aut distinctio nihil quod architecto in voluptas et. Quas nobis eos quos ad earum numquam sequi asperiores nesciunt molestias quis labore soluta a vel quidem cupiditate quisquam placeat obcaecati, aliquid at pariatur harum illo doloribus quibusdam exercitationem. Animi enim tenetur dolorum consequatur, libero totam nemo? Natus officiis sequi delectus dolores ab amet reprehenderit animi nemo fugiat, quod laudantium officia id ea quidem hic, provident dolore explicabo. Et necessitatibus excepturi sit accusantium sapiente, quaerat maiores officiis velit facilis praesentium ducimus eveniet nulla iure. Ducimus a, vero asperiores neque inventore rerum quaerat quasi animi sapiente! Aliquam velit libero distinctio impedit saepe quia ad quos quidem. Ducimus possimus, ex cupiditate in sint doloremque modi corporis nihil, dicta minus labore sunt, amet ipsam facilis suscipit consequatur earum tempore repudiandae fugit et placeat maiores esse? Vel, quis officia pariatur corrupti quo recusandae fugit error doloremque veritatis fuga hic delectus quidem, natus sint tempora ut debitis ex. Deleniti nam doloribus explicabo, praesentium dicta hic iste velit esse ipsam consectetur aut libero tempora itaque officia, architecto fuga voluptas, aliquid officiis obcaecati. Molestiae culpa vel vitae velit magnam omnis maxime est iste, voluptas soluta cupiditate laudantium qui, dolorem quidem doloribus quaerat eligendi, ratione nam minima! Ut, cum. Labore, delectus deserunt rerum aliquid sequi molestiae, perferendis, voluptatum exercitationem est nemo, praesentium. Ea rerum dignissimos, eum adipisci distinctio consectetur magni corporis sapiente deserunt, velit in odio laboriosam quaerat suscipit! Facilis, officiis, perspiciatis. Minus labore quas tenetur temporibus alias quia pariatur harum ipsum consequatur eveniet. Iste reiciendis amet beatae exercitationem mollitia sapiente nostrum incidunt, dolorum adipisci eligendi, corrupti soluta voluptates pariatur a et modi est nemo illo. Minima, quibusdam sit maiores iusto, modi assumenda deserunt. Doloribus quas praesentium esse fuga itaque dignissimos tenetur laudantium qui porro, similique veniam nobis provident fugit alias quibusdam, consequatur!</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html>
<!--
Front build by
nikitajevdookishkin.github.io/designer/
-->

View file

@ -69,8 +69,6 @@ p, a, ul, li, body{
background-color: var(--main-color); background-color: var(--main-color);
color: var(--background-color); color: var(--background-color);
} }
/*КНОПКИ КОНТЕНТА*/
.content_butt:link, .content_butt:visited { .content_butt:link, .content_butt:visited {
font-weight: 500; font-weight: 500;
color: var(--accent-color); color: var(--accent-color);
@ -82,8 +80,6 @@ p, a, ul, li, body{
background-color: var(--main-color); background-color: var(--main-color);
color: var(--background-color); color: var(--background-color);
} }
/*СТИЛИ ГЛАВНОЙ СТРАНИЦЫ*/
.main_container{ .main_container{
max-width: 800px; max-width: 800px;
max-height: 100vh; max-height: 100vh;
@ -100,8 +96,6 @@ p, a, ul, li, body{
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
} }
/*СТИЛИ ВТОРИЧНЫХ СТРАНИЦ*/
.page_container{ .page_container{
max-height: 100vh; max-height: 100vh;
text-align: center; text-align: center;
@ -184,7 +178,6 @@ p, a, ul, li, body{
background-color: var(--main-color); background-color: var(--main-color);
margin: 5px 0; margin: 5px 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
html { html {
font-size: 85%; font-size: 85%;
@ -312,3 +305,9 @@ p, a, ul, li, body{
display: block; display: block;
} }
} }
/*
Front build by
nikitajevdookishkin.github.io/designer/
*/