Check layout?

J

John8342019-07-14 13:38:18

css

John834, 2019-07-14 13:38:18

Check layout?

Made it up for the first time.
Of course there are a lot of mistakes.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="asseett/css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,800&display=swap" rel="stylesheet">
</head>
<body>
  <header class="header" >
    <div class="container">
      <div class="heading clearfix">
      <img src="asseett/logo.png" alt="Shabcreation" class="logo">
      <nav>
        <ul class="main-menu">
          <li class="selected"><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </nav>
      </div>
      <div class="titles">
        <h1>
          A FULL SCALE
          <span>DIGITAL AGENCY</span>
        </h1>
      </div>
      <div class="item">
        We WILL CRAFT A BEAUTIFUL AND USEFUL FUNCTIONAL EXPERIENCE 
      </div>
      <img src="asseett/line.png" alt="line" class="line">
    </div>
  </header>











  <section class="about">
    <div class="container">
      <div class="block">
        <h2>ABOUT SHABCREATION</h2>
        <p class=>
          Shabcreation is a Digital Creative Agency. We create joyful digital<br>
          experiences and unique visual identities that tickle the brain,<br> 
          please the eyes and connect the hearts of brands to the
          <br> 
          hearts of their consumers.
        </p>
        <a  class="learn" href="#">Learn More</a>
      </div>
    </div>
  </section>

  <section class="our">
    <div class="container">
      <div class="block-our">
        <h2> OUR SERVICES</h2>
        <p>
          Cresol is a Digital Creative Agency. We create joyful digital<br>
          experiences and unique visual identities
        </p>
        <ul class="top-menu clearfix">
          <li><img src="asseett/first.png">
          <p class="text">APP DEVELOPMENT</p></li>
          
          <li><img src="asseett/item-first.png"><p class="text">WEB DELELOPMENT</p></li>
          
          <li><img src="asseett/item-photo.png">
          <p class="text">QA TESTING</p></li>
          
        </ul>
      </div>
    </div>
  </section>

  <section class="Contact">
<div class="ra-first clearfix">
      <h2>CONTACT US</h2>
      <form>
        <input type="text" placeholder="Your name" class="input">
        <br>
        <input type="text" placeholder="Subject" class="input">
        <textarea rows="8" cols="40" placeholder="Description" class="input"></textarea>
        <a href="#">Submit</a>
      </form>
      </div>
    <div class="photo">
      <div class="container">
        <div class="ra">
          <img src="asseett/icon.png">
          <img src="asseett/mapp.png">
          <h2>INDORE, India</h2>
          <hr>
          <p>
            8933 Country Club Road<br>
            Batavia, OH 45103
          </p>
          <a>
            +91 810 9817 897
          </a>
        </div>
      </div>
  </div>

  </section>

  
</body>
</html>

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  padding: 0;
  margin: 0;
}


.clearfix:after {
  content:'';
  display: table;
  width: 100%;
  clear: both;
}

.header {
  background: #242629 url('../sl.png') no-repeat center top/cover;
  margin-bottom: 48px;
}


.container {
  width: 1172px;
  margin: 0 auto;
}

div, p, input, button, form {
  box-sizing: border-box;
}


.logo {
  margin-top: 34px;
  float: left;
}

nav {
  float: right;
  display: block;
  margin-top: 42px;
}

.main-menu {
  padding: 0;
  margin: 0;
  display: block;
}


.main-menu li {
  float: left;
  display: block;
  font-weight: bold;
  margin-right: 54px;

}

.main-menu a {
  color: white;
  text-decoration: none;
}

ul.main-menu li.selected a {
  color: #fb2274;
}


h1 {
  font-size: 100px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin: 0;
  margin-top: 264px;
}


span {
  color: #fb2274;
  padding: 0;
}

.item {
  text-align: center;
  color: white;
  padding: 0;
}

.line {
  display: block;
  margin: 0 auto;
  margin-top: 222px;
  margin-bottom: 48px;
}



/* section 2 */

.block {
  width: 914px;
  margin: 0 auto;
}

h2 {
  color: #444;
  font-size: 48px;
  margin-bottom: 64px;
  text-align: center;
}

p {
  color: #b9b9b9;
  font-size: 28px;
  margin-bottom: 48px;
  text-align: center;
}



.learn {
  color: #fb2274;
  font-size: 24px;
  border: 2px solid #fb2274;
  text-decoration: none;
  display: block;
  width: 230px;
  padding: 22px 0;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 100px;

}



/* section 3 */

.our {
  background: #fafafa;
}


.block-our {
  
}

h2 {
  color: #444444;
  font-size: 48px;
  margin: 0;
  margin-bottom: 46px;
}


.text {
  color: #444444;
  font-size: 24px;
  font-weight: bold;
  background: white;
  margin: 0;
  padding: 22px 0;
  margin-bottom: 68px;
}

.top-menu li {
  float: left;
  margin-right: 30px;
  display: block;
  margin-top: 88px;
}
.top-menu img {
  width: 347px;
  height: 358px;
}




/* section 4 */

.photo {
  background: url('../photo.png') no-repeat center top/cover;
  height: 400px;
  width: 672px;
  margin-top: -18px;
}

.item-block {
  border: 2px solid #000;
  height: 224px;
  width: 362px;
}

.ra {
  padding: 0;
  margin: 0;
  border: 2px solid white;
  background: white;
  width: 366px;
  height: 224px;
}

.ra h2 {
  margin: 0;
  font-size: 36px;
  font-weight: lighter;
  color: #444444;
}

hr {
  width: 148px;
  float: left;
}

.ra p {
  color: #c2c2c2;
}

.ra a {
  color: #fb2274;
}

.ra-first {
  display: list-item;
  float: right;
}


.ra-first h2 {
  float: left;
  font-size: 48px;
  font-weight: bold;
  margin-top: 98px;
  margin-bottom: 72px;
  text-align: center;
}

form {

}

.input {
  float: left;
  padding: 12px 0 10px 11px;

}


.ra-first a {
  border: 2px solid #fb2274;
  text-decoration: none;
  font-size: 24px;
  color: #fb2274;
  width: 696px;
  padding: 16px 0;
  text-align: center;
}

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

C

Comrade Polyakov, 2019-07-17
@John834

I’m not special either, but still,
1. Don’t type on float, of course this is a matter of taste, but just now they type on flexbox or grid, they are more convenient.
2. Don't give blocks the block, item classes, I actually did that too before, the class should describe the block. Write section_inner, shop_list_item.
3. I don’t know how new you are, but if you suddenly don’t know, read about normalize.css and reset.css, they reset the default browser styles that usually get in the way. Personally, I use normalize, in principle, you can customize any of them for yourself and use them in future projects.
4. Try not to use<br>, there are cases when some kind of motto, slogan, something else should be transferred to a certain word, leave the usual text as it is, but then you will adapt the site for phones and tablets, rearrange <br>it. Better put max-width, that's enough.
Well, on trifles, specify a: hover, cursor: pointer, people should understand that this is a link. In the css comments, write not a section number, but let's say header, main, aside, popup, such. Well, about BEM, this is, roughly speaking, a hint on how to name classes and structure html, I also advise you to read it.

O

Oleg, 2019-07-15
@YAZART

Why not use a service like codepen or jsfiddle to show you an example of your code?

T

tema_sun, 2019-07-14
@tema_sun

So if you yourself know that there are a lot of errors, then why are you showing them? Fix what you know first.
Well, since I drown for BEM, I recommend trying it.