├── LICENSE
├── README.md
├── img
    ├── .DS_Store
    ├── cover.jpg
    ├── startup1.jpg
    ├── startup2.jpg
    ├── startup3.jpg
    ├── startup4.jpg
    ├── startup5.jpg
    └── startup6.jpg
├── index.html
└── style.css


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Assaf Elovic
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Basic-Landing-Page-Layout
2 | A basic landing page layout template using mainly CSS (Grid and Flex).
3 | 
4 | To learn more, visit: http://www.assafelovic.com/blog/2019/9/7/how-to-build-a-landing-page-in-10min
5 | 


--------------------------------------------------------------------------------
/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/.DS_Store


--------------------------------------------------------------------------------
/img/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/cover.jpg


--------------------------------------------------------------------------------
/img/startup1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/startup1.jpg


--------------------------------------------------------------------------------
/img/startup2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/startup2.jpg


--------------------------------------------------------------------------------
/img/startup3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/startup3.jpg


--------------------------------------------------------------------------------
/img/startup4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/startup4.jpg


--------------------------------------------------------------------------------
/img/startup5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/startup5.jpg


--------------------------------------------------------------------------------
/img/startup6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/assafelovic/Basic-Landing-Page-Layout/aa806de38ed1a85bf9855a6de55624c5602578ed/img/startup6.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Basic LP Layout</title>
 5 |   <link rel="stylesheet" type="text/css" href="./style.css">
 6 | </head>
 7 | <body>
 8 |   <nav class="zone blue sticky">
 9 |       <ul class="main-nav">
10 |           <li><a href="">About</a></li>
11 |           <li><a href="">Products</a></li>
12 |           <li><a href="">Our Team</a></li>
13 |           <li class="push"><a href="">Contact</a></li>
14 |   </ul>
15 |   </nav>
16 |   <div class="container">
17 |       <img class="cover" src="img/cover.jpg">
18 |       <div class="coverText"><h1>Making the world a better place</h1></div>
19 |   </div>
20 |   <div class="zone blue grid-wrapper">
21 |       <div class="card zone">
22 |           <img src="./img/startup1.jpg">
23 |           <div class="text">
24 |               <h1>Team play</h1>
25 |               <p>We believe in working together</p>
26 |               <button>Learn more</button>
27 |           </div>
28 |       </div>
29 |     <div class="card zone"><img src="./img/startup2.jpg">
30 |         <div class="text">
31 |             <h1>Team play</h1>
32 |             <p>We believe in working together</p>
33 |             <button>Learn more</button>
34 |         </div>
35 |     </div>
36 |     <div class="card zone"><img src="./img/startup3.jpg">
37 |         <div class="text">
38 |             <h1>Team play</h1>
39 |             <p>We believe in working together</p>
40 |             <button>Learn more</button>
41 |         </div>
42 |     </div>
43 |   </div>
44 |   <footer class="zone"><p>2019 Assaf Elovic All right reserved. For more articles visit www.assafelovic.com</p></footer>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |     Rule of thumb: Use grid when we have grid-like views (such sa cards)
  3 |     such as tables, cards, albums or anything where we need to manipulate different items in columns or rows
  4 |     In all other use cases consider using flex.
  5 | 
  6 |     The following is a great template for doing page LAYOUTS. From here you can easily continue your own project.
  7 | */
  8 | 
  9 | /* Resetting margin since some browsers have their own set margin */
 10 | body {
 11 |     margin: 0 auto;
 12 |     font-family: Helvetica;
 13 | }
 14 | 
 15 | .zone {
 16 |     color:#FFF;
 17 |     font-size:2em;
 18 |     border-radius:4px;
 19 |     transition: all 0.3s linear;
 20 | }
 21 | 
 22 | .zone:hover {
 23 |     -webkit-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
 24 |     -moz-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
 25 |     -o-box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
 26 |     box-shadow:rgba(0,0,0,0.8) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
 27 | }
 28 | 
 29 | /***********************************************************************
 30 |  *  Nav Bar
 31 |  **********************************************************************/
 32 | /* 
 33 |     use flex so we have one direction row as needed for header.
 34 |     since creating <nav> we want to remove the dots (list-style).
 35 |     again, we want to remove set margin by div and reset it so margin: 0
 36 | */
 37 | .main-nav {
 38 |     /* creates a */
 39 |     display: flex;
 40 |     list-style: none;
 41 |     margin: 0;
 42 |     font-size: 0.7em;
 43 | }
 44 | 
 45 | a:hover {
 46 |     color: #686de0;
 47 | }
 48 | 
 49 | /*
 50 |     When changing width size we see some nav cut, so we need to modify how it'll look when the width is smaller
 51 | */
 52 | @media only screen and (max-width: 600px) {
 53 |     .main-nav {
 54 |         font-size: 0.5em;
 55 |         padding: 0;
 56 |     }
 57 | }
 58 | 
 59 | /*
 60 |     this pushes 'contact' all the way to the right.
 61 |     margin-left auto, automatically creates a max left margin to the div
 62 | */
 63 | .push {
 64 |     margin-left: auto;
 65 | }
 66 | 
 67 | /*
 68 |     After setting above styles we see that all nav list items are close together.
 69 |     So we want to create a padding between them.
 70 | */
 71 | li {
 72 |     padding: 20px;
 73 | }
 74 | 
 75 | a {
 76 |     color: #f5f5f6;
 77 |     text-decoration: none;
 78 | }
 79 | 
 80 | /*
 81 |     To make navigation sticky, we set a position fixed. Top 0 is so the position is at the top of the page.
 82 |     After setting these we see that the layout is not fit to full width, so we set it to 100%.
 83 | */
 84 | .sticky {
 85 |   position: fixed;
 86 |   z-index: 1;
 87 |   top: 0;
 88 |   width: 100%;
 89 | }
 90 | 
 91 | /***********************************************************************
 92 |  *  Cover
 93 |  **********************************************************************/
 94 |  /*
 95 |     We use flex since we want to keep things simple (just center content).
 96 |     After setting flex, justify-content centers content horizontal (X axis) within container and align-items centers vertical (Y axis)
 97 |     finally, vh is "view height", and from 0%-100% describes how much of the screen browser to fill out. 
 98 |     As we change height of screen, it'll auto adjust height to 100% of it
 99 |  */
100 | .container {
101 |     /* vh = view height. We do this to make sure banner fills entire view */
102 |     height: 100vh;
103 |     display: flex;
104 |     align-items: center;
105 |     justify-content: center;
106 | }
107 | 
108 | /*
109 | We set the image within the cover layout
110 | rem = relative to font-size of root element. This is since we've created different font size to vary based on screen, 
111 | so this will automatically change this as well
112 | */
113 | .cover {
114 |     width:100%;
115 |     height:100%;
116 | }
117 | 
118 | /*
119 |     We'd like the text to appear in the center of the image and above it.
120 |  */
121 | .coverText {
122 |     position: absolute;
123 |     left: 50%;
124 |     top: 50%;
125 |     transform: translate(-50%, -50%);
126 |     color: white;
127 |     font-weight: bold;
128 | }
129 | 
130 | .coverText > h1 {
131 |     color: white;
132 |     font-size: 40px;
133 | }
134 | 
135 | /***********************************************************************
136 |  *  Body card grid
137 |  **********************************************************************/
138 | /*
139 | As described at top of page, we want to create a grid of blocks so we'll use grid this time. 
140 |     grid-template-columns sets the style of each column (or div). FYI: If we were to just set 1fr, we would see just one block per column.
141 |     So we set it to repeat (just like typing 1fr 1fr ...) and autofill display with anything from min 350px to whole screen (1fr)
142 |     Finally, we set a grid gap of 20px (padding like)
143 | */
144 | .grid-wrapper {
145 |     display: grid;
146 |     grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
147 |     grid-gap: 10px;
148 | }
149 | 
150 | /*
151 | Pretty straight forward, for each card in the grid we set its margin accordingly.
152 | */
153 | .card {
154 |     background-color: #444;
155 |     margin: 50px;
156 | }
157 | 
158 | /*
159 | We want to make sure image fills entire box so we set width 100%.
160 | We just want to manipulate images within the class box, so we set it with the below syntax.
161 | */
162 | 
163 | .card > img {
164 |     max-width: 100%;
165 |     height: auto;
166 | }
167 | 
168 | .card h1 {
169 |     font-size: 1.5rem;
170 | }
171 | 
172 | .card p {
173 |     font-size: 1rem;
174 | }
175 | 
176 | /*
177 |     We set the padding around the text within the card (unlike the image which should be spread to 100% width)
178 | */
179 | .card > .text {
180 |     padding: 0 20px 20px;
181 | }
182 | 
183 | /*
184 |     Finally, we set the button design that appears within each card.
185 |  */
186 | button {
187 |     cursor: pointer;
188 |     background: gray;
189 |     border: 0;
190 |     font-size: 1rem;
191 |     color: white;
192 |     padding: 10px;
193 |     width: 100%;
194 | }
195 | 
196 | button:hover {
197 |     background-color: #686de0;
198 | }
199 | 
200 | /***********************************************************************
201 |  *  Footer
202 |  **********************************************************************/
203 | footer {
204 |     text-align: center;
205 |     padding: 3px;
206 |     background-color: #30336b;
207 | }
208 | 
209 | footer p {
210 |     font-size: 1rem;
211 | }
212 | 
213 | /***********************************************************************
214 |  *  Blue Background
215 |  **********************************************************************/
216 | .blue {
217 |     background: #2d3436;
218 | }
219 | 
220 | 


--------------------------------------------------------------------------------