mirror of
https://github.com/sergeyyarkov/grid-css-landing.git
synced 2026-10-11 02:09:11 +03:00
Add files via upload
This commit is contained in:
Sergey
GitHub
commit
262b8741d5
BIN
img/about-us_mac.jpg
Normal file
BIN
img/about-us_mac.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
11
img/about-us_point.svg
Normal file
11
img/about-us_point.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #5a5a5a;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="_" data-name="" class="cls-1" d="M873.333,1125.5a2.333,2.333,0,1,0-2.333,2.33A2.332,2.332,0,0,0,873.333,1125.5ZM871,1120.54a4.96,4.96,0,1,1-4.958,4.96A4.968,4.968,0,0,1,871,1120.54Zm7,4.96a7,7,0,0,0-7-7h0A7,7,0,1,0,878,1125.5Z" transform="translate(-864 -1118.5)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 490 B |
BIN
img/clients/chanel-logo.png
Normal file
BIN
img/clients/chanel-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
img/clients/guerlain-logo.png
Normal file
BIN
img/clients/guerlain-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
img/clients/lacoste-logo.png
Normal file
BIN
img/clients/lacoste-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
img/clients/lancome-logo.png
Normal file
BIN
img/clients/lancome-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
img/clients/zara-logo.png
Normal file
BIN
img/clients/zara-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
11
img/footer/dribbble.svg
Normal file
11
img/footer/dribbble.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #b2b2b2;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="dribbble" class="cls-1" d="M856.125,6139.37a15,15,0,1,0,15,15A15,15,0,0,0,856.125,6139.37Zm0,27.66a12.655,12.655,0,1,1,12.656-12.66A12.659,12.659,0,0,1,856.125,6167.03Zm0-20.16a7.5,7.5,0,1,0,7.5,7.5A7.508,7.508,0,0,0,856.125,6146.87Zm4.6,3.89a5.813,5.813,0,0,1,1.248,3.34,11.552,11.552,0,0,0-2.392-.27H859.57a10.093,10.093,0,0,0-1.7.15c-0.13-.32-0.26-0.62-0.391-0.91A9.118,9.118,0,0,0,860.72,6150.76Zm-4.6-2.24a5.834,5.834,0,0,1,3.649,1.29,7.572,7.572,0,0,1-2.874,2.05,20.928,20.928,0,0,0-2.019-3.2A6.354,6.354,0,0,1,856.125,6148.52Zm-2.585.61a18,18,0,0,1,2.088,3.19,17.077,17.077,0,0,1-4.621.64h-0.559A5.9,5.9,0,0,1,853.54,6149.13Zm-3.266,5.24c0-.02,0-0.05,0-0.08,0.166,0.01.38,0.01,0.639,0.01h0a18.358,18.358,0,0,0,5.311-.76c0.114,0.25.226,0.51,0.337,0.77a9.317,9.317,0,0,0-3.294,1.95,9.946,9.946,0,0,0-1.613,1.88A5.812,5.812,0,0,1,850.274,6154.37Zm5.851,5.86a5.77,5.77,0,0,1-3.477-1.16,8.656,8.656,0,0,1,1.358-1.67,8.069,8.069,0,0,1,3.041-1.84,29.156,29.156,0,0,1,1.155,4.28A5.747,5.747,0,0,1,856.125,6160.23Zm3.311-1.04a29.778,29.778,0,0,0-1.079-3.93,7.682,7.682,0,0,1,1.2-.09h0.017a10.358,10.358,0,0,1,2.3.28A5.859,5.859,0,0,1,859.436,6159.19Z" transform="translate(-841.125 -6139.38)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
11
img/footer/facebook.svg
Normal file
11
img/footer/facebook.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #b2b2b2;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="facebook" class="cls-1" d="M676.5,6139a15.5,15.5,0,1,0,15.5,15.5A15.5,15.5,0,0,0,676.5,6139Zm0,28.58a13.08,13.08,0,1,1,13.078-13.08A13.081,13.081,0,0,1,676.5,6167.58Zm3.678-15.45h-2.7v-1.97a0.828,0.828,0,0,1,.916-0.74h1.741v-2.66l-2-.01A3.058,3.058,0,0,0,674.8,6150v2.13h-1.976v2.73H674.8v7.39h2.684v-7.39h2.28Z" transform="translate(-661 -6139)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 570 B |
11
img/footer/google.svg
Normal file
11
img/footer/google.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30.844" height="30.84" viewBox="0 0 30.844 30.84">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #b2b2b2;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="google" class="cls-1" d="M766.416,6138.67a15.415,15.415,0,1,0,15.417,15.41A15.413,15.413,0,0,0,766.416,6138.67Zm0,28.42a13.005,13.005,0,1,1,13.008-13.01A13.005,13.005,0,0,1,766.416,6167.09Zm1.329-20.24a5.415,5.415,0,0,0,.755-0.48h-5.016c-1,0-3.8,1.14-3.8,3.8s2.894,3.24,3.944,3.2a1.215,1.215,0,0,0,.232,1.71c0.314,0.34.25,0.44-.126,0.44s-5.036.05-5.036,3.39,6.189,3.57,8.223,1.78a3.357,3.357,0,0,0,.021-5.4c-1.573-1.12-2.16-1.65-1.153-2.54s1.8-1.6,1.8-3.25a3.119,3.119,0,0,0-1.364-2.5A2.938,2.938,0,0,0,767.745,6146.85Zm-0.777,11.89c0,1.44-1.221,2.14-3.295,2.14s-3.188-1.04-3.188-2.58,1.511-2.31,4.343-2.31C765.6,6156.58,766.968,6157.3,766.968,6158.74Zm-3-6.03c-2.5,0-3.63-5.83-.692-5.83C765.562,6146.79,767.282,6152.71,763.968,6152.71Zm8.275-4.41v-1.89h-0.981v1.89h-1.919v0.99h1.919v1.9h0.981v-1.9h1.887v-0.99h-1.887Z" transform="translate(-751 -6138.66)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
11
img/footer/linkedin.svg
Normal file
11
img/footer/linkedin.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="30.5" height="30.5" viewBox="0 0 30.5 30.5">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #b2b2b2;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="linkedin" class="cls-1" d="M811.25,6139a15.25,15.25,0,1,0,15.25,15.25A15.251,15.251,0,0,0,811.25,6139Zm0,28.12a12.87,12.87,0,1,1,12.867-12.87A12.867,12.867,0,0,1,811.25,6167.12Zm-7.619-5.25h2.859v-11.44h-2.859v11.44Zm11.437-11.44a5.241,5.241,0,0,0-3.812,1.91v-1.91H808.4v11.44h2.86v-6.67a2.427,2.427,0,0,1,2.859-1.91c1.212,0.08,1.865,1.68,1.906,1.91v6.67l2.848,0.01v-7.92A3.567,3.567,0,0,0,815.068,6150.43Zm-10.008-3.81a1.43,1.43,0,1,0,1.43,1.43A1.429,1.429,0,0,0,805.06,6146.62Z" transform="translate(-796 -6139)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 746 B |
11
img/footer/twitter.svg
Normal file
11
img/footer/twitter.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="31.5" height="31.5" viewBox="0 0 31.5 31.5">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #b2b2b2;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="twitter" class="cls-1" d="M721.5,6138.5a15.75,15.75,0,1,0,15.75,15.75A15.749,15.749,0,0,0,721.5,6138.5Zm0,29.04a13.29,13.29,0,1,1,13.289-13.29A13.289,13.289,0,0,1,721.5,6167.54Zm7.875-18.52a5.614,5.614,0,0,1-1.8.55,3.75,3.75,0,0,0,1.354-1.9,5.083,5.083,0,0,1-2.027.77h0a3.123,3.123,0,0,0-2.35-1.08,3.384,3.384,0,0,0-3.249,3.5,3.751,3.751,0,0,0,.083.78h0a9.142,9.142,0,0,1-6.883-3.63,3.66,3.66,0,0,0,.985,4.62,2.019,2.019,0,0,1-1.419-.39,3.356,3.356,0,0,0,2.506,3.42,2.472,2.472,0,0,1-1.352.11,3.123,3.123,0,0,0,2.9,2.37,5.08,5.08,0,0,1-4.5,1.45,9.249,9.249,0,0,0,5.082,1.55c5.242,0,9.313-4.57,9.094-10.22a0.117,0.117,0,0,1,0-.02c0-.01,0-0.03,0-0.04s0-.04,0-0.05A5.967,5.967,0,0,0,729.375,6149.02Z" transform="translate(-705.75 -6138.5)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 968 B |
11
img/our-services_mac.svg
Normal file
11
img/our-services_mac.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #222;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Forma_1" data-name="Forma 1" class="cls-1" d="M323.312,2603.12h-3.375a3.375,3.375,0,0,1-3.375-3.37v-5.06H306.437v5.06a3.374,3.374,0,0,1-3.375,3.37h-3.375a1.69,1.69,0,0,0,0,3.38h23.625A1.69,1.69,0,0,0,323.312,2603.12Zm12.235-50.62H287.453a3.066,3.066,0,0,0-2.953,3.16v32.49a3.066,3.066,0,0,0,2.953,3.16h48.094a3.066,3.066,0,0,0,2.953-3.16v-32.49A3.066,3.066,0,0,0,335.547,2552.5Zm-0.422,35.44h-47.25v-32.07h47.25v32.07Z" transform="translate(-284.5 -2552.5)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 678 B |
10
img/our-services_marketing.svg
Normal file
10
img/our-services_marketing.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="47.19" height="54.16" viewBox="0 0 47.19 54.16">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Forma_1" data-name="Forma 1" class="cls-1" d="M1214.77,2587.02l-4.05-12a6.719,6.719,0,0,0-3.5-10.33l-4.06-12.01a1.968,1.968,0,0,0-1.88-1.61c-1.25,0-1.93,1.23-2.32,2.39-2.92,11.66-16.11,15.41-16.33,15.47a2.9,2.9,0,0,0-1.91,1.69,2.81,2.81,0,0,0,.1,2.14l4.06,11.99a2.808,2.808,0,0,0,2.75,2,3.29,3.29,0,0,0,1.06-.17,30.507,30.507,0,0,1,9.69-1.7c8.27,0,12.83,4.1,12.87,4.14l0.22,0.17a3.547,3.547,0,0,0,1.76.61,1.71,1.71,0,0,0,1.46-.75A2.15,2.15,0,0,0,1214.77,2587.02Zm-16.39-5.1a32.827,32.827,0,0,0-10.69,1.89l-4.08-12.07c1.41-.41,13.62-4.23,17.61-15.52l3.74,11.04,2.4,7.1,3.69,10.89A24.46,24.46,0,0,0,1198.38,2581.92Zm-15.13,9.8s0.79-2.55.4-3.73l-4.65-14.03a1.486,1.486,0,0,0-2.14-1.13l-5.76,1.95s-4.49,1.74-3,6.15l2.05,6.06s1.63,5.12,6.09,3.61c0,0,1.76-.52,2.55,2.31l3.7,10.96a1.53,1.53,0,0,0,2.08,1.26s5.43-.95,1.09-5.34C1186.92,2597.14,1183.25,2595.36,1183.25,2591.72Zm17.32-28.82a1.177,1.177,0,0,0-1.31,1.01c-0.6,4.71-7.58,6.68-7.65,6.7a1.177,1.177,0,0,0,.31,2.31,1.757,1.757,0,0,0,.31-0.04c0.35-.1,8.56-2.41,9.36-8.67A1.18,1.18,0,0,0,1200.57,2562.9Z" transform="translate(-1167.78 -2551.06)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
10
img/our-services_mobile.svg
Normal file
10
img/our-services_mobile.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="33.688" height="54.25" viewBox="0 0 33.688 54.25">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Forma_1" data-name="Forma 1" class="cls-1" d="M608.872,2555.96a1.076,1.076,0,0,0-1.084-1.07H601.9a1.076,1.076,0,0,0-1.084,1.07v0.03a1.076,1.076,0,0,0,1.084,1.07h5.886a1.076,1.076,0,0,0,1.084-1.07v-0.03Zm8.42-3.96H592.4a4.367,4.367,0,0,0-4.394,4.34v45.57a4.373,4.373,0,0,0,4.394,4.34h24.895a4.373,4.373,0,0,0,4.394-4.34v-45.57A4.366,4.366,0,0,0,617.292,2552Zm-12.447,52.62a2.35,2.35,0,1,1,2.38-2.35A2.366,2.366,0,0,1,604.845,2604.62Zm13.179-7.05a0.725,0.725,0,0,1-.732.72H592.4a0.725,0.725,0,0,1-.732-0.72v-36.89a0.734,0.734,0,0,1,.732-0.73h24.895a0.734,0.734,0,0,1,.732.73v36.89Zm-15.559-7.96a0.907,0.907,0,0,0-.769,1.4l-1.5,1.91a0.918,0.918,0,0,0-.289-0.05,0.939,0.939,0,0,0-.548.18l-1.863-1.23a0.817,0.817,0,0,0,.032-0.22,0.916,0.916,0,0,0-1.831,0,0.88,0.88,0,0,0,.122.44l-1.429,1.62a0.959,0.959,0,0,0-.34-0.07,0.905,0.905,0,1,0,.916.9,0.88,0.88,0,0,0-.122-0.44l1.428-1.61a0.965,0.965,0,0,0,.341.07,0.947,0.947,0,0,0,.548-0.19l1.863,1.23a0.78,0.78,0,0,0-.032.22,0.916,0.916,0,0,0,1.831,0,0.894,0.894,0,0,0-.147-0.49l1.5-1.91a0.923,0.923,0,0,0,.289.05A0.905,0.905,0,1,0,602.465,2589.61Zm-4.21-14.83v-3.25a3.638,3.638,0,0,0-3.661,3.61h3.295A0.362,0.362,0,0,0,598.255,2574.78Zm3.612,0.97a3.625,3.625,0,0,0-2.88-4.15v3.54a0.733,0.733,0,0,1-.732.73h-3.587A3.671,3.671,0,0,0,601.867,2575.75Zm-5.077-10.73h2.2v4.34h-2.2v-4.34Zm-2.928,2.17h2.2v2.17h-2.2v-2.17Zm5.857-5.07h2.2v7.24h-2.2v-7.24Zm5.852,5.79H615.1a0.721,0.721,0,0,0,.725-0.72v-0.01a0.726,0.726,0,0,0-.725-0.72h-9.525a0.727,0.727,0,0,0-.726.72v0.01A0.721,0.721,0,0,0,605.571,2567.91Zm-7.091,20.29v-0.77a1.729,1.729,0,0,0,1.635-1.71c0-1.88-2.854-1.7-2.854-2.7a0.8,0.8,0,0,1,.905-0.71,2.2,2.2,0,0,1,1.33.52l0.474-.88a2.426,2.426,0,0,0-1.49-.61v-0.77h-0.729v0.79a1.743,1.743,0,0,0-1.592,1.68c0,1.8,2.862,1.7,2.862,2.7a0.762,0.762,0,0,1-.871.72,2.413,2.413,0,0,1-1.5-.63l-0.594.81a2.819,2.819,0,0,0,1.694.79v0.77h0.729Zm16.622-7.27h-9.526a0.721,0.721,0,0,0-.724.72v0.01a0.72,0.72,0,0,0,.724.72H615.1a0.721,0.721,0,0,0,.726-0.72v-0.01A0.721,0.721,0,0,0,615.1,2580.93Zm0-5.06h-9.526a0.719,0.719,0,0,0-.724.71v0.02a0.718,0.718,0,0,0,.724.71H615.1a0.719,0.719,0,0,0,.726-0.71v-0.02A0.719,0.719,0,0,0,615.1,2575.87Zm-9.531-11.58H615.1a0.719,0.719,0,0,0,.725-0.71v-0.02a0.718,0.718,0,0,0-.725-0.71h-9.525a0.719,0.719,0,0,0-.726.71v0.02A0.719,0.719,0,0,0,605.571,2564.29Zm9.531,28.94h-9.526a0.721,0.721,0,0,0-.724.72v0.01a0.727,0.727,0,0,0,.724.72H615.1a0.721,0.721,0,0,0,.726-0.72v-0.01A0.721,0.721,0,0,0,615.1,2593.23Zm0-3.62h-9.526a0.721,0.721,0,0,0-.724.72v0.01a0.72,0.72,0,0,0,.724.72H615.1a0.721,0.721,0,0,0,.726-0.72v-0.01A0.721,0.721,0,0,0,615.1,2589.61Zm0-5.06h-9.526a0.719,0.719,0,0,0-.724.71v0.02a0.718,0.718,0,0,0,.724.71H615.1a0.719,0.719,0,0,0,.726-0.71v-0.02A0.719,0.719,0,0,0,615.1,2584.55Zm0-12.3h-9.526a0.721,0.721,0,0,0-.724.72v0.01a0.72,0.72,0,0,0,.724.72H615.1a0.721,0.721,0,0,0,.726-0.72v-0.01A0.721,0.721,0,0,0,615.1,2572.25Z" transform="translate(-588 -2552)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
10
img/our-services_photo.svg
Normal file
10
img/our-services_photo.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="56.406" height="45.84" viewBox="0 0 56.406 45.84">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Forma_1" data-name="Forma 1" class="cls-1" d="M884.966,2580.95a11.46,11.46,0,1,0,11.459-11.47A11.457,11.457,0,0,0,884.966,2580.95Zm36.141-19.4H908.766c-0.881-3.52-1.763-7.05-5.289-7.05h-14.1c-3.526,0-4.407,3.53-5.289,7.05H871.743a3.54,3.54,0,0,0-3.526,3.53v31.73a3.54,3.54,0,0,0,3.526,3.53h49.364a3.539,3.539,0,0,0,3.526-3.53v-31.73A3.539,3.539,0,0,0,921.107,2561.55Zm-24.682,35.04a15.645,15.645,0,1,1,15.647-15.64A15.642,15.642,0,0,1,896.425,2596.59Zm24.682-24.46h-7.052v-3.53h7.052v3.53Z" transform="translate(-868.219 -2554.5)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 745 B |
BIN
img/our-team_person.png
Normal file
BIN
img/our-team_person.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
img/work/work-1.png
Normal file
BIN
img/work/work-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
img/work/work-2.png
Normal file
BIN
img/work/work-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
img/work/work-3.png
Normal file
BIN
img/work/work-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
309
index.html
Normal file
309
index.html
Normal file
@ -0,0 +1,309 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Landing Page Grid CSS</title>
|
||||
<!-- Styles CSS -->
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<link rel="stylesheet" href="styles/media.css">
|
||||
<!-- Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,600,700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<section id="first">
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="header-title">
|
||||
<span>MYCOMPANY</span>
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">HOME</a></li>
|
||||
<li><a href="#">ABOUT</a></li>
|
||||
<li><a href="#">SERVICES</a></li>
|
||||
<li><a href="#">PORTFOLIO</a></li>
|
||||
<li><a href="#">TESTIMONIALS</a></li>
|
||||
<li><a href="#">CONTACT</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="title-page">
|
||||
<h1>WELCOME ON <span>MYCOMPANY</span></h1>
|
||||
<p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about-us">
|
||||
<div class="container">
|
||||
<div class="about-us_content">
|
||||
<div class="computer-image">
|
||||
<img src="img/about-us_mac.jpg" alt="#">
|
||||
</div>
|
||||
<div class="about-us_text">
|
||||
<h2>SOME WORDS <b>ABOUT US</b></h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus .</p>
|
||||
<div class="about-us_text-features">
|
||||
<p><b>Mission</b> - <span>We deliver uniqueness and quality</span></p>
|
||||
<p><b>Skills</b> - <span>Delivering fast and excellent results</span></p>
|
||||
<p><b>Client</b> - <span>Satisfied clients thanks to our experience</span></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="our-team">
|
||||
<div class="container">
|
||||
<div class="our-team_title">
|
||||
<h2 class="title-section">OUR TEAM</h2>
|
||||
</div>
|
||||
<div class="our-team_content">
|
||||
<div class="our-team_person">
|
||||
<div class="person-image">
|
||||
<img src="img/our-team_person.png" alt="#">
|
||||
</div>
|
||||
<div class="person-info">
|
||||
<b>Vlad Ivanov</b><br>
|
||||
<span>Designer</span><br>
|
||||
<p>
|
||||
Do not seek to change what has come before. Seek to create that which has not.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our-team_person">
|
||||
<div class="person-image">
|
||||
<img src="img/our-team_person.png" alt="#">
|
||||
</div>
|
||||
<div class="person-info">
|
||||
<b>Vlad Ivanov</b><br>
|
||||
<span>Designer</span><br>
|
||||
<p>
|
||||
Do not seek to change what has come before. Seek to create that which has not.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="our-team_person">
|
||||
<div class="person-image">
|
||||
<img src="img/our-team_person.png" alt="#">
|
||||
</div>
|
||||
<div class="person-info">
|
||||
<b>Vlad Ivanov</b><br>
|
||||
<span>Designer</span><br>
|
||||
<p>
|
||||
Do not seek to change what has come before. Seek to create that which has not.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="our-team_person">
|
||||
<div class="person-image">
|
||||
<img src="img/our-team_person.png" alt="#">
|
||||
</div>
|
||||
<div class="person-info">
|
||||
<b>Vlad Ivanov</b><br>
|
||||
<span>Designer</span><br>
|
||||
<p>
|
||||
Do not seek to change what has come before. Seek to create that which has not.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="our-services">
|
||||
<div class="container">
|
||||
<div class="our-services_title">
|
||||
<h2 class="title-section">OUR SERVICES</h2><br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.</p>
|
||||
</div>
|
||||
<div class="our-services_content">
|
||||
<div class="our-services_feature">
|
||||
<div class="feature-img">
|
||||
|
||||
</div>
|
||||
<div class="feature-info">
|
||||
<b>WEB DESIGN</b><br>
|
||||
<p>
|
||||
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="our-services_feature">
|
||||
<div class="feature-img">
|
||||
|
||||
</div>
|
||||
<div class="feature-info">
|
||||
<b>MOBILE APPS</b><br>
|
||||
<p>
|
||||
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="our-services_feature">
|
||||
<div class="feature-img">
|
||||
|
||||
</div>
|
||||
<div class="feature-info">
|
||||
<b>PHOTOGRAPHY</b><br>
|
||||
<p>
|
||||
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="our-services_feature">
|
||||
<div class="feature-img">
|
||||
|
||||
</div>
|
||||
<div class="feature-info">
|
||||
<b>MARKETING</b><br>
|
||||
<p>
|
||||
The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="our-clients">
|
||||
<div class="container">
|
||||
<div class="our-clients_title">
|
||||
<h2 class="title-section">SOME OF <span>OUR CLIENTS</span></h2><br>
|
||||
</div>
|
||||
|
||||
<div class="our-clients_content">
|
||||
<div class="our-client_logo">
|
||||
<img src="img/clients/chanel-logo.png" alt="#">
|
||||
</div>
|
||||
<div class="our-client_logo">
|
||||
<img src="img/clients/zara-logo.png" alt="#">
|
||||
</div>
|
||||
<div class="our-client_logo">
|
||||
<img src="img/clients/guerlain-logo.png" alt="#">
|
||||
</div>
|
||||
<div class="our-client_logo">
|
||||
<img src="img/clients/lancome-logo.png" alt="#">
|
||||
</div>
|
||||
<div class="our-client_logo">
|
||||
<img src="img/clients/lacoste-logo.png" alt="#">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="our-work">
|
||||
<div class="container">
|
||||
<div class="our-work_title">
|
||||
<h2 class="title-section">TAKE A LOOK AT <span>OUR WORK</span></h2><br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.</p>
|
||||
</div>
|
||||
<div class="our-work_content">
|
||||
<!-- Work - 1 -->
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-1.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-1.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-1.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-1.png" alt="#">
|
||||
</div>
|
||||
|
||||
<!-- Work - 2 -->
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-2.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-2.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-2.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-2.png" alt="#">
|
||||
</div>
|
||||
|
||||
<!-- Work - 3 -->
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-3.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-3.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-3.png" alt="#">
|
||||
</div>
|
||||
<div class="our-work_item">
|
||||
<img src="img/work/work-3.png" alt="#">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="testimonial">
|
||||
<div class="container">
|
||||
<div class="testimonial_title">
|
||||
<h2 class="title-section"><span>OUR CLIENT'S</span> TESTIMONIALS</h2><br>
|
||||
</div>
|
||||
<div class="testimonial_content">
|
||||
<p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p><br>
|
||||
<small>Dean Martin, CEO Acme Inc.</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact-us">
|
||||
<div class="container">
|
||||
<div class="contact-us_title">
|
||||
<h2 class="title-section">CONTACT US</h2><br>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus ex quidem maiores ullam quis, at asperiores minus ad eaque maxime possimus cum ab iusto assumenda velit excepturi porro ipsa tenetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
|
||||
</div>
|
||||
<div class="contact-us_content">
|
||||
<form action="#">
|
||||
<div class="input-name">
|
||||
<label>Name <span>*</span></label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-email">
|
||||
<label>Email Adress <span>*</span></label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="textarea-message">
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
<div class="button-send">
|
||||
<button type="submit">SEND</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<a href="#"><img src="img/footer/facebook.svg" alt="Facebook"></a>
|
||||
<a href="#"><img src="img/footer/twitter.svg" alt="Twitter"></a>
|
||||
<a href="#"><img src="img/footer/google.svg" alt="Google"></a>
|
||||
<a href="#"><img src="img/footer/linkedin.svg" alt="Linkedin"></a>
|
||||
<a href="#"><img src="img/footer/dribbble.svg" alt="Dribbble"></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
115
styles/media.css
Normal file
115
styles/media.css
Normal file
@ -0,0 +1,115 @@
|
||||
@media (max-width: 1170px) {
|
||||
#our-clients .our-clients_content {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1140px) {
|
||||
#our-work .our-work_content {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
#about-us .computer-image {
|
||||
display: none;
|
||||
}
|
||||
#about-us .about-us_content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#contact-us {
|
||||
padding-left: 85px;
|
||||
padding-right: 85px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
header {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
#first .title-page {
|
||||
margin-top: 140px;
|
||||
}
|
||||
#our-services .our-services_content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#our-team .our-team_content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#our-team .our-team_person {
|
||||
margin-top: 25px;
|
||||
}
|
||||
#our-services .our-services_feature {
|
||||
margin-top: 25px;
|
||||
}
|
||||
#our-clients {
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
#our-work .our-work_content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 100px;
|
||||
}
|
||||
#first .header-content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
#our-clients .our-clients_content {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
#contact-us {
|
||||
padding-left: 50px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
ul li {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
#first .title-page {
|
||||
margin-top: 45px;
|
||||
}
|
||||
ul li:nth-child(1) {
|
||||
border-bottom: none;
|
||||
}
|
||||
#first .title-page h1 {
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
#our-team .our-team_content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#our-services .our-services_content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#our-clients .our-clients_content {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: 0;
|
||||
}
|
||||
#our-clients .our-client_logo {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#our-work .our-work_content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
#contact-us {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
#contact-us .contact-us_content form {
|
||||
display: block;
|
||||
}
|
||||
#contact-us .contact-us_content .input-email {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#contact-us .contact-us_content textarea {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
401
styles/style.css
Normal file
401
styles/style.css
Normal file
@ -0,0 +1,401 @@
|
||||
/* grid-auto-rows: minmax(200px, auto); - Высота блоков */
|
||||
/* grid-row - позиция сверху вниз или указать */
|
||||
/* grid-column - позиция слева направо или указать */
|
||||
/* align-self - выровнять блок в сетке */
|
||||
/* grid-template-columns - указать сколько колонок в fr */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.title-section {
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-top: 0;
|
||||
}
|
||||
.title-section::after {
|
||||
content: '';
|
||||
color: #fff;
|
||||
display: block;
|
||||
background-color: #fcac45;
|
||||
height: 5px;
|
||||
width: 100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/* dn */
|
||||
#first, #about-us, #our-team, #our-services, #our-clients, #our-work {
|
||||
|
||||
}
|
||||
/* First Section */
|
||||
#first {
|
||||
padding-top: 60px;
|
||||
background-color: #111111;
|
||||
height: 100vh;
|
||||
}
|
||||
header {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
}
|
||||
header .header-content {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
}
|
||||
ul {
|
||||
padding-left: 0;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
ul li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
ul li:nth-child(1) {
|
||||
border-bottom: 3px solid #fcac45;
|
||||
}
|
||||
ul li:hover {
|
||||
border-bottom: 3px solid #fcac45;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.header-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
.title-page {
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
margin-top: 220px;
|
||||
}
|
||||
.title-page h1 {
|
||||
font-size: 44px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
.titile-page p {
|
||||
margin-top: 25px;
|
||||
}
|
||||
.title-page span {
|
||||
font-weight: 700;
|
||||
}
|
||||
.title-page h1 span {
|
||||
color:#fcac45;
|
||||
}
|
||||
/* Section About Us */
|
||||
#about-us {
|
||||
padding-bottom: 100px;
|
||||
padding-top: 100px;
|
||||
}
|
||||
.about-us_content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.about-us_content h2 {
|
||||
border-bottom: 4px solid #fcac45;
|
||||
display: inline-block;
|
||||
color: #222222;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.about-us_content p {
|
||||
color: #767676;
|
||||
font-size: 18px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.about-us_content p:nth-child(2) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.about-us_content h2, p {
|
||||
font-weight: 300;
|
||||
}
|
||||
.about-us_content p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.about-us_content span {
|
||||
font-style: italic;
|
||||
font-size: 16px;
|
||||
}
|
||||
.about-us_content b {
|
||||
font-weight: 600;
|
||||
}
|
||||
.about-us_text {
|
||||
padding-left: 25px;
|
||||
}
|
||||
.about-us_text-features {
|
||||
margin-top: 45px;
|
||||
}
|
||||
.about-us_text-features b {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.about-us_text-features p::before {
|
||||
content: '';
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
background: url(../img/about-us_point.svg);
|
||||
}
|
||||
/* Section Our Team */
|
||||
#our-team {
|
||||
background-color: #070707;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 165px;
|
||||
}
|
||||
.our-team_content {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
margin-top: 90px;
|
||||
}
|
||||
.our-team_person {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.person-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.person-info p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
/* Section Our Services */
|
||||
#our-services {
|
||||
color: #222222;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.our-services_content {
|
||||
margin-top: 100px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
.our-services_title h2 {
|
||||
color: #222222;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.our-services_title p {
|
||||
text-align: center;
|
||||
color: #6c6c6c;
|
||||
font-style: italic;
|
||||
}
|
||||
.our-services_feature {
|
||||
text-align: center;
|
||||
}
|
||||
.feature-info b {
|
||||
font-size: 25px;
|
||||
}
|
||||
.feature-info p {
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.feature-info {
|
||||
margin-top: 30px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.feature-img {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
display: inline-block;
|
||||
border: 7px solid #fcac45;
|
||||
border-radius: 100%;
|
||||
}
|
||||
.our-services_feature:nth-child(1) .feature-img {
|
||||
background: url(../img/our-services_mac.svg) no-repeat center center;
|
||||
}
|
||||
.our-services_feature:nth-child(2) .feature-img {
|
||||
background: url(../img/our-services_mobile.svg) no-repeat center center;
|
||||
}
|
||||
.our-services_feature:nth-child(3) .feature-img {
|
||||
background: url(../img/our-services_photo.svg) no-repeat center center;
|
||||
}
|
||||
.our-services_feature:nth-child(4) .feature-img {
|
||||
background: url(../img/our-services_marketing.svg) no-repeat center center;
|
||||
}
|
||||
/* Section Our Clients */
|
||||
#our-clients {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 210px;
|
||||
background-color: #0b0b0b;
|
||||
}
|
||||
.our-clients_content {
|
||||
padding-left: 90px;
|
||||
padding-right: 90px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
justify-items: center;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.our-client_logo img {
|
||||
height: 22px;
|
||||
}
|
||||
.our-clients_title span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.our-clients_title h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
/* Section Our Work */
|
||||
#our-work {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.our-work_title h2 {
|
||||
color: #222222;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.our-work_title span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.our-work_title p {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
color: #6c6c6c;
|
||||
}
|
||||
.our-work_content {
|
||||
margin-top: 170px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 30px;
|
||||
justify-items: center;
|
||||
}
|
||||
/* Section Testimonial */
|
||||
#testimonial {
|
||||
background-color: #0b0b0b;
|
||||
padding-top: 100px;
|
||||
padding-bottom: 170px;
|
||||
}
|
||||
.testimonial_title h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
.testimonial_title span {
|
||||
font-weight: 600;
|
||||
}
|
||||
.testimonial_content p {
|
||||
text-align: center;
|
||||
color: #e7e7e7;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.testimonial_content small {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #b2b2b2;
|
||||
font-size: 18px;
|
||||
}
|
||||
/* Section Contact Us */
|
||||
#contact-us {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
padding-left: 185px;
|
||||
padding-right: 185px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.contact-us_title h2 {
|
||||
color: #222222;
|
||||
font-weight: 600;
|
||||
}
|
||||
.contact-us_title p {
|
||||
color: #6c6c6c;
|
||||
font-weight: 600;
|
||||
}
|
||||
.contact-us_title {
|
||||
text-align: center;
|
||||
}
|
||||
.contact-us_content {
|
||||
margin-top: 120px;
|
||||
}
|
||||
.contact-us_content form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
form {
|
||||
color: #6c6c6c;
|
||||
font-size: 18px;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
resize: none;
|
||||
padding: 0;
|
||||
height: 165px;
|
||||
outline: none;
|
||||
margin-top: 50px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 15px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999999;
|
||||
outline: none;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
form label {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
form label span {
|
||||
color: red;
|
||||
}
|
||||
form button {
|
||||
height: 40px;
|
||||
width: 165px;
|
||||
background-color: #fcac45;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin-top: 20px;
|
||||
}
|
||||
form button:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
.textarea-message {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
.button-send {
|
||||
grid-column: 2;
|
||||
text-align: right;
|
||||
}
|
||||
/* Section Footer */
|
||||
footer {
|
||||
background-color: #222222;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.footer-content {
|
||||
text-align: center;
|
||||
}
|
||||
.footer-content img {
|
||||
margin-left: 15px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.footer-content img:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user