kj
/
now-in-github-bcb-website
1
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
소스 검색

UI changes

master
Navaneeth 7 년 전
부모
4d207ea867
커밋
e8034f630a
13개의 변경된 파일과 247개의 추가작업 그리고 237개의 파일을 삭제
분할 보기
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -0
      package.json
  2. +5
    -1
      static/css/custom_fonts.css
  3. +90
    -47
      static/css/home.css
  4. BIN
      static/images/logo-icon.png
  5. +0
    -38
      static/images/logo-icon.svg
  6. +3
    -3
      static/images/mail-icon.svg
  7. +0
    -51
      static/images/mail.svg
  8. BIN
      static/images/map.png
  9. +12
    -29
      static/js/home.js
  10. +4
    -4
      static/scss/_colors.scss
  11. +6
    -0
      static/scss/custom_fonts.scss
  12. +82
    -30
      static/scss/home.scss
  13. +34
    -34
      templates/home.html

+ 11
- 0
package.json 파일 보기

@@ -0,0 +1,11 @@
{
"name": "fundzin",
"version": "1.0.0",
"description": "client template",
"repository": {
"type": "git",
"url": "code@webtrigon.com:fundzin.git"
},
"author": "Navaneeth N",
"license": "ISC"
}

+ 5
- 1
static/css/custom_fonts.css 파일 보기

@@ -1,10 +1,14 @@
@font-face {
src: url("/fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
src: url("fonts/Archivo_Black/ArchivoBlack-Regular.ttf") format("truetype");
font-family: archivo-black;
font-style: normal; }
@font-face {
src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
font-family: open-sans;
font-weight: bolder; }
@font-face {
src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
font-family: open-sans;
font-weight: bold; }
@font-face {
src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");


+ 90
- 47
static/css/home.css 파일 보기

@@ -5,6 +5,10 @@
@font-face {
src: url("fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype");
font-family: open-sans;
font-weight: bolder; }
@font-face {
src: url("fonts/Open_Sans/OpenSans-SemiBold.ttf") format("truetype");
font-family: open-sans;
font-weight: bold; }
@font-face {
src: url("fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype");
@@ -43,7 +47,7 @@ mark {
justify-content: space-between;
padding: 15px 0;
color: #808285;
font-size: 15px; }
font-size: 14px; }
.temp-intro .temp-name,
.temp-end .temp-name {
margin-left: 80px; }
@@ -53,7 +57,9 @@ mark {
margin-left: 20px; } }
.temp-intro .temp-name mark,
.temp-end .temp-name mark {
color: white; }
color: white;
font-weight: bold;
letter-spacing: 0.8px; }
.temp-intro .temp-social,
.temp-end .temp-social {
display: flex;
@@ -70,7 +76,7 @@ mark {
font-size: 12px; }
.temp-intro small,
.temp-end small {
font-size: 15px; }
font-size: 14px; }
@media screen and (max-width: 1024px) {
.temp-intro small,
.temp-end small {
@@ -100,10 +106,9 @@ mark {
display: block; } }

#page-header {
display: flex;
justify-content: space-around;
height: 20vh;
position: sticky;
display: flex;
top: 0;
left: 0;
background-color: white;
@@ -115,6 +120,16 @@ mark {
#page-header.minimize {
height: 10vh;
padding: 10px 0; }
#page-header .inner-header {
width: 80%;
display: flex;
justify-content: space-between;
margin: 0 auto;
align-self: center; }
@media screen and (max-width: 1024px) {
#page-header .inner-header {
width: 100%;
justify-content: space-around; } }
#page-header .temp-brand {
display: flex;
align-self: center;
@@ -125,15 +140,16 @@ mark {
#page-header .temp-brand figure img {
width: 100%; }
#page-header .temp-brand h1 {
font-size: 32px;
font-size: 36px;
align-self: center;
letter-spacing: -0.65px;
font-family: 'Archivo Black', sans-serif; }
#page-header .temp-brand h1 mark {
color: #27aae1; }
#page-header #desktop-navigation-menu {
width: 50%;
align-self: center; }
width: 55%;
align-self: center;
font-size: 16px; }
@media screen and (max-width: 1024px) {
#page-header #desktop-navigation-menu {
display: none; } }
@@ -142,22 +158,19 @@ mark {
justify-content: space-between; }
#page-header #desktop-navigation-menu ul li {
list-style: none;
font-weight: bold;
color: #58595b; }
color: #808285; }
#page-header #desktop-navigation-menu ul li.active {
color: #27aae1; }
#page-header #mobile-hamburger-menu {
display: none;
position: relative;
height: 25px; }
#page-header #mobile-hamburger-menu.active .icon-line:nth-child(1) {
transform: rotate(45deg) translate(2px, 10px);
top: 0; }
#page-header #mobile-hamburger-menu.active .icon-line:nth-child(2) {
opacity: 0; }
#page-header #mobile-hamburger-menu.active .icon-line:nth-child(3) {
transform: rotate(-45deg) translate(4px, -12px);
bottom: 0; }
#page-header #mobile-hamburger-menu.active .icon-line {
transform: rotate(45deg) translate(2px, 10px); }
#page-header #mobile-hamburger-menu.active .icon-line:after {
transform: rotate(-95deg) translate(20px, 2px); }
#page-header #mobile-hamburger-menu.active .icon-line:before {
opacity: 0; }
@media screen and (max-width: 1024px) {
#page-header #mobile-hamburger-menu {
display: block;
@@ -169,14 +182,20 @@ mark {
background-color: black;
position: absolute;
transition: transform 500ms ease; }
#page-header #mobile-hamburger-menu .icon-line:nth-child(1) {
top: 0; }
#page-header #mobile-hamburger-menu .icon-line:nth-child(2) {
top: 50%;
transform: translateY(-50%);
background-color: #27aae1; }
#page-header #mobile-hamburger-menu .icon-line:nth-child(3) {
bottom: 0; }
#page-header #mobile-hamburger-menu .icon-line:before, #page-header #mobile-hamburger-menu .icon-line:after {
content: '';
display: inline-block;
width: 35px;
height: 5px;
position: absolute; }
#page-header #mobile-hamburger-menu .icon-line:before {
top: 200%;
background-color: #27aae1;
transition: opacity 500ms ease; }
#page-header #mobile-hamburger-menu .icon-line:after {
top: 400%;
background-color: black;
transition: transform 500ms ease; }

#mobile-nav-menu {
display: none; }
@@ -198,7 +217,7 @@ mark {
opacity: 1; }
#mobile-nav-menu ul li {
list-style: none;
font-size: 32px;
font-size: 36px;
text-align: center;
padding: 10px 0;
opacity: 0;
@@ -220,22 +239,35 @@ mark {
.temp-contact-info ul li {
list-style: none;
border-left: 2px solid #d1d3d4;
font-size: 15px;
font-size: 14px;
display: flex;
justify-content: center;
width: 35%;
padding: 20px 0; }
@media screen and (max-width: 1024px) {
.temp-contact-info ul li {
width: 101%; } }
width: 40%; }
.temp-contact-info ul li .contact-content {
display: none; }
.temp-contact-info ul li img {
width: 35%; }
.temp-contact-info ul li.active {
width: 100%; }
.temp-contact-info ul li.active img {
width: 10%; }
.temp-contact-info ul li.active .contact-content {
display: block; } }
.temp-contact-info ul li:last-child {
border-right: 2px solid #d1d3d4; }
.temp-contact-info ul li img {
width: 10%;
align-self: center;
margin-right: 20px; }
align-self: center; }
@media screen and (max-width: 1024px) {
.temp-contact-info ul li img {
width: 30%; } }
.temp-contact-info ul li .contact-content {
font-weight: bold; }
margin-left: 20px;
color: #808285; }
.temp-contact-info ul li .contact-content span {
display: block; }
.temp-contact-info ul li .contact-content span:last-child {
@@ -245,7 +277,7 @@ mark {
color: #27aae1; }

section h3 {
font-size: 32px;
font-size: 36px;
font-family: 'Archivo Black', sans-serif;
line-height: 1.2;
color: #414042; }
@@ -256,7 +288,8 @@ section h3 {
color: #27aae1; }
section p {
color: #808285;
font-size: 14px; }
font-size: 16px;
letter-spacing: 0.8px; }
section figure {
width: 50%; }
section figure img {
@@ -324,8 +357,9 @@ section .description {
border: none;
background-color: #27aae1;
color: white;
padding: 10px 18px;
padding: 20px 30px;
outline: none;
font-size: 16px;
cursor: pointer; }
@media screen and (max-width: 1024px) {
#home button {
@@ -376,7 +410,7 @@ section .description {
#about figure {
width: 35%;
position: relative;
left: 8%;
left: 6%;
opacity: 0;
transition: left 1000ms ease, opacity 1000ms ease; }
#about figure.show {
@@ -388,7 +422,7 @@ section .description {
display: block;
margin: 0 auto; } }
#about figure img {
transform: scale(1.2);
transform: scale(1.3);
top: 25%;
position: relative;
width: 100%; }
@@ -397,7 +431,11 @@ section .description {
transform: scale(1); } }
#about .description {
opacity: 0;
transition: opacity 1000ms ease; }
transition: opacity 1000ms ease;
width: 55%; }
@media screen and (max-width: 1024px) {
#about .description {
width: 100%; } }
#about .description.show {
opacity: 1; }
#about p {
@@ -440,12 +478,14 @@ section .description {
margin: 0 auto;
padding-top: 20px; }
#service .owl-service li .inner-contents p {
width: 100%; }
width: 90%;
margin: 0 auto;
font-size: 14px; }
#service .owl-service li .inner-contents .title {
text-align: center;
padding-top: 20px;
color: #414042;
font-size: 15px;
font-size: 14px;
font-weight: bold; }
#service .service-carousel-btn {
margin: 20px auto;
@@ -498,7 +538,7 @@ section .description {
padding: 10px 0; }
#testimonial .owl-testimonial .owl-item-testimonial .description .person-name,
#testimonial .owl-testimonial .owl-item-testimonial .description .person-info {
font-size: 15px;
font-size: 14px;
font-weight: bold; }
#testimonial .owl-testimonial .owl-item-testimonial .description .person-info {
padding: 2px 0;
@@ -507,7 +547,7 @@ section .description {
color: #27aae1;
padding-top: 20px; }
#testimonial .owl-testimonial .owl-item-testimonial blockquote {
font-size: 14px;
font-size: 16px;
color: #808285;
font-weight: bold;
line-height: 1.8; }
@@ -588,7 +628,7 @@ section .description {
border: none;
border: 2px solid white;
color: white;
font-size: 15px; }
font-size: 14px; }

#contact {
padding: 30px 0; }
@@ -614,7 +654,10 @@ section .description {
flex-direction: column;
width: 90%; } }
#contact .inner-container figure {
width: 40%; }
width: 60%; }
@media screen and (max-width: 1024px) {
#contact .inner-container figure {
width: 100%; } }
#contact .inner-container .description-container {
width: 30%; }
@media screen and (max-width: 1024px) {
@@ -625,7 +668,7 @@ section .description {
justify-content: space-evenly;
padding: 15px 0; }
#contact .inner-container .description-container li address {
font-size: 14px;
font-size: 16px;
color: #58595b;
font-family: open-sans;
font-style: normal;
@@ -633,13 +676,13 @@ section .description {
#contact .inner-container .description-container li label {
color: #58595b;
font-weight: bold;
font-size: 14px; }
font-size: 16px; }
#contact .inner-container .description-container li address,
#contact .inner-container .description-container li .contact-content {
width: 70%; }
#contact .inner-container .description-container li .contact-content {
display: flex;
font-size: 14px; }
font-size: 16px; }
#contact .inner-container .description-container li .contact-content li {
color: #58595b;
padding: 0 15px 0 0; }


BIN
static/images/logo-icon.png 파일 보기

Before After
Width: 47  |  Height: 47  |  Size: 1.1 KiB

+ 0
- 38
static/images/logo-icon.svg 파일 보기

@@ -1,38 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="47.284px" height="47.285px" viewBox="0 0 47.284 47.285" enable-background="new 0 0 47.284 47.285" xml:space="preserve">
<g>
<g>
<g>
<circle fill="#414042" cx="16.549" cy="21.278" r="2.364"/>
</g>
</g>
<g>
<g>
<g>
<path fill="#27AAE1" d="M37.827,0c-3.264,0-5.984,2.218-6.811,5.219c0.779,0.152,1.544,0.34,2.293,0.559
c0.572-1.965,2.37-3.414,4.518-3.414c2.607,0,4.729,2.121,4.729,4.729c0,1.1-0.393,2.1-1.024,2.905
c0.622,0.489,1.211,1.007,1.772,1.552c0.996-1.222,1.617-2.758,1.617-4.457C44.92,3.175,41.745,0,37.827,0z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="#414042" d="M47.284,26.006c0-10.43-9.545-18.914-21.277-18.914c-2.113,0-4.238,0.299-6.332,0.891l-6.376-5.101
c-0.427-0.342-0.95-0.518-1.477-0.518c-0.348,0-0.698,0.076-1.023,0.233c-0.819,0.394-1.34,1.223-1.34,2.131v9.458
c-1.336,1.466-2.396,3.048-3.169,4.727H2.364C1.058,18.914,0,19.972,0,21.278v9.457c0,1.306,1.058,2.364,2.364,2.364h3.941
c0.919,2.021,2.22,3.88,3.845,5.498c-0.45,0.84-0.693,1.788-0.693,2.776c0,3.26,2.651,5.911,5.91,5.911
c2.204,0,4.131-1.214,5.147-3.008c1.791,0.428,3.629,0.643,5.492,0.643s3.701-0.215,5.492-0.643
c1.016,1.794,2.942,3.008,5.146,3.008c3.259,0,5.91-2.651,5.91-5.911c0-0.987-0.242-1.937-0.691-2.774
C45.335,35.15,47.284,30.673,47.284,26.006z M38.534,38.381c0.994,0.629,1.658,1.729,1.658,2.992
c0,1.958-1.588,3.546-3.547,3.546c-1.958,0-3.547-1.588-3.547-3.546c0-0.012,0.004-0.022,0.004-0.033
c-2.192,0.778-4.584,1.216-7.096,1.216s-4.903-0.438-7.096-1.216c0,0.011,0.003,0.021,0.003,0.033
c0,1.958-1.588,3.546-3.546,3.546s-3.546-1.588-3.546-3.546c0-1.263,0.665-2.363,1.658-2.992
c-2.603-2.019-4.548-4.658-5.573-7.646H2.364v-9.457h5.522c0.786-2.309,2.168-4.378,3.935-6.145V4.729l7.356,5.884
c2.124-0.723,4.413-1.156,6.83-1.156c10.445,0,18.914,7.41,18.914,16.55C44.92,30.937,42.442,35.349,38.534,38.381z"/>
</g>
</g>
</g>
</svg>

+ 3
- 3
static/images/mail-icon.svg 파일 보기

@@ -3,13 +3,13 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="12.176px" viewBox="0 0 16 12.176" enable-background="new 0 0 16 12.176" xml:space="preserve">
<g opacity="0.5">
<g opacity="0.3">
<g>
<path fill="#FFFFFF" d="M14.047,0H1.957C0.877,0,0,0.877,0,1.956v8.264c0,1.079,0.877,1.956,1.957,1.956h12.086
<path fill="#a7a9ac;" d="M14.047,0H1.957C0.877,0,0,0.877,0,1.956v8.264c0,1.079,0.877,1.956,1.957,1.956h12.086
c1.08,0,1.957-0.877,1.957-1.956V1.959C16.003,0.881,15.126,0,14.047,0z M15.109,10.22c0,0.586-0.477,1.063-1.063,1.063H1.957
c-0.586,0-1.063-0.477-1.063-1.063V1.959c0-0.586,0.478-1.063,1.063-1.063h12.086c0.586,0,1.063,0.477,1.063,1.063v8.261H15.109z"
/>
<path fill="#FFFFFF" d="M10.09,5.985l3.914-3.509c0.182-0.166,0.198-0.447,0.033-0.633c-0.166-0.182-0.447-0.199-0.633-0.033
<path fill="#a7a9ac;" d="M10.09,5.985l3.914-3.509c0.182-0.166,0.198-0.447,0.033-0.633c-0.166-0.182-0.447-0.199-0.633-0.033
L8.008,6.654l-1.053-0.94C6.951,5.711,6.948,5.707,6.948,5.703C6.926,5.681,6.902,5.661,6.875,5.641L2.592,1.807
C2.406,1.643,2.125,1.658,1.959,1.844C1.794,2.029,1.811,2.311,1.996,2.477l3.959,3.539L2.013,9.707
c-0.179,0.168-0.189,0.449-0.02,0.632c0.089,0.093,0.208,0.142,0.327,0.142c0.109,0,0.219-0.039,0.305-0.119l4.002-3.744


+ 0
- 51
static/images/mail.svg 파일 보기

@@ -1,51 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 31.012 31.012" style="enable-background:new 0 0 31.012 31.012;fill:#a7a9ac;" xml:space="preserve">
<g>
<g>
<path d="M25.109,21.51c-0.123,0-0.246-0.045-0.342-0.136l-5.754-5.398c-0.201-0.188-0.211-0.505-0.022-0.706
c0.189-0.203,0.504-0.212,0.707-0.022l5.754,5.398c0.201,0.188,0.211,0.505,0.022,0.706C25.375,21.457,25.243,21.51,25.109,21.51z
"/>
<path d="M5.902,21.51c-0.133,0-0.266-0.053-0.365-0.158c-0.189-0.201-0.179-0.518,0.022-0.706l5.756-5.398
c0.202-0.188,0.519-0.18,0.707,0.022c0.189,0.201,0.179,0.518-0.022,0.706l-5.756,5.398C6.148,21.465,6.025,21.51,5.902,21.51z"/>
</g>
<path d="M28.512,26.529H2.5c-1.378,0-2.5-1.121-2.5-2.5V6.982c0-1.379,1.122-2.5,2.5-2.5h26.012c1.378,0,2.5,1.121,2.5,2.5v17.047
C31.012,25.408,29.89,26.529,28.512,26.529z M2.5,5.482c-0.827,0-1.5,0.673-1.5,1.5v17.047c0,0.827,0.673,1.5,1.5,1.5h26.012
c0.827,0,1.5-0.673,1.5-1.5V6.982c0-0.827-0.673-1.5-1.5-1.5H2.5z"/>
<path d="M15.506,18.018c-0.665,0-1.33-0.221-1.836-0.662L0.83,6.155C0.622,5.974,0.6,5.658,0.781,5.449
c0.183-0.208,0.498-0.227,0.706-0.048l12.84,11.2c0.639,0.557,1.719,0.557,2.357,0L29.508,5.419
c0.207-0.181,0.522-0.161,0.706,0.048c0.181,0.209,0.16,0.524-0.048,0.706L17.342,17.355
C16.835,17.797,16.171,18.018,15.506,18.018z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

BIN
static/images/map.png 파일 보기

Before After
Width: 2953  |  Height: 1911  |  Size: 274 KiB Width: 750  |  Height: 388  |  Size: 67 KiB

+ 12
- 29
static/js/home.js 파일 보기

@@ -49,38 +49,13 @@ function page_scroll() {

var home_image = document.querySelector('#home figure');
var home_description = document.querySelector('#home .description');
var temp_contact_info = document.querySelector('.temp-contact-info ul');
var temp_contact_info = document.querySelectorAll('.temp-contact-info ul li');

function page_loaded() {
home_image.classList.remove('hide');
home_description.classList.remove('hide');

if ($(window).width() < 960) {
temp_contact_info.classList.add('owl-carousel');
temp_contact_info.classList.add('owl-contact');
var owl = $('.owl-contact');
owl.owlCarousel({
loop: true,
margin: 0,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
stagePadding: 100,
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});

$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
@@ -88,12 +63,20 @@ function page_loaded() {
scrollTop: $($.attr(this, 'href')).offset().top - 730
}, 500);
});

for (var i = 0; i < temp_contact_info.length; i++) {
temp_contact_info[i].addEventListener('click', toggle_contact_info);
}
}
}

function toggle_contact_info(e) {
else {
temp_contact_info.classList.remove('owl-carousel');
temp_contact_info.classList.remove('owl-contact');
for (var i = 0; i < temp_contact_info.length; i++) {
temp_contact_info[i].classList.remove('active');
}

e.currentTarget.classList.add('active');
}

var mobile_nav_lists = document.querySelectorAll('#mobile-nav-menu ul li');


+ 4
- 4
static/scss/_colors.scss 파일 보기

@@ -3,7 +3,7 @@
$dark_blue: #2b3990;
$blue: #27aae1;
$dark_brown: #414042;
$brown: #58595b ;
$brown: #58595b;
$dark_gray: #808285;
$gray: #a7a9ac;
$light_gray: #d1d3d4;
@@ -11,8 +11,8 @@ $lightest_gray: #efefef;
$white_shade: #f9f9f9;

// font size
$paragraph_size: 14px;
$heading_size: 32px;
$other_size: 15px;
$paragraph_size: 16px;
$heading_size: 36px;
$other_size: 14px;
$header_height: 20vh;
$header_height_scroll : 10vh;

+ 6
- 0
static/scss/custom_fonts.scss 파일 보기

@@ -7,6 +7,12 @@
@font-face {
src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
font-family: open-sans;
font-weight: bolder;
}

@font-face {
src: url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
font-family: open-sans;
font-weight: bold;
}



+ 82
- 30
static/scss/home.scss 파일 보기

@@ -47,6 +47,8 @@ mark {

mark {
color: white;
font-weight: bold;
letter-spacing: 0.8px;
}
}

@@ -106,10 +108,9 @@ mark {
}

#page-header {
display: flex;
justify-content: space-around;
height: $header_height;
position: sticky;
display: flex;
top: 0;
left: 0;
background-color: white;
@@ -125,6 +126,19 @@ mark {
padding: 10px 0;
}

.inner-header {
width: 80%;
display: flex;
justify-content: space-between;
margin: 0 auto;
align-self: center;

@media screen and (max-width: 1024px) {
width: 100%;
justify-content: space-around;
}
}

.temp-brand {
display: flex;
align-self: center;
@@ -152,8 +166,9 @@ mark {
}

#desktop-navigation-menu {
width: 50%;
width: 55%;
align-self: center;
font-size: $paragraph_size;

@media screen and (max-width: 1024px) {
display: none;
@@ -165,8 +180,7 @@ mark {

li {
list-style: none;
font-weight: bold;
color: $brown;
color: $dark_gray;

&.active {
color: $blue;
@@ -183,20 +197,15 @@ mark {
&.active {

.icon-line {
transform: rotate(45deg) translate(2px, 10px);

&:nth-child(1) {
transform: rotate(45deg) translate(2px, 10px);
top: 0;
&:after {
transform: rotate(-95deg) translate(20px, 2px);
}
&:nth-child(2) {
&:before {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg) translate(4px, -12px);
bottom: 0;
}
}
}

@@ -213,18 +222,25 @@ mark {
position: absolute;
transition: transform 500ms ease;

&:nth-child(1) {
top: 0;
&:before,
&:after {
content: '';
display: inline-block;
width: 35px;
height: 5px;
position: absolute;
}

&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
&:before {
top: 200%;
background-color: $blue;
transition: opacity 500ms ease;
}

&:nth-child(3) {
bottom: 0;
&:after {
top: 400%;
background-color: black;
transition: transform 500ms ease;
}
}
}
@@ -300,7 +316,27 @@ mark {
padding: 20px 0;

@media screen and (max-width: 1024px) {
width: 101%;
width: 40%;

.contact-content {
display: none;
}

img {
width: 35%;
}

&.active {
width: 100%;

img {
width: 10%;
}

.contact-content {
display: block;
}
}
}

&:last-child {
@@ -310,11 +346,15 @@ mark {
img {
width: 10%;
align-self: center;
margin-right: 20px;

@media screen and (max-width: 1024px) {
width: 30%;
}
}

.contact-content {
font-weight: bold;
margin-left: 20px;
color: $dark_gray;

span {
display: block;
@@ -353,6 +393,7 @@ section {
p {
color: $dark_gray;
font-size: $paragraph_size;
letter-spacing: 0.8px;
}

figure {
@@ -458,8 +499,9 @@ section {
border: none;
background-color: $blue;
color: white;
padding: 10px 18px;
padding: 20px 30px;
outline: none;
font-size: $paragraph_size;
cursor: pointer;

@media screen and (max-width: 1024px) {
@@ -529,7 +571,7 @@ section {
figure {
width: 35%;
position: relative;
left: 8%;
left: 6%;
opacity: 0;
transition: left 1000ms ease, opacity 1000ms ease;

@@ -545,7 +587,7 @@ section {
}

img {
transform: scale(1.2);
transform: scale(1.3);
top: 25%;
position: relative;
width: 100%;
@@ -559,6 +601,11 @@ section {
.description {
opacity: 0;
transition: opacity 1000ms ease;
width: 55%;

@media screen and (max-width: 1024px) {
width: 100%;
}

&.show {
opacity: 1;
@@ -621,7 +668,9 @@ section {
}

p {
width: 100%;
width: 90%;
margin: 0 auto;
font-size: 14px;
}

.title {
@@ -877,9 +926,12 @@ section {
width: 90%;
}

// Change it Accordingly when the image comes into place
figure {
width: 40%;
width: 60%;

@media screen and (max-width: 1024px) {
width: 100%;
}
}

.description-container {


+ 34
- 34
templates/home.html 파일 보기

@@ -32,39 +32,39 @@
</ul>
</div>
<header id="page-header">
<div class="temp-brand">
<figure>
<img src="{% static 'images/logo-icon.svg' %}" alt="">
</figure>
<h1><mark>Fundz</mark>in</h1>
<div class="inner-header">
<div class="temp-brand">
<figure>
<img src="{% static 'images/logo-icon.png' %}" alt="">
</figure>
<h1><mark>Fundz</mark>in</h1>
</div>
<nav id="desktop-navigation-menu">
<ul>
<li class="active">
<a href="#home">HOME</a>
</li>
<li>
<a href="#about">ABOUT</a>
</li>
<li>
<a href="#service">SERVICES</a>
</li>
<li>
<a href="#testimonial">TESTIMONIAL</a>
</li>
<li>
<a href="#enquiry">ENQUIRY</a>
</li>
<li>
<a href="#contact">CONTACT</a>
</li>
</ul>
</nav>
<section id="mobile-hamburger-menu">
<span class="icon-line"></span>
</section>
</div>
<nav id="desktop-navigation-menu">
<ul>
<li class="active">
<a href="#home">HOME</a>
</li>
<li>
<a href="#about">ABOUT</a>
</li>
<li>
<a href="#service">SERVICES</a>
</li>
<li>
<a href="#testimonial">TESTIMONIAL</a>
</li>
<li>
<a href="#enquiry">ENQUIRY</a>
</li>
<li>
<a href="#contact">CONTACT</a>
</li>
</ul>
</nav>
<section id="mobile-hamburger-menu">
<span class="icon-line"></span>
<span class="icon-line"></span>
<span class="icon-line"></span>
</section>
</header>
<nav id="mobile-nav-menu">
<ul>
@@ -91,13 +91,13 @@
<div class="temp-contact-info">
<ul>
<li>
<img src="{% static 'images/mail.svg' %}" alt="">
<img src="{% static 'images/mail-icon.svg' %}" alt="">
<div class="contact-content">
<span>Send us a message</span>
<a href="mailto:info@fundzin.com">info@fundzin.com</a>
</div>
</li>
<li>
<li class="active">
<img src="{% static 'images/phone-call.svg' %}" alt="">
<div class="contact-content">
<span>Give us a Call</span>


쓰기 미리보기
불러오는 중...
취소
저장