├── .vscode
    └── settings.json
├── README.md
├── images
    └── logo.png
├── style.css
└── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # django
2 | [django](https://ijasmoopan.github.io/django/)
3 | 


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ijasmoopan/django/HEAD/images/logo.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | .header{
  2 |     background: #0C4B33;
  3 |     /* overflow: hidden; */
  4 |     margin: 0;
  5 |     padding: 10px 0 6px;
  6 |     width: 100%;
  7 |     height: 56px;
  8 | }
  9 | 
 10 | body{
 11 |     margin: 0;
 12 |     padding: 0;
 13 |     font-family: 'Raleway', sans-serif;
 14 | }
 15 | .logoo{
 16 |     font-size: 40px;
 17 |     font-size: 4rem;
 18 |     font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
 19 |     color: #FFF;
 20 |     display: block;
 21 |     float: left;
 22 |     font-weight: 700;
 23 |     margin: 14px 67px 7px 61px;
 24 |     overflow: hidden;
 25 |     text-decoration: none;
 26 |     text-indent: 100%;
 27 |     width: 104px;
 28 |     height: 36px;
 29 | }
 30 | .logo-text{
 31 |     line-height: 1.3;
 32 |     /* margin: 25px 0 20px; */
 33 |     font-family: "Roboto", Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
 34 |     font-size: 16px;
 35 |     font-size: 1.0rem;
 36 |     color: #44B78B;
 37 |     font-weight: 700;
 38 |     /* width: auto; */
 39 |     float: left;
 40 |     margin: 8px 0 0 -47px;
 41 |     /* display: none; */
 42 |     float: left;
 43 |     width: 237px;
 44 |     display: block;
 45 | }
 46 | .navbar{
 47 |     width: 50%;
 48 |     
 49 | }
 50 | .container{
 51 |     width: 50%;
 52 | }
 53 | .navbar-head{
 54 |     display: block;
 55 |     /* margin-top: -16px;
 56 |     margin-left: 706px; */
 57 |     padding-top: 26px;
 58 |     text-decoration: none;
 59 |     display: block;
 60 |     font-size: initial;
 61 |     color: #FFF;
 62 |     float: right;
 63 | }
 64 | .flex-container{
 65 |     display: flex;
 66 |     background-color: #44B78B;
 67 | 
 68 | }
 69 | .flex-container > div {
 70 |     background-color: #FFF;
 71 |     margin: 10px;
 72 |     padding: 20px;
 73 |     font-size: 30px;
 74 | 
 75 | }
 76 | .flex-container-2{
 77 |     display: flex;
 78 |     margin: 0 0 0 650px;
 79 |     font-family: Palatino, "Palatino Linotype", "Book Antiqua", "Hoefler Text", Georgia, "Lucida Bright", Cambria, Times, "Times New Roman", serif;
 80 |     font-size: 1.2rem;
 81 |     background: #f8f8f8;
 82 |     color: #fff;
 83 |     line-height: 1.6;
 84 |     font-weight: bold;
 85 | }
 86 | .flex-container-2 > div{
 87 |     background-color: #0C4B33;
 88 |     margin: 0px;
 89 |     padding: 13px;
 90 |     font-size: 13px;
 91 | }
 92 | a{
 93 |     text-decoration: none;
 94 |     color: #FFF;
 95 | }
 96 | .flex-container-3{
 97 |     display: flex;
 98 |     width: 100%;
 99 | 
100 |     align-items: center;
101 |     flex-direction: column;
102 | }
103 | .flex-container-3 > div{
104 |     padding: 100px;
105 |     margin: 0%;
106 |     font-size: 40px;
107 |     background-color: #fff;
108 |     color: #0C4B33;
109 | 
110 |     text-align: center;
111 |     font-style: normal;
112 | }
113 | .button-start{
114 |     width: 286px;
115 |     height: 65px;
116 |     font-size: 16px;
117 | 
118 | 
119 |     background-color: #3ad398;
120 |     color: #fff;
121 |     border: none;
122 |     cursor: pointer;
123 |     border-radius: 7px;
124 |     border-style: solid;
125 | }
126 | .button-start:hover{
127 |     background-color: #0C4B33;
128 | }
129 | .flex-container-4{
130 |     display: flex;
131 |     width: 100%;
132 |     align-items: center;
133 |     flex-direction: column;
134 |     height: 150px;
135 |     border-bottom: 1px solid lightgray;
136 |     margin-top: -50px;
137 | }
138 | .flex-container-4 > div{
139 |     margin: 0%;
140 |     font-size: 40px;
141 |     background-color: #fff;
142 |     color: #fff;
143 |     width: 100%;
144 |     text-align: center;
145 |     font-style: normal;
146 | }
147 | .main-body-center{
148 |     display: flex;
149 | }
150 | .body-center-1{
151 |     display: flex;
152 |     flex-direction: column;
153 |     flex: 0.6;
154 |     padding: 20px 80px 30px 80px;
155 |     font-family: 'Source Serif 4', sans-serif;
156 |     color: black;
157 | }
158 | .body-center-2{
159 |     flex: 0.4;
160 |     background-color: #f3f2ef;
161 |     
162 |     padding: 30px;
163 | }
164 | .body-center-1 h1,h3{
165 |     font-family: 'Raleway', sans-serif;
166 | }
167 | .center-1-1{
168 |     display: flex;
169 |     width: fit-content;
170 |     padding: 10px;
171 |     
172 | }
173 | .center-1-1-icon{
174 |   color: white;
175 |   background-color: #3ad398;  
176 |   padding: 20px;
177 |   text-align: center;
178 |   border-radius: 70px;
179 |   height: 50px;
180 |   width: 60px;
181 | }
182 | .center-1-1 i{
183 |     border-radius: 38px;
184 |     
185 | }
186 | .center-2-button{
187 |     background-color: #3ad398;
188 |     width: 80%;
189 |     height: 50px;
190 |     color: white;
191 |     border-radius: 10px;
192 |     border: none;
193 |     cursor: pointer;
194 | }
195 | .center-2-button:hover{
196 |     background-color: #0C4B33;
197 | }
198 | .center-2-1{
199 |     
200 |     text-align: center;
201 |     
202 | }
203 | 
204 | 
205 | .center-2-1-1{
206 |     font-size: 13px;
207 |     color: #3ad398;
208 |     font-weight: 500;
209 |     cursor: pointer;
210 |     text-align: center;
211 | 
212 | }
213 | .support-image{
214 |     width: 100px;
215 |     height: 100px;
216 | }
217 | .learn-button{
218 |     text-align: center;
219 |     padding: 50px;
220 |     color: gray;
221 |     width: 100%;
222 |     height: fit-content;
223 | }
224 | .learn-button-icon{
225 |     width: 400px;
226 |     height: 70px;
227 |     background-color: white;
228 |     border-radius: 5px;
229 |     border: 1px solid lightgray;
230 |     color: gray;
231 |     cursor: pointer;
232 |     font-size: 18px;
233 | }
234 | .learn-button-icon:hover{
235 |     border: 2px solid darkgray;
236 |     color: darkgray;
237 | }	
238 | .body-bottom{
239 |     display: flex;
240 |     justify-content: space-evenly;
241 |     
242 | }
243 | .body-bottom-1{
244 |     flex-direction: row;
245 |     flex: 0.5;
246 |     padding: 20px;
247 | }
248 | .body-bottom-2{
249 |     flex: 0.5;
250 |     padding: 20px;
251 | }
252 | .bottom-email{
253 |     border: 1px solid lightgray;
254 |     border-radius: 5px;
255 |     height: 45px;
256 |     display: flex;
257 |     flex-direction: row;
258 | }
259 | .bottom-email-box{
260 |     color: #3ad398;
261 |     border: none;
262 |     width: 308px;
263 |     padding: 14px;
264 | }
265 | .bottom-email-icon{
266 |     padding: 10px;
267 |     justify-content: flex-end;
268 |     color: #3ad398;
269 | }
270 | .footer{
271 |     background-color: #3ad398;
272 |     width: 100%;
273 |     height: fit-content;
274 |     display: flex;
275 |     color: white;
276 | }
277 | .footer-part{
278 |     flex: 0.25;
279 |     padding: 40px;
280 | }
281 | .footer-part p{
282 |     cursor: pointer;
283 | }
284 | .footer-part p:hover{
285 |     text-decoration: underline;
286 | }
287 | .bottom-footer{
288 |     display: flex;
289 |     background-color: #0C4B33;
290 |     height: fit-content;
291 |     width: 100%;
292 | }
293 | .bottom-footer-part{
294 |     flex: 0.3;
295 |     padding: 30px;
296 | }
297 | .bottom-footer-part p{
298 |     margin: 0;
299 | }
300 | .bottom-footer-part-1{
301 |     display: flex;
302 |     align-items: center ;
303 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Django</title>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 | <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Poppins:wght@200&family=Raleway:wght@300&display=swap" rel="stylesheet">
 12 | <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
 13 | <link rel="preconnect" href="https://fonts.googleapis.com">
 14 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 15 | <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&family=Poppins:wght@200&family=Raleway:wght@300&family=Source+Serif+4:wght@300&display=swap" rel="stylesheet">
 16 | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 17 | </head>
 18 | <body>
 19 |     <div class="full-body">
 20 |         <div class="header">
 21 |             <div class="container">
 22 |                 
 23 |                 <a href="index.html"><img src="images/logo.png" class="logoo" alt=""></a>
 24 | 
 25 |                 <p class="logo-text">The web framework for perfectionists with deadlines.</p>
 26 |             
 27 |                 <!-- <ul>
 28 |                     <li class="navbar-head"><a href="">OVERVIEW</a></li>
 29 |                 </ul> -->
 30 |                 <div class="flex-container-2">
 31 |                     <div><a href="">OVERVIEW</a></div>
 32 |                     <div><a href="">DOWNLOADS</a></div>
 33 |                     <div><a href="">DOCUMENTATION</a></div>
 34 |                     <div><a href="">NEWS</a></div>
 35 |                     <div><a href="">COMMUNITY</a></div>
 36 |                     <div><a href="">CODE</a></div>
 37 |                     <div><a href="">ISSUES</a></div>
 38 |                     <div><a href="">ABOUT</a></div>
 39 |                     <div><a href="">♥DONATE</a></div>
 40 |         
 41 |                 </div>
 42 |             </div> 
 43 |         </div>
 44 |         <!-- <div class="flex-container">
 45 |             <div>1</div>
 46 |             <div>2</div>
 47 |             <div>3</div>
 48 |         </div> -->
 49 |        <div class="main-body">
 50 |             <div class="flex-container-3">
 51 |                 <div>Django makes it easier to build better web<br>apps more quickly and with less code.</div>
 52 |             </div>
 53 |             <div class="flex-container-4">
 54 |                 <div><form action=""><input type="submit" value="Get started with Django" class="button-start"></form></div>
 55 |             </div>
 56 |             <div class="main-body-center">
 57 |                 <div class="body-center-1">
 58 |                     <div><h1>Meet Django</h1></div>
 59 |                     <div><p>Django is a high-level Python web framework that encourages rapid development and clean, pragmatic <br>design. Built by experienced developers, it takes care of much of the hassle of web development, so you can <br>focus on writing your app without needing to reinvent the wheel. It’s free and open source.</p></div>
 60 |                     
 61 |                     <div class="center-1-1"><div class="center-1-1-icon"><i class="material-icons" style="font-size:48px;">flash_on</i></div><div style="padding-left: 30px;"><h3>Ridiculously fast.</h3>
 62 |                     <p>Django was designed to help developers take applications from concept to completion as quickly as possible.</p></div></div>
 63 |                     
 64 |                     <div class="center-1-1"><div class="center-1-1-icon"><i class="material-icons" style="font-size:48px;">lock</i></div><div style="padding-left: 30px;"><h3>Reassuringly secure.</h3>
 65 |                     <p>Django takes security seriously and helps developers avoid many common security mistakes.</p></div></div>
 66 |                     <div class="center-1-1"><div class="center-1-1-icon"><i class="material-icons" style="font-size:48px;">flash_on</i></div><div style="padding-left: 30px;"><h3>Exceedingly scalable.</h3>
 67 |                     <p>Some of the busiest sites on the web leverage Django’s ability to quickly and flexibly scale.</p></div></div>
 68 | 
 69 |                     <div class="learn-button"><button class="learn-button-icon">Learn more about Django</button></div>
 70 |                     <div><hr></div>
 71 |                     <div><h1>Stay in the loop</h1></div>
 72 |                     <div><p>Subscribe to one of our mailing lists to stay up to date with everything in the Django community:</p></div>
 73 | 
 74 |                     <div class="body-bottom">
 75 |                         <div class="body-bottom-1">
 76 |                             <div><h2 style="color: #3ad398;">Using Django</h2></div>
 77 |                             <div><p>Get help with Django and follow announcements.</p></div>
 78 |                             <div class="bottom-email">
 79 |                                 <div><form><input type="text" class="bottom-email-box" placeholder="Enter email"></form></div>
 80 |                                 <div class="bottom-email-icon"><i class="material-icons" style="font-size:28px; color: #3ad398;">mail_outline</i></div>
 81 |                                 
 82 |                             </div>
 83 |                             <div><p>You can also subscribe by sending an email to <a style="color: #3ad398;"><b>django-users+subscribe@googlegroups.com</b></a> and following the instructions that will be sent to you.</p></div>
 84 |                         </div>
 85 |                         <div class="body-bottom-2">
 86 |                             <div><h2 style="color: #3ad398;">Contributing to Django</h2></div>
 87 |                             <div><p>Contribute to the development of Django itself.</p></div>
 88 |                             <div class="bottom-email">
 89 |                                 <div><form><input type="text" class="bottom-email-box" placeholder="Enter email"></form></div>
 90 |                                 <div class="bottom-email-icon"><i class="material-icons" style="font-size:28px; color: #3ad398;">mail_outline</i></div>
 91 |                                 
 92 |                             </div>
 93 |                             <div><p>Before asking a question about how to contribute, read <a style="color: #3ad398;"><b>Contributing to Django.</b></a> Many frequently asked questions are answered there.</p></div>
 94 |                             <div><hr></div>
 95 |                             <div><p>You can also subscribe by sending an email to <a style="color: #3ad398;"><b>django-developers+subscribe@googlegroups.com </b></a> and following the instructions that will be sent to you.</p></div>
 96 | 
 97 |                         </div>
 98 |                     </div>
 99 |                     <div><h3>We have a few other specialized lists (announce, i18n, ...). You can find more information about them in our <a style="text-decoration: underline; color: black;" >mailing list documentation.</a></h3></div>
100 |                 </div>
101 | 
102 |                 <!-- body right side starts  -->
103 | 
104 |                 <div class="body-center-2">
105 |                     <div>
106 |                         <div class="center-2-1"><button class="center-2-button">Download Latest release: 4.0.2</button></div>
107 |                         <div class="center-2-1-1"><p><b>DJANGO DOCUMENTATION ></b></p></div>
108 |                         <div><h3>Support Django!</h3></div>
109 | 
110 |                         <div class="center-1-1"><div><img src="https://static.djangoproject.com/img/fundraising-heart.cd6bb84ffd33.svg" class="support-image" alt="Support Django!"></div><div style="padding-left: 30px;">
111 |                             <p>Cristiano Lopes donated to the Django Software Foundation to support Django development. Donate today!</p></div></div>
112 | 
113 |                         <div><h3>Latest News</h3></div>
114 |                         <div><hr></div>
115 |                         <div><h4 style="color: #3ad398;">Could you host DjangoCon Europe 2023?</h4></div>
116 |                         <div>DjangoCon Europe 2022 will be held from the 21st - 25th September in Porto, Portugal, hopefully, but we're already looking ahead to next year's conference. Could your town - or your football stadium, circus tent, private island or city hall - host this wonderful community event?</div>
117 |                         <div><h5 style="color: gray;">Posted by Anna Makarudze on February 3, 2022</h5></div>
118 | 
119 |                         <div><hr></div>
120 |                         <div><h4 style="color: #3ad398;">Django security releases issued: 4.0.2, 3.2.12, and 2.2.27</h4></div>
121 |                         <div>Django 4.0.2, 3.2.12, and 2.2.27 fix two security issues</div>
122 |                         <div><h5 style="color: gray;">Posted by Mariusz Felisiak on February 1, 2022</h5></div>
123 |                         <div><h4 style="color: #3ad398;">MORE NEWS ></h4></div>
124 |                         <div><h3>New to Django?</h3></div>
125 |                         <div><hr></div>
126 |                         <div><h4 style="color: #3ad398;">Installation guide</h4></div>
127 |                         <div><h4 style="color: #3ad398;">Write your first Django app</h4></div>
128 |                         <div><h4 style="color: #3ad398;">GETTING STARTED WITH DJANGO ></h4></div>
129 |                         <div><h3>The power of Django</h3></div>
130 |                         <div><hr></div>
131 |                         <div><h4 style="color: #3ad398;">Object-relational mapper</h4></div>
132 |                         <div><h4 style="color: #3ad398;">Automatic admin interface</h4></div>
133 |                         <div><h4 style="color: #3ad398;">Robust template system</h4></div>
134 |                         <div><h4 style="color: #3ad398;">Quick internalization</h4></div>
135 |                         <div><h4 style="color: #3ad398;">EXPLORE MORE FEATURES ></h4></div>
136 |                         <div><h3>Get involved</h3></div>
137 |                         <div><hr></div>
138 |                         <div><h4 style="color: #3ad398;">#django IRC channel</h4></div>
139 |                         <div><h5 style="color: gray;">Our non-profit supports the project</h5></div>
140 |                         <div><h4 style="color: #3ad398;">Support Django</h4></div>
141 |                         <div><h5 style="color: gray;">Your contribution makes Django stronger</h5></div>
142 |                         <div><h4 style="color: #3ad398;">Contact the Django Software Foundation</h4></div>
143 |                         <div><h4 style="color: #3ad398;">MORE ABOUT THE DSF ></h4></div>
144 | 
145 |                          </div>
146 |                 </div>
147 |                 <!-- body right side ends -->
148 | 
149 |             </div>
150 | 
151 |             
152 |        </div>
153 |        <!-- main body center ends -->
154 |        <!-- footer starts here -->
155 |        <div class="footer">
156 |             <div class="footer-part">
157 |                 <h4>Learn more</h4>
158 |                 <p>About Django</p>
159 |                 <p>Getting Started with Django</p>
160 |                 <p>Team Organization</p>
161 |                 <p>Django Software Foundation</p>
162 |                 <p>Code of Conduct</p>
163 |                 <p>Diversity Statement</p>
164 |             </div>
165 |             <div class="footer-part">
166 |                 <h4>Get Involved</h4>
167 |                 <p>Join a Group</p>
168 |                 <p>Contribute to Django</p>
169 |                 <p>Submit a Bug</p>
170 |                 <p>Report a Security Issue</p>
171 |                 
172 |             </div>
173 |             <div class="footer-part">
174 |                 <h4>Follow Us</h4>
175 |                 <p>Github</p>
176 |                 <p>Twitter</p>
177 |                 <p>New RSS</p>
178 |                 <p>Django Users Mailing List</p>
179 |                 
180 |             </div>
181 |             <div class="footer-part">
182 |                 <h4>Support Us</h4>
183 |                 <p>Sponsor Django</p>
184 |                 <p>Official merchandise store</p>
185 |                 <p>Amazon Smile</p>
186 |                 <p>Benevity Workplace Giving Program</p>
187 |                 
188 |             </div>
189 | 
190 |        </div>
191 |        <div class="bottom-footer">
192 |            <div class="bottom-footer-part"><img src="https://static.djangoproject.com/img/logo-django.90b49074bac7.png" alt="django"></div>
193 |            <div class="bottom-footer-part"><p>Hosting by</p>
194 |                 <img src="https://static.djangoproject.com/img/logo-rackspace.f445a11160d6.svg" alt="rackspace">
195 |             </div>
196 |             <div class="bottom-footer-part"><p>Designed by</p>
197 |                 <div class="bottom-footer-part-1"><img src="https://static.djangoproject.com/img/logo-threespot.6f9857ef0bb4.svg" alt="threespot"><h4 style="padding: 0 20px;">&</h4><img src="https://static.djangoproject.com/img/logo-andrevv.e16766da19e5.png" style="height: min-content;" alt="andrevv">
198 |                 </div>
199 |             </div>
200 |        </div>
201 |        <!-- footer ends here -->
202 |     </div>
203 | </body>
204 | </html>
205 | 


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