add app and all file html and css + footer + almost nav done

.gitignore

@@ -1,3 +1,4 @@
 migrations
 __pycache__
+__init__.py
 db.sqlite3

main_project/settings.py

@@ -1,5 +1,6 @@
 from pathlib import Path
 
+
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
@@ -25,7 +26,6 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'responsive',
     'vc_website',
 ]
 
@@ -37,7 +37,6 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
-    'responsive.middleware.ResponsiveMiddleware',
 ]
 
 ROOT_URLCONF = 'main_project.urls'
@@ -53,8 +52,6 @@
                 'django.template.context_processors.request',
                 'django.contrib.auth.context_processors.auth',
                 'django.contrib.messages.context_processors.messages',
-                'django.core.context_processors.request',
-                'responsive.context_processors.device',
             ],
         },
     },
@@ -114,3 +111,5 @@
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+

main_project/urls.py

@@ -1,21 +1,10 @@
-"""main_project URL Configuration
-
-The `urlpatterns` list routes URLs to views. For more information please see:
-    https://docs.djangoproject.com/en/4.1/topics/http/urls/
-Examples:
-Function views
-    1. Add an import:  from my_app import views
-    2. Add a URL to urlpatterns:  path('', views.home, name='home')
-Class-based views
-    1. Add an import:  from other_app.views import Home
-    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
-Including another URLconf
-    1. Import the include() function: from django.urls import include, path
-    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
-"""
 from django.contrib import admin
 from django.urls import path
+from vc_website.views import homepage
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+
+    path('', homepage, name='homepage'),
+
 ]

requirements

@@ -1,7 +1,6 @@
 asgiref==3.7.2
 Django==4.2.3
 django-appconf==1.0.5
-django-responsive2==0.1.3
 six==1.16.0
 sqlparse==0.4.4
 typing_extensions==4.7.1

vc_website/static/main.js

@@ -0,0 +1,18 @@
+
+// burger menu:
+
+let burger = document.getElementById('burger');
+let count = 0;
+
+function burgerMenu() {
+    if (count % 2 != 0) {
+        document.getElementById('menu').style.right = '0px';
+        burger.classList.add('cross');
+    }
+    else {
+        document.getElementById('menu').style.right = '-150%';
+        burger.classList.remove('cross');
+    }
+    count += 1;
+}
+

vc_website/static/vc_website/footer.css

@@ -0,0 +1,38 @@
+footer {
+  width: 100%;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+footer img {
+  width: 180px;
+  margin: 30px auto 0px;
+}
+footer .cfooter {
+  width: 70%;
+  margin: auto;
+  color: #333;
+}
+footer .cfooter a {
+  color: #333;
+}
+footer .cfooter h4 {
+  font-size: 1.2em;
+  margin: 30px 0px;
+}
+footer .cfooter__element {
+  width: 90%;
+  margin: auto;
+}
+footer .cfooter__element .links {
+  display: flex;
+  justify-content: space-around;
+}
+footer .cfooter__element .links a {
+  text-decoration: none;
+}
+footer .copyright h5 {
+  margin-top: 60px;
+  text-align: center;
+}/*# sourceMappingURL=footer.css.map */

vc_website/static/vc_website/footer.scss

@@ -0,0 +1,52 @@
+footer {
+    width: 100%;
+    background-color: #f0f0f0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    img {
+        width: 180px;
+        margin: 30px auto 0px;
+    }
+
+
+    .cfooter {
+        width: 70%;
+        margin: auto;
+        color: #333;
+
+        a {
+            color: #333;
+        }
+
+        h4 {
+            font-size: 1.2em;
+            margin: 30px 0px;
+        }
+
+        &__element {
+            width: 90%;
+            margin: auto;
+
+            .links {
+                display: flex;
+                justify-content: space-around;
+
+                a {
+                    text-decoration: none;
+                }
+            }
+
+        }
+
+    }
+
+    .copyright {
+        h5 {
+            margin-top: 60px;
+            text-align: center;
+        }
+    }
+}

vc_website/static/vc_website/header.css

@@ -0,0 +1,111 @@
+header {
+  height: 100vh;
+  position: relative;
+}
+header .nav {
+  position: fixed;
+  width: 100%;
+}
+header .nav img {
+  width: 150px;
+  margin: 10px 0px;
+}
+header .nav__mobile .burger {
+  position: absolute;
+  top: 30px;
+  right: 37px;
+  width: 25px;
+  height: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+header .nav__mobile .burger:hover {
+  cursor: pointer;
+}
+header .nav__mobile .burger .line {
+  width: 100%;
+  height: 5px;
+  background-color: #ae00ff;
+  border-radius: 2px;
+  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
+}
+header .nav__mobile .cross .line:nth-child(1) {
+  transform: translateY(2px) rotate(45deg);
+}
+header .nav__mobile .cross .line:nth-child(2) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+header .nav__mobile .menu {
+  position: absolute;
+  right: -150%;
+  width: 100%;
+  height: 90vh;
+  padding: 10px 0px 0px 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: right;
+  background-color: rgba(212, 184, 215, 0.7411764706);
+  transition: all 250ms ease-in-out;
+}
+header .nav__mobile .menu a, header .nav__mobile .menu div {
+  font-size: 1.5em;
+  text-decoration: none;
+  margin: 15px 0px;
+  margin-right: 30px;
+  color: #333;
+}
+header .nav__mobile .menu a i, header .nav__mobile .menu div i {
+  width: 40px;
+  text-align: center;
+  transition: all 320ms ease-in-out;
+}
+header .nav__mobile .menu a #angle, header .nav__mobile .menu a ul, header .nav__mobile .menu div #angle, header .nav__mobile .menu div ul {
+  transition: all 150ms ease-in-out;
+}
+header .nav__mobile .menu a:focus #up, header .nav__mobile .menu a:focus #up1, header .nav__mobile .menu div:focus #up, header .nav__mobile .menu div:focus #up1 {
+  transform: translateY(-10px);
+}
+header .nav__mobile .menu div ul {
+  list-style-type: none;
+  margin: -5px 30px 0px 0px;
+  display: none;
+}
+header .nav__mobile .menu div ul li {
+  margin: 4px 0px;
+}
+header .nav__mobile .menu div ul li a {
+  font-size: 1em;
+}
+header .nav__mobile .menu div:focus i {
+  transform: translateY(20px);
+}
+header .nav__mobile .menu div:hover {
+  cursor: pointer;
+}
+header .nav__desktop {
+  display: none;
+}
+
+@media (min-width: 600px) {
+  .nav__mobile {
+    display: none;
+  }
+  .nav__desktop {
+    top: 10px;
+    display: flex;
+  }
+  .nav__desktop .links {
+    display: flex;
+  }
+  .nav__desktop .links a, .nav__desktop .links p {
+    color: #333;
+  }
+  .nav__desktop .links p i {
+    transition: all 150ms ease-in-out;
+  }
+  .nav__desktop .links p:hover i {
+    transform: rotate(90deg);
+  }
+}/*# sourceMappingURL=header.css.map */