Portfolio3
/
style.css
661 строка · 12.8 Кб
1@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');2*{3padding: 0;4margin: 0;5box-sizing: border-box;6scroll-behavior: smooth;7text-decoration: none;8list-style: none;9font-family: "Kanit", sans-serif;10}
11:root{12--bg-color: #1d1c1b;13--text-color: #fff;14--mein-color: #ea5445;15--second-bg-color: #22211f;16--other-color: #858585;17--second-color: #1a1a1a;18--h1-font: 5rem;19--h2-font: 3.2rem;20--p-font: 1.1rem;21}
22header{23position: fixed;24width: 100%;25top: 0;26right: 0;27z-index: 1000;28padding: 32px 13%;29display: flex;30align-items: center;31justify-content: space-between;32transition: all .50s ease;33}
34body{35background: var(--bg-color);36color: var(--text-color);37}
38.logo{39color: var(--text-color);40font-size: 36px;41font-weight: 700;42}
43.navlist{44display: flex;45}
46.navlist a{47display: inline-flex;48font-size: var(--p-font);49font-weight: 500;50color: var(--text-color);51margin: 0 30px;52transition: all .6s ease;53}
54.navlist a:hover{55color: var(--other-color);56transform: translateY(-5px);57}
58.nav-right{59display: flex;60align-items: center;61}
62.nav-btn{63display: inline-block;64padding: 14px 35px;65background:var(--mein-color);66color: var(--text-color);67font-size: 15px;68font-weight: 700;69text-transform: uppercase;70letter-spacing: .05em;71border-radius: 30px;72border: 2px solid transparent;73transition: all .6s ease;74}
75.nav-btn:hover{76background: transparent;77border: 2px solid var(--mein-color);78}
79#menu-icon{80font-size: 40px;81cursor: pointer;82z-index: 10001;83margin-left: 22px;84display: none;85}
86
87section{88padding: 90px 13% 80px;89}
90.hero{91height: 100vh;92width: 100%;93position: relative;94display: flex;95flex-wrap: nowrap;96align-items: center;97justify-content: space-between;98gap: 3rem;99}
100.hero-img img{101max-width: 600px;102width: 100%;103height: 100%;104object-fit: contain;105}
106.hero-text h1{107font-size: var(--h1-font);108line-height: 1.1;109font-weight: 700;110margin: 20px 0;111text-transform: uppercase;112letter-spacing: 2px;113text-shadow: -1px -1px 0px #000, 7px 7px 0px #000, 9px 9px 9px #00000055;114}
115.hero-text h1 span{116color: var(--mein-color);117}
118.hero-text h6{119font-size: 22px;120font-weight: 600;121}
122.hero-text h6 span{123color: var(--mein-color);124}
125.hero-text h4{126font-size: 35px;127font-weight: bold;128margin-bottom: 30px;129}
130.hero-text p{131font-size: var(--p-font);132color: var(--other-color);133margin-bottom: 20px;134line-height: 2;135}
136.hero-icons i{137display: inline-block;138font-size: 24px;139color: var(--text-color);140margin-right: 20px;141transition: all .6s ease;142margin-bottom: 40px;143}
144.hero-icons i:hover{145transform: rotate3d(0, 0, 1, 360deg);146color: var(--mein-color);147}
148.btn{149display: inline-block;150padding: 15px 30px;151background: transparent;152color: var(--text-color);153font-size: 15px;154font-weight: 700;155text-transform: uppercase;156letter-spacing: .05em;157border-radius: 30px;158border: 2px solid var(--mein-color);159box-shadow: 2px 2px var(--mein-color);160transition: all .6s ease;161margin-right: 30px;162}
163.btn:hover{164background: var(--mein-color);165color: var(--text-color);166}
167.btn2{168display: inline-block;169color: var(--text-color);170font-size: 17px;171font-weight: 700;172text-transform: uppercase;173border: 2px solid transparent;174letter-spacing: .05em;175transition: all .6s ease;176}
177.btn2:hover{178border-bottom: 2px solid var(--text-color);179}
180
181.scroll{182position: absolute;183top: 90%;184left: 47%;185transform: translateY(-50%);186display: flex;187align-items: center;188}
189.scroll a{190font-size: 14px;191font-weight: 600;192text-transform: uppercase;193color: var(--text-color);194letter-spacing: .05em;195transition: all .6s ease;196}
197.scroll i{198font-size: 16px;199margin-right: 8px;200}
201.scroll a:hover{202transform: translateY(-5px);203color: var(--mein-color);204}
205header.sticky{206padding: 8px 13%;207background: transparent;208backdrop-filter: blur(20px);209}
210.mid-text{211text-align: center;212}
213.mid-text h2{214font-size: var(--h2-font);215font-weight: bold;216margin-bottom: 8px;217}
218.mid-text h5{219font-size: 35px;220font-weight: bold;221color: var(--mein-color);222}
223.services{224background: var(--second-bg-color);225}
226.services-content{227display: grid;228grid-template-columns: repeat(auto-fit, minmax(200px, auto));229align-items: center;230gap: 2rem;231margin-top: 5rem;232cursor: pointer;233}
234.box{235background: var(--bg-color);236padding: 30px 35px;237border-radius: 18px;238border: 1px solid #303030;239transition: all .6s ease;240}
241.box h6{242font-size: 13px;243font-weight: 700;244text-transform: uppercase;245letter-spacing: .05em;246margin-bottom: 30px;247}
248.box h3{249font-size: 25px;250font-weight: 700;251margin-bottom: 12px;252}
253.box p{254font-size: var(--p-font);255color: var(--other-color);256margin-bottom: 30px;257line-height: 1.8;258}
259.links a{260font-size: 14px;261color: var(--text-color);262}
263.links i{264margin-left: 3px;265font-size: 17px;266color: var(--mein-color);267}
268.links a:hover{269text-decoration: underline;270}
271.box:hover{272transform: translateY(-9px) scale(1.04);273}
274
275
276.portfolio-content{277display: grid;278grid-template-columns: repeat(auto-fit, minmax(300px, auto));279align-items: center;280gap: 2rem;281margin-top: 5rem;282}
283.portfolio-img{284overflow: hidden;285border-radius: 18px;286margin-bottom: 25px;287}
288.portfolio-img img{289display: block;290width: 100%;291transition: transform 0.5s;292cursor: pointer;293}
294.portfolio-img img:hover{295transform: scale(1.07);296}
297.p-flex{298margin-bottom: 15px;299}
300.p-flex a{301padding: 6px 10px;302border-radius: 10px;303background: transparent;304border: 1px solid #303030;305font-size: 14px;306color: var(--text-color);307transition: all .6s ease;308}
309.p-flex a:hover{310background: var(--text-color);311color: var(--bg-color);312}
313.row h3{314font-size: 26px;315font-weight: 700;316transition: all .6s ease;317}
318.row h3:hover{319color: var(--mein-color);320}
321.portfolio-btn{322margin-top: 4rem;323text-align: center;324}
325.p-btn{326width: 100%;327display: inline-block;328padding: 15px 35px;329background: var(--second-bg-color);330border-radius: 18px;331border: 1px solid #303033;332font-size: var(--p-font);333font-weight: 600;334color: var(--text-color);335transition: all .6s ease;336}
337.p-btn:hover{338background: transparent;339color: var(--mein-color);340}
341
342
343.skills{344background: var(--second-color);345}
346.skills-content{347display: grid;348grid-template-columns: repeat(auto-fit, minmax(100px, auto));349align-items: center;350gap: 2rem;351margin-top: 5rem;352text-align: center;353}
354.col{355border: 1px solid #303033;356border-radius: 70px;357padding: 38px;358transition: all .6s ease;359}
360.col img{361margin-bottom: 10px;362}
363.col h4{364font-size: 36px;365margin-bottom: 5px;366-webkit-text-fill-color: transparent;367-webkit-text-stroke-width: 0.5px;368-webkit-text-stroke-color: #fffffe;369}
370.col h6{371font-size: 22px;372}
373.col:hover{374transform: translateY(-9px);375cursor: pointer;376}
377
378.middle{379display: flex;380align-items: center;381justify-content: space-between;382}
383.mid-left h2{384font-size: 35px;385font-weight: bold;386color: var(--mein-color);387margin-bottom: 15px;388}
389.mid-left h5{390font-size: 3rem;391font-weight: 600;392}
393.mid-btn{394display: inline-block;395padding: 15px 30px;396background: var(--mein-color);397color: var(--text-color);398font-size: 15px;399font-weight: 700;400text-transform: uppercase;401letter-spacing: .06em;402border-radius: 18px;403border: 2px solid transparent;404transition: all .6s ease;405}
406.mid-btn{407background: transparent;408box-shadow: 2px 2px var(--mein-color);409border: 2px solid var(--mein-color);410}
411.pricing-contnet{412display: grid;413grid-template-columns: repeat(auto-fit, minmax(300px, auto));414align-items: center;415gap: 2rem;416margin-top: 5rem;417}
418.card{419padding: 2rem;420background: var(--second-color);421border-radius: 18px;422transition: all .6s ease;423}
424.card-top{425display: flex;426align-items: center;427justify-content: space-between;428margin-bottom: 40px;429}
430.card-left h4{431font-size: 25px;432}
433.card-left h5{434font-size: 20px;435color: var(--mein-color);436}
437.card-left h3{438font-size: 28px;439font-weight: 700;440}
441.card-left h3 span{442font-size: 22px;443font-weight: 500;444}
445.card-left a{446font-size: 25px;447color: var(--mein-color);448}
449.card:hover{450background: #212121;451transform: translateY(-6px) scale(1.05);452cursor: pointer;453}
454
455
456.contact{457background: var(--second-bg-color);458}
459.contact-content{460display: flex;461align-items: center;462justify-content: center;463flex-direction: column;464}
465.contact-content h5{466font-size: 32px;467color: var(--mein-color);468margin-bottom: 10px;469}
470.contact-content h3{471font-size: 42px;472font-weight: 700;473margin-bottom: 10px;474}
475.contact-content p{476font-size: var(--p-font);477color: var(--other-color);478margin-bottom: 30px;479line-height: 1.8;480}
481.social-icon a{482display: inline-flex;483align-items: center;484justify-content: center;485margin: 0 8px;486width: 45px;487height: 45px;488background: var(--mein-color);489color: var(--text-color);490font-size: 18px;491border-radius: 50%;492transition: all .6s ease;493}
494.social-icon a:hover{495transform: translateY(-9px);496border: 1px solid #303033;497background: transparent;498}
499.footer{500padding: 15px 13%;501background: var(--second-bg-color);502display: flex;503align-items: center;504justify-content: space-between;505gap: 2rem;506}
507.copyright p{508font-size: var(--p-font);509font-weight: 400;510color: var(--other-color);511}
512.scroll-top i{513display: inline-flex;514align-items: center;515justify-content: center;516background: var(--mein-color);517width: 45px;518height: 45px;519border-radius: 50%;520font-size: 25px;521color: var(--text-color);522}
523
524@media(max-width: 1775px) {525header{526padding: 20px 5%;527}528section{529padding: 90px 5% 80px;530}531.footer{532padding: 10px 5%;533}534header.sticky{535padding: 13px 5%;536}537}
538@media(max-width: 1470px){539:root{540--h1-font: 4.3rem;541--h2-font: 2.8rem;542--p-font: 1rem;543}544.hero-img img{545max-width: 500px;546width: 100%;547height: 100%;548object-fit: contain;549}550.skills-content{551grid-template-columns: repeat(auto-fit, minmax(300px, auto));552}553}
554@media(max-width: 1260px){555header{556padding: 20px 3%;557}558section{559padding: 70px 3% 70px;560}561.footer{562padding: 10px 3%;563}564.header.sticky{565padding: 13px 3%;566}567:root{568--h1-font: 3.8rem;569--h2-font: 2.5rem;570--p-font: 15px;571}572.hero-img img{573max-width: 440px;574width: 100%;575height: 100%;576object-fit: contain;577}578.nav-btn{579padding: 10px 22px;580}581}
582@media(max-width: 1080px){583#menu-icon{584display: block;585}586.navlist{587position: absolute;588width: 100%;589height: 100vh;590padding: 90px 60px;591top: 0;592bottom: 0;593left: 100%;594right: 0;595display: flex ;596flex-direction: column;597background: var(--bg-color);598transition: all .50s ease;599}600.navlist a{601display: block;602color: var(--text-color);603padding: 0;604margin: 0px 0px 40px 0px;605font-size: 2.2rem;606font-weight: 400;607}608.navlist.open{609left: 0;610}611}
612@media(max-width: 1070px){613.hero{614display: flex;615flex-wrap: wrap;616gap: 2rem;617height: 130vh;618}619.scroll{620display: none;621}622.hero-text{623text-align: center;624order: 2;625width: 100%;626}627.hero-text p{628width: 100%;629}630.hero-img{631margin: auto;632}633.hero-btn{634display: flex;635align-items: center;636justify-content: center;637}638.btn{639padding: 10px 23px;640}641}
642@media(max-width: 820px){643.services-content{644grid-template-columns: repeat(auto-fit, minmax(300px, auto));645}646.middle{647display: flex;648align-items: flex-start;649flex-direction: column;650gap: 30px;651}652.contact-content p{653text-align: center;654}655}
656@media(max-width: 570px){657:root{658--h1-font: 3rem;659--h2-font: 2rem;660}661}