From 7f9ba8fd0b56a70d4238af957f6f116d6a691093 Mon Sep 17 00:00:00 2001 From: festus-sulumeti Date: Sat, 27 Jul 2024 10:00:01 +0300 Subject: [PATCH] styling updated index and images --- Styling/style.css | 234 ++++++++++++++++++++++++++++++++++++++++++++++ images/ALX.jpeg | Bin 0 -> 7977 bytes index.html | 45 ++------- 3 files changed, 240 insertions(+), 39 deletions(-) create mode 100644 Styling/style.css create mode 100644 images/ALX.jpeg diff --git a/Styling/style.css b/Styling/style.css new file mode 100644 index 0000000..383eeb5 --- /dev/null +++ b/Styling/style.css @@ -0,0 +1,234 @@ +/* General Styles */ +body { + margin: 0; + font-family: 'Arial', sans-serif; + color: #333; + background-color: #f4f4f4; +} + +/* Header Styles */ +header { + background-color: #1C1C1C; + color: #FFF; + padding: 20px; + position: sticky; + top: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + z-index: 1000; +} + +header h1 { + font-size: 36px; + margin: 0; + font-family: 'Roboto', sans-serif; + text-transform: uppercase; +} + +header nav { + display: flex; + justify-content: flex-end; + align-items: center; + margin-top: 10px; +} + +header nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +header nav li { + margin-left: 20px; +} + +header nav a { + color: #FFF; + text-decoration: none; + font-size: 18px; + font-weight: bold; + text-transform: uppercase; + transition: color 0.2s ease-in-out; +} + +header nav a:hover { + color: #BB86FC; +} + +/* Main Content Styles */ +main { + padding: 20px; +} + +#hero { + text-align: center; + background-color: #FFF; + padding: 40px 20px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 40px; + position: relative; + overflow: hidden; +} + +#hero img { + max-width: 100%; + height: auto; + border-radius: 8px; + margin-bottom: 20px; + transition: transform 0.2s ease-in-out; +} + +#hero img:hover { + transform: scale(1.05); +} + +#hero h2 { + font-size: 32px; + color: #333; + margin: 0 0 20px; + font-family: 'Roboto', sans-serif; +} + +#hero p { + font-size: 18px; + margin: 20px 0; + color: #666; + line-height: 1.5; +} + +.btn { + display: inline-block; + background-color: #1C1C1C; + color: #FFF; + padding: 12px 24px; + text-decoration: none; + font-size: 16px; + border-radius: 5px; + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + font-family: 'Roboto', sans-serif; +} + +.btn:hover { + background-color: #BB86FC; + transform: translateY(-2px); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +/* Section Styles */ +section { + background-color: #FFF; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 40px; +} + +section h2 { + font-size: 28px; + margin-bottom: 20px; + font-family: 'Roboto', sans-serif; + color: #333; +} + +section p { + font-size: 18px; + margin-bottom: 20px; + color: #666; + line-height: 1.5; +} + +section ul { + list-style: none; + padding: 0; + margin: 0; +} + +section li { + margin-bottom: 10px; +} + +section a { + color: #1C1C1C; + text-decoration: none; + transition: color 0.2s ease-in-out; +} + +section a:hover { + color: #BB86FC; +} + +/* Footer Styles */ +footer { + background-color: #1C1C1C; + color: #FFF; + text-align: center; + padding: 20px; + position: sticky; + bottom: 0; + width: 100%; + box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); +} + +/* Responsive Design */ +@media (max-width: 768px) { + header nav ul { + flex-direction: column; + align-items: center; + } + + header nav li { + margin: 10px 0; + } + + #hero { + padding: 20px 10px; + } + + #hero h2 { + font-size: 28px; + } + + #hero p { + font-size: 16px; + } + + section h2 { + font-size: 24px; + } + + section p { + font-size: 16px; + } +} + +@media (max-width: 480px) { + header nav { + justify-content: center; + } + + header h1 { + font-size: 28px; + } + + #hero h2 { + font-size: 24px; + } + + #hero p { + font-size: 14px; + } + + .btn { + font-size: 14px; + padding: 10px 20px; + } + + section h2 { + font-size: 20px; + } + + section p { + font-size: 14px; + } +} diff --git a/images/ALX.jpeg b/images/ALX.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..1745913c7266d9b0336065514bd6b657b874847e GIT binary patch literal 7977 zcmbVwcTkgG*KKHmROuj9KtY;PLX#qDLX!>w6AiAkP(*`m5>xC zxOwv?B?To56%~v49rioo|IdN{3ZNwe^Z?mBp@OpBqkyuAtt^)8F0M^Af_duyCbH2gI?F1l*g4p{9Q~I8Sj(I zZ;X1wdwdcWZb3K6nV4BvZ{NMgFK}N_5-24tBP;jx83?SRs-~`QU6!ssKMIfels$DznF*NNx#zKGFr<31KKI*(pT6 z`1~6nd#|9mvc4i-#g%getm0zNzLc9iUs48{1l9-*gBYzs7<3<#{2xF-Oh?8YMFz~u zp`b^BAM_qHA-omp{2_VAX>xO@F<}OZ5In$?#tqSZJ}CvJrh%?~Uo!OBhKo$vI6@=y zFAJ)7oX*k~0%|DUlGI@)}2Sa?luGdWf*KxBOA##29Ui2V5-l z728igYkd7K{=9bRhg($G)a9i9q&`W0Xaah!E}R=CqWs=FvO}8Xa=sgT_`GGT^eEM4 z^e87uUekRxQyJ$|=7*FG`Zl&Qsj}$m#R<6!&J14nZS&ZlnMc9pq-PlBOr_&2xrEn0 z&VNsWOejudj|{&_WjQlocRH060g{%5h&-ESJJ$?1cg{@mJ~}DtEBV2wEUX3K&;&4X z1JvXJk0#aNj-+ARB-@zKX4lKYwkDi^%4(;DAwx+yf7LD?K-AE3TQp}YaSP_)Bd=ih zK=iABH%pY#4jz!PmJCOAmUK(&!Dmx69mj4lj50*xkIcgSJ(qYBfCkp)ei>=0rmp*(lCDVdnW5mGuqE?y~C) zOn|Q5PkZ);n(vgzJv?S?WuxVPUOjCL|=BBQ@fC5|)cK-8tKj``r1 zWV407r2M3NosYo#nyHwFDyXlUj%{?RrRT0u2|XZ%j)EW=S>eZgSN6Wj0@C%?J1WqP zhPtYcC4RM~C9T;Ifv^OdOw962(y@tG#Ge4Y3dPLrM&;hGEZ!u&4`E+PP!MXZstSIF zz8(5S!UZw@be3x$XV{PID57Z2=x<06ew3E-OJu?P^)~mJU2m={#Hz7T zU7Xo$&0($a5l6fq`2%O0wg&jx>$soPNCgt3lD#Q7SPO0I+t%L82(5}e@i;l=-g6lGgG_#u!Pkj_9pbcP7dmu{&cb_ z3-VTnvV#p;(?dKDVvx5w&g8tsKe_{DO`0?IFvkd@Js{FQF(>U>W7@ka7s*ZQqnp^x z+ZSDqimPAJT@WGHTFb6(x3F5>a)1L*fpZ8bBQ#cHT7Tlf-hs8fKz5UsOEyvf@E;&@ z*BM=Gsg=t}5f4i?=g>J_s=&;r7Y^jlMp($|w`cwNUgIeu$JXSI+Q<>(v<~-tx_~@H zjU_VKCm8v(h2Wx(0<;=HkjON}yNy>y7+d)C`)S9X6y8rh9ttc5FJ&F29GSNvRYe0n zUICe`cbn3@y3Y)NLjn$S78o^}UV2|U1u>Xmd-rtFzLx_6_$!*~zNSBa5%vR_WMt@U z@dt0>@#rnK*yPzSme*~6_h-St3GIO4Zio{$&JAF#NYwVUq$xAYiO>-3H={$=zL?KE@ z6o(4{uMCKt7;-T9k$-nj6xB+Qwi8)E+`Xt4=+rSeJZpR~jtke=+(1(#rr50P70C%4 zF%mukWBzoSYAKU`g4Y;%z`JNykU!Vl+};deJe0HcIcmFRI1A|Z{BDBW55RkU!##PX zTI3ny1=;Ypm$MP4pI?Qq=8=*{eNQqQ6WQHWes|-RqxdNThxQ%2yH)vsM#Fd)$Mqo7 zDa_Px2xOQMi^T)V)-Z#$gSIVrl(C#3Q!=Ih4VBan^Ud`K>k{r2Bz$j9iz>v)U@b@u-FJuLDt zFetbkCPjutIaTCVCPz=oN3WZ5 zCZja-O?+dp!*w*Qf7-DQf~!pH`V9wW_L@SBU%P(#QF?tX6Lc+BlhdD2;4)L$SU_!< z&kAZ!tEh|z7EX?o1%4-vosnADE#4v8gn7%2X^_Xi?J>*V`Kt8M-RxI2e8Op$)!HqK zLQMYXxBsyMg1qr0iNe8QUFE=$ob~G~*&+2Lt0M);+|dTg!Iw_N#^!xFwvJ{a9#bBd zWXB>JJ4Mm=c*mn;fSFhCCv;1e37BPsu#XRi8(9ouoFN0J8E}`xEca@QsM9mpPP1RbZy;uzy!{-GrU8~{i2m?34;eD zATq5y^zvA`r^jcquWvp8Fu;^k%={H0l%KeK9}hTgOSjO~pN47%xK%uEN^j#<&~#Q$ z5Ec;WAvoK5jaw!92N#w_fY@zpQokLb>qy{oLMsyjQgfd^)Pug&j~ z#idt;G*D3pX|Sl;scBQAzSg`L$*PYuF~*Zal7V8tI)sfbNWy)n1xUjvh0mjljV zN>7}r#RH^l^>R10b^{}il;LpTcHcL`9WU(LW8kpKEbPo}Xe%*SVKX}8iJU(k@HTsC zX`$WAW@0MhLE4+$sEqXs@-^0J6={g3aZS^_xr1~IuRS$lTC>Zx(DJ5!o6&K>)%^qyXxDHp zH8aI5*ai(w4~RyeK;QD~eN+cVwpZTMx(;sVVEQ!DT20}F?UQfCpX zjA_|n4PJqDgykf66dsVSpJvC5yETS}TQtWmmV2Gg@T&A)ezAO8-xYB9{7qChDahN1 zi#kIinM=Fzf&KQ)S~|c>;~A%uA$HNl=`Zzr^Y5&k5dp65g$iljU0t(JD>Ge8s-?hW zgDy7&n5$#DbWLaHsfJ5|rfx#1P2)AA7NI)*HBC;e-1}$L@rf^Q4fBtFX=!LnAuG>K z+8R9k9>fRXW~NlO9DQU*V>8Hvd^3D5(aUrk@WIF}E%X~k0Tq9XK^FvIY|FEcF@fO$ zHulDLu<(_C^bM{8XL|J4KXcXZ%&Y!l8xPRBF`Uv(``$R*t$*dBV2(49jr7BZt7+%K z3;xrHBDmW|5*utSqID&s?aHqwW%WtCc5+K2`5)(3&GqQ0+1cjW{U~0UUabF>5aS4g zMeb|!E*fHpSh}B%ZfTq67$(E0_fbD+26ywbaN^>P--cme4v=xwpbKG3e>*_|&CzZ~O>dlOeF|Oy{iNk$jZ;jm)!wSn(boYd^4kb53 zVn`LA{U$nl*uAMi6B0t^rm}WXHy5XsAp9H;2+&VB8rA;sd)v{b`MMzV1{Vq%%A(+< zSfK5Re?XO)s-g{VLBq)rLo~;H2w#>Xwt>U-upD7I-;m7bYYpeK80;3-)^kXu4MDvu z7tvlUOJB&0-GcChjnS>X8H8!%H8+2oTaC$$iG0K!>lde)-2~iAOlFF(MtHiS5*z9c zqknC`>Ci@Po1*wiqVMzbW{h}VX*?6Z3R8 z6*45v(~$T>isk9MX2X)!qLesOJRmpMhEEZ?{fw7|;sZ@zVSb)hib0A+4@qup#0#k? zV@je7bp8c>cjUCB;uw}g|Yl@VK8 zvp6+Pi#m>Rf_DTDsDX}=Jqv`JZZ@l29W)FIAjmgqHxSbz_QX6&lI5S9IuHv&Y0Gd?~a$PwE31j1zzx&aEXBTS{}Kc>DTNsY~D7EsYW*vQYISujGxetmHl>wSnegF z98cJa`?*iz`pJtT#-BI!d=H*cY(c@kr+hrgLY%PO4W;mpqu@)TxXhVi;?FE4fU|GN z%1T1U6zL~y#+&bkE21Cy)W!BLK<2A5tI-f6NcWBjwEkFeAZ*pU1{@C#+ zl&W8sF5$IX_IXu}+%cpI|N7BCE_!q#rw-2KllAJcQj6>{QCeU^pq>1t&otPG!1)oa(LK4a^CEIA6XDTrZ5vNi_TCmiPmXNh;+)cpjj zTb?Kvi4-ZiA4g2BC0jD{g)ruJ5Ya25!L`%lPLo&%19yQgKM#qNdD;Zx!a>E?0f+>Z zx529>T>8C71*#!VF2)sMfVjCxH~X3);l{7E@1$EF8{+mYZYarp(|vC`a=U%FV0Y@s zIZTSgvFsRb5bC}H%J}Nm5h%kI;;C1wCJB9!AD275@kjYq7h^c?9;SPrFXdyDCS?8l zl7rlFp6)RVEJbrg$8S{oUh>=LF(%I}Q-CovhUPIQQRTn={gdD|=kKZgy3Pd=oH@s3 zrBQ+*+mmq=Qm*gRC)t{!g{BUgHd&80Yik>HsvgL*2PuF&H9Lc|b$C!E%IXka3 z{!))%&uAb%G?v@WYnQ{2eE8HyI&jtg$APILMAg73_&_X;AFL$~k?ZGTghD$P6MXpj z)qPW56C8%U{@9EM$U`PV^*g*E^PcawsXk)kK*C01-8B-TOm2MkPRQcOa`pONNO zCXOUZPj5N>SX%B;F#W*sn6&otQHcg~{Oqe(_1$kAg{}K&^iKR4bL~a&Oh9_#-N;_2 zhiZ4de@BgX=sxyWqu@3R}KTZ$3o3Jyux@7yJZEhc#OoeIiepn}(i89X|dUVH56$apznW;%n zQ!}W_B(QEo$dX_QVgn;C<9-D-kB$Dd!Vt*j$4LNH{GXbQM*itmKaidr*px9UqPkfM<2Y`Q?qI zmnec)OUPXgYKLKy62iJkmTyUXk5Yo|U*4r#Kcyu^?WnEb;(6Od+Wq}D6cS64(V(j4 z15y2e_&?J3S*QJO4~!oLTY)+o4uw}%joG({EOC;J*k0f!Sp|fCwSjAX6X_LQ9I5kq zr#sn}pP19j_QEI$nIi{$$rIFeD2j6!I;8ZE>=;Zi1rDFI{jnT|HgXB57D;J2Nm_RR92P(qDQOk}rThAC z2mEk3n;7kzf)zMVjGR*gXBO8dOpNyJtIo^30Hc{1 zv>V)#Q1J;(nc$=F{3wHzU$q*neQ4kK%|7u-10NY=;JlQxVdb3ky%dLdGe-GW6vc4b zrug&3JTn&f%3_`%V)}_vo_A4&zeHaGdCVLKYoU!xks2^cUccaBPhkR}rob2^$~QXPQj132Rag(O<2~0H>hO?swr#%OOgI``-9b4|3+vC+4jrSmPR_roQVdL29Y^LFtz7yl z@zNnj$B)8B^QbcwiZf#_u2p62HT;jN8f_J>RmIQxzp08~((G(ft1cqt2HZu4N2>dv z4D{ytMXJfXQ+hnuE5Zj5L`qb#Ryqfd)goUB*&+2Ca=c*>*8eeC_c05X$%F>8_b!+B zQ`X)GzINISpQC`7Cx@^=j)Z}upLBp%EYvH=uXJj!0Y0kT5cctwdrMQBy3a3ypxnLU z+f+5n^*z5Q5>kpOlxLf*RmXCC9?k4Ns)}Y(!+GjCR20Mw*n!O9g@QevFV>#UGa2e% zaIHgN?Tt^nYdSjc0N-2-M7moE-~9TJycP4)bcc8gB7y<%@N~oZ+X3jfyo5EejjGc; z52@z)6_rbsg9OYh)w(WYRk=HvZk-F7ytvBf4)rP2ep(`Do!d-FuDwN}r?^)V831K+ zDdh#@0dt=il}h2I{Z-g9nq_0j;o;VfWpFKM+n``{k?7se(fRG=%k7aOO;rA@n50m& zW7l-90}32{KZ5#ch0HSh$R_m5n5|)iE3wHP-Zf{xp_H{pVLuQbRZJNQ?`s++X*M@i z_jWJc#R{|#)<~8LnrgiX=%K%|%E)M+k5eC69b5l;e#h)M)(>%vSt~B;sK5hk;qBH{ zE`v(Zct9x@BgPWZ7x+D_bNmR22PpO|=cx-SPL$0tBhEP5jmIs0n6)aGCLR(vHSJ#s z(IJI$Xu_`T@KYSesg0q1Ur9smb%SxTxn2PO0}owOQNLhFPQ&{TGK|4j5drZ0$X`yp z9}%Il;w%?|k})uh-jlm9I5}sCi~E^TGI5dVsCRAHh`*1}eLD|L2WyuW19}4|c`*kW zzSs6Y@PLT-ZzSnyN^BDDjk&*9Q#&HJZ@4?v=0Lp~iJ(+7mrk`6{v_>ApD;AZ;h^0& zA=Y`+rls^9^~`f^@wI5?20hn?zKUqgA zmGam6)}(#~11WJuG}<|D=EdVmYr=OQ$U}tX!PkDuX7)GD&NwV@OeD%_+llAYgFDbu z!tm}sb!raRyX?;G&}4c4yLEKrUmI#e=cb^Nm5%Hme?jXfDeioGlex3g3E!BfZ=R6s zPYs6vXPV4K)oh5a`=Xx>(#3Jgvq%8cvnsyidwiBn+gPC&b<>HKMA}^2o!#gyGrgY94TVqTYGObJnb#<>_{nuM%Sw)x_ z71Do>^HVRM4V_~*sgXi&6ge60^mCB}MAHIF{?#-0a^09pE425u-@dh`kvD zzujx9SDjun)SskuM|PoobfYEb!)$1XV66PN1y77@0vHQQrqv4O!UIS73j6Dw;H9*ix#BRzi{tu&ds365#qcGI#0shB?xg4aI>EICW;dw3;^%$^f|@w<+N~50 z<;xZopC;|&o|MuYhv6C#Tj;DOD{dXOg4&yED;>AhqzHIjjH$I~*hdik61eqalu}4* z!TC?3CZcYk6bSj(_5AzAr$$%PW{X$>R@0i9TbBdr4VJTAx#RH!I)X*-qTaqD=PJA) zXRbTnRizQwZwnpBFHqRd4#YfNleet(i`h<_1m ALX Student's Contribution - - +
@@ -57,6 +20,7 @@

ALX Student's Contribution

+ Software Engineering

Welcome to our Community

Join our growing community of developers, designers, writers, reviewers, and contributors from all over the world. Explore our past and present projects and become a part of our journey towards excellence.

Get Started @@ -94,4 +58,7 @@

About Us

+ +