Jump to content
  • 0

Оцените вёрстку

JDuck

Asked by JDuck,

 Share

Question

JDuck Explorer

JDuck

Posted
Posted

Всем привет. Недавно я самостоятельно сверстал макет и хотелось бы услышать мнение опытных верстальщиков.
Приму и учту любой совет и критику.

Ссылка на скачивание файлов: https://drive.google.com/drive/folders/0B4tKSvnDdweseFpjbERpUnVJcHM?usp=sharing 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="heading clearfix"> 
                <div class="icon_menu">
                    <i class="fa fa-align-left " aria-hidden="true"></i>
                </div>
                    <ul class="menu">
                        <li>
                            <a href="#">Main</a>
                        </li>
                        <li>
                            <a href="#">Demos</a>
                        </li>
                        <li>
                            <a href="#">Portfolio</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                        <li>
                            <a href="#">Shortcodes</a>
                        </li>
                    </ul>
                <div class="search">
                    <i class="fa fa-search" aria-hidden="true"></i>
                </div>
            </div>      
        </div>
        <hr class="line">
    </header>
    <section>
        <div class="container">
            <div class="content clearfix">
                <div class="social_network">
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                    <i class="fa fa-instagram" aria-hidden="true"></i>
                    <i class="fa fa-pinterest-p" aria-hidden="true"></i>
                    <i class="fa fa-google-plus" aria-hidden="true"></i>
                    <i class="fa fa-tumblr" aria-hidden="true"></i>
                    <i class="fa fa-rss" aria-hidden="true"></i>
                </div>
                <div class="tagline">
                    <hr class="line_titles">
                    <h5>your tagline will go right here</h5>
                    <hr class="line_titles">
                </div>
                <div class="logo"></div>
                <div class="photo"></div>
                <div class="text_content">
                    <h2>This is a headline just right here</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                        <br>
                        <br>
                        <br>
                        <span class="left_quotation">&#8220;</span>
                        <span class="quote">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip mollit anim id est laborum.
                        </span>
                        <span class="right_quotation">&#8221;</span>
                        <br>
                        <br>
                        <br>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum  
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section>
       <hr class="line">
        <div class="container">
            <div class="mail clearfix">
                <div class="logo_mail"></div>
                 <div class="to_top">
                    <i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i>
                    <p>TO TOP</p>
                </div>
                <div class="subscription">
                    <label for="#">Subscribe now to receive our daily updates..
                    <br>
                    <input type="email" placeholder="Enter your e-mail here..." >
                    <input type="submit" value="SUBSCRIBE">
                    </label>
                </div>
            </div> 
        </div>
    </section>
    <section>
        <div class="container">
            <div class="instagram">
                <a href="#">MY INSTAGRAM</a>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <p class="copy">@2015 - Copyright All Right Reserved. Designed and Developed by Whoever.</p>
        </div>
    </footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,400i|Montserrat:400,700|Permanent+Marker|Playfair+Display:400,400i');

*, *::after, *::before {
    margin:0;
    padding:0;
}


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

div{
    box-sizing: border-box;
}

section:last-of-type{
    background-color: #808080;
}

section:first-of-type{
    background: url(img/bg.png);
}

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

.heading{
    position: relative;
    overflow:hidden;
    height:70px;
}

.icon_menu{
    margin-top: 25px;
    color: #c4c4c4;
    float: left;
    border-right: 1px dotted #c4c4c4;
    padding-right: 30px;
    margin-left: 20px;
}

.icon_menu i{
    margin-top: 1px;
}

.icon_menu:hover{
    color: #22bb66;
}

.menu{
    list-style:none;
    position: relative;
    top: 38%;
    left:40%;
    float:left;
}

.menu li{
    position:relative;
    left:-39%;
    float:left;
    border-right: 1px dotted #c4c4c4;
    padding:0 30px;
}

.menu a{
    color:  #4d4d4d;
    display:block;
    text-decoration:none;
    text-transform:uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
}

li:last-child{
    border: none;
}

.menu a:hover{
    color: #22bb66;
}

.menu a:active{
    position: relative;
    top: 3px;
}

.search{
    float: right;
    margin-top: 25px;
    color: #c4c4c4;
    border-left: 1px dotted #c4c4c4;
    padding-left: 30px;
    margin-right: 20px;
}

.search:hover{
    color: #22bb66;
}

.line{
    border: none;
    background-color:#eaeaea;
    color: #eaeaea;
    height: 2px;
}

.content{
    text-align: center;
}

.social_network{
    padding-top: 67px;
    color: #c7c7c7;
}

.social_network i{
    padding-right: 11px;
}

.social_network i:hover{
    color: #000000;
}

.tagline h5{
    font-size: 12px;
    font-weight: 400;
    font-family: 'Permanent Marker' , sans-serif;
}

.line_titles{
    border: none;
    height: 2px;
    width: 102px;
    background-color:#22bb66;
    color: #22bb66;
    position: relative;
    margin-top: 20px;
}

.line_titles:first-child{
    left: 380px;
    top: 10px;
}

.line_titles:last-child{
    float: right;
    right: 380px;
    bottom: 28px;
}

.logo{
    background: url(img/logo.png);
    width: 333px;
    height: 112px;
    position: relative;
    left: 414px;
    margin-top: 20px;
}

.photo{
    margin-top: 100px;
    height: 566px;
    background: #595959;
}

.text_content{
    background: #ffffff;
    margin-top: 67px;
    margin-bottom: 57px;
    padding: 62px 30px;
    border: 2px #eaeaea solid;
}

.text_content h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    color:  #262626;
}

.text_content p{
    margin-top: 44px;
    font-family: 'Droid Serif', serif;
    font-size: 14px;
    line-height: 24px;
    color:  #4a4a4a; 
}

.quote {
    font-size: 18px;
    font-style: italic;
    padding: 0 144px;
    display: block;
}

.left_quotation{
    font-size: 92px;
    color:  #dcdcdc;
    font-style: italic;
    padding-right: 82px;
    float: left;
}

.right_quotation{
    font-size: 92px;
    color:  #dcdcdc;
    font-style: italic;
    float: right;
    position: relative;
    top: 22px;
}


.mail{
    padding: 54px 0;
}

.logo_mail{
    background: url(img/logo.png);
    width: 333px;
    height: 112px;
    float: left;
    margin-right: 35px;
}


.subscription {
    font-family: 'Montserrat', sans-serif;
    color:  #666666;
    font-size: 15px;
    float: right;
    border-right: 1px dotted #c4c4c4;
    border-left: 1px dotted #c4c4c4;
    padding: 5px 80px;
    margin-right: 67px;
    margin-top: 5px;
}


input[type="email"]{
    border: 1px solid #eaeaea;
    background-color:  #f8f8f8;
    width: 347px;
    height: 42px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    padding: 17px;
    margin-top: 15px;
    box-sizing: border-box;
    outline: none;
}

input[type="submit"]{
    background-color:  #22bb66;
    width: 103px;
    height: 42px;
    border: none;
    border-radius: 0 5px 5px 0;
    color:  #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    bottom: 3px;
    right: 3px;
    outline: none;
}

input[type="email"]:focus{
    border: 1px solid #22bb66;
}


input[type="submit"]:hover{
    color: #22bb66;
    background-color: #ffffff;
    border: 1px solid #22bb66;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color:  #bdbdbd;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding-top: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
    color:  #bdbdbd;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}
:-ms-input-placeholder { /* IE 10+ */
    color:  #bdbdbd;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}
:-moz-placeholder { /* Firefox 18- */
    color:  #bdbdbd;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
}

.to_top{
    border-radius: 50%;
    background-color:  #f1f1f1;
    width: 109px;
    height: 109px;
    float: right;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color:  #262626;
    font-size: 13px;
    font-weight: 700;
    padding: 30px 0;
}

.instagram{
    text-align: center;
    height: 341px;
    padding: 170px 0;
}

.instagram a{
    background-color:  #22bb66;
    width: 167px;
    padding: 20px 25px;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    color:  #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.instagram a:hover{
    color: #22bb66;
    background-color: #ffffff;
    border: 2px solid #22bb66;
}

.instagram a:active{
    position: relative;
    top: 3px;
}

.copy{
    font-family: 'Playfair Display';
    color:  #262626;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    padding: 22px 0;
}

 

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Mondeus
      Вёрстка футера на движке Xenforo
      By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • zeiger2
      Смена background-image при работе с псевдоклассом hover
      By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • Марко
      Не работает селектор .class
      By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept