हमारे स्केलेटन पेज बनाने के लिए स्टाइल्स जोड़ना

() translation by (you can also view the original English article)

हमारी चालू निर्माण प्रक्रिया के इस भाग में हम HTML को स्टाइल करने पर ध्यान केंद्रित करने जा रहे हैं। इस ट्यूटोरियल में तीन मुख्य भाग होंगे:

इमेजेज जोड़ना
वेब फोंट में गुप्त फ़ॉन्ट
प्रत्येक अनुभाग स्टाइलिंग

आइए हम अपने आप को याद दिलाना चाहते हैं कि हमने अभी तक क्या बनाया है:

ध्यान में रखते हुए हम इसके लिए लक्ष्य कर रहे हैं, हमारे पास एक निष्पक्ष बिट है!

इमेजेज जोड़ना

प्रत्येक अनुभाग के लिए बैकग्राउंड इमेज फसल के बजाय, हम www.unsplash.com से इमेजेज को डाउनलोड करने जा रहे हैं, जिनमें इमेजेज का उपयोग करने के लिए बड़े और निःशुल्क हैं। हम निम्नलिखित इमेजेज का उपयोग करने जा रहे हैं:

एक नया फ़ोल्डर बनाएं, इसे "इमेजेज" कहते हैं और वहां इमेजेज डाउनलोड करें। अगर आप कुछ और किलोबाइट्स को मुंह बंद करने के लिए ऑप्टिमाइज़ और रिवैक्ट करना चाहते हैं तो वह नि: शुल्क है।

इसके अलावा, हमारे पोर्टफोलियो इमेजेज के लिए, हम कुछ अच्छा trianglify images को तोड़ने जा रहे हैं।

छह SVG फाइलों को डाउनलोड करें और उन्हें "images/portfolio" फ़ोल्डर में रखें, प्रत्येक फ़ाइल को इस प्रकार नाम दिया जाना चाहिए: "work_1.svg", "work_2.svg" ... "work_6.svg"।

ग्राहकों, लोगों और सेवाओं के वर्गों के लिए, हम PSD से इमेजेज को निर्यात करने जा रहे हैं। मैं इस प्रक्रिया में बहुत गहरा नहीं जाऊंगा, क्योंकि एक PSD से इमेजेज को निर्यात करने के बारे में बहुत सारे ट्यूटोरियल हैं। उपकरण जिसे मैं व्यक्तिगत रूप से पसंद और प्रयोग करता हूं, दैनिक आधार पर, इमेजेज को निर्यात करने के लिए Semser कहा जाता है।

प्रत्येक अनुभाग की इमेज को एक प्रासंगिक निर्देशिका "images/section_name" के अंतर्गत रखा जाना चाहिएI फ़ोल्डर संरचना इस तरह दिखनी चाहिए:

फ़ॉन्ट्स को वेबफॉन्ट में कनवर्ट करें

PSD में प्रयुक्त फोंम हैं Amble, SlimJohn & BigJohn और FontAwesome।

SlimJoe और BigJohn फोंट के लिए, हम FontSquirrel का उपयोग otf से वेबफॉन्ट में बदलने के लिए करेंगे। FontSquirrel पर जाएं और यहां से डाउनलोड किए गए फ़ॉन्ट अपलोड करें। स्क्रीन को इस प्रकार दिखना चाहिए:

महत्वपूर्ण: जब भी आप एक परिवर्तनीय टूल का उपयोग करते हैं जैसे कि फोंटक्वायरल, तो आपको यह सुनिश्चित करने की ज़रूरत है कि आप जिस फ़ॉन्ट फाइल को परिवर्तित कर रहे हैं उसके पास उचित लाइसेंस हो।

FontSquirrel रूपांतरण समाप्त हो गया है के बाद, आप किट डाउनलोड कर सकते हैं। संग्रह के अंदर आपके पास निम्न फ़ाइलें हैं:

हम Amble, SlimJoe & BigJohn और FontAwesome डाउनलोड करने के बाद सब कुछ साफ रखने के लिए, हमें प्रत्येक फ़ॉन्ट पैक को "फोंट" फ़ोल्डर में ले जाने की आवश्यकता है। फोंट के लिए फ़ोल्डर संरचना इस तरह दिखनी चाहिए:

ठीक है, अब हम "इमेजेज" और "फोंट" फ़ोल्डरों के साथ काम कर रहे हैं, शेष कार्य PSD के अनुसार वर्गों को स्टाइल देना है, तो हम आगे वाले भाग में आगे बढ़ें।

स्टाइलिंग सेक्शन

पिछले ट्यूटोरियल में प्रस्तुत प्रत्येक अनुभाग में कुछ CSS छूने की जरूरत है, ताकि PSD को देखा और महसूस किया जा सके। चलो एक नई फाइल बनाकर शुरू करें, जिसे "style.css" कहा जाता है, जहां हम वर्गों के लिए हमारी सभी कस्टम css लिखना चाहते हैं।

नोट: आप एक पूर्वप्रोसेसर जैसे Sass या LESS का उपयोग कर आराम कर सकते हैं, इस मामले में आप अपनी फ़ाइलों को एक में जोड़ देंगे, लेकिन वैश्विक अपील के लिए हम इस ट्यूटोरियल में अच्छी राजभाषा CSS में चिपकाएंगे।

इसलिए, संक्षेप में, हमने अपने फोंट को वेबफॉन्ट में परिवर्तित कर दिया है और अब हमें अपने CSS में संदर्भ देने की जरूरत है। Amble, SlimJoe और BigJohn फोंट के लिए कोड इस तरह दिख रहा है:

/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */

/* SlimJoe */
@font-face {
    font-family: 'slim_joeregular';
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot');
    src: url('../fonts/SlimJoe/slim_joe-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff2') format('woff2'),
         url('../fonts/SlimJoe/slim_joe-webfont.woff') format('woff'),
         url('../fonts/SlimJoe/slim_joe-webfont.ttf') format('truetype'),
         url('../fonts/SlimJoe/slim_joe-webfont.svg#slim_joeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* BigJohn */
@font-face {
    font-family: 'big_johnregular';
    src: url('../fonts/BigJohn/big_john-webfont.eot');
    src: url('../fonts/BigJohn/big_john-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BigJohn/big_john-webfont.woff2') format('woff2'),
         url('../fonts/BigJohn/big_john-webfont.woff') format('woff'),
         url('../fonts/BigJohn/big_john-webfont.ttf') format('truetype'),
         url('../fonts/BigJohn/big_john-webfont.svg#big_johnregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* == http://www.fontsquirrel.com/fonts/amble */

/* Amble Regular */
@font-face {
    font-family: 'ambleregular';
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot');
    src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.woff') format('woff'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Regular/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Amble Bold */
@font-face {
    font-family: 'amblebold';
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot');
    src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.woff') format('woff'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Bold/Amble-Bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Amble Light */
@font-face {
    font-family: 'amblelight';
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot');
    src: url('../fonts/Amble/Light/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.woff') format('woff'),
         url('../fonts/Amble/Light/Amble-Light-webfont.ttf') format('truetype'),
         url('../fonts/Amble/Light/Amble-Light-webfont.svg#amblelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

FontAwesome एक CSS फ़ाइल प्रदान करता है, जिसे font-awesome.css कहा जाता है, जो कि css फ़ोल्डर में जगह होने की आवश्यकता होती है। style.css और font-awesome.css दोनों को सूचकांक के भीतर संदर्भ की आवश्यकता है क्योंकि आप नीचे दिए गए स्निपेट से देख सकते हैं।

<!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/font-awesome.css">
  <link rel="stylesheet" href="css/style.css">

स्टाइल फ़ाइलों के संदर्भों को जोड़ने के बाद, चलो css/style.css में कूदते हैं और स्केलटन डिफॉल्ट को ओवरराइट करते हुए कुछ डिफ़ॉल्ट स्टाइल जोड़ते हैं। सबसे पहले जो मैं करना चाहता हूं वह सभी तत्वों को box-sizing जोड़ना है:

/* Personal Flavour */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

अब टाइपोग्राफी फिर से लिखना शुरू हो रहा है। चूंकि डिजाइनर ने कस्टम फोंट्स को जोड़ा और हमने पहले से ही उन्हें वेब फोंट में बदल दिया है, हमें उन्हें हेडिंग, पैराग्राफ और बॉडी में असाइन करना होगा। वेबसाइट डिजाइन करते वक्त टाइपोग्राफी एक महत्वपूर्ण भूमिका निभाती है; हमें यह सुनिश्चित करने की ज़रूरत है कि हम डिजाइनर विनिर्देशों को पूरा करते हैं।

/* Typography */

body {
  font-size: 16px;
  letter-spacing: .05em;
  color: #222222;
  font-family: "amblelight", "Raleway", Helvetica, Arial, sans-serif;
}
h1, h3{
  font-family: "big_johnregular", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
  font-size: 22px;
}
h3 {
  font-size: 28px;
}

जैसा कि आप स्निपेट से देख सकते हैं, h1 और h3 समान font-family, BigJohn share करते हैं हमें body के टाइपोग्राफी के लिए कुछ बदलाव करने की भी आवश्यकता है, जैसे font-size, letter-spacing, color और font-family।

यदि आप पहले भाग को याद करते हैं, जब हमने HTML लिखा था, हमने कुछ कस्टम उपयोगि क्लासेज केंद्र तत्वों के लिए बनाई हैं, और विभाजक क्लास में भी दो अलग-अलग रंग हैं, #222 (गहरे भूरे रंग) और #d87843 (नारंगी)। एक तत्व को केन्द्रित करने के लिए हम इसे पूरी तरह से स्थानांतरित करने के लिए जा रहे हैं और इसे सही ढंग से स्थिति में transform के लिए संपत्ति का उपयोग करें।

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.vertical-centered {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
}

यहां विचार यह है कि यह वर्तमान तत्व के आयामों को लेता है और इसके साथ आगे बढ़ता है। उदाहरण के लिए, translateY(-50%) तत्व की ऊंचाई को 50% तक बढ़ाएगा।

पिछले ट्यूटोरियल में, हमने डिज़ाइन की रेखा बनाने के लिए एक पृथक क्लास के साथ एक तत्व बनाया है। स्टाइल बहुत कम है, लेकिन यहां यह चाल है कि हम इसका उपयोग करते हैं छद्म तत्व से :before इसे दृश्यमान बनाने के लिए। विभाजक class केवल अंतरण और टेक्स्ट संरेखण के लिए सहायक है।

/* Separator */

.separator {
  position: relative;
  margin-bottom: 1.7em;
  padding-bottom: 1.7em;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  color: inherit;
}
.separator:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 86px;
  height: 2px;
  background-color: #222;

  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
.separator.orange:before {
  background-color: #d87843;
}

स्केलेटन बटन के लिए पूर्वनिर्धारित स्टाइल्स के साथ आता है:

हमारे डिजाइन में एक और दो भिन्न प्रकार के बटन होते हैं, जिनमें से एक की रूपरेखा होती है और दूसरा जो वीडियो अनुभाग से प्ले बटन के लिए गोल होता है।

/* Button inverted */

.button.inverted {
  font-size: inherit;
  padding: 25px 70px;
  color: white;
  height: auto;
  border: 3px solid white;
  text-transform: none;
  font-size: 26px;
  font-family: "ambleregular";
}

.button.inverted:hover {
  background: white;
  color: #222;
}

.button.circle {
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
  text-align: center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

उल्लिखित बटन बनाने के लिए अतिरिक्त वर्ग उल्टा है, और रंग और सीमा के लिए एक पारदर्शी बैकग्राउंड और #222 है। हॉवर पर, बैकग्राउंड रंग #222 है और टेक्स्ट का रंग white है। मैंने रिक्ति और डिजाइन प्रयोजनों के लिए इसके लिए पर्याप्त पैडिंग भी जोड़ा है।

सेक्शंस के लिए डिफ़ॉल्ट स्टाइल्स

यदि आपको याद है, प्रत्येक सेक्शन की क्लास का नाम अलग है जिसे हम अभी लक्षित करना चाहते हैं। यहां पूरे विचार यह है कि प्रत्येक अनुभाग में background-color या background-image होनी चाहिए।

इसके अलावा, एक बैकग्राउंड इमेज वाले क्लास, दोहराव से बचने के लिए, एक और श्रेणी में featured-bg-image होती है, जो मूल रूप से बैकग्राउंड-इमेज स्थिति, आकार और ओपेसिटी सेट करती है, और बैकग्राउंड-कवर इफ़ेक्ट बनाता है जो इमेज को फैला देगा कंटेनर साइज में।

प्रत्येक अनुभाग में top और bottom के लिए 80px पैडिंग और left और right के लिए 0px है।

/* =Section general styling
-------- */

section {
  text-align: center;
  padding: 80px 0;
}

/*

  Section with featured background image. Every section which will have this
  class will get the effect with a background cover.

*/

.featured-bg-image {
  position: relative;
  background-color: #222222;
  color: white;
  min-height: 500px;
}

.featured-bg-image:before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: .35;
}

.help:before {
  background: url("../images/help_bg_image.jpg");
}

.creativity:before {
  background: url("../images/creativity_bg_image.jpg");
  background-position: 50% 0;
}

.quote:before {
  background: url("../images/quote_bg_image.jpg");
}

.video-iframe{
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  height: 100%;
  width: 100%;
  display: none;
}

.video:before {
  background: url("../images/video_bg_image.jpg");
}

.clients {
  background-color: #f4f4f4;
}

.footer {
  background-color: #222222;
  color: white;
}

नेविगेशन

नेविगेशन एक hamburger icon और लिंक की एक अनोखी सूची से आता है। नेविगेशन ठीक है, स्क्रॉल करते समय सब कुछ ऊपर रहने के लिए। इसमें 320px की चौड़ाई और 100% की ऊंचाई है। वेबसाइट के बाहर नेविगेशन रखने के लिए, हम transform translate संपत्ति का उपयोग कर रहे हैं (जो हम केंद्र तत्वों के लिए भी इस्तेमाल करते थे), लेकिन इस बार हम इसे अपनी width का 100% अनुवाद करते हैं, इसलिए यह दृश्यमान नहीं होगा।

नेविगेशन के अंदर लिंक अपरकेस टेक्स्ट, एक सफेद color और 100% width है। मैंने लिंक पर प्रस्तुत text-decoration को भी हटा दिया और font-weight बोल्ड बनाया।

हैम्बर्गर आइकन में font-size और सफेद color के लिए 30px है, जिसमें लगभग 20px padding है। मैंने background-color और active स्टेट के लिए एक संक्रमण इफ़ेक्ट भी जोड़ा है। जिस चीज़ पर मैं अधिक ध्यान देना चाहता हूं वह हैमबर्गर आइकन का स्थान है, क्योंकि जैसा कि आप डिज़ाइन में देख सकते हैं, इसे नेविगेशन के "बाहर" रखा गया है। इस के लिए त्वरित समाधान यह पूर्ण और 100% बाएं स्थान देना है। left: 100% नेविगेशन चौड़ाई का प्रतिनिधित्व करता है, इसलिए अब हम नेविगेशन चौड़ाई बढ़ा सकते हैं और आइकन हमेशा इसके बाहर रहेंगे।

/* =Navigation
-------- */

.navigation {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100%;
  z-index: 3;
  width: 320px;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);

  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.navigation.active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.navigation ul {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background: #222;
}
.navigation ul li {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
.navigation ul li a {
  display: block;
  height: 100%;
  padding: 10px 0;

  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-weight: 900;
}

.navigation ul li a.current,
.navigation ul li a:hover {
  color: #222;
  background-color: white;
}

.navigation .menu-icon {
  color: white;
  font-size: 30px;
  line-height: 1em;

  position: absolute;
  left: 100%;
  padding: 20px;

  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -ms-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.navigation .menu-icon.active {
  background-color: rgba(0,0,0, .3);
}
.navigation .menu-icon:hover {
  color: #222;
  background-color: transparent;
}

हीरो सेक्शन

हीरो सेक्शन विशेष रूप से बैकग्राउंड इमेजेज वाली क्लासेज के समान स्टाइल को संभालता है, लेकिन अब हम एक अलग दृष्टिकोण चाहते हैं, क्योंकि इसके लिए कई स्टाइलिंग हैं। यह बैकग्राउंड-इमेज से बैकग्राउंड के रूप में, एक रंग भरने के रूप में एक बैकग्राउंड रंग, एक ग्रेडिएंट ओवरले और एक अलग ऊंचाई: 500px से बना है।

ग्रेडिएंट-ओवरले इफ़ेक्ट CSS3 Gradient का उपयोग करके छद्म तत्व (:after) बनाया गया है। मैंने इस आशय को बनाया है क्योंकि यह हमें फोटोशॉप खोलने के बिना इमेज सौंदर्य बदलने का लचीलापन देता है।

/* =Hero
-------- */

.hero {
  padding: 0;
  min-height: 500px;
  text-align: center;
  position: relative;
  background-color: #d56d4d; /* layer fill content */
  color: white;
}
.hero-image {
  background: url("../images/hero_bg_image.jpg") no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: .9;
}
.hero-image:after {
  content: '';
  opacity: .87; /* layer alpha */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
  background-image: -moz-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}
.hero h2 {
  font-size: 24px;
}

.hero p {
  padding: 0 15%;
}
.hero .separator:before {
  background-color: white;
}

"Contact us" सेक्शन

"Contact us" सेक्शन दो उप-खंडों से बना है; एक बाईं तरफ के लिए, एक सही पक्ष के लिए, और बैकग्राउंड रंग के रूप में #f2f2f2 है। बाईं ओर एक 70px चारों ओर पैडिंग और एक पारदर्शी बैकग्राउंड है। आइटम के बीच एक स्थान जोड़ने के लिए सोशल लिंक्स लिस्ट की सूची तैयार की जाती है, सूची स्टाइल में कोई भी नहीं और margin-right के लिए 10px।

form में बहुत अधिक स्टाइल नहीं है (पैडिंग के लिए 70px और एक बैकग्राउंड रंग के अलावा) क्योंकि स्केलेटन ने हमारे लिए इसके साथ काम किया है।

/*Contact*/

.contact-us {
  background-color: #f2f2f2;
  text-align: left;
}
.contact-us-details {
  padding: 70px;
}
.contact-us-details h5 {
  font-size: 2rem;
}
.contact-us-details .social-links a {
  color: #222;
  display: block;
}

.contact-us-details .social-links li {
  list-style: none;
  float: left;
  font-size: 24px;
  margin-right: 10px;
}
.contact-us-details .social-links li:last-child {
  margin-right: 0;
}
.contact-us-form {
  padding: 70px;
  background-color: #e4e4e4;
}
.contact-us .row {
  margin: 0;
}

कार्य सेक्शन

कार्य फिल्टर

वर्क फिल्टर मदों में font-family के लिए "SlimJoe" है, टेक्स्ट अपरकेस, 18px फ़ॉन्ट साइज और बाएं और दाएं हाशिये के लिए 0.5 है ताकि उनके बीच का स्थान बना सके। active स्टेट में एक अलग फ़ॉन्ट-फॅमिली, "बिग जॉन" है, जो सक्रिय होने पर बाकी मदों से अलग करता है।

/* Work Filters */

.work-filters {
  list-style: none;
}
.work-filters li {
  display: inline-block;
  margin: 0 .5em;
  font-size: 18px;
  text-transform: uppercase;
  font-family: "slim_joeregular";
}
.work-filters li a {
  color: inherit;
  text-decoration: none;
}
.work-filters li.active {
  font-family: "big_johnregular"
}

कार्य आइटम और कार्य विवरण

कार्य आइटम्स की चौड़ाई के लिए 360px और 33% की एक निश्चित ऊंचाई है, हमें प्रत्येक पंक्ति में तीन आइटम के साथ एक ग्रिड दे। आइटम के बीच "फेक" स्थान प्रत्येक आइटम पर लागू सीमा के साथ किया जाता है।

कार्य विवरण प्रत्येक आइटम के लिए एक कैप्शन है, स्थिति के साथ पूर्ण कार्य आइटम में फैला है, और बाएं, दाएं, ऊपर और नीचे के लिए 0px। इसके पास एक बैकग्राउंड है जिसमें .75 ओपेसिटी है, ओवरले इफ़ेक्ट बनाने के बाद से यह इमेज के ऊपर है। डिफ़ॉल्ट रूप से, विवरण कंटेनर छिपा हुआ है, और जब कोई काम आइटम रखा जाता है, तो वह CSS संक्रमण के माध्यम से दृश्य-एनिमेटेड हो जाता है।

/* Work items */

.work-items {
  list-style: none;
  width: 100%;
  display: inline-block;
}
.work-items li {
  position: relative;
  overflow: hidden;
  height: 360px;

  /* important because we need to overwrite the default skeleton */
  margin: 0!important;
  width: 33%;
  border: 10px solid white;

  position: relative;
}
.work-items li:nth-child(4n) {
  margin-left: 0;
}
.work-items li img{
  width: auto;
  height: 100%;
  display: block;
}
/* Work detail */

.work-detail {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;

  opacity: 0;
  background: rgba(0,0,0,.75);
  color: white;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.work-detail h3 {
  font-size: 16px;
  letter-spacing: .05em;
}
.work-detail p {
  font-size: 20px;
  text-transform: capitalize;
  padding-left: 20px;
  padding-right: 20px;
}

.work-items li:hover .work-detail{
  opacity: 1;
  box-shadow: inset 0 0 0 10px #222;
}

ग्राहक सेक्शन

ग्राहक सेक्शन एक सरल इनलाइन सूची है। यहाँ उल्लेख के लिए केवल एक चीज यह है कि मैं इमेजेज को desaturate करने के लिए एक grayscale CSS फिल्टर का उपयोग कर रहा हूँ। प्रत्येक वस्तु की चौड़ाई सही दूरी के लिए 18% और 2% है।

/* Clients */

.clients {
  list-style: none;
}
.clients li {
  display: inline-block;
  width: 18%;
  margin-right: 2%;
}
.clients li:last-child {
  margin-right: 0;
}
.clients li img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
}

"About" सेक्शन

About सेक्शन, आइटम की ऊंचाई, 300px को छोड़कर, कार्य सेक्शन स्टाइल को प्राप्त करता है।

/* About */

.people-list {
  list-style: none;
  margin: 70px 0;
  width: 100%;
}
.people-list li {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.people-list li img {
  width: auto;
  height: 100%;
  display: block;
}

.people-list .people-hover {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.45);

  opacity: 0;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.people-list .people-hover a {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
}

/* About people details */

.people-list .people-detail {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 0 20px;
  z-index: 1;
  color: white;
}
.people-list .people-detail h3 {
  font-size: 22px;
  margin-bottom: 0;
}
.people-list .people-detail p {
  font-size: 16px;
}

.people-list li:hover .people-hover{
  opacity: 1;
  box-shadow: inset 0 0 0 5px #222;
}

सूची के अंतिम आइटम में एक अलग स्टाइल है, क्योंकि इसमें होवर इफ़ेक्ट नहीं है। बैकग्राउंड का रंग सफेद है और इसकी चारों ओर एक अलग सीमा रंग है।

/* Feature people hiring */

.people-list li.blank-feature{
  box-shadow: inset 0 0 0 3px #222;
}
.people-list li.blank-feature img {
  visibility: hidden;
}
.people-list li.blank-feature h3 {
  font-size: 26px;
}

"Services" सेक्शन

Services के लिए इमेजेज 150px ऊंचाई और 20px के नीचे के मार्जिन हैं। जैसा कि आप कोड से देख सकते हैं, इमेज का एक अलग ब्लॉक प्रदर्शन और अधिकतम-चौड़ाई के लिए 100% है।

/* Services */

.services {
  list-style: none;
  margin: 70px 0;
}

.services .service-image {
  height: 150px;
  margin-bottom: 20px;
}

.services .service-image img{
  display: block;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.services p {
  font-size: 16px;
  letter-spacing: 0;
}

Responsiveness

चूंकि हम स्केलेटन ग्रिड प्रणाली का उपयोग कर रहे हैं, वेबसाइट बॉक्स के बाहर उत्तरदायी है, लेकिन फिर भी फ़ॉन्ट आकार, मार्जिन, पैडिंग और संरेखण के लिए कुछ स्टाइल समस्याएं हैं।

जैसा कि आप नीचे दिए गए कोड में देख सकते हैं, मोबाइल प्रदर्शित होने के लिए बटन पैडिंग छोटा है।

Tables के लिए, काम के सामान की 100% चौड़ाई होनी चाहिए और लोगों की वस्तुओं को प्रति पंक्ति दो होना चाहिए। हमें संपर्क अनुभाग फॉर्म के लिए पैडिंग को कम करने की आवश्यकता है और सामाजिक लिंक 33% चौड़ाई और केंद्र से जुड़ा होगा।

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Larger than mobile */
@media (max-width: 400px) {
  .button.inverted {
    padding: 15px;
  }
}
@media (min-width: 400px)  and (max-width: 750px) {
  .work-items li.isotope-item.columns {
    width: 100%;
  }
  .people-list li.people-list-item.columns {
    width: 46%;
    margin: 2%;
    box-sizing: content-box;
  }
  .contact-us-details {
    padding: 70px 25px;
    text-align: center;
  }
  .contact-us-details .social-links li {
    text-align: center;
    width: 33%;
    margin: 0;
  }
  .contact-us-details h5 {
    font-size: 1.7rem;
  }

}

निष्कर्ष

यदि आप स्केलेटन फ्रेमवर्क का लाभ उठाते हैं, जैसा कि आप इस ट्यूटोरियल से देख सकते हैं, भारी काम बहुत आसानी से किया जाता है, आपको जो कुछ भी निर्माण हो रहा है उसके लिए आपको मन की शांति प्रदान करते हैं।

सच है, आपको अलग फ़ॉन्ट फॅमिली, फ़ॉन्ट सिज़ेस, spacings और, जब जरूरत पड़ती है, अलग बटन stylings लागू करने की आवश्यकता है, लेकिन इसके बारे में है।

यह इस सबक के लिए था, मुझे आशा है कि आपको इसका मज़ा आया है, और मैं आपको अगले ट्यूटोरियल में देखने के लिए उत्सुक हूं जहां हम JavaScript को लागू करेंगे। वहाँ मिलते हैं!