Kezdőlap Felfedezés Súgó
Bejelentkezés
Emmanuil
/
Vartanian_project-modul
Figyelés 1
Kedvenc 0
Másolás 0
Fájlok Problémák 1 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

сделал верхнее меню и добавид контент в первый блок

Emmanuil 5 éve
commit
5f8b341b8f
6 módosított fájl, 292 hozzáadás és 0 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 3 0
      font/font.css
  2. BIN
      img/logo.png
  3. BIN
      img/slider-bg.png
  4. 72 0
      index.html
  5. 43 0
      style/reset.css
  6. 174 0
      style/style.css

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 3 - 0
font/font.css


BIN
img/logo.png
Fájl Megtekintése


BIN
img/slider-bg.png
Fájl Megtekintése


+ 72 - 0
index.html
Fájl Megtekintése 

@@ -0,0 +1,72 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>yoga-mainpage</title>
 
+    <link rel="stylesheet" href="style/reset.css" />
 
+    <link rel="stylesheet" href="style/style.css" />
 
+    <link rel="stylesheet" href="font/font.css" />
 
+    <link
 
+      rel="stylesheet"
 
+      href="//db.onlinewebfonts.com/c/07ef86ba149481f615d8d45e00537b84?family=Champagne+&+Limousines"
 
+    />
 
+    <link
 
+      href="https://fonts.googleapis.com/css?family=Open+Sans:600&display=swap"
 
+      rel="stylesheet"
 
+    />
 
+    <link href="//db.onlinewebfonts.com/c/f5bd594fdf1873d09eff1f4718ff2141?family=Freestyle+Script" rel="stylesheet" type="text/css"/>
 
+  </head>
 
+  <body>
 
+    <div class="wrapper">
 
+      <header class="header">
 
+        <nav class="nav-left">
 
+          <ul>
 
+            <li><a class="link active" href="#">About us</a></li>
 
+            <li><a href="#">Reservation</a></li>
 
+            <li><a href="#">Gallery</a></li>
 
+          </ul>
 
+        </nav>
 
+
 
+        <div class="logo">
 
+          <img src="img/logo.png" alt="logo" />
 
+          <h1>YOGA</h1>
 
+        </div>
 
+
 
+        <nav class="nav-right">
 
+          <ul>
 
+            <li><a href="#">Blog</a></li>
 
+            <li><a href="#">Elements</a></li>
 
+            <li><a href="#">Shop</a></li>
 
+          </ul>
 
+        </nav>
 
+      </header>
 
+
 
+      <main class="main">
 
+        <div class="content">
 
+          <img
 
+            class="main-fon"
 
+            src="img/slider-bg.png"
 
+            alt="matthew-kane-94147"
 
+          />
 
+
 
+          <div class="form">
 
+            <p>Trial Class</p>
 
+            <input maxlength="25" placeholder="Enter your name" type="text" />
 
+            <input maxlength="13" placeholder="Enter your phone" type="text" />
 
+            <input maxlength="25" placeholder="Chose your class" type="text" />
 
+            <select></select>
 
+            <a class="form-link" href="#">Try it</a>
 
+          </div>
 
+
 
+          <div class="text-on-fone">
 
+            <h1>Just Balance <br> your Mind & Body</h1>
 
+            <p>Create the healthy living <br> for yourself</p>
 
+          </div>
 
+        </div>
 
+      </main>
 
+
 
+      <footer class="footer"></footer>
 
+    </div>
 
+  </body>
 
+</html>

+ 43 - 0
style/reset.css
Fájl Megtekintése 

@@ -0,0 +1,43 @@
 
+html, body, div, span, applet, object, iframe,
 
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 
+    a, abbr, acronym, address, big, cite, code,
 
+    del, dfn, em, img, ins, kbd, q, s, samp,
 
+    small, strike, strong, sub, sup, tt, var,
 
+    b, u, i, center,
 
+    dl, dt, dd, ol, ul, li,
 
+    fieldset, form, label, legend,
 
+    table, caption, tbody, tfoot, thead, tr, th, td,
 
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
 
+    time, mark, audio, video {
 
+    	margin: 0;
 
+    	padding: 0;
 
+    	border: 0;
 
+    	font-size: 100%;
 
+    	font: inherit;
 
+    	vertical-align: baseline;
 
+    }
 
+    /* HTML5 display-role reset for older browsers */
 
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
 
+    	display: block;
 
+    }
 
+    body {
 
+    	line-height: 1;
 
+    }
 
+    ol, ul {
 
+    	list-style: none;
 
+    }
 
+    blockquote, q {
 
+    	quotes: none;
 
+    }
 
+    blockquote:before, blockquote:after,
 
+    q:before, q:after {
 
+    	content: '';
 
+    	content: none;
 
+    }
 
+    table {
 
+    	border-collapse: collapse;
 
+    	border-spacing: 0;
 
+    }

+ 174 - 0
style/style.css
Fájl Megtekintése 

@@ -0,0 +1,174 @@
 
+*,
 
+*::before,
 
+*::after {
 
+  box-sizing: border-box;
 
+}
 
+
 
+a {
 
+  text-decoration: none;
 
+}
 
+
 
+/* THE ALL SITE */
 
+.wrapper {
 
+  display: flex;
 
+  flex-direction: column;
 
+  min-height: 100vh;
 
+}
 
+/* THE ALL SITE */
 
+
 
+/* HEADER */
 
+.header {
 
+  height: 80px;
 
+  display: flex;
 
+  justify-content: space-around;
 
+  align-items: center;
 
+}
 
+
 
+.nav-left {
 
+  margin-left: 200px;
 
+}
 
+
 
+.nav-right {
 
+  margin-right: 200px;
 
+}
 
+
 
+li {
 
+  display: inline;
 
+}
 
+
 
+li > a {
 
+  color: #555555;
 
+  margin: 0 10px;
 
+  font-family: "Open Sans", sans-serif;
 
+}
 
+
 
+.link {
 
+  position: relative;
 
+}
 
+
 
+.active {
 
+  color: #5363db;
 
+}
 
+
 
+.active:after {
 
+  content: "";
 
+  display: block;
 
+  width: 35px;
 
+  height: 1.5px;
 
+  background: #5363db;
 
+  position: absolute;
 
+  top: 100%;
 
+  left: 15px;
 
+  margin-top: 5px;
 
+}
 
+
 
+.logo {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+
 
+.logo > h1 {
 
+  font-family: "Champagne & Limousines", sans-serif;
 
+  font-weight: bold;
 
+  font-size: 20px;
 
+  color: #6a78e0;
 
+  padding-top: 5px;
 
+}
 
+/* HEADER */
 
+
 
+/* MAIN */
 
+.main {
 
+  flex-grow: 1;
 
+}
 
+
 
+.content {
 
+  position: relative;
 
+}
 
+
 
+.main-fon {
 
+  width: 100%;
 
+}
 
+
 
+.form {
 
+  position: absolute;
 
+  background: white;
 
+  border-radius: 12.5px;
 
+  height: auto;
 
+  top: 40px;
 
+  left: 390px;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+
 
+.form>p{
 
+  color: #5363db;
 
+  font-family: "Open Sans", sans-serif;
 
+  font-size: 25px;
 
+  margin: 30px 110px 30px 30px;
 
+}
 
+
 
+.form>input{
 
+  margin: 0 0 15px 25px;
 
+  width: 200px;
 
+  height: 30px;
 
+  font-size: 14px;
 
+  background: #f2f2f2;
 
+  border-radius: 8px;
 
+  padding-left: 10px;
 
+  border: 1px #f2f2f2 solid;
 
+}
 
+
 
+input:nth-child(4):after{
 
+  content: '56';
 
+  background: red;
 
+}
 
+
 
+.form-link{
 
+  background: #475bf1;
 
+  border-radius: 10px;
 
+  color: white;
 
+  width: 130px;
 
+  height: 50px;
 
+  text-align: center;
 
+  padding-top: 15px;
 
+  margin: 15px 0 30px 95px;
 
+  font-family: "Open Sans", sans-serif;
 
+}
 
+
 
+.form>select{
 
+  width: 15px;
 
+  left: 205px;
 
+  bottom: 115px;
 
+  border: 1px #f2f2f2 solid;
 
+  background: #f2f2f2;
 
+  position: absolute;
 
+}
 
+
 
+.text-on-fone{
 
+  position: absolute;
 
+  top: 80px;
 
+  right: 170px;
 
+  color: white;
 
+  
+}
 
+
 
+.text-on-fone>h1{
 
+  font-size: 45px;
 
+  text-transform: uppercase;
 
+  font-family: "Open Sans", sans-serif;line-height: 1.4;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.text-on-fone>p{
 
+  font-size: 38px;
 
+  font-family: "Freestyle Script";
 
+  line-height: 1.2;
 
+}
 
+
 
+/* MAIN */
 
+
 
+.footer {
 
+  background: black;
 
+  height: 100px;
 
+}